feat: add YouTube-style vertical episode watch feed

src/pages/WatchPage.jsx

@@ -1,13 +1,22 @@
 // Author: fruit.com.cn
+import { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { useState } from 'react';
 import { videos } from '../data/catalog';
 import { MediaCard } from '../components/MediaCard';
 import { useAppStore } from '../app/store';
 import { appApi } from '../services/appApi';
-import { normalizeDrama } from '../services/normalizers';
+import { normalizeDrama, resolvePlaybackUrl } from '../services/normalizers';
 import { useApi } from '../hooks/useApi';
 import { VideoPlayer } from '../components/player/VideoPlayer';
-import { resolvePlaybackUrl } from '../services/normalizers';
 
-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 [selectedEpisodeId, setSelectedEpisodeId] = useState(null); const episode = video.episodes?.find((item) => String(item.id) === String(selectedEpisodeId)) || video.episodes?.[0]; const playback = useApi(() => episode?.id ? appApi.episodePlay(episode.id) : Promise.resolve(null), [episode?.id]); const signedUrl = resolvePlaybackUrl(playback.data?.playUrl); const image = video.image?.startsWith('/') || video.image?.startsWith('http') ? video.image : `/assets/${video.image}`; return <div className="watch-layout"><div><div className="player">{signedUrl ? <VideoPlayer src={signedUrl} poster={image} /> : <><img src={image} alt={video.title} /><div className="player-state">{playback.loading ? locale.loading : playback.error || locale.playbackUnavailable}</div></>}</div><h1 className="watch-title">{video.title}</h1><p className="watch-subtitle">{video.channel} · {video.views}</p><section className="episode-picker"><div className="episode-picker-heading"><h2>{locale.episodes || 'Episodes'}</h2><span>{video.episodes?.length || 0}</span></div><div className="episode-grid">{(video.episodes || []).map((item) => <button key={item.id} className={`episode-button ${String(item.id) === String(episode?.id) ? 'active' : ''} ${item.locked ? 'locked' : ''}`} onClick={() => setSelectedEpisodeId(item.id)}><b>{item.number}</b><span>{item.title || `Episode ${item.number}`}</span>{item.locked && <small>🔒</small>}</button>)}</div></section></div><aside className="up-next"><h2>{locale.picks}</h2>{videos.slice(0, 4).map((item) => <MediaCard key={item.id} video={item} />)}</aside></div>; }
+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>;
+}
+
+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>;
+}