feie9454/douyin-archive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

集成媒体会话API，支持视频和图文的播放状态同步与元信息更新；重构搜索页面，避免编译警告

Browse Source
This commit is contained in:
feie9454
2025-10-25 20:18:19 +08:00
parent 0d18595b68
commit 823df2cbf6
5 changed files with 487 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/aweme/[awemeId]/Client.tsx
+206 -1
View File
@@ -1,7 +1,7 @@
"use client";
import { useRouter } from "next/navigation";
import { useMemo, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { Pause, Play } from "lucide-react";
import type { AwemeData, ImageData, Neighbors, VideoData, VideoTranscript } from "./types.ts";
import { BackgroundCanvas } from "./components/BackgroundCanvas";
@@ -223,6 +223,211 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
backgroundCanvasRef,
});
// 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 = () =>
(images || []).reduce((sum, img) => sum + (img.duration ?? SEGMENT_MS), 0);
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,
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 = () =>
(images || []).reduce((sum, img) => sum + (img.duration ?? SEGMENT_MS), 0);
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);
audioRef.current?.pause();
}
};
const handleStop = () => {
if (isVideo) {
const v = videoRef.current;
if (v) { v.pause(); v.currentTime = 0; }
} else {
playerState.setIsPlaying(false);
audioRef.current?.pause();
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,
]);
return (
<div className="h-screen w-full">
<BackgroundCanvas ref={backgroundCanvasRef} />
app/aweme/[awemeId]/page.tsx
+5 -2
View File
@@ -58,7 +58,6 @@ export default async function AwemeDetail({ params }: { params: Promise<{ awemeI
const commentsCount = await prisma.comment.count({
where: isVideo ? { videoId: id } : { imagePostId: id },
});
const aweme = isVideo ? video : post;
const data: AwemeData = {
@@ -73,6 +72,8 @@ export default async function AwemeDetail({ params }: { params: Promise<{ awemeI
const aweme = video!
return {
type: "video" as const,
cover_url: getFileUrl(aweme!.cover_url ?? 'default-cover.png'),
cover_size: { h: aweme.height ?? 0, w: aweme.width ?? 0 },
duration_ms: aweme!.duration_ms,
video_url: getFileUrl(aweme!.video_url),
width: aweme!.width ?? null,
@@ -82,7 +83,9 @@ export default async function AwemeDetail({ params }: { params: Promise<{ awemeI
const aweme = post!
return {
type: "image" as const,
images: aweme!.images.map(img => ({ ...img, url: getFileUrl(img.url), animated: getFileUrl(img.animated ?? 'default-animated.png'), })),
cover_url: getFileUrl(aweme!.images[0].url ?? 'default-cover.png'),
cover_size: { h: aweme!.images[0].height ?? 0, w: aweme!.images[0].width ?? 0 },
images: aweme!.images.map(img => ({ ...img, url: getFileUrl(img.url), animated: img.animated? getFileUrl(img.animated) : null })),
music_url: getFileUrl(aweme!.music_url || 'default-music.mp3'),
};
}
app/aweme/[awemeId]/types.ts
+4
View File
@@ -12,6 +12,8 @@ export type Comment = {
export type VideoData = {
type: "video";
aweme_id: string;
cover_url: string;
cover_size: {w: number; h: number};
desc: string;
created_at: string | Date;
duration_ms: number | null;
@@ -26,6 +28,8 @@ export type VideoData = {
export type ImageData = {
type: "image";
aweme_id: string;
cover_url: string;
cover_size: {w: number; h: number};
desc: string;
created_at: string | Date;
images: { id: string; url: string; width: number | null; height: number | null; animated: string | null; duration: number | null }[];