✨ Add TV show name in media info and style changes

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: {

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;

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%">
+  if (isInitialLoading) {
+    return (
+      <Stack
+        align="center"
+        justify="center"
+        style={{
+          height: '100%',
+        }}
+      >
         <Loader />
-    </Center>;
+        <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'}
               />
             );
           })}

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