Actually shit, lets just split the widgets now

public/locales/en/common.json

@@ -107,6 +107,16 @@
         "episodes": "Episodes",
         "songs": "Songs"
     },
+    "jellyfin": {
+        "playing": "Playing",
+        "transcoding": "Transcoding",
+        "bitrate": "Bitrate",
+        "no_active": "No Active Streams",
+        "movies": "Movies",
+        "series": "Series",
+        "episodes": "Episodes",
+        "songs": "Songs"
+    },
     "esphome": {
         "offline": "Offline",
         "offline_alt": "Offline",

src/components/services/widget/container.jsx

@@ -9,7 +9,6 @@ import { buildHighlightConfig } from "utils/highlights";
 const ALIASED_WIDGETS = {
   pialert: "netalertx",
   hoarder: "karakeep",
-  jellyfin: "emby",
 };
 
 export default function Container({ error = false, children, service }) {

src/widgets/emby/component.jsx

@@ -202,31 +202,22 @@ export default function Component({ service }) {
   const { t } = useTranslation();
 
   const { widget } = service;
-  const version = widget?.version ?? 1;
-  const useJellyfinV2 = widget?.type === "jellyfin" && version === 2;
-  const sessionsEndpoint = useJellyfinV2 ? "SessionsV2" : "Sessions";
-  const countEndpoint = useJellyfinV2 ? "CountV2" : "Count";
-  const commandMap = {
-    Pause: useJellyfinV2 ? "PauseV2" : "Pause",
-    Unpause: useJellyfinV2 ? "UnpauseV2" : "Unpause",
-  };
   const enableNowPlaying = service.widget?.enableNowPlaying ?? true;
 
   const {
     data: sessionsData,
     error: sessionsError,
     mutate: sessionMutate,
-  } = useWidgetAPI(widget, enableNowPlaying ? sessionsEndpoint : "", {
+  } = useWidgetAPI(widget, enableNowPlaying ? "Sessions" : "", {
     refreshInterval: enableNowPlaying ? 5000 : undefined,
   });
 
-  const { data: countData, error: countError } = useWidgetAPI(widget, countEndpoint, {
+  const { data: countData, error: countError } = useWidgetAPI(widget, "Count", {
     refreshInterval: 60000,
   });
 
   async function handlePlayCommand(session, command) {
-    const mappedCommand = commandMap[command] ?? command;
+    const params = getURLSearchParams(widget, command);
-    const params = getURLSearchParams(widget, mappedCommand);
     params.append(
       "segments",
       JSON.stringify({

src/widgets/jellyfin/component.jsx

@@ -1,3 +1,345 @@
-import EmbyComponent from "../emby/component";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
+import { useTranslation } from "next-i18next";
+import { BsCpu, BsFillCpuFill, BsFillPlayFill, BsPauseFill, BsVolumeMuteFill } from "react-icons/bs";
+import { MdOutlineSmartDisplay } from "react-icons/md";
 
-export default EmbyComponent;
+import { getURLSearchParams } from "utils/proxy/api-helpers";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+function ticksToTime(ticks) {
+  const milliseconds = ticks / 10000;
+  const seconds = Math.floor((milliseconds / 1000) % 60);
+  const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
+  const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
+  return { hours, minutes, seconds };
+}
+
+function ticksToString(ticks) {
+  const { hours, minutes, seconds } = ticksToTime(ticks);
+  const parts = [];
+  if (hours > 0) {
+    parts.push(hours);
+  }
+  parts.push(minutes);
+  parts.push(seconds);
+
+  return parts.map((part) => part.toString().padStart(2, "0")).join(":");
+}
+
+function generateStreamTitle(session, enableUser, showEpisodeNumber) {
+  const {
+    NowPlayingItem: { Name, SeriesName, Type, ParentIndexNumber, IndexNumber, AlbumArtist, Album },
+    UserName,
+  } = session;
+  let streamTitle = "";
+
+  if (Type === "Episode" && showEpisodeNumber) {
+    const seasonStr = ParentIndexNumber ? `S${ParentIndexNumber.toString().padStart(2, "0")}` : "";
+    const episodeStr = IndexNumber ? `E${IndexNumber.toString().padStart(2, "0")}` : "";
+    streamTitle = `${SeriesName}: ${seasonStr} · ${episodeStr} - ${Name}`;
+  } else if (Type === "Audio") {
+    streamTitle = `${AlbumArtist} - ${Album} - ${Name}`;
+  } else {
+    streamTitle = `${Name}${SeriesName ? ` - ${SeriesName}` : ""}`;
+  }
+
+  return enableUser ? `${streamTitle} (${UserName})` : streamTitle;
+}
+
+function SingleSessionEntry({ playCommand, session, enableUser, showEpisodeNumber, enableMediaControl }) {
+  const {
+    PlayState: { PositionTicks, IsPaused, IsMuted },
+  } = session;
+
+  const RunTimeTicks =
+    session.NowPlayingItem?.RunTimeTicks ?? session.NowPlayingItem?.CurrentProgram?.RunTimeTicks ?? 0;
+
+  const { IsVideoDirect, VideoDecoderIsHardware, VideoEncoderIsHardware } = session?.TranscodingInfo || {
+    IsVideoDirect: true,
+  }; // if no transcodinginfo its videodirect
+
+  const percent = Math.min(1, PositionTicks / RunTimeTicks) * 100;
+
+  const streamTitle = generateStreamTitle(session, enableUser, showEpisodeNumber);
+  return (
+    <>
+      <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+        <div className="grow text-xs z-10 self-center ml-2 relative w-full h-4 mr-2">
+          <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden" title={streamTitle}>
+            {streamTitle}
+          </div>
+        </div>
+        <div className="self-center text-xs flex justify-end mr-1.5 pl-1">
+          {IsVideoDirect && <MdOutlineSmartDisplay className="opacity-50" />}
+          {!IsVideoDirect && (!VideoDecoderIsHardware || !VideoEncoderIsHardware) && <BsCpu className="opacity-50" />}
+          {!IsVideoDirect && VideoDecoderIsHardware && VideoEncoderIsHardware && (
+            <BsFillCpuFill className="opacity-50" />
+          )}
+        </div>
+      </div>
+
+      <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+        <div
+          className="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
+          style={{
+            width: `${percent}%`,
+          }}
+        />
+        <div className="text-xs z-10 self-center ml-1">
+          {enableMediaControl && IsPaused && (
+            <BsFillPlayFill
+              onClick={() => {
+                playCommand(session, "Unpause");
+              }}
+              className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+            />
+          )}
+          {enableMediaControl && !IsPaused && (
+            <BsPauseFill
+              onClick={() => {
+                playCommand(session, "Pause");
+              }}
+              className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+            />
+          )}
+        </div>
+        <div className="grow " />
+        <div className="self-center text-xs flex justify-end mr-1 z-10">{IsMuted && <BsVolumeMuteFill />}</div>
+        <div className="self-center text-xs flex justify-end mr-2 z-10">
+          {ticksToString(PositionTicks)}
+          <span className="mx-0.5 text-[8px]">/</span>
+          {ticksToString(RunTimeTicks)}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function SessionEntry({ playCommand, session, enableUser, showEpisodeNumber, enableMediaControl }) {
+  const {
+    PlayState: { PositionTicks, IsPaused, IsMuted },
+  } = session;
+
+  const RunTimeTicks =
+    session.NowPlayingItem?.RunTimeTicks ?? session.NowPlayingItem?.CurrentProgram?.RunTimeTicks ?? 0;
+
+  const { IsVideoDirect, VideoDecoderIsHardware, VideoEncoderIsHardware } = session?.TranscodingInfo || {
+    IsVideoDirect: true,
+  }; // if no transcodinginfo its videodirect
+
+  const streamTitle = generateStreamTitle(session, enableUser, showEpisodeNumber);
+
+  const percent = Math.min(1, PositionTicks / RunTimeTicks) * 100;
+
+  return (
+    <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+      <div
+        className="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
+        style={{
+          width: `${percent}%`,
+        }}
+      />
+      <div className="text-xs z-10 self-center ml-1">
+        {enableMediaControl && IsPaused && (
+          <BsFillPlayFill
+            onClick={() => {
+              playCommand(session, "Unpause");
+            }}
+            className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+          />
+        )}
+        {enableMediaControl && !IsPaused && (
+          <BsPauseFill
+            onClick={() => {
+              playCommand(session, "Pause");
+            }}
+            className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+          />
+        )}
+      </div>
+      <div className="grow text-xs z-10 self-center relative w-full h-4">
+        <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden" title={streamTitle}>
+          {streamTitle}
+        </div>
+      </div>
+      <div className="self-center text-xs flex justify-end mr-1 z-10">{IsMuted && <BsVolumeMuteFill />}</div>
+      <div className="self-center text-xs flex justify-end mr-1 z-10">{ticksToString(PositionTicks)}</div>
+      <div className="self-center items-center text-xs flex justify-end mr-1.5 pl-1 z-10">
+        {IsVideoDirect && <MdOutlineSmartDisplay className="opacity-50" />}
+        {!IsVideoDirect && (!VideoDecoderIsHardware || !VideoEncoderIsHardware) && <BsCpu className="opacity-50" />}
+        {!IsVideoDirect && VideoDecoderIsHardware && VideoEncoderIsHardware && <BsFillCpuFill className="opacity-50" />}
+      </div>
+    </div>
+  );
+}
+
+function CountBlocks({ service, countData }) {
+  const { t } = useTranslation();
+
+  if (!countData) {
+    return (
+      <Container service={service}>
+        <Block label="jellyfin.movies" />
+        <Block label="jellyfin.series" />
+        <Block label="jellyfin.episodes" />
+        <Block label="jellyfin.songs" />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="jellyfin.movies" value={t("common.number", { value: countData.MovieCount })} />
+      <Block label="jellyfin.series" value={t("common.number", { value: countData.SeriesCount })} />
+      <Block label="jellyfin.episodes" value={t("common.number", { value: countData.EpisodeCount })} />
+      <Block label="jellyfin.songs" value={t("common.number", { value: countData.SongCount })} />
+    </Container>
+  );
+}
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { widget } = service;
+  const version = widget?.version ?? 1;
+  const useJellyfinV2 = version === 2;
+  const sessionsEndpoint = useJellyfinV2 ? "SessionsV2" : "Sessions";
+  const countEndpoint = useJellyfinV2 ? "CountV2" : "Count";
+  const commandMap = {
+    Pause: useJellyfinV2 ? "PauseV2" : "Pause",
+    Unpause: useJellyfinV2 ? "UnpauseV2" : "Unpause",
+  };
+  const enableNowPlaying = service.widget?.enableNowPlaying ?? true;
+
+  const {
+    data: sessionsData,
+    error: sessionsError,
+    mutate: sessionMutate,
+  } = useWidgetAPI(widget, enableNowPlaying ? sessionsEndpoint : "", {
+    refreshInterval: enableNowPlaying ? 5000 : undefined,
+  });
+
+  const { data: countData, error: countError } = useWidgetAPI(widget, countEndpoint, {
+    refreshInterval: 60000,
+  });
+
+  async function handlePlayCommand(session, command) {
+    const mappedCommand = commandMap[command] ?? command;
+    const params = getURLSearchParams(widget, mappedCommand);
+    params.append(
+      "segments",
+      JSON.stringify({
+        sessionId: session.Id,
+      }),
+    );
+    const url = `/api/services/proxy?${params.toString()}`;
+    await fetch(url, {
+      method: "POST",
+    }).then(() => {
+      sessionMutate();
+    });
+  }
+
+  if (sessionsError || countError) {
+    return <Container service={service} error={sessionsError ?? countError} />;
+  }
+
+  const enableBlocks = service.widget?.enableBlocks;
+  const enableMediaControl = service.widget?.enableMediaControl !== false; // default is true
+  const enableUser = !!service.widget?.enableUser; // default is false
+  const expandOneStreamToTwoRows = service.widget?.expandOneStreamToTwoRows !== false; // default is true
+  const showEpisodeNumber = !!service.widget?.showEpisodeNumber; // default is false
+
+  if ((enableNowPlaying && !sessionsData) || !countData) {
+    return (
+      <>
+        {enableBlocks && <CountBlocks service={service} countData={null} />}
+        {enableNowPlaying && (
+          <div className="flex flex-col pb-1">
+            <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+              <span className="absolute left-2 text-xs mt-[2px]">-</span>
+            </div>
+            {expandOneStreamToTwoRows && (
+              <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+                <span className="absolute left-2 text-xs mt-[2px]">-</span>
+              </div>
+            )}
+          </div>
+        )}
+      </>
+    );
+  }
+
+  if (enableNowPlaying) {
+    const playing = sessionsData
+      .filter((session) => session?.NowPlayingItem)
+      .sort((a, b) => {
+        if (a.PlayState.PositionTicks > b.PlayState.PositionTicks) {
+          return 1;
+        }
+        if (a.PlayState.PositionTicks < b.PlayState.PositionTicks) {
+          return -1;
+        }
+        return 0;
+      });
+
+    if (playing.length === 0) {
+      return (
+        <>
+          {enableBlocks && <CountBlocks service={service} countData={countData} />}
+          <div className="flex flex-col pb-1 mx-1">
+            <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+              <span className="absolute left-2 text-xs mt-[2px]">{t("jellyfin.no_active")}</span>
+            </div>
+            {expandOneStreamToTwoRows && (
+              <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+                <span className="absolute left-2 text-xs mt-[2px]">-</span>
+              </div>
+            )}
+          </div>
+        </>
+      );
+    }
+
+    if (expandOneStreamToTwoRows && playing.length === 1) {
+      const session = playing[0];
+      return (
+        <>
+          {enableBlocks && <CountBlocks service={service} countData={countData} />}
+          <div className="flex flex-col pb-1 mx-1">
+            <SingleSessionEntry
+              playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
+              session={session}
+              enableUser={enableUser}
+              showEpisodeNumber={showEpisodeNumber}
+              enableMediaControl={enableMediaControl}
+            />
+          </div>
+        </>
+      );
+    }
+
+    return (
+      <>
+        {enableBlocks && <CountBlocks service={service} countData={countData} />}
+        <div className="flex flex-col pb-1 mx-1">
+          {playing.map((session) => (
+            <SessionEntry
+              key={session.Id}
+              playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
+              session={session}
+              enableUser={enableUser}
+              showEpisodeNumber={showEpisodeNumber}
+              enableMediaControl={enableMediaControl}
+            />
+          ))}
+        </div>
+      </>
+    );
+  }
+
+  if (enableBlocks) {
+    return <CountBlocks service={service} countData={countData} />;
+  }
+}