🐛 Media Session widget jellyfin sessions + translations (#1353)

2025-11-14 01:15:47 +01:00 · 2023-09-03 22:24:27 +02:00
parent de349014d5
commit 624e2a3a2c
5 changed files with 87 additions and 112 deletions
--- a/public/locales/en/modules/media-requests-list.json
+++ b/public/locales/en/modules/media-requests-list.json
@@ -31,28 +31,5 @@
    "request": "request...",
    "approved": "Request was approved!",
    "declined": "Request was declined!"
-  },
-  "detail": {
-    "label": "Stats for nerds",
-    "id": "ID",
-    "device": "Device",
-    "video": {
-      "video":"Video",
-      "resolution": "Resolution",
-      "framerate": "Framerate",
-      "codec": "Video Codec"
-    },
-    "audio": {
-      "audio": "Audio",
-      "channels": "Audio Channels",
-      "codec": "Audio Codec"
-    },
-    "transcoding": {
-      "transcoding": "Transcoding",
-      "context": "Context",
-      "requested": "Hardware Encoding Requested",
-      "source": "Source Codec",
-      "target": "Target Codec"
-    }
  }
 }
--- a/src/server/api/routers/media-server.ts
+++ b/src/server/api/routers/media-server.ts
@@ -100,72 +100,74 @@ const handleServer = async (app: ConfigAppType): Promise<GenericMediaServer | un
      const infoApi = await getSystemApi(api).getPublicSystemInfo();
      await api.authenticateUserByName(username, password);
      const sessionApi = await getSessionApi(api);
-      const sessions = await sessionApi.getSessions();
+      const { data: sessions } = await sessionApi.getSessions();
      return {
        type: 'jellyfin',
        appId: app.id,
        serverAddress: app.url,
        version: infoApi.data.Version ?? undefined,
-        sessions: sessions.data.map(
-          (session): GenericSessionInfo => ({
-            id: session.Id ?? '?',
-            username: session.UserName ?? undefined,
-            sessionName: `${session.Client} (${session.DeviceName})`,
-            supportsMediaControl: session.SupportsMediaControl ?? false,
-            currentlyPlaying: session.NowPlayingItem
-              ? {
-                  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: {
-                    video:
-                      session.NowPlayingItem &&
-                      session.NowPlayingItem.Width &&
-                      session.NowPlayingItem.Height
+        sessions: sessions
+          .filter((session) => session.NowPlayingItem)
+          .map(
+            (session): GenericSessionInfo => ({
+              id: session.Id ?? '?',
+              username: session.UserName ?? undefined,
+              sessionName: `${session.Client} (${session.DeviceName})`,
+              supportsMediaControl: session.SupportsMediaControl ?? false,
+              currentlyPlaying: session.NowPlayingItem
+                ? {
+                    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: {
+                      video:
+                        session.NowPlayingItem &&
+                        session.NowPlayingItem.Width &&
+                        session.NowPlayingItem.Height
+                          ? {
+                              videoCodec: undefined,
+                              width: session.NowPlayingItem.Width ?? undefined,
+                              height: session.NowPlayingItem.Height ?? undefined,
+                              bitrate: undefined,
+                              videoFrameRate: session.TranscodingInfo?.Framerate
+                                ? String(session.TranscodingInfo?.Framerate)
+                                : undefined,
+                            }
+                          : undefined,
+                      audio: session.TranscodingInfo
                        ? {
-                            videoCodec: undefined,
-                            width: session.NowPlayingItem.Width ?? undefined,
-                            height: session.NowPlayingItem.Height ?? undefined,
-                            bitrate: undefined,
-                            videoFrameRate: session.TranscodingInfo?.Framerate
-                              ? String(session.TranscodingInfo?.Framerate)
-                              : undefined,
+                            audioChannels: session.TranscodingInfo.AudioChannels ?? undefined,
+                            audioCodec: session.TranscodingInfo.AudioCodec ?? undefined,
                          }
                        : undefined,
-                    audio: session.TranscodingInfo
-                      ? {
-                          audioChannels: session.TranscodingInfo.AudioChannels ?? undefined,
-                          audioCodec: session.TranscodingInfo.AudioCodec ?? undefined,
-                        }
-                      : undefined,
-                    transcoding: session.TranscodingInfo
-                      ? {
-                          audioChannels: session.TranscodingInfo.AudioChannels ?? -1,
-                          audioCodec: session.TranscodingInfo.AudioCodec ?? undefined,
-                          container: session.TranscodingInfo.Container ?? undefined,
-                          width: session.TranscodingInfo.Width ?? undefined,
-                          height: session.TranscodingInfo.Height ?? undefined,
-                          videoCodec: session.TranscodingInfo?.VideoCodec ?? undefined,
-                          audioDecision: undefined,
-                          context: undefined,
-                          duration: undefined,
-                          error: undefined,
-                          sourceAudioCodec: undefined,
-                          sourceVideoCodec: undefined,
-                          timeStamp: undefined,
-                          transcodeHwRequested: undefined,
-                          videoDecision: undefined,
-                        }
-                      : undefined,
-                  },
-                  type: convertJellyfinType(session.NowPlayingItem.Type),
-                }
-              : undefined,
-            userProfilePicture: undefined,
-          })
-        ),
+                      transcoding: session.TranscodingInfo
+                        ? {
+                            audioChannels: session.TranscodingInfo.AudioChannels ?? -1,
+                            audioCodec: session.TranscodingInfo.AudioCodec ?? undefined,
+                            container: session.TranscodingInfo.Container ?? undefined,
+                            width: session.TranscodingInfo.Width ?? undefined,
+                            height: session.TranscodingInfo.Height ?? undefined,
+                            videoCodec: session.TranscodingInfo?.VideoCodec ?? undefined,
+                            audioDecision: undefined,
+                            context: undefined,
+                            duration: undefined,
+                            error: undefined,
+                            sourceAudioCodec: undefined,
+                            sourceVideoCodec: undefined,
+                            timeStamp: undefined,
+                            transcodeHwRequested: undefined,
+                            videoDecision: undefined,
+                          }
+                        : undefined,
+                    },
+                    type: convertJellyfinType(session.NowPlayingItem.Type),
+                  }
+                : undefined,
+              userProfilePicture: undefined,
+            })
+          ),
        success: true,
      };
    }
