fancier overlay

Jellyfin.Plugin.JRay/Web/jray-overlay.js

@@ -2,7 +2,31 @@
     'use strict';
 
     var POLL_INTERVAL_MS = 1000;
+    var OVERVIEW_MAX_LENGTH = 160;
     var overlayEl = null;
+    var personCache = {};
+
+    function truncate(text, maxLength) {
+        if (text.length <= maxLength) {
+            return text;
+        }
+
+        return text.slice(0, maxLength).trim() + '…';
+    }
+
+    function getPerson(jellyfinId) {
+        if (personCache[jellyfinId]) {
+            return personCache[jellyfinId];
+        }
+
+        var promise = window.ApiClient.getItem(window.ApiClient.getCurrentUserId(), jellyfinId)
+            .catch(function () {
+                return null;
+            });
+
+        personCache[jellyfinId] = promise;
+        return promise;
+    }
 
     function getNowPlaying() {
         if (!window.ApiClient) {
@@ -56,13 +80,66 @@
 
         actors.forEach(function (actor) {
             var card = document.createElement('div');
-            card.style.background = 'rgba(0, 0, 0, 0.7)';
+            card.className = 'jrayActorCard';
+            card.style.background = 'rgba(0, 0, 0, 0.75)';
             card.style.color = '#fff';
-            card.style.padding = '6px 12px';
+            card.style.padding = '8px 12px';
-            card.style.borderRadius = '4px';
+            card.style.borderRadius = '6px';
-            card.style.fontSize = '14px';
+            card.style.display = 'flex';
-            card.textContent = actor.name;
+            card.style.alignItems = 'center';
+            card.style.gap = '10px';
+            card.style.maxWidth = '320px';
+
+            var textBlock = document.createElement('div');
+
+            var name = document.createElement('div');
+            name.style.fontWeight = 'bold';
+            name.style.fontSize = '14px';
+            name.textContent = actor.name;
+            textBlock.appendChild(name);
+
+            card.appendChild(textBlock);
             overlayEl.appendChild(card);
+
+            if (!actor.jellyfin_id || !window.ApiClient) {
+                return;
+            }
+
+            card.style.pointerEvents = 'auto';
+            card.style.cursor = 'pointer';
+            card.addEventListener('click', function (event) {
+                event.stopPropagation();
+                window.location.hash = '#/details?id=' + actor.jellyfin_id;
+            });
+
+            getPerson(actor.jellyfin_id).then(function (person) {
+                if (!person || !overlayEl || !overlayEl.contains(card)) {
+                    return;
+                }
+
+                if (person.ImageTags && person.ImageTags.Primary) {
+                    var img = document.createElement('img');
+                    img.src = window.ApiClient.getImageUrl(actor.jellyfin_id, {
+                        type: 'Primary',
+                        maxHeight: 80,
+                        tag: person.ImageTags.Primary
+                    });
+                    img.style.height = '80px';
+                    img.style.width = 'auto';
+                    img.style.borderRadius = '4px';
+                    img.style.objectFit = 'cover';
+                    card.insertBefore(img, textBlock);
+                }
+
+                if (person.Overview) {
+                    var overview = document.createElement('div');
+                    overview.style.fontSize = '12px';
+                    overview.style.opacity = '0.85';
+                    overview.style.marginTop = '4px';
+                    overview.textContent = truncate(person.Overview, OVERVIEW_MAX_LENGTH);
+                    textBlock.appendChild(overview);
+                }
+            });
         });
 
         container.appendChild(overlayEl);