From 87d96be178ae8d3408dcbf91c0324761fb5838c3 Mon Sep 17 00:00:00 2001
From: vincent <vincent@users.noreply.gitea.vincentrozenberg.com>
Date: Sat, 29 Aug 2026 17:57:07 +0200
Subject: [PATCH] feat: the channel name in the player is a tag that goes there
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It read as a caption but behaves like a link, so it now looks like one:
a pill beside the position counter, outlined until hovered. Clicking it
closes the player and narrows the feed to that channel, clearing the
search box on the way — the same thing the channel name under a
thumbnail already does.
---
 src/App.tsx               |  5 +++++
 src/components/Player.tsx | 21 +++++++++++++++++----
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4c26611..2ca2569 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -578,6 +578,11 @@ export default function App() {
           onSubLang={setSubLang}
           subStyle={subStyle}
           onSubStyle={setSubStyle}
+          onOpenChannel={() => {
+            setChannelId(playing.item.channel_id);
+            setSearch("");
+            setPlayingIndex(null);
+          }}
           titleBarInset={titleBarInset}
           onPrev={
             stepFrom(playingIndex, -1) != null
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
index 6ccea0e..9905359 100644
--- a/src/components/Player.tsx
+++ b/src/components/Player.tsx
@@ -25,6 +25,8 @@ interface Props {
   subLang: string;
   subStyle: SubStyle;
   onSubStyle: (s: SubStyle) => void;
+  /** Leaves the player for this video's channel. */
+  onOpenChannel: () => void;
   /** Persists a subtitle choice made from the transport bar. */
   onSubLang: (l: string) => void;
   /** Position in the current feed, for the "3 of 180" readout. */
@@ -120,7 +122,8 @@ function placeCues(vtt: string, line: number | null): string {
 
 export default function Player({
   item, path, onClose, onDelete, onPrev, onNext, onDownload, downloading,
-  maxHeight, subLang, onSubLang, subStyle, onSubStyle, index, total, titleBarInset,
+  maxHeight, subLang, onSubLang, subStyle, onSubStyle, onOpenChannel,
+  index, total, titleBarInset,
 }: Props) {
   const streaming = path === null;
   const [src, setSrc] = useState<string | null>(path ? fileUrl(path) : null);
@@ -361,9 +364,19 @@ export default function Player({
           {index + 1}/{total}
         </span>
 
-        <span className="min-w-0 flex-1 truncate text-[12px] text-slate-500 dark:text-slate-400">
-          {item.channel_title}
-        </span>
+        {/* A tag rather than a caption: it goes somewhere. */}
+        <div className="flex min-w-0 flex-1 items-center">
+          <button
+            onClick={onOpenChannel}
+            title={`Show everything from ${item.channel_title}`}
+            className="max-w-full cursor-pointer truncate rounded-full border border-slate-300
+                       px-2.5 py-0.5 text-[12px] text-slate-500 transition-colors
+                       hover:border-sky-500 hover:text-sky-600 dark:border-slate-700
+                       dark:text-slate-400 dark:hover:border-sky-500 dark:hover:text-sky-400"
+          >
+            {item.channel_title}
+          </button>
+        </div>
 
         {streaming ? (
           error ? (