fix(feed): a reset clears the card's resume position at once, not only its status
The optimistic layer overrode only the status, so after "Reset — clear watch progress/status" the card kept its progress bar and its Continue button until the next refetch. Found in the E28 S3e1 UAT.
This commit is contained in:
@@ -0,0 +1,107 @@
|
|||||||
|
// @vitest-environment jsdom
|
||||||
|
//
|
||||||
|
// "Reset — clear watch progress/status" on a half-watched video. The optimistic layer overrode only
|
||||||
|
// the STATUS, so the card kept its resume position — its progress bar and its Continue button — until
|
||||||
|
// the next refetch (found in the E28 S3e1 UAT). The grid is replaced by a list that shows what Feed
|
||||||
|
// hands it: each video's position, and a button that fires the reset.
|
||||||
|
import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
|
||||||
|
import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
|
||||||
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
|
|
||||||
|
vi.mock("react-i18next", async (importOriginal) => ({
|
||||||
|
...(await importOriginal<typeof import("react-i18next")>()),
|
||||||
|
useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
|
||||||
|
}));
|
||||||
|
vi.mock("./wizardContext", () => ({ useWizard: () => ({ openWizard: vi.fn() }) }));
|
||||||
|
vi.mock("./VirtualFeed", () => ({
|
||||||
|
default: ({
|
||||||
|
items,
|
||||||
|
onResetState,
|
||||||
|
}: {
|
||||||
|
items: { id: string; position_seconds: number }[];
|
||||||
|
onResetState: (id: string) => void;
|
||||||
|
}) => (
|
||||||
|
<ol aria-label="results">
|
||||||
|
{items.map((v) => (
|
||||||
|
<li key={v.id}>
|
||||||
|
{v.id}@{v.position_seconds}
|
||||||
|
<button onClick={() => onResetState(v.id)}>reset {v.id}</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import Feed from "./Feed";
|
||||||
|
import { api, DEFAULT_TAG_MODES, type FeedFilters, type Video } from "../lib/api";
|
||||||
|
import { qk } from "../lib/queryKeys";
|
||||||
|
|
||||||
|
beforeAll(() => {
|
||||||
|
class Stub {
|
||||||
|
observe() {}
|
||||||
|
unobserve() {}
|
||||||
|
disconnect() {}
|
||||||
|
takeRecords() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
|
||||||
|
globalThis.IntersectionObserver ??= Stub as unknown as typeof IntersectionObserver;
|
||||||
|
});
|
||||||
|
afterEach(() => {
|
||||||
|
cleanup();
|
||||||
|
vi.restoreAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
const FILTERS: FeedFilters = {
|
||||||
|
tags: [],
|
||||||
|
tagModes: DEFAULT_TAG_MODES,
|
||||||
|
channelIds: [],
|
||||||
|
q: "",
|
||||||
|
sort: "newest",
|
||||||
|
scope: "my",
|
||||||
|
includeNormal: true,
|
||||||
|
includeShorts: false,
|
||||||
|
includeLive: false,
|
||||||
|
show: "unwatched",
|
||||||
|
};
|
||||||
|
|
||||||
|
const halfWatched = {
|
||||||
|
id: "v1",
|
||||||
|
title: "v1",
|
||||||
|
channel_id: "UCx",
|
||||||
|
channel_title: "Channel",
|
||||||
|
status: "new",
|
||||||
|
position_seconds: 95,
|
||||||
|
duration_seconds: 600,
|
||||||
|
published_at: "2026-01-01T00:00:00Z",
|
||||||
|
watch_url: "https://www.youtube.com/watch?v=v1",
|
||||||
|
} as unknown as Video;
|
||||||
|
|
||||||
|
describe("Feed — resetting a half-watched video", () => {
|
||||||
|
it("clears its resume position at once, not only its status", async () => {
|
||||||
|
vi.spyOn(api, "feed").mockResolvedValue({ items: [halfWatched], next_cursor: null } as never);
|
||||||
|
vi.spyOn(api, "feedSummary").mockResolvedValue({ count: 1, facets: {} } as never);
|
||||||
|
// Never settles: what the card shows before the server answers is the optimistic layer alone.
|
||||||
|
vi.spyOn(api, "clearState").mockReturnValue(new Promise(() => {}) as never);
|
||||||
|
const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||||||
|
qc.setQueryData(qk.me(), { id: 1, can_write: true, prefs: {} });
|
||||||
|
render(
|
||||||
|
<QueryClientProvider client={qc}>
|
||||||
|
<Feed
|
||||||
|
filters={FILTERS}
|
||||||
|
setFilters={() => {}}
|
||||||
|
view="cards"
|
||||||
|
setView={() => {}}
|
||||||
|
canRead
|
||||||
|
ytSearch=""
|
||||||
|
onYtSearch={() => {}}
|
||||||
|
onExitYtSearch={() => {}}
|
||||||
|
/>
|
||||||
|
</QueryClientProvider>,
|
||||||
|
);
|
||||||
|
await waitFor(() => expect(screen.getByText("v1@95")).toBeTruthy());
|
||||||
|
fireEvent.click(screen.getByText("reset v1"));
|
||||||
|
await waitFor(() => expect(screen.getByText("v1@0")).toBeTruthy());
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -145,6 +145,9 @@ export default function Feed({
|
|||||||
: SORT_KEYS;
|
: SORT_KEYS;
|
||||||
const [overrides, setOverrides] = useState<Record<string, VideoStatus>>({});
|
const [overrides, setOverrides] = useState<Record<string, VideoStatus>>({});
|
||||||
const [savedOverrides, setSavedOverrides] = useState<Record<string, boolean>>({});
|
const [savedOverrides, setSavedOverrides] = useState<Record<string, boolean>>({});
|
||||||
|
// A reset drops the resume position too, which a status override cannot say: without this the card
|
||||||
|
// kept its progress bar and its Continue button until the next refetch.
|
||||||
|
const [resetIds, setResetIds] = useState<Record<string, true>>({});
|
||||||
// The open player: which video and where to start (null = resume from saved position).
|
// The open player: which video and where to start (null = resume from saved position).
|
||||||
const [activeVideo, setActiveVideo] = useState<{ video: Video; startAt: number | null } | null>(
|
const [activeVideo, setActiveVideo] = useState<{ video: Video; startAt: number | null } | null>(
|
||||||
null,
|
null,
|
||||||
@@ -238,6 +241,7 @@ export default function Feed({
|
|||||||
setOverridesFor(filters);
|
setOverridesFor(filters);
|
||||||
setOverrides({});
|
setOverrides({});
|
||||||
setSavedOverrides({});
|
setSavedOverrides({});
|
||||||
|
setResetIds({});
|
||||||
}
|
}
|
||||||
// ...but NOT on infinite-scroll appends: fetchNextPage also bumps dataUpdatedAt while page 1's
|
// ...but NOT on infinite-scroll appends: fetchNextPage also bumps dataUpdatedAt while page 1's
|
||||||
// rows are unchanged, so clearing overrides there would make a just-hidden card flash back.
|
// rows are unchanged, so clearing overrides there would make a just-hidden card flash back.
|
||||||
@@ -250,6 +254,7 @@ export default function Feed({
|
|||||||
if (!appended) {
|
if (!appended) {
|
||||||
setOverrides({});
|
setOverrides({});
|
||||||
setSavedOverrides({});
|
setSavedOverrides({});
|
||||||
|
setResetIds({});
|
||||||
}
|
}
|
||||||
}, [query.dataUpdatedAt, pagesLen]);
|
}, [query.dataUpdatedAt, pagesLen]);
|
||||||
|
|
||||||
@@ -350,6 +355,7 @@ export default function Feed({
|
|||||||
// Reset to pristine (drop the whole VideoState row, incl. resume position) — the
|
// Reset to pristine (drop the whole VideoState row, incl. resume position) — the
|
||||||
// un-watch toggle can't clear an in-progress position, this can.
|
// un-watch toggle can't clear an in-progress position, this can.
|
||||||
setOverrides((o) => ({ ...o, [id]: "new" }));
|
setOverrides((o) => ({ ...o, [id]: "new" }));
|
||||||
|
setResetIds((r) => ({ ...r, [id]: true }));
|
||||||
api
|
api
|
||||||
.clearState(id)
|
.clearState(id)
|
||||||
// Stale-mark only (see setState above): the optimistic override already reset the card.
|
// Stale-mark only (see setState above): the optimistic override already reset the card.
|
||||||
@@ -361,6 +367,11 @@ export default function Feed({
|
|||||||
delete next[id];
|
delete next[id];
|
||||||
return next;
|
return next;
|
||||||
});
|
});
|
||||||
|
setResetIds((r) => {
|
||||||
|
const next = { ...r };
|
||||||
|
delete next[id];
|
||||||
|
return next;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[qc],
|
[qc],
|
||||||
@@ -395,6 +406,7 @@ export default function Feed({
|
|||||||
const status = overrides[v.id]; // read once so the narrowing sticks
|
const status = overrides[v.id]; // read once so the narrowing sticks
|
||||||
return status ? { ...v, status } : v;
|
return status ? { ...v, status } : v;
|
||||||
})
|
})
|
||||||
|
.map((v) => (resetIds[v.id] ? { ...v, position_seconds: 0 } : v))
|
||||||
.map((v) => {
|
.map((v) => {
|
||||||
const saved = savedOverrides[v.id];
|
const saved = savedOverrides[v.id];
|
||||||
return saved !== undefined ? { ...v, saved } : v;
|
return saved !== undefined ? { ...v, saved } : v;
|
||||||
|
|||||||
Reference in New Issue
Block a user