Jray mugshots of actors shown

src/lib/components/player/VideoPlayer.svelte

@@ -1485,17 +1485,32 @@
     {#if !isPlaying && !isSeeking && jrayActors.length > 0}
       <div class="absolute top-4 right-4 max-w-xs bg-black/70 rounded-lg p-3 backdrop-blur-sm pointer-events-auto">
         <div class="text-white/60 text-xs font-medium uppercase tracking-wide mb-2">On screen</div>
-        <div class="flex flex-col gap-1">
+        <div class="flex flex-col gap-2">
           {#each jrayActors as actor (actor.name + actor.jellyfin_id)}
             {#if actor.jellyfin_id}
               <button
-                class="text-left text-white text-sm hover:text-blue-300 transition-colors"
+                class="flex items-center gap-2 text-left text-white text-sm hover:text-blue-300 transition-colors group"
                 onclick={() => openJrayActor(actor)}
               >
-                {actor.name}
+                <!-- Headshot from the actor's Jellyfin Person item. Falls back to
+                     a placeholder inside CachedImage when no image exists. -->
+                <CachedImage
+                  itemId={actor.jellyfin_id}
+                  imageType="Primary"
+                  maxWidth={80}
+                  alt={actor.name}
+                  class="w-8 h-8 rounded-full object-cover flex-shrink-0 ring-1 ring-white/20 group-hover:ring-blue-300/60"
+                />
+                <span>{actor.name}</span>
               </button>
             {:else}
-              <span class="text-white/80 text-sm">{actor.name}</span>
+              <span class="flex items-center gap-2 text-white/80 text-sm">
+                <!-- No resolved Jellyfin id → no headshot available. -->
+                <span class="w-8 h-8 rounded-full bg-gray-700 flex-shrink-0 flex items-center justify-center text-xs text-gray-400">
+                  {actor.name.slice(0, 1)}
+                </span>
+                <span>{actor.name}</span>
+              </span>
             {/if}
           {/each}
         </div>