refactor(feed): tidy the inline badge classes and the no-thumb guard

This commit is contained in:
2026-07-16 03:28:56 +02:00
parent 944dedb218
commit de1b32ba6f
+9 -5
View File
@@ -131,25 +131,29 @@ function resumePct(video: Video): number {
// so it renders the same FACTS inline here — deliberately not a shared component with Thumb's
// badges: floating chips over artwork and inline text chips are different presentations, and
// forcing one component to do both would be a variant-flag knot for no reuse.
// The cost is real though: the rules below (duration-else-live, was_live, saved) are ALSO in Thumb,
// so a change to them must land in both. If they ever do change, share the decision — a
// videoBadges(video) -> Badge[] — and keep only the markup separate.
function InlineBadges({ video }: { video: Video }) {
const { t } = useTranslation();
// Inline-flow, not flex: these sit inside the meta line's " · "-separated text.
const chip = "inline-block mr-1.5 px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide";
const base = "inline-block mr-1.5 px-1.5 py-0.5 rounded";
const label = clsx(base, "text-[10px] font-semibold uppercase tracking-wide");
return (
<>
{video.duration_seconds != null ? (
<span className="inline-block mr-1.5 px-1.5 py-0.5 rounded bg-surface text-fg text-[11px] font-medium tabular-nums">
<span className={clsx(base, "bg-surface text-fg text-[11px] font-medium tabular-nums")}>
{formatDuration(video.duration_seconds)}
</span>
) : video.live_status === "live" || video.live_status === "upcoming" ? (
<span
className={clsx(chip, video.live_status === "live" ? "bg-red-500/90 text-white" : "bg-surface text-fg")}
className={clsx(label, video.live_status === "live" ? "bg-red-500/90 text-white" : "bg-surface text-fg")}
>
{t(`card.${video.live_status}`)}
</span>
) : null}
{video.live_status === "was_live" && (
<span className={clsx(chip, "bg-accent text-accent-fg")}>{t("card.stream")}</span>
<span className={clsx(label, "bg-accent text-accent-fg")}>{t("card.stream")}</span>
)}
{video.saved && (
<Bookmark className="inline-block mr-1.5 w-3.5 h-3.5 align-[-2px] text-accent fill-current" />
@@ -291,7 +295,7 @@ function VideoCard({
// The thumbnail-less row drops Thumb, and with it the duration / live state / saved marker that
// Thumb overlays on the image. Those are metadata, not decoration, so fold them into the meta
// line here rather than let the mode silently lose them.
const noThumb = spec.family === "row" && !spec.thumb;
const noThumb = !spec.thumb;
const meta = (
<>
{noThumb && <InlineBadges video={video} />}