From 641fc393a74ff060d3bc31ccbe917f5ad3b7740d Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 30 Jun 2026 03:12:44 +0200
Subject: [PATCH] feat(player): channel name opens the in-app channel page

The PlayerModal channel name now opens our channel page (closing the player first); a
small external-link icon beside it keeps the open-on-YouTube behaviour. Threaded
onOpenChannel from Feed into both PlayerModal mounts.
---
 frontend/src/components/Feed.tsx        |  1 +
 frontend/src/components/PlayerModal.tsx | 33 +++++++++++++++++++------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx
index 8a1062b..4d097ee 100644
--- a/frontend/src/components/Feed.tsx
+++ b/frontend/src/components/Feed.tsx
@@ -382,6 +382,7 @@ export default function Feed({
             startAt={activeVideo.startAt}
             onClose={() => setActiveVideo(null)}
             onState={onState}
+            onOpenChannel={onOpenChannel}
           />
         )}
       </div>
diff --git a/frontend/src/components/PlayerModal.tsx b/frontend/src/components/PlayerModal.tsx
index fc324db..056dd42 100644
--- a/frontend/src/components/PlayerModal.tsx
+++ b/frontend/src/components/PlayerModal.tsx
@@ -45,6 +45,7 @@ export default function PlayerModal({
   startIndex,
   onClose,
   onState,
+  onOpenChannel,
 }: {
   video: Video;
   // Where to start the opened video: a number of seconds (0 = Restart), or null/undefined
@@ -57,6 +58,9 @@ export default function PlayerModal({
   startIndex?: number;
   onClose: () => void;
   onState: (id: string, status: string) => void;
+  // Open the active video's channel page in-app (closes the player first). The small external
+  // icon next to the name keeps the open-on-YouTube behaviour.
+  onOpenChannel?: (channelId: string, channelName?: string) => void;
 }) {
   const { t, i18n } = useTranslation();
   const qc = useQueryClient();
@@ -552,14 +556,27 @@ export default function PlayerModal({
                 <span className="font-medium shrink-0">{liveData?.author ?? ""}</span>
               )
             ) : (
-              <a
-                href={active.channel_url}
-                target="_blank"
-                rel="noreferrer"
-                className="font-medium hover:text-accent shrink-0"
-              >
-                {active.channel_title}
-              </a>
+              <div className="flex items-center gap-1.5 shrink-0 min-w-0">
+                <button
+                  onClick={() => {
+                    onClose();
+                    onOpenChannel?.(active.channel_id, active.channel_title ?? undefined);
+                  }}
+                  className="font-medium hover:text-accent truncate text-left"
+                >
+                  {active.channel_title}
+                </button>
+                <a
+                  href={active.channel_url}
+                  target="_blank"
+                  rel="noreferrer"
+                  title={t("channels.row.openOnYouTube")}
+                  aria-label={t("channels.row.openOnYouTube")}
+                  className="text-muted hover:text-accent shrink-0"
+                >
+                  <ExternalLink className="w-3.5 h-3.5" />
+                </a>
+              </div>
             )}
             {!navigated ? (
               <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-muted min-w-0">