Completed Session Cards

Session cards completed with bootstrap

Minor fixes with bootstrap on other elements

Still need to cleanup unused css classes aswell as figure out why cards are not being rounded

src/pages/components/HomeStatisticCards.js

@@ -33,7 +33,7 @@ function HomeStatisticCards() {
   };
   return (
     <div className="watch-stats">
-      <div className="Heading">
+      <div className="Heading my-3">
         <h1>Watch Statistics</h1>
         <div className="date-range">
           <div className="header">Last</div>

src/pages/components/library-info.js

@@ -2,7 +2,7 @@ import { useParams } from 'react-router-dom';
 
 import LibraryDetails from './library/library-details';
 import LibraryGlobalStats from './library/library-stats';
-import LibraryLastPlayed from './library/lastplayed';
+import LibraryLastWatched from './library/last-watched';
 import RecentlyPlayed from './library/recently-added';
 
 
@@ -17,7 +17,7 @@ function LibraryInfo() {
        <LibraryDetails LibraryId={LibraryId}/>
        <LibraryGlobalStats LibraryId={LibraryId}/>
        <RecentlyPlayed LibraryId={LibraryId}/>
-       <LibraryLastPlayed LibraryId={LibraryId}/>
+       <LibraryLastWatched LibraryId={LibraryId}/>
     </div>
   );
 }

src/pages/components/library/last-watched.js

@@ -6,7 +6,7 @@ import ItemCardInfo from "./LastWatched/last-watched-card";
 import Config from "../../../lib/config";
 import "../../css/users/user-details.css";
 
