From 5b5c3453d2c1a1bf20770e5b575cb8bcb336cb6c Mon Sep 17 00:00:00 2001
From: Garret Patti <42485635+garretpatti@users.noreply.github.com>
Date: Wed, 15 Apr 2026 08:30:41 -0400
Subject: [PATCH] add download buttons to tv

---
 src/components/mixed/ImageLightbox.tsx    | 24 ++++++++++++-----------
 src/components/mixed/VideoPlayerModal.tsx | 24 ++++++++++++-----------
 src/components/tv/EpisodeCard.tsx         | 18 +++++++++++++++--
 src/components/tv/TvView.tsx              |  1 +
 4 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/src/components/mixed/ImageLightbox.tsx b/src/components/mixed/ImageLightbox.tsx
index 3d045fa..12316b2 100644
--- a/src/components/mixed/ImageLightbox.tsx
+++ b/src/components/mixed/ImageLightbox.tsx
@@ -325,17 +325,19 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
                 🏷
               </button>
             )}
-            <button
-              onClick={onClose}
-              className={smallBtn}
-              style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
-              onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
-              onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
-              aria-label="Close"
-              title="Close"
-            >
-              ✕
-            </button>
+            {!showTags && (
+              <button
+                onClick={onClose}
+                className={smallBtn}
+                style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
+                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
+                aria-label="Close"
+                title="Close"
+              >
+                ✕
+              </button>
+            )}
           </div>
 
           {/* Text display button — bottom-right, hidden when panel open */}
diff --git a/src/components/mixed/VideoPlayerModal.tsx b/src/components/mixed/VideoPlayerModal.tsx
index 5caea0e..2769901 100644
--- a/src/components/mixed/VideoPlayerModal.tsx
+++ b/src/components/mixed/VideoPlayerModal.tsx
@@ -100,17 +100,19 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
                   🏷
                 </button>
               )}
-              <button
-                onClick={onClose}
-                className={smallBtn}
-                style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
-                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
-                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
-                aria-label="Close"
-                title="Close"
-              >
-                ✕
-              </button>
+              {!showTags && (
+                <button
+                  onClick={onClose}
+                  className={smallBtn}
+                  style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
+                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
+                  aria-label="Close"
+                  title="Close"
+                >
+                  ✕
+                </button>
+              )}
             </div>
           </div>
 
diff --git a/src/components/tv/EpisodeCard.tsx b/src/components/tv/EpisodeCard.tsx
index 7405e65..f8aff55 100644
--- a/src/components/tv/EpisodeCard.tsx
+++ b/src/components/tv/EpisodeCard.tsx
@@ -9,9 +9,10 @@ interface Props {
   onTag?: () => void
   onDelete?: () => void
   onRename?: (newName: string) => Promise<boolean>
+  downloadUrl?: string
 }
 
-export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRename }: Props) {
+export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRename, downloadUrl }: Props) {
   const epLabel = episode.episodeNumber !== null ? `E${String(episode.episodeNumber).padStart(2, '0')}` : null
   const menuRef = useRef<HTMLDivElement>(null)
   const [menuOpen, setMenuOpen] = useState(false)
@@ -79,7 +80,7 @@ export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRenam
           </button>
         )}
         {/* Kebab menu */}
-        {onDelete && (
+        {(onDelete || downloadUrl) && (
           <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity hidden group-hover:block" ref={menuRef}>
             <button
               onClick={(e) => { e.stopPropagation(); setMenuOpen((o) => !o); setConfirming(false) }}
@@ -94,6 +95,19 @@ export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRenam
                 className="absolute right-0 top-full mt-1 rounded-lg shadow-lg overflow-hidden z-20 min-w-max"
                 style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
               >
+                {downloadUrl && (
+                  <a
+                    href={downloadUrl}
+                    download
+                    onClick={(e) => { e.stopPropagation(); setMenuOpen(false) }}
+                    className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
+                    style={{ color: 'var(--text-primary)' }}
+                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                  >
+                    Download
+                  </a>
+                )}
                 {onRename && (
                   <button
                     onClick={(e) => {
diff --git a/src/components/tv/TvView.tsx b/src/components/tv/TvView.tsx
index f8a9297..33ba5ef 100644
--- a/src/components/tv/TvView.tsx
+++ b/src/components/tv/TvView.tsx
@@ -931,6 +931,7 @@ export default function TvView({ libraryId }: Props) {
                   episode={ep}
                   onClick={() => setPlayingEpisodeIndex(episodes.indexOf(ep))}
                   onTag={() => { setTagPanelItemKey(ep.item_key!); setTagPanelDisabled(false); setShowTagPanel(true) }}
+                  downloadUrl={`/api/file?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(ep.videoPath)}`}
                   onDelete={() => {
                     fetch(
                       `/api/tv?libraryId=${encodeURIComponent(libraryId)}&seriesId=${encodeURIComponent(selectedSeries!.id)}&episodeKey=${encodeURIComponent(ep.item_key!)}`,