quick look modal shows title logo when available

src/components/ui/QuickLookModal.tsx

@@ -5,8 +5,8 @@ import { Play, Info, Star, Clock, X } from '../../lib/icons'
 import { useQuickLookStore } from '../../stores/quick-look-store'
 import { useItemDetails } from '../../hooks/use-jellyfin'
 import { useTmdbMovie, useTmdbTvShow } from '../../hooks/use-tmdb'
-import { getBestImage, getStoredServerUrl } from '../../api/jellyfin'
+import { getBestImage, getStoredServerUrl, getImageUrl } from '../../api/jellyfin'
-import { getTmdbImageUrl } from '../../api/tmdb'
+import { getTmdbImageUrl, pickTmdbLogo } from '../../api/tmdb'
 import { formatRuntime } from '../../lib/format'
 import WatchlistButton from './WatchlistButton'
 import RequestButton from '../request/RequestButton'
@@ -49,6 +49,17 @@ export default function QuickLookModal() {
   const fallbackBackdrop = tmdbData?.backdrop_path ? getTmdbImageUrl(tmdbData.backdrop_path, 'w1280') : null
   const heroImg = backdrop || fallbackBackdrop
 
+  const logoFromJf =
+    item?.Id && item.ImageTags?.Logo
+      ? getImageUrl(serverUrl, item.Id, 'Logo', 600, item.ImageTags.Logo)
+      : null
+  const logoFromTmdb = pickTmdbLogo(
+    isSeries
+      ? tmdbTv.data?.images?.logos
+      : tmdbMovie.data?.images?.logos,
+  )
+  const logoUrl = logoFromJf || (logoFromTmdb ? getTmdbImageUrl(logoFromTmdb.file_path, 'w500') : null)
+
   const overview = item.Overview || tmdbData?.overview || ''
   const year = item.ProductionYear || (tmdbData?.release_date || tmdbData?.first_air_date || '').slice(0, 4)
   const runtime = item.RunTimeTicks ? formatRuntime(item.RunTimeTicks) : null
@@ -95,9 +106,20 @@ export default function QuickLookModal() {
             )}
 
             <div className="p-6 -mt-8 relative">
-              <h2 className="text-[22px] font-display font-bold tracking-tight text-text-1 mb-2 leading-tight">
+              {logoUrl ? (
-                {item.Name}
+                <div className="mb-2 flex justify-start">
-              </h2>
+                  <img
+                    src={logoUrl}
+                    alt={item.Name || ''}
+                    className="block h-auto max-h-14 md:max-h-16 max-w-[380px] w-auto drop-shadow-[0_4px_24px_rgba(0,0,0,0.7)]"
+                    onError={e => { (e.target as HTMLImageElement).style.display = 'none' }}
+                  />
+                </div>
+              ) : (
+                <h2 className="text-[22px] font-display font-bold tracking-tight text-text-1 mb-2 leading-tight">
+                  {item.Name}
+                </h2>
+              )}
               <div className="flex items-center gap-2 text-[11.5px] text-text-3 mb-4 flex-wrap font-medium">
                 {year && <span className="tabular-nums">{year}</span>}
                 {year && (runtime || community) && <Dot />}