Merge pull request #108 from DaftFuzz/feature/show-subtitle-stream-in…

…-session Display the subtitle stream for a given session
CyferShepard · Oct 17, 2023 · b6dcaad · b6dcaad
2 parents aef4a08 + fae4246
commit b6dcaad
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@
 ## Getting Started with Development
 - Clone the project from git
 - set your env variables before strating the server (Variable names as per the docker compose file).
-- Run `npm init` to install necessary packages
+- Run `npm install` to install necessary packages
 - Run `npm run start-server` to only run the backend nodejs server
 - Run `npm run start` to only run the frontend React UI
 - Run `npm run start-app` to run both backend and frontend at the same time

diff --git a/src/pages/components/sessions/session-card.js b/src/pages/components/sessions/session-card.js
@@ -73,14 +73,17 @@ function sessionCard(props) {
 
           <Card.Body  className="w-100 h-100 p-1 pb-2" >
             <Container className="h-100 d-flex flex-column">
-              <Row className="d-flex flex-row flex-grow-1 justify-content-between">
+              <Row className="d-flex flex-row flex-grow-1 justify-content-between" style={{fontSize: "smaller"}}>
 
                   <Col className="col-auto">
                     <Row className="ellipse"> {props.data.session.DeviceName}</Row>
                     <Row className="ellipse card-client-version"> {props.data.session.Client + " " + props.data.session.ApplicationVersion}</Row>
                     <Row className="d-flex flex-column flex-md-row">    
                       <Col className="px-0 col-auto">{props.data.session.PlayState.PlayMethod}</Col> 
                       <Col className="px-0 px-md-2 col-auto ellipse">{(props.data.session.NowPlayingItem.MediaStreams ? '( '+props.data.session.NowPlayingItem.MediaStreams.find(stream => stream.Type==='Video')?.Codec.toUpperCase()+(props.data.session.TranscodingInfo? ' - '+props.data.session.TranscodingInfo.VideoCodec.toUpperCase() : '')+' - '+convertBitrate(props.data.session.TranscodingInfo ? props.data.session.TranscodingInfo.Bitrate :props.data.session.NowPlayingItem.MediaStreams.find(stream => stream.Type==='Video')?.BitRate)+' )':'')}</Col>
+                      <Row className="ellipse">
+                        <Col className="px-0 col-auto">{props.data.session.NowPlayingItem.SubtitleStream}</Col>
+                    </Row>
                     </Row>
 
                   </Col>

diff --git a/src/pages/components/sessions/sessions.js b/src/pages/components/sessions/sessions.js
@@ -24,6 +24,26 @@ function Sessions() {
       }
     };
 
+    const getSubtitleStream = (row) => {
+      let result = 'No subtitles';
+
+      if(!row.PlayState) {
+        return result;
+      }
+
+      let subStreamIndex = row.PlayState.SubtitleStreamIndex;
+
+      if(subStreamIndex == undefined || subStreamIndex === -1) {
+        return result;
+      }
+
+      if(row.NowPlayingItem.MediaStreams && row.NowPlayingItem.MediaStreams.length) {
+        result = `Subtitles: ${row.NowPlayingItem.MediaStreams[subStreamIndex].DisplayTitle}`;
+      }
+
+      return result;
+  }
+
     const fetchData = () => {
 
       if (config) {
@@ -39,7 +59,9 @@ function Sessions() {
           .then((data) => {
             if(data && typeof data.data === 'object' && Array.isArray(data.data))
             {
-              setData(data.data.filter(row => row.NowPlayingItem !== undefined));
+              let toSet = data.data.filter(row => row.NowPlayingItem !== undefined);
+              toSet.forEach(s => s.NowPlayingItem.SubtitleStream = getSubtitleStream(s));
+              setData(toSet);
             }
 
           })