20bcdf5ecb
The relevance auto-select ran in a Feed effect that raced per-keystroke query updates, so fast typing left the sort on the default. Move the switch into the header input's onChange so it's set atomically with the query (only overriding the default newest sort); the Feed effect now only reverts to newest when the term is cleared. 'Back to feed' also sets relevance explicitly.
592 lines
24 KiB
TypeScript
592 lines
24 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { keepPreviousData, useInfiniteQuery, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { ArrowDown, ArrowUp, ArrowLeft, RefreshCw, Youtube } from "lucide-react";
|
|
import { api, HttpError, type FeedFilters, type Video } from "../lib/api";
|
|
import i18n from "../i18n";
|
|
import { notify, resolveVideo } from "../lib/notifications";
|
|
import { useDebounced } from "../lib/useDebounced";
|
|
import VirtualFeed from "./VirtualFeed";
|
|
import PlayerModal from "./PlayerModal";
|
|
|
|
const PAGE = 60;
|
|
|
|
// The "Show" view filter, content-type filter and ordering live in the feed toolbar
|
|
// (above the cards), not the filter sidebar.
|
|
const SHOW_IDS = ["unwatched", "in_progress", "all", "watched", "hidden"];
|
|
const CONTENT = [
|
|
{ key: "includeNormal", label: "sidebar.content.normal" },
|
|
{ key: "includeShorts", label: "sidebar.content.shorts" },
|
|
{ key: "includeLive", label: "sidebar.content.live" },
|
|
] as const;
|
|
const rollSeed = () => Math.floor(Math.random() * 1_000_000_000);
|
|
|
|
// Ordering = a key + direction (like the Playlists page), mapped to the backend sort strings
|
|
// (which encode both). One entry per concept; a single arrow flips the direction.
|
|
// "relevance" (full-text search ranking) and "shuffle" are directionless single-string sorts.
|
|
type SortKey = "date" | "popular" | "duration" | "title" | "subscribers" | "priority" | "shuffle" | "relevance";
|
|
const SORT_KEYS: SortKey[] = ["date", "popular", "duration", "title", "subscribers", "priority", "shuffle"];
|
|
const DIRECTIONLESS: SortKey[] = ["shuffle", "relevance"];
|
|
const SORT_MAP: Record<Exclude<SortKey, "shuffle" | "relevance">, { asc: string; desc: string }> = {
|
|
date: { desc: "newest", asc: "oldest" },
|
|
popular: { desc: "views", asc: "views_asc" },
|
|
duration: { desc: "duration_desc", asc: "duration_asc" },
|
|
title: { asc: "title", desc: "title_desc" },
|
|
subscribers: { desc: "subscribers", asc: "subscribers_asc" },
|
|
priority: { desc: "priority", asc: "priority_asc" },
|
|
};
|
|
const SORT_DEFAULT_DIR: Record<Exclude<SortKey, "shuffle" | "relevance">, "asc" | "desc"> = {
|
|
date: "desc", popular: "desc", duration: "desc", title: "asc", subscribers: "desc", priority: "desc",
|
|
};
|
|
function parseSort(s: string): { key: SortKey; dir: "asc" | "desc" } {
|
|
if (s === "shuffle" || s === "relevance") return { key: s, dir: "desc" };
|
|
for (const k of Object.keys(SORT_MAP) as (keyof typeof SORT_MAP)[]) {
|
|
if (SORT_MAP[k].asc === s) return { key: k, dir: "asc" };
|
|
if (SORT_MAP[k].desc === s) return { key: k, dir: "desc" };
|
|
}
|
|
return { key: "date", dir: "desc" };
|
|
}
|
|
function buildSort(key: SortKey, dir: "asc" | "desc"): string {
|
|
if (key === "shuffle" || key === "relevance") return key;
|
|
return SORT_MAP[key][dir];
|
|
}
|
|
|
|
function matchesView(status: string, show: string): boolean {
|
|
switch (show) {
|
|
case "hidden":
|
|
return status === "hidden";
|
|
case "watched":
|
|
return status === "watched";
|
|
case "unwatched":
|
|
case "in_progress":
|
|
// (in_progress is further narrowed server-side by resume position; here we only
|
|
// need to drop a card once it's optimistically marked watched/hidden.)
|
|
return status !== "watched" && status !== "hidden";
|
|
default:
|
|
return status !== "hidden"; // all
|
|
}
|
|
}
|
|
|
|
export default function Feed({
|
|
filters,
|
|
setFilters,
|
|
view,
|
|
canRead,
|
|
isDemo = false,
|
|
onOpenWizard,
|
|
ytSearch,
|
|
onYtSearch,
|
|
onExitYtSearch,
|
|
}: {
|
|
filters: FeedFilters;
|
|
setFilters: (f: FeedFilters) => void;
|
|
view: "grid" | "list";
|
|
canRead: boolean;
|
|
isDemo?: boolean;
|
|
onOpenWizard: () => void;
|
|
// Live YouTube search: the active search term (null = normal feed). Entering a search and
|
|
// leaving it both step browser history (the search is a feed sub-view with its own history
|
|
// entry), so the empty-state CTA enters via onYtSearch and "back to feed" pops via
|
|
// onExitYtSearch. Search affordances are hidden for demo.
|
|
ytSearch: string | null;
|
|
onYtSearch: (q: string) => void;
|
|
onExitYtSearch: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [overrides, setOverrides] = useState<Record<string, string>>({});
|
|
const [savedOverrides, setSavedOverrides] = useState<Record<string, boolean>>({});
|
|
// The open player: which video and where to start (null = resume from saved position).
|
|
const [activeVideo, setActiveVideo] = useState<{ video: Video; startAt: number | null } | null>(
|
|
null
|
|
);
|
|
const qc = useQueryClient();
|
|
|
|
const openVideo = useCallback(
|
|
(video: Video, startAt: number | null = null) => setActiveVideo({ video, startAt }),
|
|
[]
|
|
);
|
|
|
|
const ytActive = !!ytSearch;
|
|
|
|
// Debounce only the search term feeding the queries: the input still updates instantly (it
|
|
// owns filters.q), but the feed/count keys settle after a pause, so typing doesn't refetch —
|
|
// and re-fetched pages keep the previous results on screen, so the feed never blanks/flickers.
|
|
const debouncedQ = useDebounced(filters.q, 300);
|
|
const queryFilters: FeedFilters = { ...filters, q: debouncedQ };
|
|
|
|
const query = useInfiniteQuery({
|
|
queryKey: ["feed", queryFilters],
|
|
queryFn: ({ pageParam }) => api.feed(queryFilters, pageParam as string | null, PAGE),
|
|
initialPageParam: null as string | null,
|
|
getNextPageParam: (last) => last.next_cursor ?? undefined,
|
|
enabled: !ytActive, // don't load the normal feed while showing live YouTube results
|
|
placeholderData: keepPreviousData,
|
|
});
|
|
|
|
// Live YouTube search results. We never auto-paginate on scroll — the user pulls more with an
|
|
// explicit button (each api-source page spends 100 quota units; scrape-source pages are free).
|
|
// retry:false so a 429 (quota/limit) surfaces at once for inline display. staleTime keeps a
|
|
// revisited search from re-spending.
|
|
const ytQuery = useInfiniteQuery({
|
|
queryKey: ["yt-search", ytSearch],
|
|
queryFn: ({ pageParam }) => api.searchYoutube(ytSearch as string, pageParam as string | null),
|
|
initialPageParam: null as string | null,
|
|
getNextPageParam: (last) => last.next_cursor ?? undefined,
|
|
enabled: ytActive,
|
|
staleTime: 5 * 60_000,
|
|
retry: false,
|
|
});
|
|
|
|
// Switching to the relevance sort when a search starts happens atomically in the header's
|
|
// input onChange (race-free with the query update). Here we only handle the reverse: when
|
|
// the term is cleared, fall back to the default sort — relevance has no dropdown option and
|
|
// doesn't rank without a query.
|
|
const qEmpty = !filters.q.trim();
|
|
useEffect(() => {
|
|
if (qEmpty && parseSort(filters.sort).key === "relevance") {
|
|
setFilters({ ...filters, sort: buildSort("date", "desc") });
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [qEmpty]);
|
|
|
|
// Drop optimistic status overrides when filters change OR fresh server data
|
|
// arrives — after a refetch the server is authoritative, so a stale override
|
|
// (e.g. a video reverted to "new" from the notification center) won't keep it
|
|
// filtered out of the current view.
|
|
useEffect(() => {
|
|
setOverrides({});
|
|
setSavedOverrides({});
|
|
}, [filters]);
|
|
useEffect(() => {
|
|
setOverrides({});
|
|
setSavedOverrides({});
|
|
}, [query.dataUpdatedAt]);
|
|
|
|
const countQuery = useQuery({
|
|
queryKey: ["feed-count", queryFilters],
|
|
queryFn: () => api.feedCount(queryFilters),
|
|
staleTime: 30_000,
|
|
enabled: !ytActive,
|
|
placeholderData: keepPreviousData,
|
|
});
|
|
|
|
const { hasNextPage, isFetchingNextPage, fetchNextPage } = query;
|
|
|
|
// Keep the loaded videos in a ref so onState can stay referentially stable
|
|
// (it needs the list only to look up a title for the notification). A stable
|
|
// onState lets memo(VideoCard) skip re-rendering existing cards on page append.
|
|
const loadedRef = useRef<Video[]>([]);
|
|
|
|
const onState = useCallback(
|
|
(id: string, status: string) => {
|
|
setOverrides((o) => ({ ...o, [id]: status }));
|
|
// Refetch once the server has the change so other views (e.g. Hidden) are in sync.
|
|
// Announce the change only AFTER the server confirms it: a "Marked watched"/"Hidden"
|
|
// notice (or resolving a stale one) is a claim of success, so firing it optimistically
|
|
// would falsely report a change that the .catch below is about to roll back (e.g. when
|
|
// the API is unreachable).
|
|
api
|
|
.setState(id, status)
|
|
.then(() => {
|
|
qc.invalidateQueries({ queryKey: ["feed"] });
|
|
if (status === "hidden") {
|
|
const v = loadedRef.current.find((x) => x.id === id);
|
|
notify({
|
|
message: v?.title
|
|
? i18n.t("feed.hiddenNamed", { title: v.title })
|
|
: i18n.t("feed.hidden"),
|
|
action: { label: i18n.t("feed.undo"), onClick: () => onState(id, "new") },
|
|
meta: {
|
|
kind: "video-hidden",
|
|
videoId: id,
|
|
title: v?.title ?? "this video",
|
|
channelId: v?.channel_id ?? "",
|
|
channelName: v?.channel_title ?? "",
|
|
},
|
|
});
|
|
} else if (status === "watched") {
|
|
const v = loadedRef.current.find((x) => x.id === id);
|
|
notify({
|
|
message: v?.title
|
|
? i18n.t("feed.markedWatchedNamed", { title: v.title })
|
|
: i18n.t("feed.markedWatched"),
|
|
action: { label: i18n.t("feed.unwatch"), onClick: () => onState(id, "new") },
|
|
meta: {
|
|
kind: "video-watched",
|
|
videoId: id,
|
|
title: v?.title ?? "this video",
|
|
channelId: v?.channel_id ?? "",
|
|
channelName: v?.channel_title ?? "",
|
|
},
|
|
});
|
|
} else if (status === "new") {
|
|
// Unhide / unwatch (from a card, the toast's Undo, or the center): quietly resolve
|
|
// any stale hide/watch notice for this video so it doesn't linger with a dead action.
|
|
resolveVideo(id);
|
|
}
|
|
})
|
|
.catch(() =>
|
|
// Server rejected the change — drop the optimistic override so the card
|
|
// reverts to the real (unchanged) state instead of staying phantom-hidden.
|
|
setOverrides((o) => {
|
|
const next = { ...o };
|
|
delete next[id];
|
|
return next;
|
|
})
|
|
);
|
|
},
|
|
[qc]
|
|
);
|
|
|
|
const onResetState = useCallback(
|
|
(id: string) => {
|
|
// Reset to pristine (drop the whole VideoState row, incl. resume position) — the
|
|
// un-watch toggle can't clear an in-progress position, this can.
|
|
setOverrides((o) => ({ ...o, [id]: "new" }));
|
|
api
|
|
.clearState(id)
|
|
.then(() => qc.invalidateQueries({ queryKey: ["feed"] }))
|
|
.catch(() =>
|
|
setOverrides((o) => {
|
|
const next = { ...o };
|
|
delete next[id];
|
|
return next;
|
|
})
|
|
);
|
|
},
|
|
[qc]
|
|
);
|
|
|
|
const onChannelFilter = useCallback(
|
|
(channelId: string, channelName: string) => {
|
|
setFilters({ ...filters, channelId, channelName });
|
|
},
|
|
[filters, setFilters]
|
|
);
|
|
|
|
const onToggleSave = useCallback(
|
|
(id: string, saved: boolean) => {
|
|
setSavedOverrides((o) => ({ ...o, [id]: saved }));
|
|
(saved ? api.watchLaterAdd(id) : api.watchLaterRemove(id))
|
|
.then(() => {
|
|
qc.invalidateQueries({ queryKey: ["playlists"] });
|
|
qc.invalidateQueries({ queryKey: ["playlist"] });
|
|
})
|
|
.catch(() => setSavedOverrides((o) => ({ ...o, [id]: !saved })));
|
|
},
|
|
[qc]
|
|
);
|
|
|
|
const loaded: Video[] = (query.data?.pages ?? []).flatMap((p) => p.items);
|
|
loadedRef.current = loaded;
|
|
const items: Video[] = loaded
|
|
.map((v) => (overrides[v.id] ? { ...v, status: overrides[v.id] } : v))
|
|
.map((v) => (savedOverrides[v.id] !== undefined ? { ...v, saved: savedOverrides[v.id] } : v))
|
|
.filter((v) => matchesView(v.status, filters.show));
|
|
|
|
// --- Live YouTube search mode -------------------------------------------------------------
|
|
// A separate data source rendered in the same cards/player. No watch-state view filter (the
|
|
// user explicitly searched, so show everything) and no auto-pagination (each page costs quota).
|
|
if (ytActive) {
|
|
const ytLoaded: Video[] = (ytQuery.data?.pages ?? []).flatMap((p) => p.items);
|
|
loadedRef.current = ytLoaded;
|
|
const ytItems: Video[] = ytLoaded
|
|
.map((v) => (overrides[v.id] ? { ...v, status: overrides[v.id] } : v))
|
|
.map((v) => (savedOverrides[v.id] !== undefined ? { ...v, saved: savedOverrides[v.id] } : v));
|
|
const ytError =
|
|
ytQuery.error instanceof HttpError
|
|
? ytQuery.error.detail || t("feed.yt.error")
|
|
: ytQuery.isError
|
|
? t("feed.yt.error")
|
|
: null;
|
|
// The backend reports which source served the search; scrape spends no search quota, so we
|
|
// drop the quota warning + "uses quota" wording in that mode.
|
|
const zeroQuota = ytQuery.data?.pages?.[0]?.source === "scrape";
|
|
|
|
return (
|
|
<div className="p-4">
|
|
<div className="flex items-center gap-2 flex-wrap pb-3 mb-1 border-b border-border">
|
|
<button
|
|
onClick={() => {
|
|
// The search just ingested new catalog videos, so the normal feed (which was
|
|
// disabled and still holds its pre-search cache) is stale. Drop those caches so
|
|
// it re-fetches fresh on return instead of showing the old (often empty) result.
|
|
// Surface the just-searched videos in the feed you return to: switch the Source
|
|
// filter to "search" (your own search finds) and rank them by relevance.
|
|
setFilters({ ...filters, librarySource: "search", sort: "relevance" });
|
|
onExitYtSearch();
|
|
qc.removeQueries({ queryKey: ["feed"] });
|
|
qc.removeQueries({ queryKey: ["feed-count"] });
|
|
qc.removeQueries({ queryKey: ["facets"] });
|
|
}}
|
|
className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-accent transition shrink-0"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
{t("feed.yt.back")}
|
|
</button>
|
|
<span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
|
|
<Youtube className="w-4 h-4 text-accent shrink-0" />
|
|
<span className="text-sm font-semibold truncate">
|
|
{t("feed.yt.resultsFor", { query: ytSearch })}
|
|
</span>
|
|
<span className="text-xs text-muted">
|
|
{zeroQuota ? t("feed.yt.freeNote") : t("feed.yt.quotaNote")}
|
|
</span>
|
|
</div>
|
|
|
|
{ytQuery.isLoading ? (
|
|
<div className="py-16 text-center text-muted">{t("feed.yt.searching")}</div>
|
|
) : ytError ? (
|
|
<div className="py-16 text-center text-muted max-w-md mx-auto">{ytError}</div>
|
|
) : ytItems.length === 0 ? (
|
|
<div className="py-16 text-center text-muted">{t("feed.yt.noResults")}</div>
|
|
) : (
|
|
<>
|
|
<VirtualFeed
|
|
items={ytItems}
|
|
view={view}
|
|
onState={onState}
|
|
onToggleSave={onToggleSave}
|
|
onChannelFilter={onChannelFilter}
|
|
onResetState={onResetState}
|
|
onOpen={openVideo}
|
|
hasNextPage={false}
|
|
isFetchingNextPage={false}
|
|
fetchNextPage={() => {}}
|
|
/>
|
|
{ytQuery.hasNextPage && (
|
|
<div className="text-center pt-4">
|
|
<button
|
|
onClick={() => ytQuery.fetchNextPage()}
|
|
disabled={ytQuery.isFetchingNextPage}
|
|
className="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-border bg-card text-sm font-medium hover:border-accent hover:text-accent disabled:opacity-50 transition"
|
|
>
|
|
{ytQuery.isFetchingNextPage
|
|
? t("feed.loadingMore")
|
|
: zeroQuota
|
|
? t("feed.yt.loadMoreFree")
|
|
: t("feed.yt.loadMore")}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{activeVideo && (
|
|
<PlayerModal
|
|
video={activeVideo.video}
|
|
startAt={activeVideo.startAt}
|
|
onClose={() => setActiveVideo(null)}
|
|
onState={onState}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (query.isLoading) return <div className="p-8 text-muted">{t("feed.loading")}</div>;
|
|
if (query.isError) return <div className="p-8 text-muted">{t("feed.loadError")}</div>;
|
|
// Empty "my" feed with no YouTube access. The shared demo account can never connect
|
|
// YouTube, so it gets a gentle nudge into the shared library instead of the connect
|
|
// wizard; real users get the onboarding prompt. No toolbar (sort/type are meaningless).
|
|
if (items.length === 0 && !canRead && filters.scope === "my")
|
|
return (
|
|
<div className="p-8 grid place-items-center text-center">
|
|
<div className="max-w-sm">
|
|
<h2 className="text-lg font-semibold">
|
|
{isDemo ? t("feed.demoEmptyTitle") : t("feed.emptyTitle")}
|
|
</h2>
|
|
<p className="text-sm text-muted mt-2 mb-4">
|
|
{isDemo ? t("feed.demoEmptyBody") : t("feed.emptyBody")}
|
|
</p>
|
|
{isDemo ? (
|
|
<button
|
|
onClick={() => setFilters({ ...filters, scope: "all" })}
|
|
className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
|
|
>
|
|
{t("feed.browseLibrary")}
|
|
</button>
|
|
) : (
|
|
<>
|
|
<button
|
|
onClick={onOpenWizard}
|
|
className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
|
|
>
|
|
{t("feed.setUp")}
|
|
</button>
|
|
<button
|
|
onClick={() => setFilters({ ...filters, scope: "all" })}
|
|
className="block mx-auto mt-3 text-sm text-muted hover:text-accent transition"
|
|
>
|
|
{t("feed.browseShared")}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const { key: sortKey, dir: sortDir } = parseSort(filters.sort);
|
|
|
|
const toolbar = (
|
|
<div className="pb-3">
|
|
<div className="flex items-center gap-1.5 flex-wrap mb-2.5">
|
|
{SHOW_IDS.map((id) => (
|
|
<button
|
|
key={id}
|
|
onClick={() => setFilters({ ...filters, show: id })}
|
|
aria-pressed={filters.show === id}
|
|
className={`text-xs px-3 py-1.5 rounded-full border transition ${
|
|
filters.show === id
|
|
? "bg-accent text-accent-fg border-accent"
|
|
: "border-border text-muted hover:text-fg hover:border-accent"
|
|
}`}
|
|
>
|
|
{t("sidebar.show." + id)}
|
|
</button>
|
|
))}
|
|
<span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
|
|
{CONTENT.map((c) => {
|
|
const on = filters[c.key];
|
|
return (
|
|
<button
|
|
key={c.key}
|
|
onClick={() => setFilters({ ...filters, [c.key]: !on })}
|
|
aria-pressed={on}
|
|
className={`text-xs px-3 py-1.5 rounded-full border transition ${
|
|
on
|
|
? "bg-accent text-accent-fg border-accent"
|
|
: "border-border text-muted hover:text-fg hover:border-accent"
|
|
}`}
|
|
>
|
|
{t(c.label)}
|
|
</button>
|
|
);
|
|
})}
|
|
{(
|
|
<>
|
|
<span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
|
|
<label className="inline-flex items-center gap-1.5 text-xs text-muted">
|
|
<span>{t("feed.source.label")}</span>
|
|
<select
|
|
value={filters.librarySource ?? "organic"}
|
|
onChange={(e) =>
|
|
setFilters({
|
|
...filters,
|
|
librarySource: e.target.value as FeedFilters["librarySource"],
|
|
})
|
|
}
|
|
title={t("feed.source.tip")}
|
|
className="bg-card border border-border rounded-lg px-2 py-1 text-xs outline-none focus:border-accent"
|
|
>
|
|
<option value="organic">{t("feed.source.organic")}</option>
|
|
<option value="all">{t("feed.source.all")}</option>
|
|
<option value="search">{t("feed.source.only")}</option>
|
|
</select>
|
|
</label>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2 border-t border-border pt-2.5">
|
|
<span className="text-sm text-muted">
|
|
{countQuery.data
|
|
? t("feed.videoCount", {
|
|
count: countQuery.data.count,
|
|
formattedCount: countQuery.data.count.toLocaleString(),
|
|
})
|
|
: " "}
|
|
</span>
|
|
<div className="flex-1" />
|
|
<span className="text-xs text-muted">{t("feed.sortLabel")}</span>
|
|
<select
|
|
value={sortKey}
|
|
onChange={(e) => {
|
|
const key = e.target.value as SortKey;
|
|
const dir = DIRECTIONLESS.includes(key)
|
|
? "desc"
|
|
: SORT_DEFAULT_DIR[key as Exclude<SortKey, "shuffle" | "relevance">];
|
|
setFilters({
|
|
...filters,
|
|
sort: buildSort(key, dir),
|
|
seed: key === "shuffle" ? rollSeed() : undefined,
|
|
});
|
|
}}
|
|
className="bg-card border border-border rounded-lg px-2 py-1.5 text-sm outline-none focus:border-accent"
|
|
>
|
|
{/* Relevance only ranks meaningfully when there's a search term — offer it then. */}
|
|
{(filters.q.trim() ? (["relevance", ...SORT_KEYS] as SortKey[]) : SORT_KEYS).map((k) => (
|
|
<option key={k} value={k}>
|
|
{t("feed.sortKey." + k)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{!DIRECTIONLESS.includes(sortKey) && (
|
|
<button
|
|
onClick={() =>
|
|
setFilters({ ...filters, sort: buildSort(sortKey, sortDir === "asc" ? "desc" : "asc") })
|
|
}
|
|
title={sortDir === "asc" ? t("feed.dirAsc") : t("feed.dirDesc")}
|
|
aria-label={sortDir === "asc" ? t("feed.dirAsc") : t("feed.dirDesc")}
|
|
className="shrink-0 p-1.5 rounded-lg border border-border bg-card text-fg hover:border-accent hover:text-accent active:translate-y-px transition"
|
|
>
|
|
{sortDir === "asc" ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
|
|
</button>
|
|
)}
|
|
{sortKey === "shuffle" && (
|
|
<button
|
|
onClick={() => setFilters({ ...filters, seed: rollSeed() })}
|
|
title={t("sidebar.reshuffle")}
|
|
aria-label={t("sidebar.reshuffle")}
|
|
className="shrink-0 p-1.5 rounded-lg border border-border bg-card text-fg hover:border-accent hover:text-accent active:translate-y-px transition"
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="p-4">
|
|
{toolbar}
|
|
{items.length === 0 ? (
|
|
<div className="py-16 text-center text-muted">
|
|
<p>{t("feed.noMatches")}</p>
|
|
{filters.q.trim() && !isDemo && (
|
|
<button
|
|
onClick={() => onYtSearch(filters.q.trim())}
|
|
className="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-xl font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
|
|
>
|
|
<Youtube className="w-4 h-4" />
|
|
{t("feed.yt.searchFor", { query: filters.q.trim() })}
|
|
</button>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<VirtualFeed
|
|
items={items}
|
|
view={view}
|
|
onState={onState}
|
|
onToggleSave={onToggleSave}
|
|
onChannelFilter={onChannelFilter}
|
|
onResetState={onResetState}
|
|
onOpen={openVideo}
|
|
hasNextPage={!!hasNextPage}
|
|
isFetchingNextPage={isFetchingNextPage}
|
|
fetchNextPage={fetchNextPage}
|
|
/>
|
|
)}
|
|
{activeVideo && (
|
|
<PlayerModal
|
|
video={activeVideo.video}
|
|
startAt={activeVideo.startAt}
|
|
onClose={() => setActiveVideo(null)}
|
|
onState={onState}
|
|
/>
|
|
)}
|
|
{isFetchingNextPage && (
|
|
<div className="text-center text-muted py-4">{t("feed.loadingMore")}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|