Split out Video and Audio into different columns. Use the IsVideoDirect and IsAudioDirect flags to determine if the cooresponding field is Direct Stream or not.

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

@@ -43,20 +43,6 @@ function getETAFromTicks(ticks) {
   return eta.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 }
 
-function convertBitrate(bitrate) {
-  if (!bitrate) {
-    return "N/A";
-  }
-  const kbps = (bitrate / 1000).toFixed(1);
-  const mbps = (bitrate / 1000000).toFixed(1);
-
-  if (kbps >= 1000) {
-    return mbps + " Mbps";
-  } else {
-    return kbps + " Kbps";
-  }
-}
-
 function SessionCard(props) {
   const cardStyle = {
     backgroundImage: `url(proxy/Items/Images/Backdrop?id=${
@@ -137,24 +123,10 @@ function SessionCard(props) {
                     </Row>
                     <Row className="d-flex flex-column flex-md-row">
                       <Col className="col-auto ellipse">
-                        {props.data.session.PlayState.PlayMethod +
-                          (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
-                              ) +
-                              " )"
-                            : "")}
+                        <span>{props.data.session.NowPlayingItem.VideoStream}</span>
+                      </Col>
+                      <Col className="col-auto ellipse">
+                        <span>{props.data.session.NowPlayingItem.AudioStream}</span>
                       </Col>
                       <Col className="col-auto ellipse">
                         <Tooltip title={props.data.session.NowPlayingItem.SubtitleStream}>

src/pages/components/sessions/sessions.jsx

@@ -11,6 +11,20 @@ import Loading from "../general/loading";
 import { Trans } from "react-i18next";
 import socket from "../../../socket";
 
+function convertBitrate(bitrate) {
+  if (!bitrate) {
+    return "N/A";
+  }
+  const kbps = (bitrate / 1000).toFixed(1);
+  const mbps = (bitrate / 1000000).toFixed(1);
+
+  if (kbps >= 1000) {
+    return mbps + " Mbps";
+  } else {
+    return kbps + " Kbps";
+  }
+}
+
 function Sessions() {
   const [data, setData] = useState();
   const [config, setConfig] = useState();
@@ -21,6 +35,8 @@ function Sessions() {
         let toSet = data.filter((row) => row.NowPlayingItem !== undefined);
         toSet.forEach((s) => {
           handleLiveTV(s);
+          s.NowPlayingItem.VideoStream = getVideoStream(s);
+          s.NowPlayingItem.AudioStream = getAudioStream(s);
           s.NowPlayingItem.SubtitleStream = getSubtitleStream(s);
         });
         setData(toSet);
@@ -39,6 +55,53 @@ function Sessions() {
     }
   };
 
+  const getVideoStream = (row) => {
+    let videoStream = row.NowPlayingItem.MediaStreams.find((stream) => stream.Type === "Video");
+
+    if (videoStream === undefined) {
+      return "";
+    }
+
+    let transcodeType = "Direct Stream";
+    let transcodeVideoCodec = "";
+    if (row.TranscodingInfo && !row.TranscodingInfo.IsVideoDirect){
+      transcodeType = "Transcode";
+      transcodeVideoCodec = ` -> ${row.TranscodingInfo.VideoCodec.toUpperCase()}`;
+    }
+    let bitRate = convertBitrate(
+      row.TranscodingInfo
+        ? row.TranscodingInfo.Bitrate
+        : videoStream.BitRate);
+
+    const originalVideoCodec = videoStream.Codec.toUpperCase();
+    
+    return `Video: ${transcodeType} (${originalVideoCodec}${transcodeVideoCodec} - ${bitRate})`;
+  }
+
+  const getAudioStream = (row) => {
+    let result = "";
+
+    let streamIndex = row.PlayState.AudioStreamIndex;
+    if (streamIndex === undefined || streamIndex === -1) {
+      return result;
+    }
+
+    let transcodeType = "Direct Stream";
+    let transcodeCodec = "";
+    if (row.TranscodingInfo && !row.TranscodingInfo.IsAudioDirect){
+      transcodeType = "Transcode";
+      transcodeCodec = ` -> ${row.TranscodingInfo.AudioCodec.toUpperCase()}`;
+    }
+
+    let originalCodec = "";
+    if (row.NowPlayingItem.MediaStreams && row.NowPlayingItem.MediaStreams.length && streamIndex < row.NowPlayingItem.MediaStreams.length) {
+      originalCodec = row.NowPlayingItem.MediaStreams[streamIndex].Codec.toUpperCase();
+    }
+
+    return originalCodec != "" ? `Audio: ${transcodeType} (${originalCodec}${transcodeCodec})`
+                               : `Audio: ${transcodeType}`;
+  }
+
   const getSubtitleStream = (row) => {
     let result = "";