From 4dd79f6136bcab1a2bbf0422eb2f2352ac9682c4 Mon Sep 17 00:00:00 2001 From: Zhou Weidong <502333560@qq.com> Date: Tue, 10 Nov 2026 16:35:44 +0800 Subject: [PATCH] fix: deduplicate drama keys and wheel interaction --- src/pages/HomePage.jsx | 4 ++-- src/pages/WatchPage.jsx | 6 +++--- src/services/normalizers.js | 2 ++ 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index ef44abe..963ff2a 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -6,8 +6,8 @@ import { videos } from '../data/catalog'; import { useAppStore } from '../app/store'; import { searchCatalog } from '../services/catalogService'; import { appApi } from '../services/appApi'; -import { normalizeDrama, normalizePage } from '../services/normalizers'; +import { normalizeDrama, normalizePage, uniqueDramas } from '../services/normalizers'; import { useApi } from '../hooks/useApi'; -export function HomePage() { const { locale } = useAppStore(); const [genre, setGenre] = useState(locale.genres[0]); const [toast, setToast] = useState(''); const api = useApi(() => appApi.homeFeed().then((payload) => payload?.sections?.flatMap((section) => section.dramas || []).map((item) => normalizeDrama(item, locale.code)) || []), [locale.code]); const remoteItems = api.data || []; const items = remoteItems.length ? remoteItems : searchCatalog('', genre, locale.genres.indexOf(genre)); const play = () => { setToast(locale.watch); setTimeout(() => setToast(''), 1400); }; return <>
YMB ORIGINAL

{locale.hero}
{locale.accent}

{locale.description}

YMB drama
{locale.genres.map((item) => )}
{api.loading &&
{locale.loading}
}{api.error &&
{locale.apiFallback}
}
{items.map((video) => )}
{(remoteItems.length ? remoteItems.slice(0, 6) : videos.slice(1, 7)).map((video) => )}
{toast &&
{toast}
}; +export function HomePage() { const { locale } = useAppStore(); const [genre, setGenre] = useState(locale.genres[0]); const [toast, setToast] = useState(''); const api = useApi(() => appApi.homeFeed().then((payload) => uniqueDramas(payload?.sections?.flatMap((section) => section.dramas || []).map((item) => normalizeDrama(item, locale.code)) || [])), [locale.code]); const remoteItems = api.data || []; const items = remoteItems.length ? remoteItems : searchCatalog('', genre, locale.genres.indexOf(genre)); const play = () => { setToast(locale.watch); setTimeout(() => setToast(''), 1400); }; return <>
YMB ORIGINAL

{locale.hero}
{locale.accent}

{locale.description}

YMB drama
{locale.genres.map((item) => )}
{api.loading &&
{locale.loading}
}{api.error &&
{locale.apiFallback}
}
{items.map((video) => )}
{(remoteItems.length ? remoteItems.slice(0, 6) : videos.slice(1, 7)).map((video) => )}
{toast &&
{toast}
}; } diff --git a/src/pages/WatchPage.jsx b/src/pages/WatchPage.jsx index daf8297..d855b54 100644 --- a/src/pages/WatchPage.jsx +++ b/src/pages/WatchPage.jsx @@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { useAppStore } from '../app/store'; import { appApi } from '../services/appApi'; -import { normalizeDrama, normalizePage, resolvePlaybackUrl } from '../services/normalizers'; +import { normalizeDrama, normalizePage, resolvePlaybackUrl, uniqueDramas } from '../services/normalizers'; import { useApi } from '../hooks/useApi'; import { VideoPlayer } from '../components/player/VideoPlayer'; @@ -14,8 +14,8 @@ function SwipeVideo({ video, active }) { } export function WatchPage() { - const { id } = useParams(); const navigate = useNavigate(); const { locale } = useAppStore(); const [activeId, setActiveId] = useState(id); const current = useApi(() => appApi.drama(id).then((data) => normalizeDrama(data, locale.code)), [id, locale.code]); const feed = useApi(() => appApi.dramas().then((payload) => normalizePage(payload).list.map((item) => normalizeDrama(item, locale.code))), [locale.code]); const items = feed.data || []; const ordered = [current.data, ...items.filter((item) => item.id !== id)].filter(Boolean); + const { id } = useParams(); const navigate = useNavigate(); const { locale } = useAppStore(); const [activeId, setActiveId] = useState(id); const current = useApi(() => appApi.drama(id).then((data) => normalizeDrama(data, locale.code)), [id, locale.code]); const feed = useApi(() => appApi.dramas().then((payload) => uniqueDramas(normalizePage(payload).list.map((item) => normalizeDrama(item, locale.code)))), [locale.code]); const items = feed.data || []; const ordered = uniqueDramas([current.data, ...items.filter((item) => item.id !== id)].filter(Boolean)); const activeIndex = Math.max(0, ordered.findIndex((item) => String(item.id) === String(activeId))); const feedRef = useRef(null); const touchStart = useRef(0); const scrollToIndex = (index) => { const target = feedRef.current?.children[index]; target?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; const move = (delta) => scrollToIndex(Math.min(ordered.length - 1, Math.max(0, activeIndex + delta))); useEffect(() => { const node = feedRef.current; if (!node) return undefined; const observer = new IntersectionObserver((entries) => entries.forEach((entry) => { if (entry.isIntersecting) { const nextId = entry.target.dataset.id; setActiveId(nextId); if (nextId !== id) window.history.replaceState(null, '', `/watch/${nextId}`); } }), { root: node, threshold: 0.75 }); node.querySelectorAll('[data-id]').forEach((item) => observer.observe(item)); const keydown = (event) => { if (event.key === 'ArrowDown' || event.key === 'PageDown') { event.preventDefault(); move(1); } if (event.key === 'ArrowUp' || event.key === 'PageUp') { event.preventDefault(); move(-1); } }; window.addEventListener('keydown', keydown); return () => { observer.disconnect(); window.removeEventListener('keydown', keydown); }; }, [ordered.length, id, activeIndex]); - return
YMB{locale.swipeHint || 'Swipe up for the next video'}
{ touchStart.current = event.touches[0].clientY; }} onTouchEnd={(event) => { const distance = touchStart.current - event.changedTouches[0].clientY; if (Math.abs(distance) > 45) move(distance > 0 ? 1 : -1); }} onWheel={(event) => { if (Math.abs(event.deltaY) > 20) { event.preventDefault(); move(event.deltaY > 0 ? 1 : -1); } }}>{current.loading &&
{locale.loading}
}{ordered.map((video) =>
)}
; + return
YMB{locale.swipeHint || 'Swipe up for the next video'}
{ touchStart.current = event.touches[0].clientY; }} onTouchEnd={(event) => { const distance = touchStart.current - event.changedTouches[0].clientY; if (Math.abs(distance) > 45) move(distance > 0 ? 1 : -1); }} onWheel={(event) => { if (Math.abs(event.deltaY) > 20) move(event.deltaY > 0 ? 1 : -1); }}>{current.loading &&
{locale.loading}
}{ordered.map((video) =>
)}
; } diff --git a/src/services/normalizers.js b/src/services/normalizers.js index f35a16e..65fe3d6 100644 --- a/src/services/normalizers.js +++ b/src/services/normalizers.js @@ -17,3 +17,5 @@ export function normalizePage(payload) { } export function resolvePlaybackUrl(value) { return resolveMedia(value); } + +export function uniqueDramas(items) { const seen = new Set(); return items.filter((item) => { if (seen.has(item.id)) return false; seen.add(item.id); return true; }); }