feat: add DirectStream support in item-activity, playback_method_stats, and user-activity.

public/locales/zh-CN/translation.json

@@ -283,6 +283,7 @@
   "SOURCE_DETAILS": "媒体源信息",
   "DIRECT": "直接播放",
   "TRANSCODE": "转码",
+  "DIRECT_STREAM": "直接流",
   "USERNAME": "用户名",
   "PASSWORD": "密码",
   "LOGIN": "登录",

src/pages/components/activity/activity-table.jsx

@@ -214,6 +214,37 @@ export default function ActivityTable(props) {
         );
       },
     },
+    {
+      accessorKey: "PlayMethod",
+      header: i18next.t("TRANSCODE"),
+      size: 150,
+      Cell: ({ row }) => {
+        row = row.original;
+        if (row.PlayMethod === "Transcode") {
+          return (
+            <span className="text-warning" style={{ fontWeight: 'bold' }}>
+              {i18next.t("TRANSCODE")}
+              {row.TranscodingInfo ? 
+                <span>
+                  {!row.TranscodingInfo.IsVideoDirect && 
+                    <span> ({i18next.t("VIDEO")})</span>
+                  }
+                  {!row.TranscodingInfo.IsAudioDirect && 
+                    <span> ({i18next.t("AUDIO")})</span>
+                  }
+                </span> : ""
+              }
+            </span>
+          );
+        } else if (row.PlayMethod === "DirectPlay") {
+          return <span className="text-success" style={{ fontWeight: 'bold' }}>{i18next.t("DIRECT")}</span>;
+        } else if (row.PlayMethod === "DirectStream") {
+          return <span className="text-info" style={{ fontWeight: 'bold' }}>{i18next.t("DIRECT_STREAM")}</span>;
+        } else {
+          return <span style={{ color: 'gray' }}>-</span>;
+        }
+      },
+    },
     {
       accessorKey: "DeviceName",
       header: i18next.t("ACTIVITY_TABLE.DEVICE"),

src/pages/components/item-info/item-activity.jsx

@@ -122,7 +122,7 @@ function ItemActivity(props) {
   // }
 
   filteredData = filteredData.filter((item) =>
-    streamTypeFilter == "All"
+    streamTypeFilter === "All"
       ? true
       : item.PlayMethod === (config?.IS_JELLYFIN ? streamTypeFilter : streamTypeFilter.replace("Play", "Stream"))
   );
@@ -155,6 +155,9 @@ function ItemActivity(props) {
               <option value="DirectPlay">
                 <Trans i18nKey="DIRECT" />
               </option>
+              <option value="DirectStream">
+                <Trans i18nKey="DirectStream" /> (<Trans i18nKey="DirectStream" />)
+              </option>
             </FormSelect>
           </div>
 

src/pages/components/statCards/playback_method_stats.jsx

@@ -10,7 +10,8 @@ import BarChartGroupedLineIcon from "remixicon-react/BarChartGroupedLineIcon";
 function PlaybackMethodStats(props) {
   const translations = {
     DirectPlay: <Trans i18nKey="DIRECT" />,
-    Transocde: <Trans i18nKey="TRANSCODE" />,
+    Transcode: <Trans i18nKey="TRANSCODE" />,
+    DirectStream: <Trans i18nKey="DIRECT_STREAM" />
   };
   const chartIcon = <BarChartGroupedLineIcon size={"100%"} />;
 
@@ -78,9 +79,15 @@ function PlaybackMethodStats(props) {
   return (
     <ItemStatComponent
       base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl}
-      data={data.map((stream) =>
-        stream.Name == "DirectPlay" ? { ...stream, Name: translations.DirectPlay } : { ...stream, Name: translations.Transocde }
-      )}
+      data={data.map((stream) => {
+        if (stream.Name === "DirectPlay") {
+          return { ...stream, Name: translations.DirectPlay };
+        } else if (stream.Name === "DirectStream") {
+          return { ...stream, Name: translations.DirectStream };
+        } else {
+          return { ...stream, Name: translations.Transcode };
+        }
+      })}
       icon={chartIcon}
       heading={<Trans i18nKey="STAT_CARDS.CONCURRENT_STREAMS" />}
       units={<Trans i18nKey="UNITS.STREAMS" />}

src/pages/components/user-info/user-activity.jsx

@@ -226,6 +226,9 @@ function UserActivity(props) {
               <option value="DirectPlay">
                 <Trans i18nKey="DIRECT" />
               </option>
+              <option value="DirectStream">
+                <Trans i18nKey="DIRECT_STREAM" />
+              </option>
             </FormSelect>
           </div>