集成媒体会话API，支持视频和图文的播放状态同步与元信息更新；重构搜索页面，避免编译警告
This commit is contained in:
@@ -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} />
|
||||
|
||||
Reference in New Issue
Block a user