重构client，拆分组件
This commit is contained in:
parent
5868407216
commit
fe9bc8fd6c
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"editor.tabSize": 2
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
15
app/aweme/[awemeId]/components/BackgroundCanvas.tsx
Normal file
15
app/aweme/[awemeId]/components/BackgroundCanvas.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { forwardRef } from "react";
|
||||
|
||||
interface BackgroundCanvasProps {}
|
||||
|
||||
export const BackgroundCanvas = forwardRef<HTMLCanvasElement, BackgroundCanvasProps>((props, ref) => {
|
||||
return (
|
||||
<canvas
|
||||
ref={ref}
|
||||
className="fixed inset-0 w-full h-full -z-10"
|
||||
style={{ filter: "blur(40px)" }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
BackgroundCanvas.displayName = "BackgroundCanvas";
|
||||
56
app/aweme/[awemeId]/components/CommentList.tsx
Normal file
56
app/aweme/[awemeId]/components/CommentList.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import { ThumbsUp } from "lucide-react";
|
||||
import type { Comment, User } from "../types";
|
||||
import { formatRelativeTime } from "../utils";
|
||||
import { CommentText } from "./CommentText";
|
||||
|
||||
interface CommentListProps {
|
||||
author: User;
|
||||
createdAt: string | Date;
|
||||
comments: Comment[];
|
||||
}
|
||||
|
||||
export function CommentList({ author, createdAt, comments }: CommentListProps) {
|
||||
return (
|
||||
<>
|
||||
<header className="flex items-center gap-4 mb-5">
|
||||
<div className="size-10 rounded-full overflow-hidden bg-zinc-700/60">
|
||||
{author.avatar_url ? (
|
||||
<img src={author.avatar_url} alt="avatar" className="w-full h-full object-cover" />
|
||||
) : null}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-white/95 text-sm sm:text-base">{author.nickname}</div>
|
||||
<div className="text-xs text-white/50" title={new Date(createdAt).toLocaleString()}>
|
||||
发布于 {formatRelativeTime(createdAt)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<ul className="space-y-4 sm:space-y-5">
|
||||
{comments.map((c) => (
|
||||
<li key={c.cid} className="flex items-start gap-3 sm:gap-4">
|
||||
<div className="size-8 rounded-full overflow-hidden bg-zinc-700/60 shrink-0">
|
||||
{c.user.avatar_url ? (
|
||||
<img src={c.user.avatar_url} alt="avatar" className="w-full h-full object-cover" />
|
||||
) : null}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-white/95 text-sm">{c.user.nickname}</span>
|
||||
<span className="text-xs text-white/50">{formatRelativeTime(c.created_at)}</span>
|
||||
</div>
|
||||
<p className="mt-1 text-sm leading-relaxed text-white/90 break-words">
|
||||
<CommentText text={c.text} />
|
||||
</p>
|
||||
<div className="mt-2 inline-flex items-center gap-1 text-xs text-white/70">
|
||||
<ThumbsUp size={14} />
|
||||
<span>{c.digg_count}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{comments.length === 0 ? <li className="text-sm text-white/60">暂无评论</li> : null}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
71
app/aweme/[awemeId]/components/CommentPanel.tsx
Normal file
71
app/aweme/[awemeId]/components/CommentPanel.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import { X } from "lucide-react";
|
||||
import type { Comment, User } from "../types";
|
||||
import { CommentList } from "./CommentList";
|
||||
|
||||
interface CommentPanelProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
author: User;
|
||||
createdAt: string | Date;
|
||||
comments: Comment[];
|
||||
mounted: boolean;
|
||||
}
|
||||
|
||||
export function CommentPanel({ open, onClose, author, createdAt, comments, mounted }: CommentPanelProps) {
|
||||
return (
|
||||
<>
|
||||
{/* 横屏评论面板：并排分栏 */}
|
||||
<aside
|
||||
className={`
|
||||
hidden landscape:flex
|
||||
z-30 flex-col bg-[rgba(22,22,22,0.92)] text-white
|
||||
relative h-full overflow-hidden
|
||||
${mounted ? "transition-[width] duration-200 ease-out" : ""}
|
||||
${open ? "w-[min(420px,36vw)] border-l border-white/10" : "w-0"}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center justify-between px-3 py-3 border-b border-white/10">
|
||||
<button
|
||||
className="w-8 h-8 inline-flex items-center justify-center rounded-full bg-white/15 text-white/90 border border-white/20 hover:bg-white/25 transition-colors"
|
||||
onClick={onClose}
|
||||
aria-label="关闭评论"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
<div className="text-white font-semibold">评论 {comments.length > 0 ? `(${comments.length})` : ""}</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 overflow-auto">
|
||||
<CommentList author={author} createdAt={createdAt} comments={comments} />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* 竖屏评论面板：bottom sheet */}
|
||||
<aside
|
||||
className={`
|
||||
landscape:hidden
|
||||
z-30 flex flex-col bg-[rgba(22,22,22,0.92)] text-white
|
||||
fixed inset-x-0 bottom-0 w-full h-[min(80vh,88dvh)]
|
||||
${mounted ? "transition-transform duration-200 ease-out" : ""}
|
||||
border-t border-white/10
|
||||
${open ? "translate-y-0" : "translate-y-full"}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center justify-between px-3 py-3 border-b border-white/10">
|
||||
<div className="text-white font-semibold">评论 {comments.length > 0 ? `(${comments.length})` : ""}</div>
|
||||
<button
|
||||
className="w-8 h-8 inline-flex items-center justify-center rounded-full bg-white/15 text-white/90 border border-white/20 hover:bg-white/25 transition-colors"
|
||||
onClick={onClose}
|
||||
aria-label="关闭评论"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-3 overflow-auto">
|
||||
<CommentList author={author} createdAt={createdAt} comments={comments} />
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
30
app/aweme/[awemeId]/components/CommentText.tsx
Normal file
30
app/aweme/[awemeId]/components/CommentText.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { parseCommentText } from "../utils";
|
||||
|
||||
// 渲染评论文本（包含表情）
|
||||
export function CommentText({ text }: { text: string }) {
|
||||
const parts = parseCommentText(text);
|
||||
|
||||
return (
|
||||
<>
|
||||
{parts.map((part, idx: number) => {
|
||||
if (typeof part === "string") {
|
||||
return <span key={idx}>{part}</span>;
|
||||
}
|
||||
return (
|
||||
<img
|
||||
key={idx}
|
||||
src={`/emojis/${part.name}.webp`}
|
||||
alt={part.name}
|
||||
className="inline-block w-5 h-5 align-text-bottom mx-0.5"
|
||||
onError={(e) => {
|
||||
// 如果图片加载失败，显示原始文本
|
||||
e.currentTarget.style.display = "none";
|
||||
const textNode = document.createTextNode(`[${part.name}]`);
|
||||
e.currentTarget.parentNode?.insertBefore(textNode, e.currentTarget);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
39
app/aweme/[awemeId]/components/ImageCarousel.tsx
Normal file
39
app/aweme/[awemeId]/components/ImageCarousel.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import { forwardRef } from "react";
|
||||
import type { ImageData } from "../types";
|
||||
|
||||
interface ImageCarouselProps {
|
||||
images: ImageData["images"];
|
||||
currentIndex: number;
|
||||
onTogglePlay: () => void;
|
||||
}
|
||||
|
||||
export const ImageCarousel = forwardRef<HTMLDivElement, ImageCarouselProps>(
|
||||
({ images, currentIndex, onTogglePlay }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="flex h-full w-full snap-x snap-mandatory overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
|
||||
>
|
||||
{images.map((img, i) => (
|
||||
<div
|
||||
key={img.id}
|
||||
className="relative h-full min-w-full snap-center flex items-center justify-center bg-black/70 cursor-pointer"
|
||||
onClick={onTogglePlay}
|
||||
>
|
||||
<img
|
||||
src={img.url}
|
||||
alt={`image-${i + 1}`}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
style={{
|
||||
width: img.width ? `${img.width}px` : undefined,
|
||||
height: img.height ? `${img.height}px` : undefined,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
ImageCarousel.displayName = "ImageCarousel";
|
||||
56
app/aweme/[awemeId]/components/ImageNavigationButtons.tsx
Normal file
56
app/aweme/[awemeId]/components/ImageNavigationButtons.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
|
||||
interface ImageNavigationButtonsProps {
|
||||
onPrev: () => void;
|
||||
onNext: () => void;
|
||||
currentIndex: number;
|
||||
totalImages: number;
|
||||
}
|
||||
|
||||
export function ImageNavigationButtons({
|
||||
onPrev,
|
||||
onNext,
|
||||
currentIndex,
|
||||
totalImages,
|
||||
}: ImageNavigationButtonsProps) {
|
||||
const hasPrev = currentIndex > 0;
|
||||
const hasNext = currentIndex < totalImages - 1;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 左侧按钮 */}
|
||||
<button
|
||||
className={`
|
||||
absolute left-4 top-7/16 -translate-y-1/2 z-20
|
||||
w-12 h-12 rounded-full
|
||||
bg-black/40 backdrop-blur-sm border border-white/20
|
||||
flex items-center justify-center
|
||||
text-white transition-all
|
||||
${hasPrev ? "opacity-100 hover:bg-black/60 cursor-pointer" : "opacity-30 cursor-not-allowed"}
|
||||
`}
|
||||
onClick={onPrev}
|
||||
disabled={!hasPrev}
|
||||
aria-label="上一张图片"
|
||||
>
|
||||
<ChevronLeft size={24} />
|
||||
</button>
|
||||
|
||||
{/* 右侧按钮 */}
|
||||
<button
|
||||
className={`
|
||||
absolute right-4 top-7/16 -translate-y-1/2 z-20
|
||||
w-12 h-12 rounded-full
|
||||
bg-black/40 backdrop-blur-sm border border-white/20
|
||||
flex items-center justify-center
|
||||
text-white transition-all
|
||||
${hasNext ? "opacity-100 hover:bg-black/60 cursor-pointer" : "opacity-30 cursor-not-allowed"}
|
||||
`}
|
||||
onClick={onNext}
|
||||
disabled={!hasNext}
|
||||
aria-label="下一张图片"
|
||||
>
|
||||
<ChevronRight size={24} />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
256
app/aweme/[awemeId]/components/MediaControls.tsx
Normal file
256
app/aweme/[awemeId]/components/MediaControls.tsx
Normal file
@ -0,0 +1,256 @@
|
||||
import {
|
||||
ArrowDownUp,
|
||||
Download,
|
||||
Maximize,
|
||||
Maximize2,
|
||||
Minimize,
|
||||
Minimize2,
|
||||
Pause,
|
||||
Play,
|
||||
Repeat1,
|
||||
RotateCcw,
|
||||
RotateCw,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
} from "lucide-react";
|
||||
import type { RefObject } from "react";
|
||||
import type { LoopMode, ObjectFit, User } from "../types";
|
||||
import { formatRelativeTime, formatTime } from "../utils";
|
||||
import { ProgressBar } from "./ProgressBar";
|
||||
import { SegmentedProgressBar } from "./SegmentedProgressBar";
|
||||
|
||||
interface MediaControlsProps {
|
||||
isVideo: boolean;
|
||||
isPlaying: boolean;
|
||||
progress: number;
|
||||
volume: number;
|
||||
rate: number;
|
||||
rotation: number;
|
||||
objectFit: ObjectFit;
|
||||
loopMode: LoopMode;
|
||||
isFullscreen: boolean;
|
||||
author: User;
|
||||
createdAt: string | Date;
|
||||
desc: string;
|
||||
// 视频专用
|
||||
videoRef?: RefObject<HTMLVideoElement | null>;
|
||||
// 图文专用
|
||||
currentIndex?: number;
|
||||
totalSegments?: number;
|
||||
segmentProgress?: number;
|
||||
musicUrl?: string | null;
|
||||
audioRef?: RefObject<HTMLAudioElement | null>;
|
||||
// 回调
|
||||
onTogglePlay: () => void;
|
||||
onSeek: (ratio: number) => void;
|
||||
onVolumeChange: (volume: number) => void;
|
||||
onRateChange: (rate: number) => void;
|
||||
onRotationChange: (rotation: number) => void;
|
||||
onObjectFitChange: (fit: ObjectFit) => void;
|
||||
onLoopModeChange: (mode: LoopMode) => void;
|
||||
onDownload: () => void;
|
||||
onToggleFullscreen: () => void;
|
||||
}
|
||||
|
||||
export function MediaControls({
|
||||
isVideo,
|
||||
isPlaying,
|
||||
progress,
|
||||
volume,
|
||||
rate,
|
||||
rotation,
|
||||
objectFit,
|
||||
loopMode,
|
||||
isFullscreen,
|
||||
author,
|
||||
createdAt,
|
||||
desc,
|
||||
videoRef,
|
||||
currentIndex = 0,
|
||||
totalSegments = 0,
|
||||
segmentProgress = 0,
|
||||
musicUrl,
|
||||
audioRef,
|
||||
onTogglePlay,
|
||||
onSeek,
|
||||
onVolumeChange,
|
||||
onRateChange,
|
||||
onRotationChange,
|
||||
onObjectFitChange,
|
||||
onLoopModeChange,
|
||||
onDownload,
|
||||
onToggleFullscreen,
|
||||
}: MediaControlsProps) {
|
||||
return (
|
||||
<div className="absolute left-0 right-0 bottom-0 px-3 pb-4 pt-2 bg-gradient-to-b from-black/0 via-black/45 to-black/65 flex flex-col gap-2.5">
|
||||
{/* 描述行 */}
|
||||
<div className="pointer-events-none flex items-center gap-2.5 mb-1">
|
||||
<img src={author.avatar_url!} alt="" className="w-8 h-8 rounded-full" />
|
||||
<span className="text-[15px] leading-tight text-white/95 drop-shadow">{author.nickname}</span>
|
||||
<span className="text-[13px] leading-tight text-white/95 drop-shadow">·</span>
|
||||
<span
|
||||
className="text-[11px] leading-tight text-white/95 drop-shadow"
|
||||
title={new Date(createdAt).toLocaleString()}
|
||||
>
|
||||
{formatRelativeTime(createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{desc ? (
|
||||
<div className="pointer-events-none">
|
||||
<p className="text-[13px] leading-tight text-white/95 max-h-[3.9em] overflow-hidden [display:-webkit-box] [-webkit-line-clamp:3] [-webkit-box-orient:vertical] drop-shadow">
|
||||
{desc}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* 进度条：图文=分段；视频=单段 */}
|
||||
{!isVideo && totalSegments > 0 ? (
|
||||
<SegmentedProgressBar
|
||||
totalSegments={totalSegments}
|
||||
currentIndex={currentIndex}
|
||||
segmentProgress={segmentProgress}
|
||||
onSeek={onSeek}
|
||||
/>
|
||||
) : (
|
||||
<ProgressBar progress={progress} onSeek={onSeek} />
|
||||
)}
|
||||
|
||||
{/* 控制按钮行 - 响应式布局 */}
|
||||
<div className="flex items-center justify-between gap-1.5 sm:gap-2.5">
|
||||
{/* 左侧：播放控制 + 时间/进度 */}
|
||||
<div className="inline-flex items-center gap-1.5 sm:gap-2 min-w-0">
|
||||
<button
|
||||
className="w-[34px] h-[34px] shrink-0 inline-flex items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
|
||||
onClick={onTogglePlay}
|
||||
aria-label={isPlaying ? "暂停" : "播放"}
|
||||
>
|
||||
{isPlaying ? <Pause size={18} /> : <Play size={18} />}
|
||||
</button>
|
||||
|
||||
{/* 播放进度显示 - 所有设备都显示 */}
|
||||
<div className="text-[13px] text-white/90 font-mono min-w-[70px] sm:min-w-[80px]">
|
||||
{isVideo ? (
|
||||
(() => {
|
||||
const v = videoRef?.current;
|
||||
const current = v?.currentTime ?? 0;
|
||||
const total = v?.duration ?? 0;
|
||||
return total > 0 ? `${formatTime(current)} / ${formatTime(total)}` : "--:-- / --:--";
|
||||
})()
|
||||
) : (
|
||||
`${currentIndex + 1} / ${totalSegments}`
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 倍速 - 中等屏幕以上显示，仅视频 */}
|
||||
{isVideo && (
|
||||
<button
|
||||
className="hidden md:block h-[30px] px-[10px] rounded-full text-[12px] bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer shrink-0"
|
||||
onClick={() => {
|
||||
const steps = [1, 1.25, 1.5, 2, 0.75, 0.5];
|
||||
const i = steps.indexOf(rate);
|
||||
const next = steps[(i + 1) % steps.length];
|
||||
onRateChange(next);
|
||||
}}
|
||||
aria-label="切换倍速"
|
||||
>
|
||||
{rate}x
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 中间：音量控制 - 中等屏幕以上显示 */}
|
||||
<div className="hidden md:inline-flex items-center gap-2 shrink-0">
|
||||
{/* 旋转按钮 - 小屏幕以上显示 */}
|
||||
<button
|
||||
className="hidden sm:inline-flex w-[34px] h-[34px] items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
|
||||
onClick={() => onRotationChange((rotation + 270) % 360)}
|
||||
aria-label="向左旋转 90 度"
|
||||
title="向左旋转 90 度"
|
||||
>
|
||||
<RotateCcw size={18} />
|
||||
</button>
|
||||
<button
|
||||
className="w-[34px] h-[34px] inline-flex items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
|
||||
onClick={() => onVolumeChange(volume > 0 ? 0 : 1)}
|
||||
aria-label={volume > 0 ? "静音" : "取消静音"}
|
||||
>
|
||||
{volume > 0 ? <Volume2 size={18} /> : <VolumeX size={18} />}
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={volume}
|
||||
onChange={(e) => onVolumeChange(parseFloat(e.target.value))}
|
||||
className="w-20 lg:w-28 accent-white cursor-pointer"
|
||||
aria-label="音量"
|
||||
/>
|
||||
<button
|
||||
className="hidden sm:inline-flex w-[34px] h-[34px] items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
|
||||
onClick={() => onRotationChange((rotation + 90) % 360)}
|
||||
aria-label="向右旋转 90 度"
|
||||
title="向右旋转 90 度"
|
||||
>
|
||||
<RotateCw size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 右侧：功能按钮组 */}
|
||||
<div className="inline-flex items-center gap-1 sm:gap-1.5 lg:gap-2 shrink-0">
|
||||
{/* 音量按钮 - 仅在小屏幕显示（中等屏幕以上有滑块） */}
|
||||
<button
|
||||
className="md:hidden w-[34px] h-[34px] inline-flex items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
|
||||
onClick={() => onVolumeChange(volume > 0 ? 0 : 1)}
|
||||
aria-label={volume > 0 ? "静音" : "取消静音"}
|
||||
>
|
||||
{volume > 0 ? <Volume2 size={18} /> : <VolumeX size={18} />}
|
||||
</button>
|
||||
|
||||
{/* 循环模式 - 中等屏幕以上显示 */}
|
||||
<button
|
||||
className="hidden md:inline-flex w-[34px] h-[34px] items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
|
||||
onClick={() => onLoopModeChange(loopMode === "loop" ? "sequential" : "loop")}
|
||||
aria-label={loopMode === "loop" ? "循环播放" : "顺序播放"}
|
||||
title={loopMode === "loop" ? "循环播放" : "顺序播放"}
|
||||
>
|
||||
{loopMode === "loop" ? <Repeat1 size={18} /> : <ArrowDownUp size={18} />}
|
||||
</button>
|
||||
|
||||
{/* 适配模式 - 小屏幕以上显示 */}
|
||||
<button
|
||||
className="hidden sm:inline-flex w-[34px] h-[34px] items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
|
||||
onClick={() => onObjectFitChange(objectFit === "contain" ? "cover" : "contain")}
|
||||
aria-label={objectFit === "contain" ? "切换到填充模式" : "切换到适应模式"}
|
||||
title={objectFit === "contain" ? "切换到填充模式" : "切换到适应模式"}
|
||||
>
|
||||
{objectFit === "contain" ? <Maximize2 size={18} /> : <Minimize size={18} />}
|
||||
</button>
|
||||
|
||||
{/* 下载 - 中等屏幕以上显示 */}
|
||||
<button
|
||||
className="hidden md:inline-flex w-[34px] h-[34px] items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
|
||||
onClick={onDownload}
|
||||
aria-label={isVideo ? "下载视频" : "下载当前图片"}
|
||||
title={isVideo ? "下载视频" : "下载当前图片"}
|
||||
>
|
||||
<Download size={18} />
|
||||
</button>
|
||||
|
||||
{/* 全屏 - 所有设备都显示 */}
|
||||
<button
|
||||
className="w-[34px] h-[34px] inline-flex items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
|
||||
onClick={onToggleFullscreen}
|
||||
aria-label="切换全屏"
|
||||
>
|
||||
{isFullscreen ? <Minimize2 size={18} /> : <Maximize size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 图文 BGM（隐藏控件，仅用于播放） */}
|
||||
{!isVideo && musicUrl ? <audio ref={audioRef} src={musicUrl} loop preload="metadata" /> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
60
app/aweme/[awemeId]/components/NavigationButtons.tsx
Normal file
60
app/aweme/[awemeId]/components/NavigationButtons.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import { ChevronDown, ChevronUp, MessageSquareText } from "lucide-react";
|
||||
import type { Neighbors } from "../types";
|
||||
|
||||
interface NavigationButtonsProps {
|
||||
neighbors: Neighbors;
|
||||
commentsCount: number;
|
||||
onNavigatePrev: () => void;
|
||||
onNavigateNext: () => void;
|
||||
onToggleComments: () => void;
|
||||
}
|
||||
|
||||
export function NavigationButtons({
|
||||
neighbors,
|
||||
commentsCount,
|
||||
onNavigatePrev,
|
||||
onNavigateNext,
|
||||
onToggleComments,
|
||||
}: NavigationButtonsProps) {
|
||||
return (
|
||||
<>
|
||||
{/* 评论开关（右侧中部） */}
|
||||
<button
|
||||
className="z-10 grid place-items-center w-[54px] h-[54px] rounded-full absolute right-4 top-2/3 -translate-y-1/2 cursor-pointer"
|
||||
onClick={onToggleComments}
|
||||
aria-label="切换评论"
|
||||
>
|
||||
<div className="grid place-items-center gap-1 drop-shadow-lg">
|
||||
<MessageSquareText size={40} className="" />
|
||||
|
||||
{commentsCount > 0 ? <span className="text-[18px] font-semibold text-white/90 drop-shadow">{commentsCount}</span> :
|
||||
<span className="text-[12px] font-semibold text-white/90 drop-shadow">暂无评论</span>
|
||||
}
|
||||
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* 上下切换按钮（右侧胶囊形状） */}
|
||||
<div className="absolute right-4 top-6/11 -translate-y-1/2 z-10">
|
||||
<div className="flex flex-col rounded-full bg-black/40 backdrop-blur-sm border border-white/20 overflow-hidden">
|
||||
<button
|
||||
className="w-[44px] h-[44px] inline-flex items-center justify-center text-white disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed hover:bg-white/10 transition-colors"
|
||||
onClick={onNavigatePrev}
|
||||
disabled={!neighbors.prev}
|
||||
aria-label="上一条"
|
||||
>
|
||||
<ChevronUp size={24} />
|
||||
</button>
|
||||
<button
|
||||
className="w-[44px] h-[44px] inline-flex items-center justify-center text-white disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed hover:bg-white/10 transition-colors border-t border-white/20"
|
||||
onClick={onNavigateNext}
|
||||
disabled={!neighbors.next}
|
||||
aria-label="下一条"
|
||||
>
|
||||
<ChevronDown size={24} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
18
app/aweme/[awemeId]/components/ProgressBar.tsx
Normal file
18
app/aweme/[awemeId]/components/ProgressBar.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
interface ProgressBarProps {
|
||||
progress: number;
|
||||
onSeek: (ratio: number) => void;
|
||||
}
|
||||
|
||||
export function ProgressBar({ progress, onSeek }: ProgressBarProps) {
|
||||
return (
|
||||
<div
|
||||
className="relative h-1.5 rounded-full bg-white/25 overflow-hidden cursor-pointer"
|
||||
onClick={(e) => {
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
onSeek((e.clientX - rect.left) / rect.width);
|
||||
}}
|
||||
>
|
||||
<div className="origin-left h-full bg-white" style={{ transform: `scaleX(${progress || 0})` }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
app/aweme/[awemeId]/components/SegmentedProgressBar.tsx
Normal file
40
app/aweme/[awemeId]/components/SegmentedProgressBar.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
interface SegmentedProgressBarProps {
|
||||
totalSegments: number;
|
||||
currentIndex: number;
|
||||
segmentProgress: number;
|
||||
onSeek: (ratio: number) => void;
|
||||
}
|
||||
|
||||
export function SegmentedProgressBar({
|
||||
totalSegments,
|
||||
currentIndex,
|
||||
segmentProgress,
|
||||
onSeek,
|
||||
}: SegmentedProgressBarProps) {
|
||||
return (
|
||||
<div
|
||||
className="relative h-1.5 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
onSeek((e.clientX - rect.left) / rect.width);
|
||||
}}
|
||||
>
|
||||
<div className="flex gap-1.5 h-full">
|
||||
{Array.from({ length: totalSegments }).map((_, i) => {
|
||||
let fill = 0;
|
||||
if (i < currentIndex) fill = 1;
|
||||
else if (i === currentIndex) fill = segmentProgress;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
aria-label={`第 ${i + 1} 段`}
|
||||
className="relative flex-1 h-full rounded-full bg-white/25 overflow-hidden"
|
||||
>
|
||||
<div className="h-full origin-left bg-white" style={{ transform: `scaleX(${fill})` }} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
41
app/aweme/[awemeId]/components/VideoPlayer.tsx
Normal file
41
app/aweme/[awemeId]/components/VideoPlayer.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { forwardRef } from "react";
|
||||
import type { ObjectFit } from "../types";
|
||||
|
||||
interface VideoPlayerProps {
|
||||
videoUrl: string;
|
||||
rotation: number;
|
||||
objectFit: ObjectFit;
|
||||
loop: boolean;
|
||||
onTogglePlay: () => void;
|
||||
}
|
||||
|
||||
export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
|
||||
({ videoUrl, rotation, objectFit, loop, onTogglePlay }, ref) => {
|
||||
return (
|
||||
<video
|
||||
ref={ref}
|
||||
src={videoUrl}
|
||||
className={[
|
||||
// 旋转 0/180：充满容器盒子；
|
||||
// 旋转 90/270：用中心定位 + 100vh/100vw，保证铺满全屏
|
||||
rotation % 180 === 0
|
||||
? "absolute inset-0 h-full w-full bg-black/70 cursor-pointer"
|
||||
: "absolute top-1/2 left-1/2 h-[100vw] w-[100vh] bg-black/70 cursor-pointer",
|
||||
].join(" ")}
|
||||
style={{
|
||||
transform:
|
||||
rotation % 180 === 0
|
||||
? `rotate(${rotation}deg)`
|
||||
: `translate(-50%, -50%) rotate(${rotation}deg)`,
|
||||
transformOrigin: "center center",
|
||||
objectFit,
|
||||
}}
|
||||
playsInline
|
||||
loop={loop}
|
||||
onClick={onTogglePlay}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
VideoPlayer.displayName = "VideoPlayer";
|
||||
12
app/aweme/[awemeId]/components/index.ts
Normal file
12
app/aweme/[awemeId]/components/index.ts
Normal file
@ -0,0 +1,12 @@
|
||||
// 组件导出
|
||||
export { BackgroundCanvas } from "./BackgroundCanvas";
|
||||
export { CommentPanel } from "./CommentPanel";
|
||||
export { CommentList } from "./CommentList";
|
||||
export { CommentText } from "./CommentText";
|
||||
export { ImageCarousel } from "./ImageCarousel";
|
||||
export { ImageNavigationButtons } from "./ImageNavigationButtons";
|
||||
export { MediaControls } from "./MediaControls";
|
||||
export { NavigationButtons } from "./NavigationButtons";
|
||||
export { ProgressBar } from "./ProgressBar";
|
||||
export { SegmentedProgressBar } from "./SegmentedProgressBar";
|
||||
export { VideoPlayer } from "./VideoPlayer";
|
||||
7
app/aweme/[awemeId]/hooks/index.ts
Normal file
7
app/aweme/[awemeId]/hooks/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
// Hooks 导出
|
||||
export { useBackgroundCanvas } from "./useBackgroundCanvas";
|
||||
export { useCommentState } from "./useCommentState";
|
||||
export { useImageCarousel } from "./useImageCarousel";
|
||||
export { useNavigation } from "./useNavigation";
|
||||
export { usePlayerState } from "./usePlayerState";
|
||||
export { useVideoPlayer } from "./useVideoPlayer";
|
||||
95
app/aweme/[awemeId]/hooks/useBackgroundCanvas.ts
Normal file
95
app/aweme/[awemeId]/hooks/useBackgroundCanvas.ts
Normal file
@ -0,0 +1,95 @@
|
||||
import { useEffect } from "react";
|
||||
import type { RefObject } from "react";
|
||||
|
||||
interface UseBackgroundCanvasProps {
|
||||
isVideo: boolean;
|
||||
idx: number;
|
||||
videoRef: RefObject<HTMLVideoElement | null>;
|
||||
scrollerRef: RefObject<HTMLDivElement | null>;
|
||||
backgroundCanvasRef: RefObject<HTMLCanvasElement | null>;
|
||||
}
|
||||
|
||||
export function useBackgroundCanvas({
|
||||
isVideo,
|
||||
idx,
|
||||
videoRef,
|
||||
scrollerRef,
|
||||
backgroundCanvasRef,
|
||||
}: UseBackgroundCanvasProps) {
|
||||
useEffect(() => {
|
||||
const canvas = backgroundCanvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const updateCanvasSize = () => {
|
||||
canvas.width = Math.floor(window.innerWidth / 10);
|
||||
canvas.height = Math.floor(window.innerHeight / 10);
|
||||
};
|
||||
updateCanvasSize();
|
||||
|
||||
let resizeTimeout: NodeJS.Timeout;
|
||||
const debouncedResize = () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(updateCanvasSize, 300);
|
||||
};
|
||||
window.addEventListener("resize", debouncedResize);
|
||||
|
||||
const drawMediaToCanvas = () => {
|
||||
if (!ctx) return;
|
||||
|
||||
let sourceElement: HTMLVideoElement | HTMLImageElement | null = null;
|
||||
|
||||
if (isVideo) {
|
||||
sourceElement = videoRef.current;
|
||||
} else {
|
||||
const scroller = scrollerRef.current;
|
||||
if (scroller) {
|
||||
const currentImgContainer = scroller.children[idx] as HTMLElement;
|
||||
if (currentImgContainer) {
|
||||
sourceElement = currentImgContainer.querySelector("img");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!sourceElement || (sourceElement instanceof HTMLVideoElement && sourceElement.readyState < 2)) return;
|
||||
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const sourceWidth =
|
||||
sourceElement instanceof HTMLVideoElement ? sourceElement.videoWidth : sourceElement.naturalWidth;
|
||||
const sourceHeight =
|
||||
sourceElement instanceof HTMLVideoElement ? sourceElement.videoHeight : sourceElement.naturalHeight;
|
||||
|
||||
if (!sourceWidth || !sourceHeight) return;
|
||||
|
||||
const canvasRatio = canvasWidth / canvasHeight;
|
||||
const sourceRatio = sourceWidth / sourceHeight;
|
||||
|
||||
let drawWidth: number, drawHeight: number, offsetX: number, offsetY: number;
|
||||
|
||||
if (canvasRatio > sourceRatio) {
|
||||
drawWidth = canvasWidth;
|
||||
drawHeight = canvasWidth / sourceRatio;
|
||||
offsetX = 0;
|
||||
offsetY = (canvasHeight - drawHeight) / 2;
|
||||
} else {
|
||||
drawHeight = canvasHeight;
|
||||
drawWidth = canvasHeight * sourceRatio;
|
||||
offsetX = (canvasWidth - drawWidth) / 2;
|
||||
offsetY = 0;
|
||||
}
|
||||
|
||||
ctx.drawImage(sourceElement, offsetX, offsetY, drawWidth, drawHeight);
|
||||
};
|
||||
|
||||
const intervalId = setInterval(drawMediaToCanvas, 20);
|
||||
|
||||
return () => {
|
||||
clearInterval(intervalId);
|
||||
window.removeEventListener("resize", debouncedResize);
|
||||
clearTimeout(resizeTimeout);
|
||||
};
|
||||
}, [isVideo, idx, videoRef, scrollerRef, backgroundCanvasRef]);
|
||||
}
|
||||
30
app/aweme/[awemeId]/hooks/useCommentState.ts
Normal file
30
app/aweme/[awemeId]/hooks/useCommentState.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { getStringFromStorage, saveToStorage } from "../utils";
|
||||
|
||||
export function useCommentState() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
// 从 localStorage 恢复评论区状态
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
const saved = getStringFromStorage("aweme_player_comments_open", "false");
|
||||
if (saved === "true") {
|
||||
setOpen(true);
|
||||
}
|
||||
// 短暂延迟后标记为已挂载，启用动画
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
setMounted(true);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 持久化评论区状态
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
saveToStorage("aweme_player_comments_open", open.toString());
|
||||
}, [open]);
|
||||
|
||||
return { open, setOpen, mounted };
|
||||
}
|
||||
113
app/aweme/[awemeId]/hooks/useImageCarousel.ts
Normal file
113
app/aweme/[awemeId]/hooks/useImageCarousel.ts
Normal file
@ -0,0 +1,113 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { RefObject } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import type { ImageData, LoopMode, Neighbors } from "../types";
|
||||
|
||||
const SEGMENT_MS = 5000;
|
||||
|
||||
interface UseImageCarouselProps {
|
||||
images: ImageData["images"];
|
||||
isPlaying: boolean;
|
||||
loopMode: LoopMode;
|
||||
neighbors: Neighbors;
|
||||
volume: number;
|
||||
audioRef: RefObject<HTMLAudioElement | null>;
|
||||
scrollerRef: RefObject<HTMLDivElement | null>;
|
||||
setProgress: (progress: number) => void;
|
||||
}
|
||||
|
||||
export function useImageCarousel({
|
||||
images,
|
||||
isPlaying,
|
||||
loopMode,
|
||||
neighbors,
|
||||
volume,
|
||||
audioRef,
|
||||
scrollerRef,
|
||||
setProgress,
|
||||
}: UseImageCarouselProps) {
|
||||
const router = useRouter();
|
||||
const [idx, setIdx] = useState(0);
|
||||
const [segProgress, setSegProgress] = useState(0);
|
||||
|
||||
const segStartRef = useRef<number | null>(null);
|
||||
const idxRef = useRef<number>(0);
|
||||
const rafRef = useRef<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
idxRef.current = idx;
|
||||
}, [idx]);
|
||||
|
||||
// BGM 控制
|
||||
useEffect(() => {
|
||||
const el = audioRef.current;
|
||||
if (!el) return;
|
||||
el.volume = volume;
|
||||
if (isPlaying) {
|
||||
el.play().catch(() => {});
|
||||
} else {
|
||||
el.pause();
|
||||
}
|
||||
}, [audioRef, isPlaying, volume]);
|
||||
|
||||
// 自动切页
|
||||
useEffect(() => {
|
||||
if (!images?.length) return;
|
||||
|
||||
if (segStartRef.current == null) segStartRef.current = performance.now();
|
||||
let lastTs = performance.now();
|
||||
|
||||
const tick = (ts: number) => {
|
||||
if (!images?.length) return;
|
||||
|
||||
if (!isPlaying) segStartRef.current! += ts - lastTs;
|
||||
lastTs = ts;
|
||||
|
||||
let start = segStartRef.current!;
|
||||
let localIdx = idxRef.current;
|
||||
|
||||
let elapsed = ts - start;
|
||||
while (elapsed >= SEGMENT_MS) {
|
||||
elapsed -= SEGMENT_MS;
|
||||
|
||||
if (localIdx >= images.length - 1) {
|
||||
if (loopMode === "sequential" && neighbors?.next) {
|
||||
router.push(`/aweme/${neighbors.next.aweme_id}`);
|
||||
return;
|
||||
}
|
||||
localIdx = 0;
|
||||
} else {
|
||||
localIdx = localIdx + 1;
|
||||
}
|
||||
}
|
||||
segStartRef.current = ts - elapsed;
|
||||
|
||||
if (localIdx !== idxRef.current) {
|
||||
idxRef.current = localIdx;
|
||||
setIdx(localIdx);
|
||||
const el = scrollerRef.current;
|
||||
if (el) el.scrollTo({ left: localIdx * el.clientWidth, behavior: "smooth" });
|
||||
}
|
||||
|
||||
const localSeg = Math.max(0, Math.min(1, elapsed / SEGMENT_MS));
|
||||
setSegProgress(localSeg);
|
||||
setProgress((localIdx + localSeg) / images.length);
|
||||
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
};
|
||||
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
return () => {
|
||||
if (rafRef.current) cancelAnimationFrame(rafRef.current);
|
||||
rafRef.current = null;
|
||||
};
|
||||
}, [images?.length, isPlaying, loopMode, neighbors?.next, router, scrollerRef, setProgress]);
|
||||
|
||||
return {
|
||||
idx,
|
||||
setIdx,
|
||||
segProgress,
|
||||
segStartRef,
|
||||
idxRef,
|
||||
};
|
||||
}
|
||||
138
app/aweme/[awemeId]/hooks/useNavigation.ts
Normal file
138
app/aweme/[awemeId]/hooks/useNavigation.ts
Normal file
@ -0,0 +1,138 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import type { RefObject } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import type { Neighbors } from "../types";
|
||||
|
||||
interface UseNavigationProps {
|
||||
neighbors: Neighbors;
|
||||
isVideo: boolean;
|
||||
mediaContainerRef: RefObject<HTMLDivElement | null>;
|
||||
videoRef?: RefObject<HTMLVideoElement | null>;
|
||||
prevImg?: () => void;
|
||||
nextImg?: () => void;
|
||||
togglePlay: () => void;
|
||||
}
|
||||
|
||||
export function useNavigation({
|
||||
neighbors,
|
||||
isVideo,
|
||||
mediaContainerRef,
|
||||
videoRef,
|
||||
prevImg,
|
||||
nextImg,
|
||||
togglePlay,
|
||||
}: UseNavigationProps) {
|
||||
const router = useRouter();
|
||||
const wheelCooldownRef = useRef<number>(0);
|
||||
|
||||
// 预取路由
|
||||
useEffect(() => {
|
||||
if (!neighbors) return;
|
||||
if (neighbors.next) router.prefetch(`/aweme/${neighbors.next.aweme_id}`);
|
||||
if (neighbors.prev) router.prefetch(`/aweme/${neighbors.prev.aweme_id}`);
|
||||
}, [neighbors, router]);
|
||||
|
||||
// 鼠标滚轮切换
|
||||
useEffect(() => {
|
||||
const el = mediaContainerRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const onWheel = (e: WheelEvent) => {
|
||||
if (e.ctrlKey) return;
|
||||
const now = performance.now();
|
||||
if (now - wheelCooldownRef.current < 700) return;
|
||||
const dy = e.deltaY;
|
||||
if (Math.abs(dy) < 40) return;
|
||||
|
||||
if ((dy > 0 && neighbors?.next) || (dy < 0 && neighbors?.prev)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
if (dy > 0 && neighbors?.next) {
|
||||
wheelCooldownRef.current = now;
|
||||
router.push(`/aweme/${neighbors.next.aweme_id}`);
|
||||
} else if (dy < 0 && neighbors?.prev) {
|
||||
wheelCooldownRef.current = now;
|
||||
router.push(`/aweme/${neighbors.prev.aweme_id}`);
|
||||
}
|
||||
};
|
||||
|
||||
el.addEventListener("wheel", onWheel, { passive: false });
|
||||
return () => el.removeEventListener("wheel", onWheel as any);
|
||||
}, [neighbors, mediaContainerRef, router]);
|
||||
|
||||
// 键盘快捷键
|
||||
useEffect(() => {
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
|
||||
return;
|
||||
}
|
||||
|
||||
const key = e.key.toLowerCase();
|
||||
|
||||
if (key === "arrowup" || key === "w") {
|
||||
e.preventDefault();
|
||||
const now = performance.now();
|
||||
if (now - wheelCooldownRef.current < 700) return;
|
||||
if (neighbors?.prev) {
|
||||
wheelCooldownRef.current = now;
|
||||
router.push(`/aweme/${neighbors.prev.aweme_id}`);
|
||||
}
|
||||
} else if (key === "arrowdown" || key === "s") {
|
||||
e.preventDefault();
|
||||
const now = performance.now();
|
||||
if (now - wheelCooldownRef.current < 700) return;
|
||||
if (neighbors?.next) {
|
||||
wheelCooldownRef.current = now;
|
||||
router.push(`/aweme/${neighbors.next.aweme_id}`);
|
||||
}
|
||||
} else if (key === "arrowleft" || key === "a") {
|
||||
e.preventDefault();
|
||||
if (isVideo) {
|
||||
const v = videoRef?.current;
|
||||
if (v && v.duration) {
|
||||
v.currentTime = Math.max(0, v.currentTime - 5);
|
||||
}
|
||||
} else {
|
||||
prevImg?.();
|
||||
}
|
||||
} else if (key === "arrowright" || key === "d") {
|
||||
e.preventDefault();
|
||||
if (isVideo) {
|
||||
const v = videoRef?.current;
|
||||
if (v && v.duration) {
|
||||
v.currentTime = Math.min(v.duration, v.currentTime + 5);
|
||||
}
|
||||
} else {
|
||||
nextImg?.();
|
||||
}
|
||||
} else if (key === " ") {
|
||||
e.preventDefault();
|
||||
togglePlay();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
return () => window.removeEventListener("keydown", onKeyDown);
|
||||
}, [isVideo, neighbors, router, videoRef, prevImg, nextImg, togglePlay]);
|
||||
|
||||
// 浏览器返回事件
|
||||
useEffect(() => {
|
||||
window.history.pushState({ interceptBack: true }, "");
|
||||
|
||||
const handlePopState = () => {
|
||||
window.close();
|
||||
setTimeout(() => {
|
||||
if (!document.hidden) {
|
||||
router.push("/");
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
window.addEventListener("popstate", handlePopState);
|
||||
return () => {
|
||||
window.removeEventListener("popstate", handlePopState);
|
||||
};
|
||||
}, [router]);
|
||||
}
|
||||
61
app/aweme/[awemeId]/hooks/usePlayerState.ts
Normal file
61
app/aweme/[awemeId]/hooks/usePlayerState.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import type { LoopMode, ObjectFit } from "../types";
|
||||
import { getNumberFromStorage, getStringFromStorage, saveToStorage } from "../utils";
|
||||
|
||||
export function usePlayerState() {
|
||||
const [isPlaying, setIsPlaying] = useState(true);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [volume, setVolume] = useState(() => getNumberFromStorage("aweme_player_volume", 1));
|
||||
const [rate, setRate] = useState(() => getNumberFromStorage("aweme_player_rate", 1));
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [rotation, setRotation] = useState(0);
|
||||
const [progressRestored, setProgressRestored] = useState(false);
|
||||
const [objectFit, setObjectFit] = useState<ObjectFit>("contain");
|
||||
const [loopMode, setLoopMode] = useState<LoopMode>(() => {
|
||||
const saved = getStringFromStorage("aweme_player_loop_mode", "loop");
|
||||
return saved === "sequential" ? "sequential" : "loop";
|
||||
});
|
||||
|
||||
// 持久化音量
|
||||
useEffect(() => {
|
||||
saveToStorage("aweme_player_volume", volume);
|
||||
}, [volume]);
|
||||
|
||||
// 持久化倍速
|
||||
useEffect(() => {
|
||||
saveToStorage("aweme_player_rate", rate);
|
||||
}, [rate]);
|
||||
|
||||
// 持久化循环模式
|
||||
useEffect(() => {
|
||||
saveToStorage("aweme_player_loop_mode", loopMode);
|
||||
}, [loopMode]);
|
||||
|
||||
// 监听全屏状态
|
||||
useEffect(() => {
|
||||
const onFsChange = () => setIsFullscreen(!!document.fullscreenElement);
|
||||
document.addEventListener("fullscreenchange", onFsChange);
|
||||
return () => document.removeEventListener("fullscreenchange", onFsChange);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
isPlaying,
|
||||
setIsPlaying,
|
||||
isFullscreen,
|
||||
setIsFullscreen,
|
||||
volume,
|
||||
setVolume,
|
||||
rate,
|
||||
setRate,
|
||||
progress,
|
||||
setProgress,
|
||||
rotation,
|
||||
setRotation,
|
||||
progressRestored,
|
||||
setProgressRestored,
|
||||
objectFit,
|
||||
setObjectFit,
|
||||
loopMode,
|
||||
setLoopMode,
|
||||
};
|
||||
}
|
||||
171
app/aweme/[awemeId]/hooks/useVideoPlayer.ts
Normal file
171
app/aweme/[awemeId]/hooks/useVideoPlayer.ts
Normal file
@ -0,0 +1,171 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import type { RefObject } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import type { LoopMode, Neighbors } from "../types";
|
||||
|
||||
interface UseVideoPlayerProps {
|
||||
awemeId: string;
|
||||
videoRef: RefObject<HTMLVideoElement | null>;
|
||||
volume: number;
|
||||
rate: number;
|
||||
loopMode: LoopMode;
|
||||
neighbors: Neighbors;
|
||||
progressRestored: boolean;
|
||||
setIsPlaying: (playing: boolean) => void;
|
||||
setProgress: (progress: number) => void;
|
||||
setProgressRestored: (restored: boolean) => void;
|
||||
}
|
||||
|
||||
export function useVideoPlayer({
|
||||
awemeId,
|
||||
videoRef,
|
||||
volume,
|
||||
rate,
|
||||
loopMode,
|
||||
neighbors,
|
||||
progressRestored,
|
||||
setIsPlaying,
|
||||
setProgress,
|
||||
setProgressRestored,
|
||||
}: UseVideoPlayerProps) {
|
||||
const router = useRouter();
|
||||
|
||||
// 恢复播放进度
|
||||
useEffect(() => {
|
||||
if (progressRestored) return;
|
||||
const v = videoRef.current;
|
||||
if (!v) return;
|
||||
|
||||
const onLoadedMetadata = () => {
|
||||
if (progressRestored) return;
|
||||
|
||||
try {
|
||||
const key = `aweme_progress_${awemeId}`;
|
||||
const saved = localStorage.getItem(key);
|
||||
if (!saved) {
|
||||
setProgressRestored(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const { time, timestamp } = JSON.parse(saved);
|
||||
const now = Date.now();
|
||||
const fiveMinutes = 5 * 60 * 1000;
|
||||
|
||||
if (now - timestamp < fiveMinutes && time > 1 && time < v.duration - 1) {
|
||||
v.currentTime = time;
|
||||
console.log(`恢复播放进度: ${Math.round(time)}s`);
|
||||
} else if (now - timestamp >= fiveMinutes) {
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("恢复播放进度失败", e);
|
||||
}
|
||||
|
||||
setProgressRestored(true);
|
||||
};
|
||||
|
||||
if (v.readyState >= 1) {
|
||||
onLoadedMetadata();
|
||||
} else {
|
||||
v.addEventListener("loadedmetadata", onLoadedMetadata, { once: true });
|
||||
return () => v.removeEventListener("loadedmetadata", onLoadedMetadata);
|
||||
}
|
||||
}, [awemeId, progressRestored, videoRef, setProgressRestored]);
|
||||
|
||||
// 保存播放进度
|
||||
useEffect(() => {
|
||||
const v = videoRef.current;
|
||||
if (!v) return;
|
||||
|
||||
const saveProgress = () => {
|
||||
if (!v.duration || Number.isNaN(v.duration) || v.currentTime < 1) return;
|
||||
|
||||
try {
|
||||
const key = `aweme_progress_${awemeId}`;
|
||||
const value = JSON.stringify({
|
||||
time: v.currentTime,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
localStorage.setItem(key, value);
|
||||
} catch (e) {
|
||||
console.error("保存播放进度失败", e);
|
||||
}
|
||||
};
|
||||
|
||||
const interval = setInterval(saveProgress, 2000);
|
||||
const onBeforeUnload = () => saveProgress();
|
||||
window.addEventListener("beforeunload", onBeforeUnload);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
window.removeEventListener("beforeunload", onBeforeUnload);
|
||||
saveProgress();
|
||||
};
|
||||
}, [awemeId, videoRef]);
|
||||
|
||||
// 监听播放状态和进度
|
||||
useEffect(() => {
|
||||
const v = videoRef.current;
|
||||
if (!v) return;
|
||||
|
||||
const onTime = () => {
|
||||
if (!v.duration || Number.isNaN(v.duration)) return;
|
||||
setProgress(v.currentTime / v.duration);
|
||||
};
|
||||
const onPlay = () => setIsPlaying(true);
|
||||
const onPause = () => setIsPlaying(false);
|
||||
const onEnded = () => {
|
||||
if (loopMode === "sequential" && neighbors?.next) {
|
||||
router.push(`/aweme/${neighbors.next.aweme_id}`);
|
||||
}
|
||||
};
|
||||
|
||||
v.addEventListener("timeupdate", onTime);
|
||||
v.addEventListener("loadedmetadata", onTime);
|
||||
v.addEventListener("play", onPlay);
|
||||
v.addEventListener("pause", onPause);
|
||||
v.addEventListener("ended", onEnded);
|
||||
|
||||
return () => {
|
||||
v.removeEventListener("timeupdate", onTime);
|
||||
v.removeEventListener("loadedmetadata", onTime);
|
||||
v.removeEventListener("play", onPlay);
|
||||
v.removeEventListener("pause", onPause);
|
||||
v.removeEventListener("ended", onEnded);
|
||||
};
|
||||
}, [loopMode, neighbors?.next, router, videoRef, setIsPlaying, setProgress]);
|
||||
|
||||
// 自动播放检测
|
||||
useEffect(() => {
|
||||
const v = videoRef.current;
|
||||
if (!v) return;
|
||||
|
||||
const checkAutoplay = async () => {
|
||||
try {
|
||||
await v.play();
|
||||
setIsPlaying(true);
|
||||
} catch (error) {
|
||||
console.log("自动播放被阻止，需要用户交互");
|
||||
setIsPlaying(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (v.readyState >= 1) {
|
||||
checkAutoplay();
|
||||
} else {
|
||||
v.addEventListener("loadedmetadata", checkAutoplay, { once: true });
|
||||
return () => v.removeEventListener("loadedmetadata", checkAutoplay);
|
||||
}
|
||||
}, [awemeId, videoRef, setIsPlaying]);
|
||||
|
||||
// 更新音量和倍速
|
||||
useEffect(() => {
|
||||
const v = videoRef.current;
|
||||
if (v) v.volume = volume;
|
||||
}, [volume, videoRef]);
|
||||
|
||||
useEffect(() => {
|
||||
const v = videoRef.current;
|
||||
if (v) v.playbackRate = rate;
|
||||
}, [rate, videoRef]);
|
||||
}
|
||||
43
app/aweme/[awemeId]/types.ts
Normal file
43
app/aweme/[awemeId]/types.ts
Normal file
@ -0,0 +1,43 @@
|
||||
export type User = { nickname: string; avatar_url: string | null };
|
||||
|
||||
export type Comment = {
|
||||
cid: string;
|
||||
text: string;
|
||||
digg_count: number;
|
||||
created_at: string | Date;
|
||||
user: User;
|
||||
};
|
||||
|
||||
export type VideoData = {
|
||||
type: "video";
|
||||
aweme_id: string;
|
||||
desc: string;
|
||||
created_at: string | Date;
|
||||
duration_ms?: number | null;
|
||||
video_url: string;
|
||||
width?: number | null;
|
||||
height?: number | null;
|
||||
author: User;
|
||||
comments: Comment[];
|
||||
};
|
||||
|
||||
export type ImageData = {
|
||||
type: "image";
|
||||
aweme_id: string;
|
||||
desc: string;
|
||||
created_at: string | Date;
|
||||
images: { id: string; url: string; width?: number; height?: number }[];
|
||||
music_url?: string | null;
|
||||
author: User;
|
||||
comments: Comment[];
|
||||
};
|
||||
|
||||
export type AwemeData = VideoData | ImageData;
|
||||
|
||||
export type Neighbors = {
|
||||
prev: { aweme_id: string } | null;
|
||||
next: { aweme_id: string } | null;
|
||||
};
|
||||
|
||||
export type LoopMode = "loop" | "sequential";
|
||||
export type ObjectFit = "contain" | "cover";
|
||||
72
app/aweme/[awemeId]/utils.ts
Normal file
72
app/aweme/[awemeId]/utils.ts
Normal file
@ -0,0 +1,72 @@
|
||||
// 格式化相对时间
|
||||
export function formatRelativeTime(date: string | Date): string {
|
||||
const now = new Date();
|
||||
const target = new Date(date);
|
||||
const diffMs = now.getTime() - target.getTime();
|
||||
const diffSeconds = Math.floor(diffMs / 1000);
|
||||
const diffMinutes = Math.floor(diffSeconds / 60);
|
||||
const diffHours = Math.floor(diffMinutes / 60);
|
||||
const diffDays = Math.floor(diffHours / 24);
|
||||
const diffMonths = Math.floor(diffDays / 30);
|
||||
const diffYears = Math.floor(diffDays / 365);
|
||||
|
||||
if (diffYears > 0) return `${diffYears}年前`;
|
||||
if (diffMonths > 0) return `${diffMonths}月前`;
|
||||
if (diffDays > 0) return `${diffDays}天前`;
|
||||
if (diffHours > 0) return `${diffHours}小时前`;
|
||||
if (diffMinutes > 0) return `${diffMinutes}分钟前`;
|
||||
return "刚刚";
|
||||
}
|
||||
|
||||
// 格式化时间显示 (mm:ss)
|
||||
export function formatTime(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
// 处理评论文本中的表情占位符
|
||||
export function parseCommentText(text: string): (string | { type: "emoji"; name: string })[] {
|
||||
const parts: (string | { type: "emoji"; name: string })[] = [];
|
||||
const regex = /\[([^\]]+)\]/g;
|
||||
let lastIndex = 0;
|
||||
let match: RegExpExecArray | null;
|
||||
|
||||
while ((match = regex.exec(text)) !== null) {
|
||||
// 添加表情前的文本
|
||||
if (match.index > lastIndex) {
|
||||
parts.push(text.slice(lastIndex, match.index));
|
||||
}
|
||||
// 添加表情
|
||||
parts.push({ type: "emoji", name: match[1] });
|
||||
lastIndex = regex.lastIndex;
|
||||
}
|
||||
|
||||
// 添加剩余文本
|
||||
if (lastIndex < text.length) {
|
||||
parts.push(text.slice(lastIndex));
|
||||
}
|
||||
|
||||
return parts;
|
||||
}
|
||||
|
||||
// 从 localStorage 获取数值
|
||||
export function getNumberFromStorage(key: string, defaultValue: number): number {
|
||||
if (typeof window === "undefined") return defaultValue;
|
||||
const saved = localStorage.getItem(key);
|
||||
if (!saved) return defaultValue;
|
||||
const parsed = parseFloat(saved);
|
||||
return Number.isNaN(parsed) ? defaultValue : parsed;
|
||||
}
|
||||
|
||||
// 从 localStorage 获取字符串
|
||||
export function getStringFromStorage(key: string, defaultValue: string): string {
|
||||
if (typeof window === "undefined") return defaultValue;
|
||||
return localStorage.getItem(key) || defaultValue;
|
||||
}
|
||||
|
||||
// 保存到 localStorage
|
||||
export function saveToStorage(key: string, value: string | number): void {
|
||||
if (typeof window === "undefined") return;
|
||||
localStorage.setItem(key, value.toString());
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user