feat: connect YMB APIs and add swipe video player

src/pages/HomePage.jsx

@@ -5,6 +5,9 @@ import { SectionHeading } from '../components/SectionHeading';
 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 { useApi } from '../hooks/useApi';
 
-export function HomePage() { const { locale } = useAppStore(); const [genre, setGenre] = useState(locale.genres[0]); const [toast, setToast] = useState(''); const items = searchCatalog('', genre, locale.genres.indexOf(genre)); const play = () => { setToast(locale.watch); setTimeout(() => setToast(''), 1400); }; return <><section className="hero-card"><div className="hero-copy"><small>YMB ORIGINAL</small><h1>{locale.hero}<br /><em>{locale.accent}</em></h1><p>{locale.description}</p><button className="primary-button" onClick={play}>▶ {locale.watch}</button></div><div className="hero-art"><img src="/assets/hero.jpg" alt="YMB drama" /></div></section><section><SectionHeading title={locale.picks} /><div className="chip-row">{locale.genres.map((item) => <button className={`chip ${genre === item ? 'active' : ''}`} key={item} onClick={() => setGenre(item)}>{item}</button>)}</div><div className="video-grid">{items.map((video) => <MediaCard key={video.id} video={video} />)}</div></section><section><SectionHeading title={locale.shortTitle} action="Explore →" /><div className="shorts-row">{videos.slice(1, 7).map((video) => <MediaCard key={video.id} video={video} compact />)}</div></section>{toast && <div className="toast">{toast}</div>}</>;
+export function HomePage() { const { locale } = useAppStore(); const [genre, setGenre] = useState(locale.genres[0]); const [toast, setToast] = useState(''); const api = useApi(() => appApi.dramas().then((payload) => normalizePage(payload).list.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 <><section className="hero-card"><div className="hero-copy"><small>YMB ORIGINAL</small><h1>{locale.hero}<br /><em>{locale.accent}</em></h1><p>{locale.description}</p><button className="primary-button" onClick={play}>▶ {locale.watch}</button></div><div className="hero-art"><img src="/assets/hero.jpg" alt="YMB drama" /></div></section><section><SectionHeading title={locale.picks} /><div className="chip-row">{locale.genres.map((item) => <button className={`chip ${genre === item ? 'active' : ''}`} key={item} onClick={() => setGenre(item)}>{item}</button>)}</div>{api.loading && <div className="api-note">{locale.loading}</div>}{api.error && <div className="api-note warning">{locale.apiFallback}</div>}<div className="video-grid">{items.map((video) => <MediaCard key={video.id} video={video} />)}</div></section><section><SectionHeading title={locale.shortTitle} action="Explore →" /><div className="shorts-row">{videos.slice(1, 7).map((video) => <MediaCard key={video.id} video={video} compact />)}</div></section>{toast && <div className="toast">{toast}</div>}</>;
 }

src/pages/ShortsFeedPage.jsx

@@ -0,0 +1,12 @@
+// Author: fruit.com.cn
+import { useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { Play } from 'lucide-react';
+import { videos } from '../data/catalog';
+import { appApi } from '../services/appApi';
+import { normalizePage, normalizeDrama } from '../services/normalizers';
+import { useApi } from '../hooks/useApi';
+import { useAppStore } from '../app/store';
+
+function FeedItem({ video }) { const ref = useRef(null); useEffect(() => { const element = ref.current; const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) element.play().catch(() => {}); else element.pause(); }, { threshold: 0.7 }); observer.observe(element); return () => observer.disconnect(); }, []); return <article className="feed-item"><video ref={ref} src={video.preview || video.videoUrl} poster={video.image} muted loop playsInline controls={false} /><div className="feed-overlay"><span className="feed-badge">YMB SHORTS</span><h2>{video.title}</h2><p>{video.channel}</p><Link to={`/watch/${video.id}`} className="primary-button"><Play size={15} fill="currentColor" /> {video.watch || 'Watch drama'}</Link></div></article>; }
+export function ShortsFeedPage() { const { locale } = useAppStore(); const api = useApi(() => appApi.dramas().then((payload) => normalizePage(payload).list.map((item) => normalizeDrama(item))), []); const items = api.data?.length ? api.data : videos.map((item) => ({ ...item, image: `/assets/${item.image}` })); return <section className="shorts-feed-page"><div className="feed-heading"><div><span>YMB SHORTS</span><h1>{locale.shortTitle}</h1></div><p>{locale.swipeHint || 'Swipe up to discover the next story'}</p></div>{api.loading && <div className="api-note">Loading real shorts…</div>}{items.map((video) => <FeedItem key={video.id} video={video} />)}</section>; }

src/pages/WatchPage.jsx

@@ -3,5 +3,9 @@ import { useParams } from 'react-router-dom';
 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 { useApi } from '../hooks/useApi';
+import { VideoPlayer } from '../components/player/VideoPlayer';
 
-export function WatchPage() { const { id } = useParams(); const { locale } = useAppStore(); const video = videos.find((item) => item.id === id) || videos[0]; return <div className="watch-layout"><div><div className="player"><img src={`/assets/${video.image}`} alt={video.title} /><button>▶</button></div><h1 className="watch-title">{video.title}</h1><p className="watch-subtitle">{video.channel} · {video.views}</p></div><aside className="up-next"><h2>{locale.picks}</h2>{videos.slice(0, 4).map((item) => <MediaCard key={item.id} video={item} />)}</aside></div>; }
+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 episode = video.episodes?.[0]; const playback = useApi(() => episode?.id ? appApi.episodePlay(episode.id) : Promise.resolve(null), [episode?.id]); const signedUrl = playback.data?.playUrl || playback.data?.url || playback.data?.signedUrl; return <div className="watch-layout"><div><div className="player">{signedUrl ? <VideoPlayer src={signedUrl} poster={video.image} /> : <><img src={video.image?.startsWith('/') ? video.image : `/assets/${video.image}`} alt={video.title} /><div className="player-state">{playback.loading ? locale.loading : locale.playbackUnavailable}</div></>}</div><h1 className="watch-title">{video.title}</h1><p className="watch-subtitle">{video.channel} · {video.views}</p>{playback.error && <div className="api-note warning">{playback.error}</div>}</div><aside className="up-next"><h2>{locale.picks}</h2>{videos.slice(0, 4).map((item) => <MediaCard key={item.id} video={item} />)}</aside></div>; }