feat: refactor detail page && play page support position param

2026-02-21 17:24:41 +08:00 · 2025-06-19 22:27:47 +08:00
parent e45feeb1a8
commit 909aee0d91
5 changed files with 210 additions and 20 deletions
--- a/src/app/api/detail/route.ts
+++ b/src/app/api/detail/route.ts
@@ -12,6 +12,7 @@ function cleanHtmlTags(text: string): string {
    .replace(/\n+/g, '\n') // 将多个连续换行合并为一个
    .replace(/[ \t]+/g, ' ') // 将多个连续空格和制表符合并为一个空格，但保留换行符
    .replace(/^\n+|\n+$/g, '') // 去掉首尾换行
+    .replace(/&nbsp;/g, ' ') // 将 &nbsp; 替换为空格
    .trim(); // 去掉首尾空格
 }

--- a/src/app/detail/page.tsx
+++ b/src/app/detail/page.tsx
@@ -4,6 +4,9 @@ import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';

+import type { PlayRecord } from '@/lib/db.client';
+import { generateStorageKey, getAllPlayRecords } from '@/lib/db.client';
+
 import PageLayout from '@/components/layout/PageLayout';

 import { VideoDetail } from '../api/detail/route';
@@ -13,6 +16,18 @@ export default function DetailPage() {
  const [detail, setDetail] = useState<VideoDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
+  const [playRecord, setPlayRecord] = useState<PlayRecord | null>(null);
+
+  // 格式化剩余时间（如 1h 50m）
+  const formatDuration = (seconds: number) => {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const parts: string[] = [];
+    if (h) parts.push(`${h}h`);
+    if (m) parts.push(`${m}m`);
+    if (parts.length === 0) parts.push('0m');
+    return parts.join(' ');
+  };

  useEffect(() => {
    const source = searchParams.get('source');
@@ -24,7 +39,7 @@ export default function DetailPage() {
      return;
    }

-    const fetchDetail = async () => {
+    const fetchData = async () => {
      try {
        const response = await fetch(`/api/detail?source=${source}&id=${id}`);
        if (!response.ok) {
@@ -32,6 +47,11 @@ export default function DetailPage() {
        }
        const data = await response.json();
        setDetail(data);
+
+        // 获取播放记录
+        const allRecords = await getAllPlayRecords();
+        const key = generateStorageKey(source, id);
+        setPlayRecord(allRecords[key] || null);
      } catch (err) {
        setError(err instanceof Error ? err.message : '获取详情失败');
      } finally {
@@ -39,7 +59,7 @@ export default function DetailPage() {
      }
    };

-    fetchDetail();
+    fetchData();
  }, [searchParams]);

  return (
@@ -95,12 +115,12 @@ export default function DetailPage() {
                </svg>
              </button>
              {/* 封面 */}
-              <div className='flex-shrink-0 w-full md:w-64'>
+              <div className='flex-shrink-0 w-full md:w-72'>
                <Image
                  src={detail.videoInfo.cover || '/images/placeholder.png'}
                  alt={detail.videoInfo.title}
-                  width={256}
-                  height={384}
+                  width={288}
+                  height={432}
                  className='w-full rounded-xl object-cover'
                  style={{ aspectRatio: '2/3' }}
                  priority
@@ -109,7 +129,7 @@ export default function DetailPage() {
              {/* 右侧信息 */}
              <div
                className='flex-1 flex flex-col min-h-0'
-                style={{ height: '384px' }}
+                style={{ height: '430px' }}
              >
                <h1 className='text-3xl font-bold mb-2 tracking-wide flex items-center flex-shrink-0'>
                  {detail.videoInfo.title}
@@ -130,16 +150,46 @@ export default function DetailPage() {
                    <span>{detail.videoInfo.type}</span>
                  )}
                </div>
+                {/* 按钮区域 */}
                <div className='flex items-center gap-4 mb-4 flex-shrink-0'>
-                  <a
-                    href={`/play?source=${searchParams.get(
-                      'source'
-                    )}&id=${searchParams.get('id')}`}
-                    className='flex items-center justify-center gap-2 px-6 py-2 bg-green-500 hover:bg-green-600 rounded-lg transition-colors text-white'
-                  >
-                    <div className='w-0 h-0 border-t-[6px] border-t-transparent border-l-[10px] border-l-white border-b-[6px] border-b-transparent'></div>
-                    <span>播放</span>
-                  </a>
+                  {playRecord ? (
+                    <>
+                      {/* 恢复播放 */}
+                      <a
+                        href={`/play?source=${searchParams.get(
+                          'source'
+                        )}&id=${searchParams.get('id')}`}
+                        className='flex items-center justify-center gap-2 px-6 py-2 bg-green-500 hover:bg-green-600 rounded-lg transition-colors text-white'
+                      >
+                        <div className='w-0 h-0 border-t-[6px] border-t-transparent border-l-[10px] border-l-white border-b-[6px] border-b-transparent'></div>
+                        <span>恢复播放</span>
+                      </a>
+                      {/* 从头开始 */}
+                      <a
+                        href={`/play?source=${searchParams.get(
+                          'source'
+                        )}&id=${searchParams.get('id')}&index=1&position=0`}
+                        className='flex items-center justify-center gap-2 px-6 py-2 bg-gray-500 hover:bg-gray-600 rounded-lg transition-colors text-white'
+                      >
+                        <div className='w-0 h-0 border-t-[6px] border-t-transparent border-l-[10px] border-l-white border-b-[6px] border-b-transparent'></div>
+                        <span>从头开始</span>
+                      </a>
+                    </>
+                  ) : (
+                    <>
+                      {/* 播放 */}
+                      <a
+                        href={`/play?source=${searchParams.get(
+                          'source'
+                        )}&id=${searchParams.get('id')}&index=1&position=0`}
+                        className='flex items-center justify-center gap-2 px-6 py-2 bg-green-500 hover:bg-green-600 rounded-lg transition-colors text-white'
+                      >
+                        <div className='w-0 h-0 border-t-[6px] border-t-transparent border-l-[10px] border-l-white border-b-[6px] border-b-transparent'></div>
+                        <span>播放</span>
+                      </a>
+                    </>
+                  )}
+                  {/* 爱心按钮 */}
                  <button className='flex items-center justify-center w-10 h-10 bg-pink-400 hover:bg-pink-500 rounded-full transition-colors'>
                    <svg
                      xmlns='http://www.w3.org/2000/svg'
@@ -157,9 +207,32 @@ export default function DetailPage() {
                    </svg>
                  </button>
                </div>
+                {/* 播放记录进度条 */}
+                {playRecord && (
+                  <div className='mb-4 flex items-center gap-3 w-full max-w-sm'>
+                    {/* 进度条 */}
+                    <div className='flex-1 h-1 bg-gray-600 rounded-sm overflow-hidden'>
+                      <div
+                        className='h-full bg-green-500'
+                        style={{
+                          width: `${
+                            (playRecord.play_time / playRecord.total_time) * 100
+                          }%`,
+                        }}
+                      ></div>
+                    </div>
+                    {/* 剩余时间 */}
+                    <span className='text-gray-600/60 text-xs whitespace-nowrap'>
+                      剩余{' '}
+                      {formatDuration(
+                        playRecord.total_time - playRecord.play_time
+                      )}
+                    </span>
+                  </div>
+                )}
                {detail.videoInfo.desc && (
                  <div
-                    className='mt-4 text-base leading-relaxed opacity-90 overflow-y-auto pr-2 flex-1 min-h-0 scrollbar-hide'
+                    className='mt-0 text-base leading-relaxed opacity-90 overflow-y-auto pr-2 flex-1 min-h-0 scrollbar-hide'
                    style={{ whiteSpace: 'pre-line' }}
                  >
                    {detail.videoInfo.desc}
--- a/src/app/play/page.tsx
+++ b/src/app/play/page.tsx
@@ -6,7 +6,12 @@ import { useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import React from 'react';

-import { deletePlayRecord, savePlayRecord } from '@/lib/db.client';
+import {
+  deletePlayRecord,
+  generateStorageKey,
+  getAllPlayRecords,
+  savePlayRecord,
+} from '@/lib/db.client';

 import { VideoDetail } from '../api/detail/route';

@@ -82,6 +87,9 @@ export default function PlayPage() {
  // 总集数：从 detail 中获取，保证随 detail 更新而变化
  const totalEpisodes = detail?.episodes?.length || 0;

+  // 用于记录是否需要在播放器 ready 后跳转到指定进度
+  const resumeTimeRef = useRef<number | null>(null);
+
  // 根据 detail 和集数索引更新视频地址（仅当地址真正变化时）
  const updateVideoUrl = (
    detailData: VideoDetail | null,
@@ -162,6 +170,7 @@ export default function PlayPage() {
        if (searchParams.has('index')) {
          const newUrl = new URL(window.location.href);
          newUrl.searchParams.delete('index');
+          newUrl.searchParams.delete('position');
          window.history.replaceState({}, '', newUrl.toString());
        }
      } catch (err) {
@@ -174,6 +183,64 @@ export default function PlayPage() {
    fetchDetail();
  }, [currentSource]);

+  /* -------------------- 播放记录处理 -------------------- */
+  useEffect(() => {
+    // 仅在初次挂载时检查播放记录
+    const initFromHistory = async () => {
+      if (!currentSource || !currentId) return;
+
+      try {
+        const allRecords = await getAllPlayRecords();
+        const key = generateStorageKey(currentSource, currentId);
+        const record = allRecords[key];
+
+        // URL 参数
+        const urlIndexParam = searchParams.get('index');
+        const urlPositionParam = searchParams.get('position');
+
+        // 当index参数存在时的处理逻辑
+        if (urlIndexParam) {
+          const urlIndex = parseInt(urlIndexParam, 10) - 1;
+          let targetTime = 0; // 默认从0开始
+
+          // 只有index参数和position参数都存在时才生效position
+          if (urlPositionParam) {
+            targetTime = parseInt(urlPositionParam, 10);
+          } else if (record && urlIndex === record.index - 1) {
+            // 如果有同集播放记录则跳转到播放记录处
+            targetTime = record.play_time;
+          }
+          // 否则从0开始（targetTime已经是0）
+
+          // 更新当前选集索引
+          if (urlIndex !== currentEpisodeIndex) {
+            setCurrentEpisodeIndex(urlIndex);
+          }
+
+          // 保存待恢复的播放进度，待播放器就绪后跳转
+          resumeTimeRef.current = targetTime;
+        } else if (record) {
+          // 没有index参数但有播放记录时，使用原有逻辑
+          const targetIndex = record.index - 1;
+          const targetTime = record.play_time;
+
+          // 更新当前选集索引
+          if (targetIndex !== currentEpisodeIndex) {
+            setCurrentEpisodeIndex(targetIndex);
+          }
+
+          // 保存待恢复的播放进度，待播放器就绪后跳转
+          resumeTimeRef.current = targetTime;
+        }
+      } catch (err) {
+        console.error('读取播放记录失败:', err);
+      }
+    };
+
+    initFromHistory();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
  const attachVideoEventListeners = (video: HTMLVideoElement) => {
    if (!video) return;

@@ -417,6 +484,16 @@ export default function PlayPage() {
      artPlayerRef.current.on('ready', () => {
        console.log('播放器准备就绪');
        setError(null);
+
+        // 若存在需要恢复的播放进度，则跳转
+        if (resumeTimeRef.current && resumeTimeRef.current > 0) {
+          try {
+            artPlayerRef.current.video.currentTime = resumeTimeRef.current;
+          } catch (err) {
+            console.warn('恢复播放进度失败:', err);
+          }
+          resumeTimeRef.current = null;
+        }
      });

      artPlayerRef.current.on('error', (err: any) => {
--- a/src/components/ContinueWatching.tsx
+++ b/src/components/ContinueWatching.tsx
@@ -100,6 +100,11 @@ export default function ContinueWatching({ className }: ContinueWatchingProps) {
                    progress={getProgress(record)}
                    episodes={record.total_episodes}
                    currentEpisode={record.index}
+                    onDelete={() =>
+                      setPlayRecords((prev) =>
+                        prev.filter((r) => r.key !== record.key)
+                      )
+                    }
                  />
                </div>
              );
--- a/src/components/VideoCard.tsx
+++ b/src/components/VideoCard.tsx
@@ -4,6 +4,8 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';

+import { deletePlayRecord } from '@/lib/db.client';
+
 interface VideoCardProps {
  id: string;
  source: string;
@@ -14,6 +16,7 @@ interface VideoCardProps {
  progress?: number;
  from?: string;
  currentEpisode?: number;
+  onDelete?: () => void;
 }

 function CheckCircleCustom() {
@@ -78,11 +81,34 @@ export default function VideoCard({
  progress,
  from,
  currentEpisode,
+  onDelete,
 }: VideoCardProps) {
  const [playHover, setPlayHover] = useState(false);
+  const [deleted, setDeleted] = useState(false);
  const router = useRouter();

-  return (
+  // 删除对应播放记录
+  const handleDeleteRecord = async (
+    e: React.MouseEvent<HTMLSpanElement | SVGElement, MouseEvent>
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    try {
+      await deletePlayRecord(source, id);
+
+      // 通知父组件更新
+      onDelete?.();
+
+      // 若父组件未处理，可本地隐藏
+      setDeleted(true);
+    } catch (err) {
+      /* eslint-disable no-console */
+      console.error('删除播放记录失败:', err);
+    }
+  };
+
+  return deleted ? null : (
    <Link
      href={`/detail?source=${source}&id=${id}${from ? `&from=${from}` : ''}`}
    >
@@ -111,8 +137,16 @@ export default function VideoCard({
              </div>
            </div>
            <div className='absolute bottom-4 right-4 flex items-center gap-6'>
-              <CheckCircleCustom />
-              <Heart className='h-5 w-5 text-white/90 stroke-[2]' />
+              <span
+                onClick={handleDeleteRecord}
+                title='标记已看'
+                className='inline-flex items-center justify-center'
+              >
+                <CheckCircleCustom />
+              </span>
+              <span className='inline-flex items-center justify-center'>
+                <Heart className='h-6 w-6 text-white/90 stroke-[2]' />
+              </span>
            </div>
          </div>