From fdeac8eb29bb1a3d47e5e9580a13fb83787a4976 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Sat, 18 Mar 2023 20:29:47 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20TV=20show=20name=20in=20media?=
 =?UTF-8?q?=20info=20and=20style=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/api/modules/media-server/index.ts   |  3 +-
 src/types/api/media-server/session-info.ts    |  1 +
 src/widgets/media-server/MediaServerTile.tsx  | 29 ++++++++++++++-----
 .../media-server/NowPlayingDisplay.tsx        |  7 ++---
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/pages/api/modules/media-server/index.ts b/src/pages/api/modules/media-server/index.ts
index 09430878d..9085c02bc 100644
--- a/src/pages/api/modules/media-server/index.ts
+++ b/src/pages/api/modules/media-server/index.ts
@@ -110,8 +110,9 @@ const handleServer = async (app: ConfigAppType): Promise<GenericMediaServer | un
             supportsMediaControl: session.SupportsMediaControl ?? false,
             currentlyPlaying: session.NowPlayingItem
               ? {
-                  name: session.NowPlayingItem.Name as string,
+                  name: `${session.NowPlayingItem.SeriesName ?? session.NowPlayingItem.Name}`,
                   seasonName: session.NowPlayingItem.SeasonName as string,
+                  episodeName: session.NowPlayingItem.Name as string,
                   albumName: session.NowPlayingItem.Album as string,
                   episodeCount: session.NowPlayingItem.EpisodeCount ?? undefined,
                   metadata: {
diff --git a/src/types/api/media-server/session-info.ts b/src/types/api/media-server/session-info.ts
index d9ee0cece..81e3d943b 100644
--- a/src/types/api/media-server/session-info.ts
+++ b/src/types/api/media-server/session-info.ts
@@ -10,6 +10,7 @@ export type GenericSessionInfo = {
 export type GenericCurrentlyPlaying = {
   name: string;
   seasonName: string | undefined;
+  episodeName: string | undefined;
   albumName: string | undefined;
   episodeCount: number | undefined;
   type: 'audio' | 'video' | 'tv' | 'movie' | undefined;
diff --git a/src/widgets/media-server/MediaServerTile.tsx b/src/widgets/media-server/MediaServerTile.tsx
index c1c40064d..7f7a37252 100644
--- a/src/widgets/media-server/MediaServerTile.tsx
+++ b/src/widgets/media-server/MediaServerTile.tsx
@@ -12,6 +12,7 @@ import {
 import { IconAlertTriangle, IconMovie } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { AppAvatar } from '../../components/AppAvatar';
+import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
 import { useConfigContext } from '../../config/provider';
 import { useGetMediaServers } from '../../hooks/widgets/media-servers/useGetMediaServers';
 import { defineWidget } from '../helper';
@@ -40,8 +41,9 @@ interface MediaServerWidgetProps {
 function MediaServerTile({ widget }: MediaServerWidgetProps) {
   const { t } = useTranslation('modules/media-server');
   const { config } = useConfigContext();
+  const isEditMode = useEditModeStore((x) => x.enabled);
 
-  const { data, isError } = useGetMediaServers({
+  const { data, isError, isFetching, isInitialLoading } = useGetMediaServers({
     enabled: config !== undefined,
   });
 
@@ -57,16 +59,28 @@ function MediaServerTile({ widget }: MediaServerWidgetProps) {
     );
   }
 
-  if (!data) {
-    <Center h="100%">
-      <Loader />
-    </Center>;
+  if (isInitialLoading) {
+    return (
+      <Stack
+        align="center"
+        justify="center"
+        style={{
+          height: '100%',
+        }}
+      >
+        <Loader />
+        <Stack align="center" spacing={0}>
+          <Text>{t('descriptor.name')}</Text>
+          <Text color="dimmed">Homarr is loading streams...</Text>
+        </Stack>
+      </Stack>
+    );
   }
 
   return (
     <Stack h="100%">
       <ScrollArea offsetScrollbars>
-        <Table highlightOnHover striped>
+        <Table highlightOnHover>
           <thead>
             <tr>
               <th>{t('card.table.header.session')}</th>
@@ -97,7 +111,8 @@ function MediaServerTile({ widget }: MediaServerWidgetProps) {
             return (
               <AppAvatar
                 iconUrl={app.appearance.iconUrl}
-                color={server.success === true ? undefined : 'red'}
+                // If success, the color is undefined, otherwise it's red but if isFetching is true, it's yellow
+                color={server.success ? (isFetching ? 'yellow' : undefined) : 'red'}
               />
             );
           })}
diff --git a/src/widgets/media-server/NowPlayingDisplay.tsx b/src/widgets/media-server/NowPlayingDisplay.tsx
index 740de5507..98decb05c 100644
--- a/src/widgets/media-server/NowPlayingDisplay.tsx
+++ b/src/widgets/media-server/NowPlayingDisplay.tsx
@@ -30,11 +30,10 @@ export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo })
   };
 
   const Test = Icon();
-
   return (
     <Flex wrap="nowrap" gap="sm" align="center">
       <Test size={16} />
-      <Stack spacing={0}>
+      <Stack spacing={0} w={200}>
         <Text lineClamp={1}>{session.currentlyPlaying.name}</Text>
 
         {session.currentlyPlaying.albumName ? (
@@ -43,8 +42,8 @@ export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo })
           </Text>
         ) : (
           session.currentlyPlaying.seasonName && (
-            <Text lineClamp={1} color="dimmed" size="xs">
-              {session.currentlyPlaying.seasonName}
+            <Text lineClamp={2} color="dimmed" size="xs">
+              {session.currentlyPlaying.seasonName} - {session.currentlyPlaying.episodeName}
             </Text>
           )
         )}