Display the subtitle stream for a given session

If no subtitles, display this in the sessions card.

Reduced the font size of playback details to prevent the card getting too crowded.

MINOR: Fixed readme instruction for installing npm packages

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

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

@@ -73,7 +73,7 @@ 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>
@@ -81,6 +81,9 @@ function sessionCard(props) {
                     <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>

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);
             }
 
           })