--- a/src/widgets/media-server/DetailCollapseable.tsx
+++ b/src/widgets/media-server/DetailCollapseable.tsx
@@ -1,30 +1,29 @@
 import { Card, Divider, Flex, Grid, Group, Text } from '@mantine/core';
 import { IconDeviceMobile, IconId } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';

 import { GenericSessionInfo } from '../../types/api/media-server/session-info';
-import { useTranslation } from 'react-i18next';

 export const DetailCollapseable = ({ session }: { session: GenericSessionInfo }) => {
  let details: { title: string; metrics: { name: string; value: string | undefined }[] }[] = [];
-  const { t } = useTranslation('modules/media-server-list');

  if (session.currentlyPlaying) {
    if (session.currentlyPlaying.metadata.video) {
      details = [
        ...details,
        {
-          title: t('detail.video.'),
+          title: "Video",
          metrics: [
            {
-              name: t('detail.video.resolution'),
+              name: "Resolution",
              value: `${session.currentlyPlaying.metadata.video.width}x${session.currentlyPlaying.metadata.video.height}`,
            },
            {
-              name: t('detail.video.framerate'),
+              name: "Framerate",
              value: session.currentlyPlaying.metadata.video.videoFrameRate,
            },
            {
-              name: t('detail.video.codec'),
+              name: "Video Codec",
              value: session.currentlyPlaying.metadata.video.videoCodec,
            },
            {
@@ -41,14 +40,14 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
      details = [
        ...details,
        {
-          title: t('detail.audio.audio'),
+          title: "Audio",
          metrics: [
            {
-              name: t('detail.audio.channels'),
+              name: "Audio Channels",
              value: `${session.currentlyPlaying.metadata.audio.audioChannels}`,
            },
            {
-              name: t('detail.audio.codec'),
+              name: "Audio Codec",
              value: session.currentlyPlaying.metadata.audio.audioCodec,
            },
          ],
@@ -60,24 +59,24 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
      details = [
        ...details,
        {
-          title: t('detail.transcoding.transcoding'),
+          title: "Transcoding",
          metrics: [
            {
-              name: t('detail.video.resolution'),
+              name: "Resolution",
              value: `${session.currentlyPlaying.metadata.transcoding.width}x${session.currentlyPlaying.metadata.transcoding.height}`,
            },
            {
-              name: t('detail.transcoding.context'),
+              name: "Context",
              value: session.currentlyPlaying.metadata.transcoding.context,
            },
            {
-              name: t('detail.transcoding.requested'),
+              name: "Hardware Encoding Requested",
              value: session.currentlyPlaying.metadata.transcoding.transcodeHwRequested
                ? 'yes'
                : 'no',
            },
            {
-              name: t('detail.transcoding.source'),
+              name: "Source Codec",
              value:
                session.currentlyPlaying.metadata.transcoding.sourceAudioCodec ||
                session.currentlyPlaying.metadata.transcoding.sourceVideoCodec
@@ -85,7 +84,7 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
                  : undefined,
            },
            {
-              name: t('detail.transcoding.target'),
+              name: "Target Codec",
              value: `${session.currentlyPlaying.metadata.transcoding.videoCodec} ${session.currentlyPlaying.metadata.transcoding.audioCodec}`,
            },
          ],
@@ -99,19 +98,19 @@ export const DetailCollapseable = ({ session }: { session: GenericSessionInfo })
      <Flex justify="space-between" mb="xs">
        <Group>
          <IconId size={16} />
-          <Text>{t('detail.id')}</Text>
+          <Text>ID</Text>
        </Group>
        <Text>{session.id}</Text>
      </Flex>
      <Flex justify="space-between" mb="md">
        <Group>
          <IconDeviceMobile size={16} />
-          <Text>{t('detail.device')}</Text>
+          <Text>Device</Text>
        </Group>
        <Text>{session.sessionName}</Text>
      </Flex>
      {details.length > 0 && (
-        <Divider label={t('detail.label')} labelPosition="center" mt="lg" mb="sm" />
+        <Divider label={"Stats for nerds"} labelPosition="center" mt="lg" mb="sm" />
      )}
      <Grid>
        {details.map((detail, index) => (
--- a/src/widgets/media-server/MediaServerTile.tsx
+++ b/src/widgets/media-server/MediaServerTile.tsx
@@ -13,12 +13,11 @@ import { IconAlertTriangle, IconMovie } from '@tabler/icons-react';
 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 './useGetMediaServers';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { TableRow } from './TableRow';
+import { useGetMediaServers } from './useGetMediaServers';

 const definition = defineWidget({
  id: 'media-server',
@@ -71,7 +70,7 @@ function MediaServerTile({ widget }: MediaServerWidgetProps) {
        <Loader />
        <Stack align="center" spacing={0}>
          <Text>{t('descriptor.name')}</Text>
-          <Text color="dimmed">{t('descriptor.loading')}</Text>
+          <Text color="dimmed">{t('loading')}</Text>
        </Stack>
      </Stack>
    );
@@ -79,7 +78,7 @@ function MediaServerTile({ widget }: MediaServerWidgetProps) {

  return (
    <Stack h="100%">
-      <ScrollArea offsetScrollbars>
+      <ScrollArea offsetScrollbars h="100%">
        <Table highlightOnHover>
          <thead>
            <tr>
@@ -99,7 +98,7 @@ function MediaServerTile({ widget }: MediaServerWidgetProps) {
        </Table>
      </ScrollArea>

-      <Group position="right" mt="auto">
+      <Group pos="absolute" bottom="15" right="15" mt="auto">
        <Avatar.Group>
          {data?.servers.map((server) => {
            const app = config?.apps.find((x) => x.id === server.appId);
--- a/src/widgets/media-server/NowPlayingDisplay.tsx
+++ b/src/widgets/media-server/NowPlayingDisplay.tsx
@@ -1,24 +1,21 @@
 import { Flex, Stack, Text } from '@mantine/core';
 import {
-  Icon,
  IconDeviceTv,
  IconHeadphones,
  IconMovie,
  IconQuestionMark,
  IconVideo,
 } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';

 import { GenericSessionInfo } from '../../types/api/media-server/session-info';

 export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo }) => {
-  const { t } = useTranslation();

  if (!session.currentlyPlaying) {
    return null;
  }

-  const Icon = (): Icon => {
+  const IconSelector = () => {
    switch (session.currentlyPlaying?.type) {
      case 'audio':
        return IconHeadphones;
@@ -33,11 +30,12 @@ export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo })
    }
  };

-  const Test = Icon();
+  const Icon = IconSelector();
+
  return (
    <Flex wrap="nowrap" gap="sm" align="center">
-      <Test size={16} />
-      <Stack spacing={0} w={200}>
+      <Icon size={16} />
+      <Stack spacing={0}>
        <Text lineClamp={1}>{session.currentlyPlaying.name}</Text>

        {session.currentlyPlaying.albumName ? (
@@ -46,7 +44,7 @@ export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo })
          </Text>
        ) : (
          session.currentlyPlaying.seasonName && (
-            <Text lineClamp={2} color="dimmed" size="xs">
+            <Text lineClamp={1} color="dimmed" size="xs">
              {session.currentlyPlaying.seasonName} - {session.currentlyPlaying.episodeName}
            </Text>
          )