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.
This commit is contained in:
parent
cc1e670202
commit
641fc393a7
2 changed files with 26 additions and 8 deletions
|
|
@ -382,6 +382,7 @@ export default function Feed({
|
||||||
startAt={activeVideo.startAt}
|
startAt={activeVideo.startAt}
|
||||||
onClose={() => setActiveVideo(null)}
|
onClose={() => setActiveVideo(null)}
|
||||||
onState={onState}
|
onState={onState}
|
||||||
|
onOpenChannel={onOpenChannel}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -45,6 +45,7 @@ export default function PlayerModal({
|
||||||
startIndex,
|
startIndex,
|
||||||
onClose,
|
onClose,
|
||||||
onState,
|
onState,
|
||||||
|
onOpenChannel,
|
||||||
}: {
|
}: {
|
||||||
video: Video;
|
video: Video;
|
||||||
// Where to start the opened video: a number of seconds (0 = Restart), or null/undefined
|
// 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;
|
startIndex?: number;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onState: (id: string, status: string) => 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 { t, i18n } = useTranslation();
|
||||||
const qc = useQueryClient();
|
const qc = useQueryClient();
|
||||||
|
|
@ -552,14 +556,27 @@ export default function PlayerModal({
|
||||||
<span className="font-medium shrink-0">{liveData?.author ?? ""}</span>
|
<span className="font-medium shrink-0">{liveData?.author ?? ""}</span>
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
<a
|
<div className="flex items-center gap-1.5 shrink-0 min-w-0">
|
||||||
href={active.channel_url}
|
<button
|
||||||
target="_blank"
|
onClick={() => {
|
||||||
rel="noreferrer"
|
onClose();
|
||||||
className="font-medium hover:text-accent shrink-0"
|
onOpenChannel?.(active.channel_id, active.channel_title ?? undefined);
|
||||||
>
|
}}
|
||||||
{active.channel_title}
|
className="font-medium hover:text-accent truncate text-left"
|
||||||
</a>
|
>
|
||||||
|
{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 ? (
|
{!navigated ? (
|
||||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-muted min-w-0">
|
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-muted min-w-0">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue