Enhancement: option to show user for Tautulli and Emby/Jellyfin widgets (#3287)

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

docs/widgets/services/emby.md

@@ -16,4 +16,5 @@ widget:
   key: apikeyapikeyapikeyapikeyapikey
   enableBlocks: true # optional, defaults to false
   enableNowPlaying: true # optional, defaults to true
+  enableUser: true # optional, defaults to false
 ```

docs/widgets/services/plex-tautulli.md

@@ -14,4 +14,5 @@ widget:
   type: tautulli
   url: http://tautulli.host.or.ip
   key: apikeyapikeyapikeyapikeyapikey
+  enableUser: true # optional, defaults to false
 ```

src/utils/config/service-helpers.js

@@ -393,6 +393,9 @@ export function cleanServiceGroups(groups) {
           enableBlocks,
           enableNowPlaying,
 
+          // emby, jellyfin, tautulli
+          enableUser,
+
           // glances, pihole
           version,
 
@@ -517,6 +520,14 @@ export function cleanServiceGroups(groups) {
         if (["emby", "jellyfin"].includes(type)) {
           if (enableBlocks !== undefined) cleanedService.widget.enableBlocks = JSON.parse(enableBlocks);
           if (enableNowPlaying !== undefined) cleanedService.widget.enableNowPlaying = JSON.parse(enableNowPlaying);
+          if (enableUser !== undefined) {
+            cleanedService.widget.enableUser = !!JSON.parse(enableUser);
+          }
+        }
+        if (["tautulli"].includes(type)) {
+          if (enableUser !== undefined) {
+            cleanedService.widget.enableUser = !!JSON.parse(enableUser);
+          }
         }
         if (["sonarr", "radarr"].includes(type)) {
           if (enableQueue !== undefined) cleanedService.widget.enableQueue = JSON.parse(enableQueue);

src/widgets/emby/component.jsx

@@ -27,10 +27,11 @@ function ticksToString(ticks) {
   return parts.map((part) => part.toString().padStart(2, "0")).join(":");
 }
 
-function SingleSessionEntry({ playCommand, session }) {
+function SingleSessionEntry({ playCommand, session, enableUser }) {
   const {
     NowPlayingItem: { Name, SeriesName },
     PlayState: { PositionTicks, IsPaused, IsMuted },
+    UserName,
   } = session;
 
   const RunTimeTicks =
@@ -49,6 +50,7 @@ function SingleSessionEntry({ playCommand, session }) {
           <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">
             {Name}
             {SeriesName && ` - ${SeriesName}`}
+            {enableUser && ` (${UserName})`}
           </div>
         </div>
         <div className="self-center text-xs flex justify-end mr-1.5 pl-1">
@@ -97,10 +99,11 @@ function SingleSessionEntry({ playCommand, session }) {
   );
 }
 
-function SessionEntry({ playCommand, session }) {
+function SessionEntry({ playCommand, session, enableUser }) {
   const {
     NowPlayingItem: { Name, SeriesName },
     PlayState: { PositionTicks, IsPaused, IsMuted },
+    UserName,
   } = session;
 
   const RunTimeTicks =
@@ -142,6 +145,7 @@ function SessionEntry({ playCommand, session }) {
         <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">
           {Name}
           {SeriesName && ` - ${SeriesName}`}
+          {enableUser && ` (${UserName})`}
         </div>
       </div>
       <div className="self-center text-xs flex justify-end mr-1 z-10">{IsMuted && <BsVolumeMuteFill />}</div>
@@ -215,6 +219,7 @@ export default function Component({ service }) {
 
   const enableBlocks = service.widget?.enableBlocks;
   const enableNowPlaying = service.widget?.enableNowPlaying ?? true;
+  const enableUser = !!service.widget?.enableUser;
 
   if (!sessionsData || !countData) {
     return (
@@ -272,6 +277,7 @@ export default function Component({ service }) {
             <SingleSessionEntry
               playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
               session={session}
+              enableUser={enableUser}
             />
           </div>
         </>
@@ -288,6 +294,7 @@ export default function Component({ service }) {
                 key={session.Id}
                 playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
                 session={session}
+                enableUser={enableUser}
               />
             ))}
           </div>

src/widgets/tautulli/component.jsx

@@ -25,14 +25,18 @@ function millisecondsToString(milliseconds) {
   return parts.map((part) => part.toString().padStart(2, "0")).join(":");
 }
 
-function SingleSessionEntry({ session }) {
+function SingleSessionEntry({ session, enableUser }) {
-  const { full_title, duration, view_offset, progress_percent, state, video_decision, audio_decision } = session;
+  const { full_title, duration, view_offset, progress_percent, state, video_decision, audio_decision, username } =
+    session;
 
   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="text-xs z-10 self-center ml-2 relative w-full h-4 grow mr-2">
-          <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">{full_title}</div>
+          <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">
+            {full_title}
+            {enableUser && ` (${username})`}
+          </div>
         </div>
         <div className="self-center text-xs flex justify-end mr-1.5 pl-1">
           {video_decision === "direct play" && audio_decision === "direct play" && (
@@ -74,8 +78,8 @@ function SingleSessionEntry({ session }) {
   );
 }
 
-function SessionEntry({ session }) {
+function SessionEntry({ session, enableUser }) {
-  const { full_title, view_offset, progress_percent, state, video_decision, audio_decision } = session;
+  const { full_title, view_offset, progress_percent, state, video_decision, audio_decision, username } = session;
 
   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">
@@ -94,7 +98,10 @@ function SessionEntry({ session }) {
         )}
       </div>
       <div className="text-xs z-10 self-center ml-2 relative w-full h-4 grow mr-2">
-        <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">{full_title}</div>
+        <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">
+          {full_title}
+          {enableUser && ` (${username})`}
+        </div>
       </div>
       <div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10">
         {video_decision === "direct play" && audio_decision === "direct play" && (
@@ -162,11 +169,13 @@ export default function Component({ service }) {
     );
   }
 
+  const enableUser = !!service.widget?.enableUser;
+
   if (playing.length === 1) {
     const session = playing[0];
     return (
       <div className="flex flex-col pb-1 mx-1">
-        <SingleSessionEntry session={session} />
+        <SingleSessionEntry session={session} enableUser={enableUser} />
       </div>
     );
   }
@@ -174,7 +183,7 @@ export default function Component({ service }) {
   return (
     <div className="flex flex-col pb-1 mx-1">
       {playing.map((session) => (
-        <SessionEntry key={session.Id} session={session} />
+        <SessionEntry key={session.Id} session={session} enableUser={enableUser} />
       ))}
     </div>
   );