-function LibraryLastPlayed(props) {
+function LibraryLastWatched(props) {
   const [data, setData] = useState();
   const [config, setConfig] = useState();
 
@@ -58,7 +58,7 @@ function LibraryLastPlayed(props) {
 
   return (
     <div className="last-played">
-        <h1>Last Watched</h1>
+        <h1 className="my-3">Last Watched</h1>
         <div className="last-played-container">
         {data.map((item) => (
                     <ItemCardInfo data={item} base_url={config.hostUrl} key={item.Id+item.SeasonNumber+item.EpisodeNumber}/>
@@ -70,4 +70,4 @@ function LibraryLastPlayed(props) {
   );
 }
 
-export default LibraryLastPlayed;
+export default LibraryLastWatched;

src/pages/components/library/library-stats.js

@@ -69,7 +69,7 @@ function LibraryGlobalStats(props) {
 
   return (
     <div>
-      <h1>Library Stats</h1>
+      <h1 className="my-3">Library Stats</h1>
       <div  className="global-stats-container">
         <WatchTimeStats data={dayStats} heading={"Last 24 Hours"} />
         <WatchTimeStats data={weekStats} heading={"Last 7 Days"} />

src/pages/components/library/recently-added.js

@@ -72,7 +72,7 @@ function RecentlyPlayed(props) {
 
   return (
     <div className="last-played">
-        <h1>Recently Added</h1>
+        <h1 className="my-3">Recently Added</h1>
         <div className="last-played-container">
         {data.filter((item) => ["Series", "Movie","Audio"].includes(item.Type)).map((item) => (
                     <RecentlyAddedCard data={item} base_url={config.hostUrl} key={item.Id}/>

src/pages/components/libraryOverview.js

@@ -13,7 +13,7 @@ export default function LibraryOverView() {
   const token = localStorage.getItem('token');
   const SeriesIcon=<TvLineIcon size={"80%"} /> ;
   const MovieIcon=<FilmLineIcon size={"80%"} /> ;
-  const [data, setData] = useState([]);
+  const [data, setData] = useState();
 
 
   useEffect(() => {
@@ -35,13 +35,13 @@ export default function LibraryOverView() {
     }
   }, [data,token]);
 
-  if (data.length === 0) {
+  if (!data) {
     return <Loading />;
   }
 
   return (
     <div>
-      <h1>Library Statistics</h1>
+      <h1 className="my-3">Library Statistics</h1>
       <div className="overview-container">
 
         <LibraryStatComponent data={data.filter((stat) => stat.CollectionType === "movies")} heading={"MOVIE LIBRARIES"} units={"MOVIES"} icon={MovieIcon}/>

src/pages/components/sessions/session-card.js

@@ -3,8 +3,9 @@ import { Link } from 'react-router-dom';
 import Card from 'react-bootstrap/Card';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
 
-// import AccountCircleFillIcon from "remixicon-react/AccountCircleFillIcon";
+import AccountCircleFillIcon from "remixicon-react/AccountCircleFillIcon";
 import PlayFillIcon from "remixicon-react/PlayFillIcon";
 import PauseFillIcon from "remixicon-react/PauseFillIcon";
 
@@ -60,64 +61,91 @@ function sessionCard(props) {
         <Col  className="stat-card-info w-100 mt-auto ">
 
           <Card.Body  className="w-100" >
-            <Row>
-              <Col className="col-auto">
-              <img
-            className="card-device-image"
-            src={
-              props.data.base_url +
-              "/web/assets/img/devices/" 
-              +
-              (props.data.session.Client.toLowerCase().includes("web") ? 
-              ( clientData.find(item => props.data.session.DeviceName.toLowerCase().includes(item)) || "other")
-              :
-              ( clientData.find(item => props.data.session.Client.toLowerCase().includes(item)) || "other")
-              )
-              +
-              ".svg"
-            }
-            alt=""
-            />
-              </Col>
+            <Container className="p-0">
+              <Row className="position-absolute top-0">
+                  <Col className="col-auto d-flex justify-content-center">
+                  <img
+                   className="card-device-image"
+                   src={
+                  props.data.base_url +
+                  "/web/assets/img/devices/" 
+                  +
+                  (props.data.session.Client.toLowerCase().includes("web") ? 
+                  ( clientData.find(item => props.data.session.DeviceName.toLowerCase().includes(item)) || "other")
+                  :
+                  ( clientData.find(item => props.data.session.Client.toLowerCase().includes(item)) || "other")
+                  )
+                  +
+                  ".svg"
+                   }
+                  alt=""
+                   />
+                  </Col>
+                 
+                  <Col>
+                    <Row> {props.data.session.DeviceName}</Row>
+                    <Row>    {props.data.session.Client + " " + props.data.session.ApplicationVersion}</Row>
+                  </Col>
+              </Row>
 
-              <Col>
-                <Row> {props.data.session.DeviceName}</Row>
-                <Row>    {props.data.session.Client + " " + props.data.session.ApplicationVersion}</Row>
-              </Col>
-            </Row>
-            <Row>
-              <Col>
-                 <Card.Title>
-                  {props.data.session.NowPlayingItem.Name}
-                 </Card.Title>
-              </Col>
+              <Row className="justify-content-between">
+                <Col>
+                   <Card.Text>
+                   {props.data.session.NowPlayingItem.SeriesName ? (props.data.session.NowPlayingItem.SeriesName+" - "+ props.data.session.NowPlayingItem.Name) : (props.data.session.NowPlayingItem.Name)}
+                   </Card.Text>
+                </Col>
 
-              
-              <Col>
+
+                <Col className="col-auto">
+                   <Row className="d-flex">
+                      <Col className="col-auto px-0">
+                        {props.data.session.UserPrimaryImageTag !== undefined ? (
+                          <img
+                            className="card-user-image"
+                            src={
+                              props.data.base_url +
+                              "/Users/" +
+                              props.data.session.UserId +
+                              "/Images/Primary?tag=" +
+                              props.data.session.UserPrimaryImageTag +
+                              "&quality=50"
+                            }
+                            alt=""
+                          />
+                        ) : (
+                          <AccountCircleFillIcon />
+                        )}
+                      </Col>
+
+                      <Col className="col-auto">
+                       <Card.Text className="text-end">
+                           <Link to={`/users/${props.data.session.UserId}`}>{props.data.session.UserName}</Link> 
+                       </Card.Text>
+                      </Col>
+           
+                      </Row>
+                </Col>
+              </Row>
+
+              <Row className="d-flex">
+                <Col className="col-auto">
+
+                  {props.data.session.PlayState.IsPaused ?
+                     <PauseFillIcon /> 
+                      : 
+                     <PlayFillIcon />
+                    }
+
+                </Col>
+
+                <Col>
                 <Card.Text className="text-end">
-                 <Link to={`/users/${props.data.session.UserId}`}>{props.data.session.UserName}</Link> 
-                </Card.Text>
-              </Col>
-            </Row>
-
-            <Row className="d-flex">
-              <Col className="col-auto">
-
-                {props.data.session.PlayState.IsPaused ?
-                   <PauseFillIcon /> 
-                    : 
-                   <PlayFillIcon />
-                  }
-   
-              </Col>
-
-              <Col>
-              <Card.Text className="text-end">
-                  {ticksToTimeString(props.data.session.PlayState.PositionTicks)} /
-                  {ticksToTimeString(props.data.session.NowPlayingItem.RunTimeTicks)}
-                 </Card.Text>
-              </Col>
-            </Row>
+                    {ticksToTimeString(props.data.session.PlayState.PositionTicks)} /
+                    {ticksToTimeString(props.data.session.NowPlayingItem.RunTimeTicks)}
+                   </Card.Text>
+                </Col>
+              </Row>
+              </Container>
           </Card.Body>
         </Col>
       </Row>

src/pages/components/sessions/sessions.js

@@ -11,7 +11,7 @@ import SessionCard from "./session-card";
 import Loading from "../general/loading";
 
 function Sessions() {
-  const [data, setData] = useState([]);
+  const [data, setData] = useState();
   const [base_url, setURL] = useState("");
   // const [errorHandler, seterrorHandler] = useState({ error_count: 0, error_message: '' })
 
@@ -34,6 +34,10 @@ function Sessions() {
           console.log(error);
         });
     }
+    if(!data)
+    {
+      fetchData();
+    }
 
     const intervalId = setInterval(fetchData, 1000);
     return () => clearInterval(intervalId);
@@ -45,8 +49,8 @@ function Sessions() {
 
   if (data.length === 0) {
     return(
-    <div className="sessions">
-      <h1>Sessions</h1>
+    <div>
+      <h1  className="my-3">Sessions</h1>
       <div style={{color:"grey", fontSize:"0.8em", fontStyle:"italic"}}>
       No Active Sessions Found
       </div>
@@ -54,8 +58,8 @@ function Sessions() {
   }
 
   return (
-    <div className="sessions">
-      <h1>Sessions</h1>
+    <div>
+      <h1  className="my-3">Sessions</h1>
       <div className="sessions-container">
         {data &&
           data

src/pages/components/statCards/ItemStatComponent.js

@@ -26,7 +26,6 @@ function ItemStatComponent(props) {
     height:'100%',
   };
 
-  console.log(props.data);
 
   if (props.data.length === 0) {
     return <></>;

src/pages/css/sessions.css

@@ -1,8 +1,4 @@
-.sessions {
-    margin-bottom: 10px;
 
-    
-}
 
 .sessions-container {
     display: grid;
@@ -139,7 +135,8 @@
 }
 
 .card-device-image {
-    width: 35px;
+    max-width: 35px;
+    width: 100%;
     /* margin-right: 5px; */
     /* grid-row: 1 / span 2; */
 }
@@ -169,9 +166,8 @@
     /* position: absolute; */
 }
 
-.card-play-state {
-    /* bottom: 5px; */
-    /* position: absolute; */
+.device-info {
+margin-bottom: 100%;
 }
 
 .card-ip {

src/pages/css/statCard.css

@@ -21,10 +21,6 @@
 }
 
 
-.Heading
-{
-  flex-direction: row;
-}
 
 .stat-card-image {
   width: 120px !important;
@@ -60,7 +56,7 @@
 .Heading
 {
   display: flex;
-  margin-bottom: 20px;
+  flex-direction: row;
 }
 
 .Heading h1