From 10aec6dc6080b96b72f2b4c050629e1c83855329 Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Thu, 25 Aug 2022 01:35:02 +0300
Subject: [PATCH] add emby service widget

---
 src/components/services/widget.jsx       |  2 +
 src/components/services/widgets/emby.jsx | 62 ++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 src/components/services/widgets/emby.jsx

diff --git a/src/components/services/widget.jsx b/src/components/services/widget.jsx
index 62864cb17..57aad5c2a 100644
--- a/src/components/services/widget.jsx
+++ b/src/components/services/widget.jsx
@@ -2,12 +2,14 @@ import Sonarr from "./widgets/sonarr";
 import Radarr from "./widgets/radarr";
 import Ombi from "./widgets/ombi";
 import Portainer from "./widgets/portainer";
+import Emby from "./widgets/emby";
 
 const widgetMappings = {
   sonarr: Sonarr,
   radarr: Radarr,
   ombi: Ombi,
   portainer: Portainer,
+  emby: Emby,
 };
 
 export default function Widget({ service }) {
diff --git a/src/components/services/widgets/emby.jsx b/src/components/services/widgets/emby.jsx
new file mode 100644
index 000000000..af2110889
--- /dev/null
+++ b/src/components/services/widgets/emby.jsx
@@ -0,0 +1,62 @@
+import useSWR from "swr";
+
+export default function Emby({ service }) {
+  const config = service.widget;
+
+  function buildApiUrl(endpoint) {
+    const { url, key } = config;
+    return `${url}/emby/${endpoint}?api_key=${key}`;
+  }
+
+  const { data: sessionsData, error: sessionsError } = useSWR(buildApiUrl(`Sessions`));
+
+  if (sessionsError) {
+    return (
+      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+        <div className="font-thin text-sm">Emby API Error</div>
+      </div>
+    );
+  }
+
+  if (!sessionsData) {
+    return (
+      <div className="flex flex-row w-full">
+        <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+          <div className="font-thin text-sm">-</div>
+          <div className="font-bold text-xs">PLAYING</div>
+        </div>
+        <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+          <div className="font-thin text-sm">-</div>
+          <div className="font-bold text-xs">TRANSCODE</div>
+        </div>
+        <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+          <div className="font-thin text-sm">-</div>
+          <div className="font-bold text-xs">BITRATE</div>
+        </div>
+      </div>
+    );
+  }
+
+  const playing = sessionsData.filter((session) => session.hasOwnProperty("NowPlayingItem"));
+  const transcoding = sessionsData.filter(
+    (session) => session.hasOwnProperty("PlayState") && session.PlayState.PlayMethod === "Transcode"
+  );
+  const bitrate = playing.reduce((acc, session) => acc + session.NowPlayingItem.Bitrate, 0);
+
+  return (
+    <div className="flex flex-row w-full">
+      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+        <div className="font-thin text-sm">{playing.length}</div>
+        <div className="font-bold text-xs">PLAYING</div>
+      </div>
+      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+        <div className="font-thin text-sm">{transcoding.length}</div>
+        <div className="font-bold text-xs">TRANSCODE</div>
+      </div>
+      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+        <div className="font-thin text-sm">{Math.round((bitrate / 1024 / 1024) * 100) / 100} Mbps</div>
+        <div className="font-bold text-xs">BITRATE</div>
+      </div>
+    </div>
+  );
+}