Zhou Weidong
ecfbd3b8b5
- 按 app / shared / entities / features 分层，路由懒加载并抽出布局组件 - 请求层改为可插拔拦截器，统一错误类型、超时取消与端点拆分 - 抽取播放器、骨架屏、网格等复用组件，点赞收藏接入统一交互反馈 - 关于页重做为无边框极光风格，补充 iOS / Google Play 下载入口 - 修复播放页滚轮切集吞事件、页面误滚动、后台持续播放与声音记忆问题 - 语言按本地偏好与 IP 识别，国旗改为内联 SVG - 清理未使用的旧站点文件，补充 ESLint 配置
66 lines
2.8 KiB
React
66 lines
2.8 KiB
React
// Author: fruit.com.cn
|
|
import { Link } from 'react-router-dom';
|
|
import { useLocale } from '../../app/providers/AppProviders';
|
|
import { HistoryGridSkeleton } from '../../shared/components/skeletons';
|
|
import { useMutation } from '../../shared/hooks/useMutation';
|
|
import { useRequest } from '../../shared/hooks/useRequest';
|
|
import { normalizePage } from '../../shared/lib/pagination';
|
|
import { watchApi } from '../../shared/api/watch';
|
|
import { normalizeProgress } from '../../entities/drama/model';
|
|
|
|
function episodeLabel(record, localeCode) {
|
|
if (!record.episodeNumber) return '';
|
|
return localeCode === 'zh' ? `第${record.episodeNumber}集` : `Episode ${record.episodeNumber}`;
|
|
}
|
|
|
|
export function HistoryPage() {
|
|
const { locale } = useLocale();
|
|
const history = useRequest(
|
|
({ signal }) => watchApi.recent(1, 20, { signal }).then((payload) => normalizePage(payload).list.map((item) => normalizeProgress(item, locale.code))),
|
|
[locale.code],
|
|
);
|
|
const clearHistory = useMutation(() => watchApi.clear());
|
|
const records = history.data;
|
|
const errorMessage = history.error?.message || clearHistory.error?.message || '';
|
|
|
|
const clearAll = async () => {
|
|
if (!window.confirm(`${locale.clearHistory}?`)) return;
|
|
try {
|
|
await clearHistory.run();
|
|
history.refetch();
|
|
} catch {
|
|
// 错误由 clearHistory.error 呈现
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section className="history-page">
|
|
<div className="history-heading">
|
|
<h1>{locale.history}</h1>
|
|
{!!records?.length && <button type="button" onClick={clearAll}>{locale.clearHistory}</button>}
|
|
</div>
|
|
{history.loading && records === null && <HistoryGridSkeleton count={6} label={locale.loading} />}
|
|
{errorMessage && <div className="api-note warning">{errorMessage}</div>}
|
|
{records && !records.length && !errorMessage && <div className="api-note">{locale.historyEmpty}</div>}
|
|
{!!records?.length && (
|
|
<div className="video-grid">
|
|
{records.map((record) => {
|
|
const percent = Math.round(record.fraction * 100);
|
|
const meta = [episodeLabel(record, locale.code), record.durationMs > 0 ? `${percent}%` : ''].filter(Boolean).join(' · ');
|
|
return (
|
|
<article className="history-card" key={record.id}>
|
|
<Link to={`/watch/${record.id}`} className="history-thumb">
|
|
<img src={record.image} alt={record.title} loading="lazy" />
|
|
{record.durationMs > 0 && <span className="history-progress"><i style={{ width: `${percent}%` }} /></span>}
|
|
</Link>
|
|
<Link to={`/watch/${record.id}`} className="history-title">{record.title}</Link>
|
|
{meta && <small>{meta}</small>}
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|