- {data.author.avatar_url ? (
- // eslint-disable-next-line @next/next/no-img-element
- 
- ) : null}
-
-
-
- {data.author.nickname}
-
- 发布于 {formatRelativeTime(data.created_at)}
-
- -
- {comments.map((c) => (
-
-
- - {c.user.avatar_url ? ( - // eslint-disable-next-line @next/next/no-img-element --
- ) : null} -
--- {c.user.nickname} - - {formatRelativeTime(c.created_at)} - ---
-- --- {c.digg_count} -
- ))}
- {comments.length === 0 ? - 暂无评论 : null} -
- {/* 动态模糊背景 canvas */}
-
+
{/* 主媒体区域 */}
-
+ ((props, ref) => {
+ return (
+
+ );
+});
+
+BackgroundCanvas.displayName = "BackgroundCanvas";
diff --git a/app/aweme/[awemeId]/components/CommentList.tsx b/app/aweme/[awemeId]/components/CommentList.tsx
new file mode 100644
index 0000000..7fa42ab
--- /dev/null
+++ b/app/aweme/[awemeId]/components/CommentList.tsx
@@ -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 (
+ <>
+
+
+
+ 
{
+ // 如果图片加载失败，显示原始文本
+ e.currentTarget.style.display = "none";
+ const textNode = document.createTextNode(`[${part.name}]`);
+ e.currentTarget.parentNode?.insertBefore(textNode, e.currentTarget);
+ }}
+ />
+ );
+ })}
+
+ );
+}
diff --git a/app/aweme/[awemeId]/components/ImageCarousel.tsx b/app/aweme/[awemeId]/components/ImageCarousel.tsx
new file mode 100644
index 0000000..20fc976
--- /dev/null
+++ b/app/aweme/[awemeId]/components/ImageCarousel.tsx
@@ -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(
+ ({ images, currentIndex, onTogglePlay }, ref) => {
+ return (
+ ;
+ // 图文专用
+ currentIndex?: number;
+ totalSegments?: number;
+ segmentProgress?: number;
+ musicUrl?: string | null;
+ audioRef?: RefObject;
+ // 回调
+ 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 (
+ (
+ ({ videoUrl, rotation, objectFit, loop, onTogglePlay }, ref) => {
+ return (
+
+ );
+ }
+);
+
+VideoPlayer.displayName = "VideoPlayer";
diff --git a/app/aweme/[awemeId]/components/index.ts b/app/aweme/[awemeId]/components/index.ts
new file mode 100644
index 0000000..4fb4fb3
--- /dev/null
+++ b/app/aweme/[awemeId]/components/index.ts
@@ -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";
diff --git a/app/aweme/[awemeId]/hooks/index.ts b/app/aweme/[awemeId]/hooks/index.ts
new file mode 100644
index 0000000..fdd6661
--- /dev/null
+++ b/app/aweme/[awemeId]/hooks/index.ts
@@ -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";
diff --git a/app/aweme/[awemeId]/hooks/useBackgroundCanvas.ts b/app/aweme/[awemeId]/hooks/useBackgroundCanvas.ts
new file mode 100644
index 0000000..8dadead
--- /dev/null
+++ b/app/aweme/[awemeId]/hooks/useBackgroundCanvas.ts
@@ -0,0 +1,95 @@
+import { useEffect } from "react";
+import type { RefObject } from "react";
+
+interface UseBackgroundCanvasProps {
+ isVideo: boolean;
+ idx: number;
+ videoRef: RefObject;
+ scrollerRef: RefObject;
+ backgroundCanvasRef: RefObject;
+}
+
+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]);
+}
diff --git a/app/aweme/[awemeId]/hooks/useCommentState.ts b/app/aweme/[awemeId]/hooks/useCommentState.ts
new file mode 100644
index 0000000..5d4ebfd
--- /dev/null
+++ b/app/aweme/[awemeId]/hooks/useCommentState.ts
@@ -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 };
+}
diff --git a/app/aweme/[awemeId]/hooks/useImageCarousel.ts b/app/aweme/[awemeId]/hooks/useImageCarousel.ts
new file mode 100644
index 0000000..8a13ec7
--- /dev/null
+++ b/app/aweme/[awemeId]/hooks/useImageCarousel.ts
@@ -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;
+ scrollerRef: RefObject;
+ 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(null);
+ const idxRef = useRef(0);
+ const rafRef = useRef(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,
+ };
+}
diff --git a/app/aweme/[awemeId]/hooks/useNavigation.ts b/app/aweme/[awemeId]/hooks/useNavigation.ts
new file mode 100644
index 0000000..0397278
--- /dev/null
+++ b/app/aweme/[awemeId]/hooks/useNavigation.ts
@@ -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;
+ videoRef?: RefObject;
+ prevImg?: () => void;
+ nextImg?: () => void;
+ togglePlay: () => void;
+}
+
+export function useNavigation({
+ neighbors,
+ isVideo,
+ mediaContainerRef,
+ videoRef,
+ prevImg,
+ nextImg,
+ togglePlay,
+}: UseNavigationProps) {
+ const router = useRouter();
+ const wheelCooldownRef = useRef(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]);
+}
diff --git a/app/aweme/[awemeId]/hooks/usePlayerState.ts b/app/aweme/[awemeId]/hooks/usePlayerState.ts
new file mode 100644
index 0000000..9441b7b
--- /dev/null
+++ b/app/aweme/[awemeId]/hooks/usePlayerState.ts
@@ -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("contain");
+ const [loopMode, setLoopMode] = useState(() => {
+ 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,
+ };
+}
diff --git a/app/aweme/[awemeId]/hooks/useVideoPlayer.ts b/app/aweme/[awemeId]/hooks/useVideoPlayer.ts
new file mode 100644
index 0000000..bbf53a7
--- /dev/null
+++ b/app/aweme/[awemeId]/hooks/useVideoPlayer.ts
@@ -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;
+ 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]);
+}
diff --git a/app/aweme/[awemeId]/types.ts b/app/aweme/[awemeId]/types.ts
new file mode 100644
index 0000000..2781cfa
--- /dev/null
+++ b/app/aweme/[awemeId]/types.ts
@@ -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";
diff --git a/app/aweme/[awemeId]/utils.ts b/app/aweme/[awemeId]/utils.ts
new file mode 100644
index 0000000..21abf2c
--- /dev/null
+++ b/app/aweme/[awemeId]/utils.ts
@@ -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());
+}
{isVideo ? (
-
) : (
-
);
}
diff --git a/app/aweme/[awemeId]/components/BackgroundCanvas.tsx b/app/aweme/[awemeId]/components/BackgroundCanvas.tsx
new file mode 100644
index 0000000..eef2011
--- /dev/null
+++ b/app/aweme/[awemeId]/components/BackgroundCanvas.tsx
@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+
+interface BackgroundCanvasProps {}
+
+export const BackgroundCanvas = forwardRef
-
+
- {(data as ImageData).images.map((img) => (
-
-
- {/* 左右切图（多张时显示） */}
- {images && images.length > 1 ? (
- <>
-
-
-
- ) : null}
-
- {/* eslint-disable-next-line @next/next/no-img-element */}
- 
-
- ))}
-
- neighbors.prev && router.push(`/aweme/${neighbors.prev.aweme_id}`)}
+ onNavigateNext={() => neighbors.next && router.push(`/aweme/${neighbors.next.aweme_id}`)}
+ onToggleComments={() => commentState.setOpen((v) => !v)}
+ />
- {/* 横屏评论面板：并排分栏 */}
-
+ {/* 评论面板 */}
+ commentState.setOpen(false)}
+ author={data.author}
+ createdAt={data.created_at}
+ comments={data.comments}
+ mounted={commentState.mounted}
+ />
-
- {/* 竖屏评论面板：bottom sheet */}
-
-
- {/* 评论开关（竖屏：底部居中；横屏：右侧中部悬浮） */}
-
-
- {/* 上下切换视频按钮（右侧胶囊形状） */}
-
+
)}
- {/* 统一控制条：desc 在上、进度在下 */}
-
+
- {/* 描述行 */}
+ {/* 图文切换按钮 */}
+ {!isVideo && images.length > 1 && (
+
+ {/* 媒体控制栏 */}
+
- 
-
- {data.author.nickname}
-
-
- ·
-
-
- {formatRelativeTime(data.created_at)}
-
-
-
- {data.desc ? (
-
-
- ) : null}
-
- {/* 进度条：图文=分段；视频=单段 */}
- {!isVideo && totalSegments > 0 ? (
- - {data.desc} -
- {
- const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
- seekTo((e.clientX - rect.left) / rect.width);
- }}
- >
-
- ) : (
-
- {Array.from({ length: totalSegments }).map((_, i) => {
- let fill = 0;
- if (i < idx) fill = 1;
- else if (i === idx) fill = segProgress;
- return (
-
-
-
-
- );
- })}
- {
- const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
- seekTo((e.clientX - rect.left) / rect.width);
- }}
- >
-
-
- )}
-
- {/* 控制按钮行 - 响应式布局 */}
-
- {/* 左侧：播放控制 + 时间/进度 */}
-
-
- {/* 图文 BGM（隐藏控件，仅用于播放） */}
- {!isVideo && "music_url" in data && data.music_url ? (
-
- ) : null}
-
-
-
- {/* 播放进度显示 - 所有设备都显示 */}
-
-
- {/* 中间：音量控制 - 中等屏幕以上显示 */}
-
- {isVideo ? (
- (() => {
- const v = videoRef.current;
- const current = v?.currentTime ?? 0;
- const total = v?.duration ?? 0;
- return total > 0 ? `${formatTime(current)} / ${formatTime(total)}` : '--:-- / --:--';
- })()
- ) : (
- `${idx + 1} / ${totalSegments}`
- )}
-
-
- {/* 倍速 - 中等屏幕以上显示，仅视频 */}
- {isVideo && (
-
- )}
-
- {/* 旋转按钮 - 小屏幕以上显示 */}
-
-
- setVolume(parseFloat(e.target.value))}
- className="w-20 lg:w-28 accent-white cursor-pointer"
- aria-label="音量"
- />
-
-
-
- {/* 右侧：功能按钮组 */}
-
-
- {/* 音量按钮 - 仅在小屏幕显示（中等屏幕以上有滑块） */}
-
-
- {/* 循环模式 - 中等屏幕以上显示 */}
-
-
- {/* 适配模式 - 小屏幕以上显示 */}
-
-
- {/* 下载 - 中等屏幕以上显示 */}
-
-
- {/* 全屏 - 所有设备都显示 */}
-
-
-
-
+ {/* 导航按钮 */}
+
-
-
-
-
+ {author.avatar_url ? (
+ 
+ ) : null}
+
+
+
+ {author.nickname}
+
+ 发布于 {formatRelativeTime(createdAt)}
+
+ -
+ {comments.map((c) => (
+
-
+ + {c.user.avatar_url ? ( +++++ {c.user.nickname} + {formatRelativeTime(c.created_at)} ++
+
++ +++ {c.digg_count} +
+ ))}
+ {comments.length === 0 ? - 暂无评论 : null} +
{
+ // 如果图片加载失败，显示原始文本
+ e.currentTarget.style.display = "none";
+ const textNode = document.createTextNode(`[${part.name}]`);
+ e.currentTarget.parentNode?.insertBefore(textNode, e.currentTarget);
+ }}
+ />
+ );
+ })}
+
+ );
+}
diff --git a/app/aweme/[awemeId]/components/ImageCarousel.tsx b/app/aweme/[awemeId]/components/ImageCarousel.tsx
new file mode 100644
index 0000000..20fc976
--- /dev/null
+++ b/app/aweme/[awemeId]/components/ImageCarousel.tsx
@@ -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
+ {images.map((img, i) => (
+
+ );
+ }
+);
+
+ImageCarousel.displayName = "ImageCarousel";
diff --git a/app/aweme/[awemeId]/components/ImageNavigationButtons.tsx b/app/aweme/[awemeId]/components/ImageNavigationButtons.tsx
new file mode 100644
index 0000000..2c86faa
--- /dev/null
+++ b/app/aweme/[awemeId]/components/ImageNavigationButtons.tsx
@@ -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 (
+ <>
+ {/* 左侧按钮 */}
+
+
+ {/* 右侧按钮 */}
+
+
+ );
+}
diff --git a/app/aweme/[awemeId]/components/MediaControls.tsx b/app/aweme/[awemeId]/components/MediaControls.tsx
new file mode 100644
index 0000000..05bdb1e
--- /dev/null
+++ b/app/aweme/[awemeId]/components/MediaControls.tsx
@@ -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
+
+
+ ))}
+
+ {/* 描述行 */}
+
+ );
+}
diff --git a/app/aweme/[awemeId]/components/NavigationButtons.tsx b/app/aweme/[awemeId]/components/NavigationButtons.tsx
new file mode 100644
index 0000000..c3edf9c
--- /dev/null
+++ b/app/aweme/[awemeId]/components/NavigationButtons.tsx
@@ -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 (
+ <>
+ {/* 评论开关（右侧中部） */}
+
+
+ {/* 上下切换按钮（右侧胶囊形状） */}
+
+ 
+ {author.nickname}
+ ·
+
+ {formatRelativeTime(createdAt)}
+
+
+
+ {desc ? (
+
+
+ ) : null}
+
+ {/* 进度条：图文=分段；视频=单段 */}
+ {!isVideo && totalSegments > 0 ? (
+ + {desc} +
+
+ {/* 左侧：播放控制 + 时间/进度 */}
+
+
+ {/* 图文 BGM（隐藏控件，仅用于播放） */}
+ {!isVideo && musicUrl ? : null}
+
+
+
+ {/* 播放进度显示 - 所有设备都显示 */}
+
+
+ {/* 中间：音量控制 - 中等屏幕以上显示 */}
+
+ {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}`
+ )}
+
+
+ {/* 倍速 - 中等屏幕以上显示，仅视频 */}
+ {isVideo && (
+
+ )}
+
+ {/* 旋转按钮 - 小屏幕以上显示 */}
+
+
+ onVolumeChange(parseFloat(e.target.value))}
+ className="w-20 lg:w-28 accent-white cursor-pointer"
+ aria-label="音量"
+ />
+
+
+
+ {/* 右侧：功能按钮组 */}
+
+ {/* 音量按钮 - 仅在小屏幕显示（中等屏幕以上有滑块） */}
+
+
+ {/* 循环模式 - 中等屏幕以上显示 */}
+
+
+ {/* 适配模式 - 小屏幕以上显示 */}
+
+
+ {/* 下载 - 中等屏幕以上显示 */}
+
+
+ {/* 全屏 - 所有设备都显示 */}
+
+
+
+
+
+ );
+}
diff --git a/app/aweme/[awemeId]/components/ProgressBar.tsx b/app/aweme/[awemeId]/components/ProgressBar.tsx
new file mode 100644
index 0000000..a5af462
--- /dev/null
+++ b/app/aweme/[awemeId]/components/ProgressBar.tsx
@@ -0,0 +1,18 @@
+interface ProgressBarProps {
+ progress: number;
+ onSeek: (ratio: number) => void;
+}
+
+export function ProgressBar({ progress, onSeek }: ProgressBarProps) {
+ return (
+
+
+
+
+ {
+ const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+ onSeek((e.clientX - rect.left) / rect.width);
+ }}
+ >
+
+
+ );
+}
diff --git a/app/aweme/[awemeId]/components/SegmentedProgressBar.tsx b/app/aweme/[awemeId]/components/SegmentedProgressBar.tsx
new file mode 100644
index 0000000..1fa416d
--- /dev/null
+++ b/app/aweme/[awemeId]/components/SegmentedProgressBar.tsx
@@ -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 (
+ {
+ const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+ onSeek((e.clientX - rect.left) / rect.width);
+ }}
+ >
+
+ );
+}
diff --git a/app/aweme/[awemeId]/components/VideoPlayer.tsx b/app/aweme/[awemeId]/components/VideoPlayer.tsx
new file mode 100644
index 0000000..9e8bf3b
--- /dev/null
+++ b/app/aweme/[awemeId]/components/VideoPlayer.tsx
@@ -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
+ {Array.from({ length: totalSegments }).map((_, i) => {
+ let fill = 0;
+ if (i < currentIndex) fill = 1;
+ else if (i === currentIndex) fill = segmentProgress;
+ return (
+
+
+
+
+ );
+ })}
+