608 lines
18 KiB
TypeScript
608 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { Play } from "lucide-react";
|
|
import type {
|
|
AwemeData,
|
|
ImageData,
|
|
Neighbors,
|
|
VideoData,
|
|
VideoTranscript,
|
|
} from "./types.ts";
|
|
import { BackgroundCanvas } from "./components/BackgroundCanvas";
|
|
import { CommentPanel } from "./components/CommentPanel";
|
|
import { ImageCarousel } from "./components/ImageCarousel";
|
|
import { ImageNavigationButtons } from "./components/ImageNavigationButtons";
|
|
import { MediaControls } from "./components/MediaControls";
|
|
import { NavigationButtons } from "./components/NavigationButtons";
|
|
import { TranscriptPanel } from "./components/TranscriptPanel";
|
|
import { VideoPlayer } from "./components/VideoPlayer";
|
|
import { useBackgroundCanvas } from "./hooks/useBackgroundCanvas";
|
|
import { useCommentState } from "./hooks/useCommentState";
|
|
import { useImageCarousel } from "./hooks/useImageCarousel";
|
|
import { useNavigation } from "./hooks/useNavigation";
|
|
import { usePlayerState } from "./hooks/usePlayerState";
|
|
import { useVideoPlayer } from "./hooks/useVideoPlayer";
|
|
|
|
const SEGMENT_MS = 4000;
|
|
|
|
interface AwemeDetailClientProps {
|
|
data: AwemeData;
|
|
neighbors: Neighbors;
|
|
transcript: VideoTranscript | null;
|
|
}
|
|
|
|
export default function AwemeDetailClient({
|
|
data,
|
|
neighbors,
|
|
transcript,
|
|
}: AwemeDetailClientProps) {
|
|
const router = useRouter();
|
|
const isVideo = data.type === "video";
|
|
|
|
// 状态管理
|
|
const playerState = usePlayerState();
|
|
const commentState = useCommentState();
|
|
const [transcriptOpen, setTranscriptOpen] = useState(false);
|
|
|
|
// 引用
|
|
const mediaContainerRef = useRef<HTMLDivElement | null>(null);
|
|
const videoRef = useRef<HTMLVideoElement | null>(null);
|
|
const audioRef = useRef<HTMLAudioElement | null>(null);
|
|
const scrollerRef = useRef<HTMLDivElement | null>(null);
|
|
const backgroundCanvasRef = useRef<HTMLCanvasElement | null>(null);
|
|
|
|
const pauseImageMedia = useCallback((reset = false) => {
|
|
const audioEl = audioRef.current;
|
|
if (audioEl) {
|
|
audioEl.pause();
|
|
if (reset) audioEl.currentTime = 0;
|
|
}
|
|
|
|
scrollerRef.current?.querySelectorAll("video").forEach((videoEl) => {
|
|
videoEl.pause();
|
|
if (reset) videoEl.currentTime = 0;
|
|
});
|
|
}, []);
|
|
|
|
// 图文轮播状态
|
|
const images = isVideo ? [] : (data as ImageData).images;
|
|
const imageCarouselState = useImageCarousel({
|
|
images,
|
|
isPlaying: playerState.isPlaying,
|
|
loopMode: playerState.loopMode,
|
|
neighbors,
|
|
volume: playerState.volume,
|
|
audioRef,
|
|
setProgress: playerState.setProgress,
|
|
segmentMs: SEGMENT_MS,
|
|
});
|
|
|
|
// 视频播放器 hooks
|
|
if (isVideo) {
|
|
useVideoPlayer({
|
|
awemeId: data.aweme_id,
|
|
videoRef,
|
|
volume: playerState.volume,
|
|
rate: playerState.rate,
|
|
loopMode: playerState.loopMode,
|
|
neighbors,
|
|
progressRestored: playerState.progressRestored,
|
|
setIsPlaying: playerState.setIsPlaying,
|
|
setProgress: playerState.setProgress,
|
|
setProgressRestored: playerState.setProgressRestored,
|
|
});
|
|
}
|
|
|
|
// 媒体操作函数
|
|
const seekTo = (ratio: number) => {
|
|
ratio = Math.min(1, Math.max(0, ratio));
|
|
if (isVideo) {
|
|
const v = videoRef.current;
|
|
if (!v || !v.duration) return;
|
|
v.currentTime = v.duration * ratio;
|
|
return;
|
|
}
|
|
if (!images?.length) return;
|
|
imageCarouselState.seekTo(ratio);
|
|
};
|
|
|
|
const seekImageByVisualRatio = (ratio: number) => {
|
|
if (!images?.length) return;
|
|
|
|
const clampedRatio = Math.min(1, Math.max(0, ratio));
|
|
const rawSegment = clampedRatio * images.length;
|
|
const targetIndex = Math.min(images.length - 1, Math.floor(rawSegment));
|
|
const segmentProgress = Math.min(1, Math.max(0, rawSegment - targetIndex));
|
|
imageCarouselState.goToIndex(targetIndex, segmentProgress);
|
|
};
|
|
|
|
const handleControlSeek = (ratio: number) => {
|
|
if (isVideo) {
|
|
seekTo(ratio);
|
|
return;
|
|
}
|
|
seekImageByVisualRatio(ratio);
|
|
};
|
|
|
|
const togglePlay = async () => {
|
|
if (isVideo) {
|
|
const v = videoRef.current;
|
|
if (!v) return;
|
|
if (v.paused) await v.play().catch(() => {});
|
|
else v.pause();
|
|
return;
|
|
}
|
|
const el = audioRef.current;
|
|
if (!playerState.isPlaying) {
|
|
playerState.setIsPlaying(true);
|
|
try {
|
|
await el?.play().catch(() => {});
|
|
} catch {}
|
|
} else {
|
|
playerState.setIsPlaying(false);
|
|
pauseImageMedia();
|
|
}
|
|
};
|
|
|
|
const toggleFullscreen = () => {
|
|
if (!document.fullscreenElement) {
|
|
if (document.body.requestFullscreen) {
|
|
document.body.requestFullscreen().catch(() => {});
|
|
return;
|
|
}
|
|
const vRef = videoRef.current;
|
|
if (vRef && vRef.requestFullscreen) {
|
|
vRef.requestFullscreen().catch(() => {});
|
|
return;
|
|
}
|
|
// @ts-ignore
|
|
if (vRef && vRef.webkitEnterFullscreen) {
|
|
// @ts-ignore
|
|
vRef.webkitEnterFullscreen();
|
|
}
|
|
} else {
|
|
document.exitFullscreen().catch(() => {});
|
|
}
|
|
};
|
|
|
|
const prevImg = () => {
|
|
if (!images?.length) return;
|
|
const next = Math.max(0, imageCarouselState.idxRef.current - 1);
|
|
imageCarouselState.goToIndex(next);
|
|
};
|
|
|
|
const nextImg = () => {
|
|
if (!images?.length) return;
|
|
const next = Math.min(
|
|
images.length - 1,
|
|
imageCarouselState.idxRef.current + 1,
|
|
);
|
|
imageCarouselState.goToIndex(next);
|
|
};
|
|
|
|
const handleDownload = () => {
|
|
if (isVideo) {
|
|
const videoUrl = (data as VideoData).video_url;
|
|
const link = document.createElement("a");
|
|
link.href = videoUrl;
|
|
link.download = `video_${data.aweme_id}.mp4`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
} else {
|
|
if (!images?.length) return;
|
|
const currentImage = images[imageCarouselState.idx];
|
|
const link = document.createElement("a");
|
|
link.href = currentImage.url;
|
|
link.download = `image_${data.aweme_id}_${imageCarouselState.idx + 1}.jpg`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
};
|
|
|
|
// 导航相关
|
|
useNavigation({
|
|
neighbors,
|
|
isVideo,
|
|
mediaContainerRef,
|
|
videoRef,
|
|
prevImg,
|
|
nextImg,
|
|
togglePlay,
|
|
});
|
|
|
|
// 背景画布
|
|
useBackgroundCanvas({
|
|
isVideo,
|
|
idx: imageCarouselState.idx,
|
|
videoRef,
|
|
scrollerRef,
|
|
backgroundCanvasRef,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (isVideo) return;
|
|
|
|
const pauseForPageLifecycle = () => {
|
|
playerState.setIsPlaying(false);
|
|
pauseImageMedia();
|
|
};
|
|
const handleVisibilityChange = () => {
|
|
if (document.hidden) pauseForPageLifecycle();
|
|
};
|
|
|
|
window.addEventListener("pagehide", pauseForPageLifecycle);
|
|
document.addEventListener("visibilitychange", handleVisibilityChange);
|
|
|
|
return () => {
|
|
window.removeEventListener("pagehide", pauseForPageLifecycle);
|
|
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
|
pauseImageMedia();
|
|
};
|
|
}, [isVideo, pauseImageMedia, playerState.setIsPlaying]);
|
|
|
|
// Media Session API 集成
|
|
useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
if (!("mediaSession" in navigator)) return;
|
|
|
|
const ms = (navigator as any).mediaSession as MediaSession;
|
|
|
|
// 元信息：标题、作者、专辑（使用创建时间），封面图（优先当前图片，其次作者头像）
|
|
const title = data.desc || `作品 ${data.aweme_id}`;
|
|
const artist = data.author.nickname || "作者";
|
|
const album = new Date(data.created_at).toLocaleString();
|
|
// 单一封面图：使用作品 cover_url
|
|
const coverUrl = (data as AwemeData).cover_url as string | undefined;
|
|
const coverSize = (data as AwemeData).cover_size as
|
|
| { w: number; h: number }
|
|
| undefined;
|
|
const artwork = coverUrl
|
|
? [
|
|
{
|
|
src: coverUrl,
|
|
size: `${coverSize?.w || 512}x${coverSize?.h || 512}`,
|
|
},
|
|
]
|
|
: [];
|
|
|
|
try {
|
|
ms.metadata = new MediaMetadata({ title, artist, album, artwork });
|
|
} catch {}
|
|
|
|
// 更新播放状态
|
|
try {
|
|
ms.playbackState = playerState.isPlaying ? "playing" : "paused";
|
|
} catch {}
|
|
|
|
const getImagesTotalMs = () => imageCarouselState.totalDurationMs;
|
|
|
|
const updatePosition = () => {
|
|
try {
|
|
// @ts-ignore: setPositionState 可能不存在
|
|
if (!ms.setPositionState) return;
|
|
if (isVideo) {
|
|
const v = videoRef.current;
|
|
if (!v || !isFinite(v.duration) || isNaN(v.duration)) return;
|
|
// @ts-ignore
|
|
ms.setPositionState({
|
|
duration: Math.max(0, v.duration),
|
|
position: Math.max(0, v.currentTime),
|
|
playbackRate: playerState.rate ?? 1,
|
|
});
|
|
} else if (images?.length) {
|
|
const totalMs = getImagesTotalMs();
|
|
const duration = totalMs / 1000;
|
|
const position = Math.max(
|
|
0,
|
|
Math.min(duration, (playerState.progress * totalMs) / 1000),
|
|
);
|
|
// @ts-ignore
|
|
ms.setPositionState({ duration, position, playbackRate: 1 });
|
|
}
|
|
} catch {}
|
|
};
|
|
|
|
// 绑定视频事件以同步状态
|
|
let timeUpdateTimer: number | null = null;
|
|
const v = videoRef.current;
|
|
if (isVideo && v) {
|
|
const onPlay = () => {
|
|
try {
|
|
ms.playbackState = "playing";
|
|
} catch {}
|
|
updatePosition();
|
|
};
|
|
const onPause = () => {
|
|
try {
|
|
ms.playbackState = "paused";
|
|
} catch {}
|
|
updatePosition();
|
|
};
|
|
const onTimeUpdate = () => updatePosition();
|
|
|
|
v.addEventListener("play", onPlay);
|
|
v.addEventListener("pause", onPause);
|
|
v.addEventListener("timeupdate", onTimeUpdate);
|
|
// 初始同步
|
|
updatePosition();
|
|
|
|
// 清理
|
|
timeUpdateTimer = null;
|
|
return () => {
|
|
v.removeEventListener("play", onPlay);
|
|
v.removeEventListener("pause", onPause);
|
|
v.removeEventListener("timeupdate", onTimeUpdate);
|
|
};
|
|
} else if (!isVideo && images?.length) {
|
|
// 图文用定时器定期同步位置
|
|
const id = window.setInterval(updatePosition, 1000);
|
|
// 初始同步
|
|
updatePosition();
|
|
return () => window.clearInterval(id);
|
|
}
|
|
// 依赖：当这些变化时刷新元信息与位置状态
|
|
}, [
|
|
isVideo,
|
|
data.aweme_id,
|
|
data.desc,
|
|
data.author.nickname,
|
|
data.author.avatar_url,
|
|
data.created_at,
|
|
imageCarouselState.idx,
|
|
imageCarouselState.totalDurationMs,
|
|
images,
|
|
playerState.isPlaying,
|
|
playerState.progress,
|
|
playerState.rate,
|
|
]);
|
|
|
|
// 绑定系统媒体控件的操作处理程序
|
|
useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
if (!("mediaSession" in navigator)) return;
|
|
const ms = (navigator as any).mediaSession as MediaSession;
|
|
|
|
const getImagesTotalMs = () => imageCarouselState.totalDurationMs;
|
|
|
|
const handlePlay = async () => {
|
|
if (isVideo) {
|
|
const v = videoRef.current;
|
|
try {
|
|
await v?.play();
|
|
} catch {}
|
|
} else {
|
|
playerState.setIsPlaying(true);
|
|
try {
|
|
await audioRef.current?.play();
|
|
} catch {}
|
|
}
|
|
};
|
|
const handlePause = () => {
|
|
if (isVideo) {
|
|
const v = videoRef.current;
|
|
v?.pause();
|
|
} else {
|
|
playerState.setIsPlaying(false);
|
|
pauseImageMedia();
|
|
}
|
|
};
|
|
const handleStop = () => {
|
|
if (isVideo) {
|
|
const v = videoRef.current;
|
|
if (v) {
|
|
v.pause();
|
|
v.currentTime = 0;
|
|
}
|
|
} else {
|
|
playerState.setIsPlaying(false);
|
|
pauseImageMedia(true);
|
|
seekTo(0);
|
|
}
|
|
};
|
|
const handleSeekDelta = (deltaSec: number) => {
|
|
if (isVideo) {
|
|
const v = videoRef.current;
|
|
if (v)
|
|
v.currentTime = Math.max(
|
|
0,
|
|
Math.min(v.duration || Infinity, v.currentTime + deltaSec),
|
|
);
|
|
} else if (images?.length) {
|
|
const totalMs = getImagesTotalMs();
|
|
if (totalMs <= 0) return;
|
|
const deltaRatio = (deltaSec * 1000) / totalMs;
|
|
seekTo(playerState.progress + deltaRatio);
|
|
}
|
|
};
|
|
const handleSeekTo = (seekTimeSec: number) => {
|
|
if (isVideo) {
|
|
const v = videoRef.current;
|
|
if (v && isFinite(v.duration)) {
|
|
v.currentTime = Math.max(0, Math.min(v.duration, seekTimeSec));
|
|
}
|
|
} else if (images?.length) {
|
|
const totalMs = getImagesTotalMs();
|
|
const totalSec = totalMs / 1000;
|
|
if (totalSec > 0) seekTo(seekTimeSec / totalSec);
|
|
}
|
|
};
|
|
|
|
ms.setActionHandler("play", handlePlay);
|
|
ms.setActionHandler("pause", handlePause);
|
|
ms.setActionHandler("stop", handleStop);
|
|
ms.setActionHandler("seekbackward", (details: any) =>
|
|
handleSeekDelta(-((details?.seekOffset as number) || 10)),
|
|
);
|
|
ms.setActionHandler("seekforward", (details: any) =>
|
|
handleSeekDelta((details?.seekOffset as number) || 10),
|
|
);
|
|
ms.setActionHandler("seekto", (details: any) => {
|
|
if (typeof details?.seekTime === "number") handleSeekTo(details.seekTime);
|
|
});
|
|
ms.setActionHandler("previoustrack", () => {
|
|
if (!isVideo && images?.length > 1) {
|
|
prevImg();
|
|
} else if (neighbors.prev) {
|
|
router.push(`/aweme/${neighbors.prev.aweme_id}`);
|
|
}
|
|
});
|
|
ms.setActionHandler("nexttrack", () => {
|
|
if (!isVideo && images?.length > 1) {
|
|
nextImg();
|
|
} else if (neighbors.next) {
|
|
router.push(`/aweme/${neighbors.next.aweme_id}`);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
try {
|
|
ms.setActionHandler("play", null);
|
|
ms.setActionHandler("pause", null);
|
|
ms.setActionHandler("stop", null);
|
|
ms.setActionHandler("seekbackward", null);
|
|
ms.setActionHandler("seekforward", null);
|
|
ms.setActionHandler("seekto", null);
|
|
ms.setActionHandler("previoustrack", null);
|
|
ms.setActionHandler("nexttrack", null);
|
|
} catch {}
|
|
};
|
|
}, [
|
|
isVideo,
|
|
images,
|
|
neighbors.prev,
|
|
neighbors.next,
|
|
router,
|
|
playerState.progress,
|
|
pauseImageMedia,
|
|
imageCarouselState.totalDurationMs,
|
|
]);
|
|
|
|
return (
|
|
<div className="h-screen w-full">
|
|
<BackgroundCanvas ref={backgroundCanvasRef} />
|
|
|
|
<div className="relative h-full landscape:flex landscape:flex-row">
|
|
{/* 主媒体区域 */}
|
|
<section
|
|
ref={mediaContainerRef}
|
|
className="relative isolate h-screen landscape:flex-1"
|
|
>
|
|
<div className="relative isolate h-screen overflow-hidden">
|
|
<div className="absolute inset-0 z-0">
|
|
{isVideo ? (
|
|
<VideoPlayer
|
|
ref={videoRef}
|
|
videoUrl={(data as VideoData).video_url}
|
|
rotation={playerState.rotation}
|
|
objectFit={playerState.objectFit}
|
|
loop={playerState.loopMode !== "sequential"}
|
|
onTogglePlay={togglePlay}
|
|
/>
|
|
) : (
|
|
<ImageCarousel
|
|
ref={scrollerRef}
|
|
images={images}
|
|
currentIndex={imageCarouselState.idx}
|
|
isPlaying={playerState.isPlaying}
|
|
segmentProgress={imageCarouselState.segProgress}
|
|
mediaSyncToken={imageCarouselState.mediaSyncToken}
|
|
loopMode={playerState.loopMode}
|
|
onTogglePlay={togglePlay}
|
|
onAnimatedDuration={imageCarouselState.setSegmentDuration}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* 暂停图标 */}
|
|
{!playerState.isPlaying && (
|
|
<div className="pointer-events-none absolute inset-0 z-30 grid place-items-center">
|
|
<div className="rounded-full bg-black/40 p-6 backdrop-blur-sm">
|
|
<Play size={64} className="text-white" fill="white" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 图文切换按钮 */}
|
|
{!isVideo && images.length > 1 && (
|
|
<ImageNavigationButtons
|
|
onPrev={prevImg}
|
|
onNext={nextImg}
|
|
currentIndex={imageCarouselState.idx}
|
|
totalImages={images.length}
|
|
/>
|
|
)}
|
|
|
|
{/* 媒体控制栏 */}
|
|
<MediaControls
|
|
isVideo={isVideo}
|
|
isPlaying={playerState.isPlaying}
|
|
progress={playerState.progress}
|
|
volume={playerState.volume}
|
|
rate={playerState.rate}
|
|
rotation={playerState.rotation}
|
|
objectFit={playerState.objectFit}
|
|
loopMode={playerState.loopMode}
|
|
isFullscreen={playerState.isFullscreen}
|
|
author={data.author}
|
|
createdAt={data.created_at}
|
|
desc={data.desc}
|
|
videoRef={videoRef}
|
|
currentIndex={imageCarouselState.idx}
|
|
totalSegments={images.length}
|
|
segmentProgress={imageCarouselState.segProgress}
|
|
musicUrl={isVideo ? undefined : (data as ImageData).music_url}
|
|
audioRef={audioRef}
|
|
hasTranscript={isVideo && !!transcript?.speech_detected}
|
|
onShowTranscript={() => setTranscriptOpen(true)}
|
|
onTogglePlay={togglePlay}
|
|
onSeek={handleControlSeek}
|
|
onVolumeChange={playerState.setVolume}
|
|
onRateChange={playerState.setRate}
|
|
onRotationChange={playerState.setRotation}
|
|
onObjectFitChange={playerState.setObjectFit}
|
|
onLoopModeChange={playerState.setLoopMode}
|
|
onDownload={handleDownload}
|
|
onToggleFullscreen={toggleFullscreen}
|
|
/>
|
|
</div>
|
|
|
|
{/* 导航按钮 */}
|
|
<NavigationButtons
|
|
neighbors={neighbors}
|
|
commentsCount={data.commentsCount}
|
|
likesCount={data.likesCount}
|
|
onNavigatePrev={() =>
|
|
neighbors.prev && router.push(`/aweme/${neighbors.prev.aweme_id}`)
|
|
}
|
|
onNavigateNext={() =>
|
|
neighbors.next && router.push(`/aweme/${neighbors.next.aweme_id}`)
|
|
}
|
|
onToggleComments={() => commentState.setOpen((v) => !v)}
|
|
/>
|
|
</section>
|
|
|
|
{/* 评论面板 */}
|
|
<CommentPanel
|
|
open={commentState.open}
|
|
onClose={() => commentState.setOpen(false)}
|
|
author={data.author}
|
|
createdAt={data.created_at}
|
|
awemeId={data.aweme_id}
|
|
mounted={commentState.mounted}
|
|
/>
|
|
|
|
{/* 转录面板 */}
|
|
<TranscriptPanel
|
|
open={transcriptOpen}
|
|
onClose={() => setTranscriptOpen(false)}
|
|
transcript={transcript}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|