添加视频循环模式和下载功能，优化页面元数据和样式
This commit is contained in:
parent
200283b21b
commit
5c98257366
@ -17,6 +17,13 @@ import {
|
||||
RotateCw,
|
||||
Maximize2,
|
||||
Minimize,
|
||||
ChevronUp,
|
||||
ChevronDown,
|
||||
X,
|
||||
Repeat,
|
||||
Repeat1,
|
||||
ArrowDownUp,
|
||||
Download,
|
||||
} from "lucide-react";
|
||||
|
||||
type User = { nickname: string; avatar_url: string | null };
|
||||
@ -50,7 +57,7 @@ function parseCommentText(text: string): (string | { type: "emoji"; name: string
|
||||
// 渲染评论文本（包含表情）
|
||||
function CommentText({ text }: { text: string }) {
|
||||
const parts = parseCommentText(text);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{parts.map((part, idx) => {
|
||||
@ -149,6 +156,13 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
const [rotation, setRotation] = useState(0); // 视频旋转角度：0/90/180/270
|
||||
const [progressRestored, setProgressRestored] = useState(false); // 标记进度是否已恢复
|
||||
const [objectFit, setObjectFit] = useState<"contain" | "cover">("contain"); // 媒体显示模式
|
||||
const [loopMode, setLoopMode] = useState<"loop" | "sequential">(() => {
|
||||
// 从 localStorage 读取循环模式，默认 loop
|
||||
if (typeof window === "undefined") return "loop";
|
||||
const saved = localStorage.getItem("aweme_player_loop_mode");
|
||||
if (!saved) return "loop";
|
||||
return saved === "sequential" ? "sequential" : "loop";
|
||||
});
|
||||
|
||||
// ====== 图文专用（分段） ======
|
||||
const images = (data as any).images as ImageData["images"] | undefined;
|
||||
@ -161,6 +175,7 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
const idxRef = useRef<number>(0);
|
||||
const rafRef = useRef<number | null>(null);
|
||||
const [segProgress, setSegProgress] = useState(0); // 段内 0..1
|
||||
const [, forceUpdate] = useState(0); // 用于强制更新时间显示
|
||||
|
||||
useEffect(() => { idxRef.current = idx; }, [idx]);
|
||||
|
||||
@ -182,6 +197,12 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
localStorage.setItem("aweme_player_comments_open", open.toString());
|
||||
}, [open]);
|
||||
|
||||
// ====== 持久化循环模式到 localStorage ======
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
localStorage.setItem("aweme_player_loop_mode", loopMode);
|
||||
}, [loopMode]);
|
||||
|
||||
// ====== 恢复视频播放进度（带有效期） ======
|
||||
useEffect(() => {
|
||||
if (!isVideo || progressRestored) return;
|
||||
@ -190,7 +211,7 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
|
||||
const onLoadedMetadata = () => {
|
||||
if (progressRestored) return;
|
||||
|
||||
|
||||
try {
|
||||
const key = `aweme_progress_${data.aweme_id}`;
|
||||
const saved = localStorage.getItem(key);
|
||||
@ -214,7 +235,7 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
} catch (e) {
|
||||
console.error("恢复播放进度失败", e);
|
||||
}
|
||||
|
||||
|
||||
setProgressRestored(true);
|
||||
};
|
||||
|
||||
@ -235,7 +256,7 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
|
||||
const saveProgress = () => {
|
||||
if (!v.duration || Number.isNaN(v.duration) || v.currentTime < 1) return;
|
||||
|
||||
|
||||
try {
|
||||
const key = `aweme_progress_${data.aweme_id}`;
|
||||
const value = JSON.stringify({
|
||||
@ -274,18 +295,26 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
};
|
||||
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);
|
||||
};
|
||||
}, [isVideo]);
|
||||
}, [isVideo, loopMode, neighbors?.next?.aweme_id, router]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVideo) return;
|
||||
@ -299,6 +328,15 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
if (v) v.playbackRate = rate;
|
||||
}, [rate, isVideo]);
|
||||
|
||||
// ====== 视频：定期更新时间显示 ======
|
||||
useEffect(() => {
|
||||
if (!isVideo) return;
|
||||
const interval = setInterval(() => {
|
||||
forceUpdate(n => n + 1);
|
||||
}, 100); // 每 100ms 更新一次显示
|
||||
return () => clearInterval(interval);
|
||||
}, [isVideo]);
|
||||
|
||||
// ====== 图文：BGM & 初次自动播放尝试 ======
|
||||
useEffect(() => {
|
||||
if (isVideo) return;
|
||||
@ -349,33 +387,38 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
// ====== 图文：自动切页（消除“闪回”）======
|
||||
// ====== 图文：自动切页 ======
|
||||
useEffect(() => {
|
||||
if (isVideo || !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;
|
||||
|
||||
// 暂停时只更新 UI，不推进时间
|
||||
if (!isPlaying) {
|
||||
const elapsed = Math.max(0, ts - start);
|
||||
const localSeg = Math.min(1, elapsed / SEGMENT_MS);
|
||||
setSegProgress(localSeg);
|
||||
setProgress((localIdx + localSeg) / images.length);
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
return;
|
||||
}
|
||||
|
||||
// 前进时间：处理跨多段情况（极少见，但更稳妥）
|
||||
let elapsed = ts - start;
|
||||
while (elapsed >= SEGMENT_MS) {
|
||||
elapsed -= SEGMENT_MS;
|
||||
localIdx = (localIdx + 1) % images.length;
|
||||
|
||||
// 检查是否到达最后一张
|
||||
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;
|
||||
|
||||
@ -398,25 +441,7 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
if (rafRef.current) cancelAnimationFrame(rafRef.current);
|
||||
rafRef.current = null;
|
||||
};
|
||||
}, [isVideo, images?.length, isPlaying]);
|
||||
|
||||
// 横向滚动同步 idx（且重置段起点）
|
||||
useEffect(() => {
|
||||
const el = scrollerRef.current;
|
||||
if (!el) return;
|
||||
const onScroll = () => {
|
||||
const i = Math.round(el.scrollLeft / el.clientWidth);
|
||||
if (i !== idxRef.current) {
|
||||
idxRef.current = i;
|
||||
setIdx(i);
|
||||
segStartRef.current = performance.now();
|
||||
setSegProgress(0);
|
||||
setProgress(images && images.length ? i / images.length : 0);
|
||||
}
|
||||
};
|
||||
el.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => el.removeEventListener("scroll", onScroll);
|
||||
}, [images?.length]);
|
||||
}, [isVideo, images?.length, isPlaying, loopMode, neighbors?.next?.aweme_id, router]);
|
||||
|
||||
// ====== 统一操作 ======
|
||||
const seekTo = (ratio: number) => {
|
||||
@ -491,11 +516,42 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
if (el) el.scrollTo({ left: next * el.clientWidth, behavior: "smooth" });
|
||||
};
|
||||
|
||||
// ====== 下载功能 ======
|
||||
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[idx];
|
||||
const link = document.createElement("a");
|
||||
link.href = currentImage.url;
|
||||
link.download = `image_${data.aweme_id}_${idx + 1}.jpg`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
};
|
||||
|
||||
// ====== 格式化时间显示 ======
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
// ====== 侧栏（横屏）/ 抽屉（竖屏）样式（Tailwind）
|
||||
const asideClasses = [
|
||||
"z-30 flex flex-col bg-[rgba(22,22,22,0.92)] text-white",
|
||||
// 竖屏：bottom sheet，从下向上弹出
|
||||
"portrait:fixed portrait:inset-x-0 portrait:bottom-0 portrait:w-full portrait:h-[min(80vh,88dvh)]",
|
||||
"portrait:fixed portrait:inset-x-0 portrait:top-110 portrait:w-full portrait:h-[min(80vh,88dvh)]",
|
||||
"portrait:transition-transform portrait:duration-200 portrait:ease-out",
|
||||
open ? "portrait:translate-y-0" : "portrait:translate-y-full",
|
||||
"portrait:border-t portrait:border-white/10",
|
||||
@ -544,7 +600,7 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
return () => el.removeEventListener("wheel", onWheel as any);
|
||||
}, [neighbors?.next?.aweme_id, neighbors?.prev?.aweme_id]);
|
||||
|
||||
// ====== 动态模糊背景：每 0.2s 截取当前媒体内容绘制到背景 canvas ======
|
||||
// ====== 动态模糊背景：定时截取当前媒体内容绘制到背景 canvas ======
|
||||
useEffect(() => {
|
||||
const canvas = backgroundCanvasRef.current;
|
||||
if (!canvas) return;
|
||||
@ -580,15 +636,16 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
}
|
||||
}
|
||||
|
||||
if (!sourceElement || (sourceElement instanceof HTMLVideoElement && sourceElement.readyState < 2)) {
|
||||
return;
|
||||
}
|
||||
// 不要在帧不可用时清空画布，避免出现黑屏闪烁
|
||||
// 仅当有可绘制帧时才进行绘制，画面会被完整覆盖，无需提前 clear
|
||||
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;
|
||||
|
||||
// 图片在切换时可能尚未完成解码（naturalWidth/Height 为 0），此时保持上一帧
|
||||
if (!sourceWidth || !sourceHeight) return;
|
||||
|
||||
// 计算 cover 模式的尺寸和位置
|
||||
@ -611,11 +668,11 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
offsetY = 0;
|
||||
}
|
||||
|
||||
// 清空画布并绘制
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
// 直接绘制一帧即可（cover 会完全覆盖整个画布，无需 clearRect）
|
||||
ctx.drawImage(sourceElement, offsetX, offsetY, drawWidth, drawHeight);
|
||||
};
|
||||
|
||||
// 使用较高频率的定时器以保持背景连贯（20ms ~= 50fps）
|
||||
const intervalId = setInterval(drawMediaToCanvas, 20);
|
||||
|
||||
return () => {
|
||||
@ -632,7 +689,7 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
className="fixed inset-0 w-full h-full -z-10"
|
||||
style={{ filter: "blur(40px)" }}
|
||||
/>
|
||||
|
||||
|
||||
{/* 横屏下使用并排布局；竖屏下为单栏（评论为 bottom sheet） */}
|
||||
<div className="relative h-full landscape:flex landscape:flex-row">
|
||||
{/* 主媒体区域 */}
|
||||
@ -648,8 +705,8 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
// 旋转 0/180：充满容器盒子；
|
||||
// 旋转 90/270：用中心定位 + 100vh/100vw，保证铺满全屏
|
||||
rotation % 180 === 0
|
||||
? `absolute inset-0 h-full w-full object-${objectFit} bg-black/70 cursor-pointer`
|
||||
: `absolute top-1/2 left-1/2 h-[100vw] w-[100vh] object-${objectFit} bg-black/70 cursor-pointer`,
|
||||
? `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:
|
||||
@ -657,16 +714,18 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
? `rotate(${rotation}deg)`
|
||||
: `translate(-50%, -50%) rotate(${rotation}deg)`,
|
||||
transformOrigin: "center center",
|
||||
objectFit,
|
||||
}}
|
||||
playsInline
|
||||
autoPlay
|
||||
loop onClick={togglePlay}
|
||||
loop={loopMode === "loop"}
|
||||
onClick={togglePlay}
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0">
|
||||
<div
|
||||
ref={scrollerRef}
|
||||
className="absolute inset-0 overflow-x-auto overflow-y-hidden snap-x snap-mandatory flex no-scrollbar"
|
||||
className="absolute inset-0 overflow-x-auto overflow-y-hidden snap-x snap-mandatory flex no-scrollbar"
|
||||
>
|
||||
{(data as ImageData).images.map((img) => (
|
||||
<div
|
||||
@ -675,7 +734,7 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
style={{ aspectRatio: img.width && img.height ? `${img.width}/${img.height}` : undefined }}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={img.url} alt="image" className={`absolute inset-0 w-full h-full object-${objectFit} cursor-pointer`} onClick={togglePlay} draggable={false} />
|
||||
<img src={img.url} alt="image" className={`absolute inset-0 w-full h-full cursor-pointer`} style={{ objectFit }} onClick={togglePlay} draggable={false} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -684,14 +743,14 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
{images && images.length > 1 ? (
|
||||
<>
|
||||
<button
|
||||
className="absolute top-1/2 -translate-y-1/2 left-3 w-[42px] h-[42px] grid place-items-center rounded-full bg-black/15 text-white border border-white/20 drop-shadow-lg cursor-pointer"
|
||||
className="absolute top-5/11 left-3 -translate-y-1/2 w-12 h-12 flex items-center justify-center text-white hover:bg-white/10 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed border-b border-white/20 bg-black/40 backdrop-blur-sm border overflow-hidden rounded-full"
|
||||
onClick={prevImg}
|
||||
aria-label="上一张"
|
||||
>
|
||||
<ChevronLeft />
|
||||
</button>
|
||||
<button
|
||||
className="absolute top-1/2 -translate-y-1/2 right-3 w-[42px] h-[42px] grid place-items-center rounded-full bg-black/15 text-white border border-white/20 drop-shadow-lg cursor-pointer"
|
||||
className="absolute top-5/11 right-3 -translate-y-1/2 w-12 h-12 flex items-center justify-center text-white hover:bg-white/10 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed border-b border-white/20 bg-black/40 backdrop-blur-sm border overflow-hidden rounded-full"
|
||||
onClick={nextImg}
|
||||
aria-label="下一张"
|
||||
>
|
||||
@ -752,7 +811,7 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="relative h-1 rounded-full bg-white/25 overflow-hidden cursor-pointer"
|
||||
className="relative h-1.5 rounded-full bg-white/25 overflow-hidden cursor-pointer"
|
||||
onClick={(e) => {
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
seekTo((e.clientX - rect.left) / rect.width);
|
||||
@ -769,18 +828,19 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
<div className="flex items-center justify-between gap-2.5">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<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"
|
||||
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={togglePlay}
|
||||
aria-label={isPlaying ? "暂停" : "播放"}
|
||||
>
|
||||
{isPlaying ? <Pause size={18} /> : <Play size={18} />}
|
||||
</button>
|
||||
|
||||
|
||||
{/* 倍速仅视频展示 */}
|
||||
{isVideo ? (
|
||||
<>
|
||||
<button
|
||||
className="h-[30px] px-[10px] rounded-full text-[12px] bg-white/15 text-white border border-white/20 backdrop-blur-sm"
|
||||
className="h-[30px] px-[10px] rounded-full text-[12px] bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
|
||||
onClick={() => {
|
||||
const steps = [1, 1.25, 1.5, 2, 0.75, 0.5];
|
||||
const i = steps.indexOf(rate);
|
||||
@ -792,14 +852,29 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
{rate}x
|
||||
</button>
|
||||
|
||||
|
||||
{/* 旋转：向左/向右各 90° */}
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{/* 播放进度显示 */}
|
||||
<div className="text-[13px] text-white/90 font-mono min-w-[80px] ml-2">
|
||||
{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}`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<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"
|
||||
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={() => setRotation((r) => (r + 270) % 360)}
|
||||
aria-label="向左旋转 90 度"
|
||||
title="向左旋转 90 度"
|
||||
@ -807,7 +882,7 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
<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"
|
||||
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={() => setVolume((v) => (v > 0 ? 0 : 1))}
|
||||
aria-label={volume > 0 ? "静音" : "取消静音"}
|
||||
>
|
||||
@ -820,11 +895,11 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
step={0.05}
|
||||
value={volume}
|
||||
onChange={(e) => setVolume(parseFloat(e.target.value))}
|
||||
className="w-28 accent-white"
|
||||
className="w-28 accent-white cursor-pointer"
|
||||
aria-label="音量"
|
||||
/>
|
||||
<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"
|
||||
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={() => setRotation((r) => (r + 90) % 360)}
|
||||
aria-label="向右旋转 90 度"
|
||||
title="向右旋转 90 度"
|
||||
@ -834,8 +909,17 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2">
|
||||
{/* 循环模式切换 */}
|
||||
<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"
|
||||
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={() => setLoopMode((m) => (m === "loop" ? "sequential" : "loop"))}
|
||||
aria-label={loopMode === "loop" ? "循环播放" : "顺序播放"}
|
||||
title={loopMode === "loop" ? "循环播放" : "顺序播放"}
|
||||
>
|
||||
{loopMode === "loop" ? <Repeat1 size={18} /> : <ArrowDownUp 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={() => setObjectFit((f) => (f === "contain" ? "cover" : "contain"))}
|
||||
aria-label={objectFit === "contain" ? "切换到填充模式" : "切换到适应模式"}
|
||||
title={objectFit === "contain" ? "切换到填充模式" : "切换到适应模式"}
|
||||
@ -843,7 +927,15 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
{objectFit === "contain" ? <Maximize2 size={18} /> : <Minimize 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"
|
||||
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={handleDownload}
|
||||
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={toggleFullscreen}
|
||||
aria-label="切换全屏"
|
||||
>
|
||||
@ -876,20 +968,46 @@ export default function AwemeDetailClient(props: { data: VideoData | ImageData;
|
||||
</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-10 h-12 flex items-center justify-center text-white hover:bg-white/10 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed border-b border-white/20"
|
||||
onClick={() => neighbors?.prev && router.push(`/aweme/${neighbors.prev.aweme_id}`)}
|
||||
disabled={!neighbors?.prev}
|
||||
aria-label="上一个视频"
|
||||
title="上一个视频"
|
||||
>
|
||||
<ChevronUp size={20} />
|
||||
</button>
|
||||
<button
|
||||
className="w-10 h-12 flex items-center justify-center text-white hover:bg-white/10 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
onClick={() => neighbors?.next && router.push(`/aweme/${neighbors.next.aweme_id}`)}
|
||||
disabled={!neighbors?.next}
|
||||
aria-label="下一个视频"
|
||||
title="下一个视频"
|
||||
>
|
||||
<ChevronDown size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 评论面板：竖屏 bottom sheet；横屏并排分栏 */}
|
||||
<aside className={asideClasses}>
|
||||
<div className="flex items-center justify-between px-3 py-3 border-b border-white/10">
|
||||
<button
|
||||
className="text-white/90 text-xs px-2 py-1 rounded-lg bg-white/15 border border-white/20"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
<div className="text-white font-semibold">
|
||||
{/* 竖屏：评论在左，关闭按钮在右 */}
|
||||
<div className="text-white font-semibold portrait:order-1 landscape:order-2">
|
||||
评论 {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 portrait:order-2 landscape:order-1"
|
||||
onClick={() => setOpen(false)}
|
||||
aria-label="关闭评论"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-3 overflow-auto">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import BackButton from "@/app/components/BackButton";
|
||||
import AwemeDetailClient from "./Client";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
function ms(v?: number | null) {
|
||||
if (!v) return "";
|
||||
@ -10,6 +11,37 @@ function ms(v?: number | null) {
|
||||
return `${m}:${r.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ awemeId: string }> }): Promise<Metadata> {
|
||||
const id = (await params).awemeId;
|
||||
|
||||
const [video, post] = await Promise.all([
|
||||
prisma.video.findUnique({
|
||||
where: { aweme_id: id },
|
||||
select: { desc: true, author: { select: { nickname: true } } },
|
||||
}),
|
||||
prisma.imagePost.findUnique({
|
||||
where: { aweme_id: id },
|
||||
select: { desc: true, author: { select: { nickname: true } } },
|
||||
})
|
||||
]);
|
||||
|
||||
const data = video || post;
|
||||
if (!data) {
|
||||
return {
|
||||
title: "作品不存在",
|
||||
};
|
||||
}
|
||||
|
||||
const desc = data.desc || "查看作品详情";
|
||||
const author = data.author.nickname;
|
||||
const title = desc.length > 50 ? `${desc.slice(0, 50)}... - ${author}` : `${desc} - ${author}`;
|
||||
|
||||
return {
|
||||
title,
|
||||
description: desc,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function AwemeDetail({ params }: { params: Promise<{ awemeId: string }> }) {
|
||||
const id = (await params).awemeId;
|
||||
|
||||
|
||||
@ -28,4 +28,12 @@ body {
|
||||
|
||||
/* 滚动条隐藏 */
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
.h-screen{
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
.min-h-screen{
|
||||
min-height: 100dvh;
|
||||
}
|
||||
@ -13,8 +13,11 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: {
|
||||
default: "抖歪 - 记录当下时代",
|
||||
template: "%s - 抖歪",
|
||||
},
|
||||
description: "记录当下时代的精彩瞬间",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import FeedMasonry from "./components/FeedMasonry";
|
||||
import type { FeedItem } from "./types/feed";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "作品集 - 抖歪",
|
||||
description: "抖歪作品集，记录当下时代的精彩瞬间",
|
||||
};
|
||||
|
||||
export default async function Home() {
|
||||
const [videos, posts] = await Promise.all([
|
||||
|
||||
@ -34,6 +34,14 @@ export default function TasksPage() {
|
||||
const [openDetails, setOpenDetails] = useState<Set<string>>(new Set());
|
||||
const [, setTick] = useState(0); // 用于强制更新计时显示
|
||||
|
||||
// 设置页面标题
|
||||
useEffect(() => {
|
||||
document.title = "任务管理 - 抖歪";
|
||||
return () => {
|
||||
document.title = "抖歪 - 记录当下时代";
|
||||
};
|
||||
}, []);
|
||||
|
||||
const inProgressUrls = useMemo(
|
||||
() => new Set(tasks.filter(t => t.status === "pending" || t.status === "running").map(t => t.url)),
|
||||
[tasks]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user