ff9b0601c3
The live-search results view had no browser-history entry of its own, so a player opened over the results sat directly on the feed page entry. Pressing Back (e.g. the mouse back button over the player) could pop past both the player and the search in one step, bouncing from the search results to the normal feed instead of just closing the player. The search is now a feed sub-view that owns a history entry (history.state._yt): entering a search pushes it, the popstate handler derives ytSearch from it, and "Back to feed" pops it. Back now steps player -> search -> feed: the first Back closes only the player (results stay), the second returns to the normal feed. A reload drops any stale _yt so the first Back can't resurrect a gone search.
571 lines
23 KiB
TypeScript
571 lines
23 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.
|
|
type SortKey = "date" | "popular" | "duration" | "title" | "subscribers" | "priority" | "shuffle";
|
|
const SORT_KEYS: SortKey[] = ["date", "popular", "duration", "title", "subscribers", "priority", "shuffle"];
|
|
const SORT_MAP: Record<Exclude<SortKey, "shuffle">, { 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">, "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") return { key: "shuffle", 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 {
|
|
return key === "shuffle" ? "shuffle" : 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,
|
|
});
|
|
|
|
// 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.
|
|
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>
|
|
);
|
|
})}
|
|
{filters.scope === "all" && (
|
|
<>
|
|
<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 = key === "shuffle" ? "desc" : SORT_DEFAULT_DIR[key];
|
|
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"
|
|
>
|
|
{SORT_KEYS.map((k) => (
|
|
<option key={k} value={k}>
|
|
{t("feed.sortKey." + k)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{sortKey !== "shuffle" && (
|
|
<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>
|
|
);
|
|
}
|