feat: icon view toggle, failing filter, quality badges
List and Tiles are now icons rather than words, centred in their buttons — Segmented takes a ReactNode label and an optional title. The red "N failing" count in the sidebar is a button: click it to see only the channels that failed to refresh, click again for all of them. It clears itself once a refresh fixes everything, so the filter can never strand you on an empty list. The player states its quality as a badge instead of loose grey text, and a downloaded video now says so too — "Downloaded · 1440p" — read from the file itself. Quality is the short side, so a portrait Short reads 1080p rather than 1920p, and it resets between videos so one never inherits the previous one's number.
This commit is contained in:
vincent
+26
-11
@@ -3,7 +3,7 @@ import { fileUrl, listSubtitles, openExternal, resolveStream, savePlayback } fro
|
||||
import type { FeedItem } from "../types";
|
||||
import { compactViews, relativeTime } from "./format";
|
||||
import PlayerControls from "./PlayerControls";
|
||||
import { BTN, Spinner } from "./ui";
|
||||
import { Badge, BTN, Spinner } from "./ui";
|
||||
|
||||
interface Props {
|
||||
item: FeedItem;
|
||||
@@ -131,10 +131,17 @@ export default function Player({
|
||||
const [chromeVisible, setChromeVisible] = useState(true);
|
||||
const hideTimer = useRef<number | undefined>(undefined);
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
// Quality is the short side, so a portrait Short reads 1080p, not 1920p.
|
||||
const measure = useCallback(() => {
|
||||
const v = videoRef.current;
|
||||
if (!v?.videoHeight) return;
|
||||
setHeight(Math.min(v.videoWidth, v.videoHeight));
|
||||
}, []);
|
||||
const stageRef = useRef<HTMLDivElement>(null);
|
||||
const lastSave = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
setHeight(0);
|
||||
if (path) {
|
||||
setSrc(fileUrl(path));
|
||||
return;
|
||||
@@ -266,14 +273,22 @@ export default function Player({
|
||||
{item.channel_title}
|
||||
</span>
|
||||
|
||||
{streaming && (
|
||||
<span className="text-[11px] text-slate-400 dark:text-slate-500">
|
||||
{error
|
||||
? "Unavailable"
|
||||
: src && !buffering
|
||||
? `Streaming${height ? ` · ${height}p` : ""}`
|
||||
: "Loading…"}
|
||||
</span>
|
||||
{streaming ? (
|
||||
error ? (
|
||||
<Badge tone="danger">Unavailable</Badge>
|
||||
) : src && !buffering ? (
|
||||
<Badge tone="accent" title={`Streaming at ${height || "an unknown"}p`}>
|
||||
Streaming{height ? ` · ${height}p` : ""}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge>Loading…</Badge>
|
||||
)
|
||||
) : (
|
||||
height > 0 && (
|
||||
<Badge title={`This copy on your Mac is ${height}p`}>
|
||||
Downloaded · {height}p
|
||||
</Badge>
|
||||
)
|
||||
)}
|
||||
</header>
|
||||
|
||||
@@ -338,8 +353,8 @@ export default function Player({
|
||||
onCanPlay={() => setBuffering(false)}
|
||||
onPlaying={() => setBuffering(false)}
|
||||
onSeeked={() => setBuffering(false)}
|
||||
onResize={() => setHeight(videoRef.current?.videoHeight ?? 0)}
|
||||
onLoadedData={() => setHeight(videoRef.current?.videoHeight ?? 0)}
|
||||
onResize={measure}
|
||||
onLoadedData={measure}
|
||||
className="absolute inset-0 size-full object-contain"
|
||||
>
|
||||
{sidecars.map(([lang, file]) => (
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import type { ChannelWithCount } from "../types";
|
||||
import { HEADING, ICON_BTN } from "./ui";
|
||||
|
||||
@@ -19,8 +21,17 @@ export default function Sidebar({
|
||||
channels, activeChannel, onSelect, onOpenSettings, totalVideos, totalDownloaded,
|
||||
onHide, floating, titleBarInset,
|
||||
}: Props) {
|
||||
const [onlyFailing, setOnlyFailing] = useState(false);
|
||||
const failing = channels.filter((c) => c.last_error).length;
|
||||
|
||||
// A filter with nothing left to show is a dead end — drop it on the next
|
||||
// refresh that fixes everything.
|
||||
useEffect(() => {
|
||||
if (failing === 0) setOnlyFailing(false);
|
||||
}, [failing]);
|
||||
|
||||
const shown = onlyFailing ? channels.filter((c) => c.last_error) : channels;
|
||||
|
||||
const row =
|
||||
"flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-2 py-1.5 " +
|
||||
"text-[13px] transition-colors";
|
||||
@@ -93,18 +104,29 @@ export default function Sidebar({
|
||||
<h2 className={`${HEADING} flex items-center justify-between px-2 pb-1 pt-4`}>
|
||||
<span>Channels</span>
|
||||
{failing > 0 && (
|
||||
<span
|
||||
title={`${failing} channel${failing === 1 ? "" : "s"} failed to refresh`}
|
||||
className="font-mono text-[10px] normal-case tracking-normal text-red-500"
|
||||
<button
|
||||
onClick={() => setOnlyFailing((v) => !v)}
|
||||
title={
|
||||
onlyFailing
|
||||
? "Show every channel again"
|
||||
: `Show only the ${failing} channel${failing === 1 ? "" : "s"} that failed to refresh`
|
||||
}
|
||||
className={
|
||||
"cursor-pointer rounded-full px-1.5 py-0.5 font-mono text-[10px] normal-case " +
|
||||
"tracking-normal transition-colors " +
|
||||
(onlyFailing
|
||||
? "bg-red-500 text-white"
|
||||
: "text-red-500 hover:bg-red-500/10")
|
||||
}
|
||||
>
|
||||
{failing} failing
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</h2>
|
||||
)}
|
||||
|
||||
<ul className="space-y-0.5">
|
||||
{channels.map((c) => (
|
||||
{shown.map((c) => (
|
||||
<li key={c.id}>
|
||||
<button
|
||||
onClick={() => onSelect(c.id)}
|
||||
|
||||
@@ -123,8 +123,27 @@ export default function TopBar({
|
||||
value={view}
|
||||
onChange={onView}
|
||||
options={[
|
||||
{ value: "list", label: "List" },
|
||||
{ value: "grid", label: "Tiles" },
|
||||
{
|
||||
value: "list",
|
||||
title: "List",
|
||||
label: (
|
||||
<svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path strokeLinecap="round" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "grid",
|
||||
title: "Tiles",
|
||||
label: (
|
||||
<svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="4" y="4" width="7" height="7" rx="1.5" />
|
||||
<rect x="13" y="4" width="7" height="7" rx="1.5" />
|
||||
<rect x="4" y="13" width="7" height="7" rx="1.5" />
|
||||
<rect x="13" y="13" width="7" height="7" rx="1.5" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
+31
-2
@@ -91,7 +91,7 @@ export function Segmented<T extends string>({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
options: Array<{ value: T; label: string }>;
|
||||
options: Array<{ value: T; label: ReactNode; title?: string }>;
|
||||
value: T;
|
||||
onChange: (v: T) => void;
|
||||
}) {
|
||||
@@ -106,8 +106,10 @@ export function Segmented<T extends string>({
|
||||
<button
|
||||
key={o.value}
|
||||
onClick={() => onChange(o.value)}
|
||||
title={o.title}
|
||||
className={
|
||||
"h-full rounded-md px-2.5 text-[12px] font-medium transition-colors cursor-pointer " +
|
||||
"inline-flex h-full items-center justify-center rounded-md px-2.5 text-[12px] " +
|
||||
"font-medium transition-colors cursor-pointer " +
|
||||
(active
|
||||
? "bg-slate-900! text-white! dark:bg-white! dark:text-slate-900!"
|
||||
: "text-slate-500 hover:bg-slate-100 hover:text-slate-900 " +
|
||||
@@ -143,6 +145,33 @@ export function Toast({ message }: { message: string | null }) {
|
||||
);
|
||||
}
|
||||
|
||||
/** States a fact in passing — a quality, a status. Never a control. */
|
||||
export function Badge({
|
||||
children,
|
||||
tone = "neutral",
|
||||
title,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
tone?: "neutral" | "accent" | "danger";
|
||||
title?: string;
|
||||
}) {
|
||||
const skin =
|
||||
tone === "accent"
|
||||
? "bg-sky-500/15 text-sky-700 dark:text-sky-300"
|
||||
: tone === "danger"
|
||||
? "bg-red-500/15 text-red-600 dark:text-red-400"
|
||||
: "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300";
|
||||
return (
|
||||
<span
|
||||
title={title}
|
||||
className={`inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5
|
||||
text-[11px] font-medium ${skin}`}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** A modal for anything needing a decision or reporting a failure. */
|
||||
export function Dialog({
|
||||
title,
|
||||
|
||||
Reference in New Issue
Block a user