feat: the channel name in the player is a tag that goes there
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.
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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">
|
||||
{/* 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}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{streaming ? (
|
||||
error ? (
|
||||
|
||||
Reference in New Issue
Block a user