feat: make watch page a single-video swipe feed

src/pages/WatchPage.jsx

@@ -1,22 +1,20 @@
 // Author: fruit.com.cn
 import { useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { videos } from '../data/catalog';
-import { MediaCard } from '../components/MediaCard';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useAppStore } from '../app/store';
 import { appApi } from '../services/appApi';
-import { normalizeDrama, resolvePlaybackUrl } from '../services/normalizers';
+import { normalizeDrama, normalizePage, resolvePlaybackUrl } from '../services/normalizers';
 import { useApi } from '../hooks/useApi';
 import { VideoPlayer } from '../components/player/VideoPlayer';
 
-function EpisodeSlide({ episode, poster, title, active, onActive }) {
-  const ref = useRef(null); const playback = useApi(() => appApi.episodePlay(episode.id), [episode.id]); const src = resolvePlaybackUrl(playback.data?.playUrl);
-  useEffect(() => { const node = ref.current; const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) onActive(episode.id); }, { threshold: 0.75 }); observer.observe(node); return () => observer.disconnect(); }, [episode.id, onActive]);
-  return <article id={`episode-${episode.id}`} ref={ref} className={`episode-slide ${active ? 'is-active' : ''}`}><div className="episode-slide-player">{src ? <VideoPlayer src={src} poster={poster} autoPlay={active} /> : <div className="episode-slide-placeholder"><img src={poster} alt={title} /><span>{playback.loading ? 'Loading signed stream…' : playback.error || (episode.locked ? 'Locked episode' : 'Playback unavailable')}</span></div>}</div><div className="episode-slide-caption"><span>EPISODE {episode.number}</span><h2>{episode.title || `Episode ${episode.number}`}</h2><p>{title}</p></div></article>;
+function SwipeVideo({ video, active }) {
+  const ref = useRef(null); const playback = useApi(() => video.preview?.id ? appApi.episodePlay(video.preview.id) : Promise.resolve(null), [video.preview?.id]); const src = resolvePlaybackUrl(playback.data?.playUrl || video.preview?.playUrl); const image = video.image;
+  useEffect(() => { const node = ref.current; const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) node.classList.add('visible'); else node.classList.remove('visible'); }, { threshold: 0.7 }); observer.observe(node); return () => observer.disconnect(); }, []);
+  return <article ref={ref} className={`single-video-slide ${active ? 'active' : ''}`}><div className="single-video-stage">{src ? <VideoPlayer src={src} poster={image} autoPlay={active} /> : <div className="single-video-placeholder"><img src={image} alt={video.title} /><span>{playback.loading ? 'Loading video…' : playback.error || 'Preview unavailable'}</span></div>}</div><div className="single-video-info"><span>YMB SHORTS</span><h1>{video.title}</h1><p>{video.channel} · {video.views}</p></div></article>;
 }
 
 export function WatchPage() {
-  const { id } = useParams(); const { locale } = useAppStore(); const fallback = videos.find((item) => item.id === id) || videos[0];
-  const drama = useApi(() => appApi.drama(id).then((data) => normalizeDrama(data, locale.code)), [id, locale.code]); const video = drama.data || fallback; const [activeEpisodeId, setActiveEpisodeId] = useState(null); const image = video.image?.startsWith('/') || video.image?.startsWith('http') ? video.image : `/assets/${video.image}`; const episodes = video.episodes || [];
-  return <div className="youtube-watch-layout"><main className="watch-main"><div className="watch-channel-bar"><img src="/brand/ymb-logo-blue.png" alt="YMB" /><div><strong>{video.channel || 'YMB Originals'}</strong><small>{video.views}</small></div><button>Subscribe</button></div><h1 className="watch-title">{video.title}</h1><p className="watch-subtitle">{locale.swipeHint || 'Swipe up to continue watching'} · {episodes.length} episodes</p><div className="episode-feed">{drama.loading && <div className="api-note">{locale.loading}</div>}{episodes.map((episode) => <EpisodeSlide key={episode.id} episode={episode} poster={image} title={video.title} active={String(activeEpisodeId) === String(episode.id)} onActive={setActiveEpisodeId} />)}</div></main><aside className="watch-sidebar"><section className="episode-list-panel"><div className="episode-list-title"><h2>{locale.episodes || 'Episodes'}</h2><span>{episodes.length}</span></div>{episodes.map((episode) => <button key={episode.id} className={String(activeEpisodeId) === String(episode.id) ? 'active' : ''} onClick={() => document.getElementById(`episode-${episode.id}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' })}><b>{episode.number}</b><span>{episode.title || `Episode ${episode.number}`}</span>{episode.locked && <small>🔒</small>}</button>)}</section><section className="watch-recommendations"><h2>{locale.picks}</h2>{videos.slice(0, 4).map((item) => <MediaCard key={item.id} video={item} />)}</section></aside></div>;
+  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);
+  useEffect(() => { const node = document.querySelector('.single-video-feed'); 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('.single-video-slide').forEach((item) => observer.observe(item)); return () => observer.disconnect(); }, [ordered.length, id]);
+  return <div className="single-video-page"><header className="single-video-toolbar"><button onClick={() => navigate(-1)}>←</button><img src="/brand/ymb-logo-blue.png" alt="YMB" /><span>{locale.swipeHint || 'Swipe up for the next video'}</span></header><div className="single-video-feed">{current.loading && <div className="api-note">{locale.loading}</div>}{ordered.map((video) => <div key={video.id} data-id={video.id}><SwipeVideo video={video} active={String(activeId) === String(video.id)} /></div>)}</div></div>;
 }