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}
|
onSubLang={setSubLang}
|
||||||
subStyle={subStyle}
|
subStyle={subStyle}
|
||||||
onSubStyle={setSubStyle}
|
onSubStyle={setSubStyle}
|
||||||
|
onOpenChannel={() => {
|
||||||
|
setChannelId(playing.item.channel_id);
|
||||||
|
setSearch("");
|
||||||
|
setPlayingIndex(null);
|
||||||
|
}}
|
||||||
titleBarInset={titleBarInset}
|
titleBarInset={titleBarInset}
|
||||||
onPrev={
|
onPrev={
|
||||||
stepFrom(playingIndex, -1) != null
|
stepFrom(playingIndex, -1) != null
|
||||||
|
|||||||
@@ -25,6 +25,8 @@ interface Props {
|
|||||||
subLang: string;
|
subLang: string;
|
||||||
subStyle: SubStyle;
|
subStyle: SubStyle;
|
||||||
onSubStyle: (s: SubStyle) => void;
|
onSubStyle: (s: SubStyle) => void;
|
||||||
|
/** Leaves the player for this video's channel. */
|
||||||
|
onOpenChannel: () => void;
|
||||||
/** Persists a subtitle choice made from the transport bar. */
|
/** Persists a subtitle choice made from the transport bar. */
|
||||||
onSubLang: (l: string) => void;
|
onSubLang: (l: string) => void;
|
||||||
/** Position in the current feed, for the "3 of 180" readout. */
|
/** 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({
|
export default function Player({
|
||||||
item, path, onClose, onDelete, onPrev, onNext, onDownload, downloading,
|
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) {
|
}: Props) {
|
||||||
const streaming = path === null;
|
const streaming = path === null;
|
||||||
const [src, setSrc] = useState<string | null>(path ? fileUrl(path) : null);
|
const [src, setSrc] = useState<string | null>(path ? fileUrl(path) : null);
|
||||||
@@ -361,9 +364,19 @@ export default function Player({
|
|||||||
{index + 1}/{total}
|
{index + 1}/{total}
|
||||||
</span>
|
</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}
|
{item.channel_title}
|
||||||
</span>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{streaming ? (
|
{streaming ? (
|
||||||
error ? (
|
error ? (
|
||||||
|
|||||||
Reference in New Issue
Block a user