peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(player): channel name opens the in-app channel page

Browse source 
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.
This commit is contained in:
npeter83 2026-06-30 03:12:44 +02:00
parent cc1e670202
commit 641fc393a7
2 changed files with 26 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

33
frontend/src/components/PlayerModal.tsx
View file

@ -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">