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

优化图文页

Browse Source
This commit is contained in:
feie9454 2026-04-28 17:11:42 +08:00
parent 674c202264
commit 040273586b
69 changed files with 3939 additions and 2302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.vscode/tasks.json vendored
View File

@ -5,23 +5,15 @@
"label": "tsc-check",
"type": "shell",
"command": "node",
"args": [
"-e",
"require('typescript').transpile('const x: number = 1;')"
],
"problemMatcher": [
"$tsc"
],
"args": ["-e", "require('typescript').transpile('const x: number = 1;')"],
"problemMatcher": ["$tsc"],
"group": "build"
},
{
"label": "tsc-check (one-off)",
"type": "shell",
"command": "node",
"args": [
"-e",
"require('typescript').transpile('const x: number = 1;')"
]
"args": ["-e", "require('typescript').transpile('const x: number = 1;')"]
}
]
}

2
README.md
View File

@ -18,7 +18,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
This project uses local system font stacks so production builds do not depend on fetching Google Fonts.
## Learn More

22
app/admin/stt/page.tsx
View File

@ -1,7 +1,7 @@
'use client';
"use client";
import Link from 'next/link';
import BackButton from '@/app/components/BackButton';
import Link from "next/link";
import BackButton from "@/app/components/BackButton";
export default function SttAdminPage() {
return (
@ -10,12 +10,8 @@ export default function SttAdminPage() {
<BackButton />
<div className="mt-8">
<h1 className="text-3xl font-bold text-gray-900">
STT 管理中心
</h1>
<p className="text-gray-600 mt-2">
管理和配置视频语音转写功能
</p>
<h1 className="text-3xl font-bold text-gray-900">STT 管理中心</h1>
<p className="text-gray-600 mt-2">管理和配置视频语音转写功能</p>
</div>
<div className="mt-8 grid gap-6">
@ -98,9 +94,7 @@ export default function SttAdminPage() {
<p className="text-gray-600 mt-1">
配置转写 API、模型参数和其他高级选项
</p>
<div className="mt-4 text-gray-400 font-medium">
即将推出
</div>
<div className="mt-4 text-gray-400 font-medium">即将推出</div>
</div>
</div>
</div>
@ -130,9 +124,7 @@ export default function SttAdminPage() {
<p className="text-gray-600 mt-1">
查看转写使用情况、成功率、语言分布等统计数据
</p>
<div className="mt-4 text-gray-400 font-medium">
即将推出
</div>
<div className="mt-4 text-gray-400 font-medium">即将推出</div>
</div>
</div>
</div>

113
app/admin/stt/videos/page.tsx
View File

@ -1,8 +1,8 @@
'use client';
"use client";
import { useState, useEffect } from 'react';
import Link from 'next/link';
import BackButton from '@/app/components/BackButton';
import { useState, useEffect } from "react";
import Link from "next/link";
import BackButton from "@/app/components/BackButton";
type VideoTranscript = {
id: string;
@ -34,7 +34,9 @@ export default function SttVideosPage() {
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [transcribing, setTranscribing] = useState<Set<string>>(new Set());
const [filter, setFilter] = useState<'all' | 'transcribed' | 'pending'>('all');
const [filter, setFilter] = useState<"all" | "transcribed" | "pending">(
"all",
);
const [batchTranscribing, setBatchTranscribing] = useState(false);
const [batchProgress, setBatchProgress] = useState({ current: 0, total: 0 });
@ -45,21 +47,22 @@ export default function SttVideosPage() {
const fetchVideos = async () => {
try {
setLoading(true);
const response = await fetch('/api/admin/stt/videos');
const response = await fetch("/api/admin/stt/videos");
if (!response.ok) {
throw new Error('Failed to fetch videos');
throw new Error("Failed to fetch videos");
}
const data: ApiResponse = await response.json();
setVideos(data.videos);
} catch (err) {
setError(err instanceof Error ? err.message : 'Unknown error');
setError(err instanceof Error ? err.message : "Unknown error");
} finally {
setLoading(false);
}
};
// 简单的 sleep 工具
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
const sleep = (ms: number) =>
new Promise((resolve) => setTimeout(resolve, ms));
type PollOptions = {
intervalMs?: number;
@ -69,11 +72,11 @@ export default function SttVideosPage() {
// 轮询某个视频的转写状态直至完成或超时
const pollVideoUntilTranscribed = async (
awemeId: string,
{ intervalMs = 2000, maxAttempts = 30 }: PollOptions = {}
{ intervalMs = 2000, maxAttempts = 30 }: PollOptions = {},
): Promise<boolean> => {
for (let attempt = 0; attempt < maxAttempts; attempt++) {
try {
const resp = await fetch('/api/admin/stt/videos');
const resp = await fetch("/api/admin/stt/videos");
if (resp.ok) {
const data: ApiResponse = await resp.json();
setVideos(data.videos);
@ -91,11 +94,11 @@ export default function SttVideosPage() {
};
const handleTranscribe = async (awemeId: string) => {
setTranscribing(prev => new Set(prev).add(awemeId));
setTranscribing((prev) => new Set(prev).add(awemeId));
try {
const response = await fetch(`/api/stt?awemeId=${awemeId}`);
if (!response.ok) {
throw new Error('Failed to transcribe video');
throw new Error("Failed to transcribe video");
}
// 轮询直到该视频转写完成或超时，避免后端异步导致立即刷新拿不到最新状态
const done = await pollVideoUntilTranscribed(awemeId);
@ -104,9 +107,9 @@ export default function SttVideosPage() {
await fetchVideos();
}
} catch (err) {
alert(err instanceof Error ? err.message : 'Transcription failed');
alert(err instanceof Error ? err.message : "Transcription failed");
} finally {
setTranscribing(prev => {
setTranscribing((prev) => {
const next = new Set(prev);
next.delete(awemeId);
return next;
@ -115,13 +118,17 @@ export default function SttVideosPage() {
};
const handleBatchTranscribe = async () => {
const pendingVideos = videos.filter(v => v.transcript === null);
const pendingVideos = videos.filter((v) => v.transcript === null);
if (pendingVideos.length === 0) {
alert('没有待转写的视频');
alert("没有待转写的视频");
return;
}
if (!confirm(`确定要转写 ${pendingVideos.length} 个视频吗？这可能需要较长时间。`)) {
if (
!confirm(
`确定要转写 ${pendingVideos.length} 个视频吗？这可能需要较长时间。`,
)
) {
return;
}
@ -132,7 +139,7 @@ export default function SttVideosPage() {
for (let i = 0; i < pendingVideos.length; i++) {
const video = pendingVideos[i];
setBatchProgress({ current: i + 1, total: pendingVideos.length });
setTranscribing(prev => new Set(prev).add(video.aweme_id));
setTranscribing((prev) => new Set(prev).add(video.aweme_id));
try {
const response = await fetch(`/api/stt?awemeId=${video.aweme_id}`);
@ -141,7 +148,7 @@ export default function SttVideosPage() {
}
// 为该视频启动后台轮询，不阻塞批处理的顺序执行
const p = pollVideoUntilTranscribed(video.aweme_id).finally(() => {
setTranscribing(prev => {
setTranscribing((prev) => {
const next = new Set(prev);
next.delete(video.aweme_id);
return next;
@ -160,19 +167,19 @@ export default function SttVideosPage() {
await fetchVideos();
setBatchTranscribing(false);
setBatchProgress({ current: 0, total: 0 });
alert('批量转写完成！');
alert("批量转写完成！");
};
const filteredVideos = videos.filter(v => {
if (filter === 'transcribed') return v.transcript !== null;
if (filter === 'pending') return v.transcript === null;
const filteredVideos = videos.filter((v) => {
if (filter === "transcribed") return v.transcript !== null;
if (filter === "pending") return v.transcript === null;
return true;
});
const stats = {
total: videos.length,
transcribed: videos.filter(v => v.transcript !== null).length,
pending: videos.filter(v => v.transcript === null).length,
transcribed: videos.filter((v) => v.transcript !== null).length,
pending: videos.filter((v) => v.transcript === null).length,
};
if (loading) {
@ -212,7 +219,9 @@ export default function SttVideosPage() {
{/* Header */}
<div className="mb-8">
<BackButton />
<h1 className="text-3xl font-bold text-gray-900 mt-4">视频转写管理</h1>
<h1 className="text-3xl font-bold text-gray-900 mt-4">
视频转写管理
</h1>
<p className="text-gray-600 mt-2">管理视频的语音转写状态</p>
</div>
@ -220,15 +229,21 @@ export default function SttVideosPage() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div className="bg-white rounded-lg shadow p-6">
<div className="text-sm text-gray-600">总视频数</div>
<div className="text-3xl font-bold text-gray-900 mt-2">{stats.total}</div>
<div className="text-3xl font-bold text-gray-900 mt-2">
{stats.total}
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="text-sm text-gray-600">已转写</div>
<div className="text-3xl font-bold text-green-600 mt-2">{stats.transcribed}</div>
<div className="text-3xl font-bold text-green-600 mt-2">
{stats.transcribed}
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="text-sm text-gray-600">待转写</div>
<div className="text-3xl font-bold text-orange-600 mt-2">{stats.pending}</div>
<div className="text-3xl font-bold text-orange-600 mt-2">
{stats.pending}
</div>
</div>
</div>
@ -237,31 +252,31 @@ export default function SttVideosPage() {
<div className="flex items-center justify-between">
<div className="flex gap-4">
<button
onClick={() => setFilter('all')}
onClick={() => setFilter("all")}
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
filter === 'all'
? 'bg-blue-600 text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
filter === "all"
? "bg-blue-600 text-white"
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
}`}
>
全部 ({stats.total})
</button>
<button
onClick={() => setFilter('transcribed')}
onClick={() => setFilter("transcribed")}
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
filter === 'transcribed'
? 'bg-green-600 text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
filter === "transcribed"
? "bg-green-600 text-white"
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
}`}
>
已转写 ({stats.transcribed})
</button>
<button
onClick={() => setFilter('pending')}
onClick={() => setFilter("pending")}
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
filter === 'pending'
? 'bg-orange-600 text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
filter === "pending"
? "bg-orange-600 text-white"
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
}`}
>
待转写 ({stats.pending})
@ -284,7 +299,7 @@ export default function SttVideosPage() {
批量转写中...
</span>
) : (
'全部转写'
"全部转写"
)}
</button>
</div>
@ -326,7 +341,7 @@ export default function SttVideosPage() {
href={`/aweme/${video.aweme_id}`}
className="text-sm font-medium text-blue-600 hover:text-blue-800 line-clamp-2"
>
{video.desc || '无描述'}
{video.desc || "无描述"}
</Link>
<p className="text-sm text-gray-500 mt-1">
@{video.author.nickname}
@ -357,7 +372,7 @@ export default function SttVideosPage() {
) : (
<div className="text-xs text-gray-500">
<span className="font-medium">
{video.transcript.audio_type || '非语音'}
{video.transcript.audio_type || "非语音"}
</span>
{video.transcript.non_speech_summary && (
<span className="ml-1">
@ -386,7 +401,7 @@ export default function SttVideosPage() {
重新转写...
</span>
) : (
'重新转写'
"重新转写"
)}
</button>
) : (
@ -401,7 +416,7 @@ export default function SttVideosPage() {
转写中...
</span>
) : (
'开始转写'
"开始转写"
)}
</button>
)}
@ -413,9 +428,7 @@ export default function SttVideosPage() {
</div>
{filteredVideos.length === 0 && (
<div className="text-center py-12 text-gray-500">
没有找到视频
</div>
<div className="text-center py-12 text-gray-500">没有找到视频</div>
)}
</div>
</div>

16
app/api/admin/stt/videos/route.ts
View File

@ -1,11 +1,11 @@
import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { getFileUrl } from '@/lib/minio';
import { NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { getFileUrl } from "@/lib/minio";
export async function GET() {
try {
const videos = await prisma.video.findMany({
orderBy: { created_at: 'desc' },
orderBy: { created_at: "desc" },
take: 1000,
include: {
author: {
@ -29,7 +29,7 @@ export async function GET() {
const formattedVideos = videos.map((v) => ({
aweme_id: v.aweme_id,
desc: v.desc,
cover_url: getFileUrl(v.cover_url ?? ''),
cover_url: getFileUrl(v.cover_url ?? ""),
duration_ms: v.duration_ms,
author: {
nickname: v.author.nickname,
@ -51,10 +51,10 @@ export async function GET() {
total: videos.length,
});
} catch (error) {
console.error('Failed to fetch videos:', error);
console.error("Failed to fetch videos:", error);
return NextResponse.json(
{ error: 'Failed to fetch videos' },
{ status: 500 }
{ error: "Failed to fetch videos" },
{ status: 500 },
);
}
}

55
app/api/author/[secUid]/feed/route.ts
View File

@ -1,15 +1,18 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import type { FeedItem, FeedResponse } from '@/app/types/feed';
import { getFileUrl } from '@/lib/minio';
import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import type { FeedItem, FeedResponse } from "@/app/types/feed";
import { getFileUrl } from "@/lib/minio";
export async function GET(req: NextRequest, { params }: { params: Promise<{ secUid: string }> }) {
export async function GET(
req: NextRequest,
{ params }: { params: Promise<{ secUid: string }> },
) {
const secUid = (await params).secUid;
const { searchParams } = new URL(req.url);
const limitParam = searchParams.get('limit');
const beforeParam = searchParams.get('before');
const limitParam = searchParams.get("limit");
const beforeParam = searchParams.get("before");
const limit = Math.min(Math.max(Number(limitParam ?? '24'), 1), 60); // 1..60
const limit = Math.min(Math.max(Number(limitParam ?? "24"), 1), 60); // 1..60
const before = beforeParam ? new Date(beforeParam) : null;
// fetch chunk from both tables
@ -17,20 +20,20 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ secU
prisma.video.findMany({
where: {
authorId: secUid,
...(before ? { created_at: { lt: before } } : {})
...(before ? { created_at: { lt: before } } : {}),
},
orderBy: { created_at: 'desc' },
orderBy: { created_at: "desc" },
take: limit,
include: { author: true },
}),
prisma.imagePost.findMany({
where: {
authorId: secUid,
...(before ? { created_at: { lt: before } } : {})
...(before ? { created_at: { lt: before } } : {}),
},
orderBy: { created_at: 'desc' },
orderBy: { created_at: "desc" },
take: limit,
include: { author: true, images: { orderBy: { order: 'asc' }, take: 1 } },
include: { author: true, images: { orderBy: { order: "asc" }, take: 1 } },
}),
]);
@ -41,11 +44,15 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ secU
created_at: v.created_at,
desc: v.desc,
video_url: getFileUrl(v.video_url),
cover_url: getFileUrl(v.cover_url ?? 'default_cover.png'),
cover_url: getFileUrl(v.cover_url ?? "default_cover.png"),
width: v.width ?? null,
height: v.height ?? null,
author: { nickname: v.author.nickname, avatar_url: getFileUrl(v.author.avatar_url ?? ''), sec_uid: v.author.sec_uid },
likes: Number(v.digg_count)
author: {
nickname: v.author.nickname,
avatar_url: getFileUrl(v.author.avatar_url ?? ""),
sec_uid: v.author.sec_uid,
},
likes: Number(v.digg_count),
})),
...posts.map((p) => ({
type: "image" as const,
@ -55,13 +62,21 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ secU
cover_url: getFileUrl(p.images?.[0]?.url ?? null),
width: p.images?.[0]?.width ?? null,
height: p.images?.[0]?.height ?? null,
author: { nickname: p.author.nickname, avatar_url: getFileUrl(p.author.avatar_url ?? ''), sec_uid: p.author.sec_uid },
likes: Number(p.digg_count)
author: {
nickname: p.author.nickname,
avatar_url: getFileUrl(p.author.avatar_url ?? ""),
sec_uid: p.author.sec_uid,
},
likes: Number(p.digg_count),
})),
].sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at))
]
.sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at))
.slice(0, limit);
const nextCursor = merged.length > 0 ? new Date(merged[merged.length - 1].created_at as any).toISOString() : null;
const nextCursor =
merged.length > 0
? new Date(merged[merged.length - 1].created_at as any).toISOString()
: null;
const payload: FeedResponse = { items: merged, nextCursor };
return NextResponse.json(payload);
}

62
app/api/aweme/around/route.ts
View File

@ -12,8 +12,14 @@ export async function GET(req: NextRequest) {
// Find current item timestamp from either table
const [video, post] = await Promise.all([
prisma.video.findUnique({ where: { aweme_id: awemeId }, select: { aweme_id: true, created_at: true } }),
prisma.imagePost.findUnique({ where: { aweme_id: awemeId }, select: { aweme_id: true, created_at: true } }),
prisma.video.findUnique({
where: { aweme_id: awemeId },
select: { aweme_id: true, created_at: true },
}),
prisma.imagePost.findUnique({
where: { aweme_id: awemeId },
select: { aweme_id: true, created_at: true },
}),
]);
const current = video ?? post;
@ -52,25 +58,61 @@ export async function GET(req: NextRequest) {
]);
const pickPrev = (() => {
const cands: { type: "video" | "image"; aweme_id: string; created_at: Date }[] = [];
if (newerVideo) cands.push({ type: "video", aweme_id: newerVideo.aweme_id, created_at: newerVideo.created_at as unknown as Date });
if (newerPost) cands.push({ type: "image", aweme_id: newerPost.aweme_id, created_at: newerPost.created_at as unknown as Date });
const cands: {
type: "video" | "image";
aweme_id: string;
created_at: Date;
}[] = [];
if (newerVideo)
cands.push({
type: "video",
aweme_id: newerVideo.aweme_id,
created_at: newerVideo.created_at as unknown as Date,
});
if (newerPost)
cands.push({
type: "image",
aweme_id: newerPost.aweme_id,
created_at: newerPost.created_at as unknown as Date,
});
if (cands.length === 0) return undefined;
// nearest newer -> minimal created_at
cands.sort((a, b) => +a.created_at - +b.created_at);
const h = cands[0];
return { type: h.type, aweme_id: h.aweme_id, created_at: h.created_at.toISOString() };
return {
type: h.type,
aweme_id: h.aweme_id,
created_at: h.created_at.toISOString(),
};
})();
const pickNext = (() => {
const cands: { type: "video" | "image"; aweme_id: string; created_at: Date }[] = [];
if (olderVideo) cands.push({ type: "video", aweme_id: olderVideo.aweme_id, created_at: olderVideo.created_at as unknown as Date });
if (olderPost) cands.push({ type: "image", aweme_id: olderPost.aweme_id, created_at: olderPost.created_at as unknown as Date });
const cands: {
type: "video" | "image";
aweme_id: string;
created_at: Date;
}[] = [];
if (olderVideo)
cands.push({
type: "video",
aweme_id: olderVideo.aweme_id,
created_at: olderVideo.created_at as unknown as Date,
});
if (olderPost)
cands.push({
type: "image",
aweme_id: olderPost.aweme_id,
created_at: olderPost.created_at as unknown as Date,
});
if (cands.length === 0) return undefined;
// nearest older -> maximal created_at among older
cands.sort((a, b) => +b.created_at - +a.created_at);
const h = cands[0];
return { type: h.type, aweme_id: h.aweme_id, created_at: h.created_at.toISOString() };
return {
type: h.type,
aweme_id: h.aweme_id,
created_at: h.created_at.toISOString(),
};
})();
return NextResponse.json({ prev: pickPrev ?? null, next: pickNext ?? null });

61
app/api/comments/[awemeId]/route.ts
View File

@ -5,7 +5,7 @@ import { NextRequest, NextResponse } from "next/server";
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ awemeId: string }> }
{ params }: { params: Promise<{ awemeId: string }> },
) {
const awemeId = (await params).awemeId;
const searchParams = request.nextUrl.searchParams;
@ -13,7 +13,8 @@ export async function GET(
const take = parseInt(searchParams.get("take") || "20", 10);
// ranked 模式参数（均为可选，提供合理默认值）
const seed = searchParams.get("seed") || new Date().toISOString().slice(0, 10); // 默认按日期稳定
const seed =
searchParams.get("seed") || new Date().toISOString().slice(0, 10); // 默认按日期稳定
const snapshotIso = searchParams.get("snapshot");
const snapshot = snapshotIso ? new Date(snapshotIso) : new Date(); // 用于时间衰减的基准时间，确保单次会话稳定
const halfLifeHours = parseFloat(searchParams.get("halfLifeHours") || "24");
@ -21,8 +22,6 @@ export async function GET(
const wTime = parseFloat(searchParams.get("wTime") || "2"); // 时间衰减权重
const wJit = parseFloat(searchParams.get("wJit") || "10"); // 随机扰动权重（稳定随机）
try {
// 查找是视频还是图文
const [video, post] = await Promise.all([
@ -41,9 +40,7 @@ export async function GET(
}
// 构建查询条件
const where = video
? { videoId: awemeId }
: { imagePostId: awemeId };
const where = video ? { videoId: awemeId } : { imagePostId: awemeId };
// 按「热度 + 时间衰减 + 稳定随机扰动」打分排序；否则使用稳定的时间排序
const total = await prisma.comment.count({ where });
@ -68,7 +65,9 @@ export async function GET(
${wJit} * ${jitterExpr}
)`;
const whereField = (await video) ? Prisma.sql`c."videoId"` : Prisma.sql`c."imagePostId"`;
const whereField = (await video)
? Prisma.sql`c."videoId"`
: Prisma.sql`c."imagePostId"`;
const rows: Array<{
cid: string;
@ -92,22 +91,41 @@ export async function GET(
ORDER BY ${scoreExpr} DESC, c."created_at" DESC, c."cid" ASC
OFFSET ${skip}
LIMIT ${take}
`
`,
);
// 批量查询每条评论的配图/贴纸
const cids = rows.map(r => r.cid);
const cids = rows.map((r) => r.cid);
const images = cids.length
? await prisma.commentImage.findMany({
where: { commentId: { in: cids } },
orderBy: { order: 'asc' },
select: { commentId: true, url: true, width: true, height: true, order: true },
orderBy: { order: "asc" },
select: {
commentId: true,
url: true,
width: true,
height: true,
order: true,
},
})
: [];
const group = new Map<string, { url: string; width?: number | null; height?: number | null; order: number }[]>();
const group = new Map<
string,
{
url: string;
width?: number | null;
height?: number | null;
order: number;
}[]
>();
for (const img of images) {
const arr = group.get(img.commentId) || [];
arr.push({ url: img.url, width: img.width, height: img.height, order: img.order });
arr.push({
url: img.url,
width: img.width,
height: img.height,
order: img.order,
});
group.set(img.commentId, arr);
}
const formattedComments = rows.map((c) => ({
@ -117,9 +135,15 @@ export async function GET(
digg_count: Number(c.digg_count),
user: {
nickname: c.nickname,
avatar_url: getFileUrl(c.avatar_url || 'default_avatar.png'),
avatar_url: getFileUrl(c.avatar_url || "default_avatar.png"),
},
images: (group.get(c.cid) || []).sort((a, b) => a.order - b.order).map(i => ({ url: getFileUrl(i.url), width: i.width ?? undefined, height: i.height ?? undefined })),
images: (group.get(c.cid) || [])
.sort((a, b) => a.order - b.order)
.map((i) => ({
url: getFileUrl(i.url),
width: i.width ?? undefined,
height: i.height ?? undefined,
})),
}));
return NextResponse.json({
@ -134,9 +158,6 @@ export async function GET(
});
} catch (error) {
console.error("获取评论失败:", error);
return NextResponse.json(
{ error: "获取评论失败" },
{ status: 500 }
);
return NextResponse.json({ error: "获取评论失败" }, { status: 500 });
}
}

46
app/api/feed/route.ts
View File

@ -1,7 +1,7 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import type { FeedItem, FeedResponse } from '@/app/types/feed';
import { getFileUrl } from '@/lib/minio';
import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import type { FeedItem, FeedResponse } from "@/app/types/feed";
import { getFileUrl } from "@/lib/minio";
// Contract
// Inputs: search params { before?: ISOString, limit?: number }
@ -9,25 +9,25 @@ import { getFileUrl } from '@/lib/minio';
export async function GET(req: NextRequest) {
const { searchParams } = new URL(req.url);
const limitParam = searchParams.get('limit');
const beforeParam = searchParams.get('before');
const limitParam = searchParams.get("limit");
const beforeParam = searchParams.get("before");
const limit = Math.min(Math.max(Number(limitParam ?? '24'), 1), 60); // 1..60
const limit = Math.min(Math.max(Number(limitParam ?? "24"), 1), 60); // 1..60
const before = beforeParam ? new Date(beforeParam) : null;
// fetch chunk from both tables
const [videos, posts] = await Promise.all([
prisma.video.findMany({
where: before ? { created_at: { lt: before } } : undefined,
orderBy: { created_at: 'desc' },
orderBy: { created_at: "desc" },
take: limit,
include: { author: true },
}),
prisma.imagePost.findMany({
where: before ? { created_at: { lt: before } } : undefined,
orderBy: { created_at: 'desc' },
orderBy: { created_at: "desc" },
take: limit,
include: { author: true, images: { orderBy: { order: 'asc' }, take: 1 } },
include: { author: true, images: { orderBy: { order: "asc" }, take: 1 } },
}),
]);
@ -38,11 +38,15 @@ export async function GET(req: NextRequest) {
created_at: v.created_at,
desc: v.desc,
video_url: getFileUrl(v.video_url),
cover_url: getFileUrl(v.cover_url ?? 'default_cover.png'),
cover_url: getFileUrl(v.cover_url ?? "default_cover.png"),
width: v.width ?? null,
height: v.height ?? null,
author: { nickname: v.author.nickname, avatar_url: getFileUrl(v.author.avatar_url ?? ''), sec_uid: v.author.sec_uid },
likes: Number(v.digg_count)
author: {
nickname: v.author.nickname,
avatar_url: getFileUrl(v.author.avatar_url ?? ""),
sec_uid: v.author.sec_uid,
},
likes: Number(v.digg_count),
})),
...posts.map((p) => ({
type: "image" as const,
@ -52,13 +56,21 @@ export async function GET(req: NextRequest) {
cover_url: getFileUrl(p.images?.[0]?.url ?? null),
width: p.images?.[0]?.width ?? null,
height: p.images?.[0]?.height ?? null,
author: { nickname: p.author.nickname, avatar_url: getFileUrl(p.author.avatar_url ?? ''), sec_uid: p.author.sec_uid },
likes: Number(p.digg_count)
author: {
nickname: p.author.nickname,
avatar_url: getFileUrl(p.author.avatar_url ?? ""),
sec_uid: p.author.sec_uid,
},
likes: Number(p.digg_count),
})),
].sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at))
]
.sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at))
.slice(0, limit);
const nextCursor = merged.length > 0 ? new Date(merged[merged.length - 1].created_at as any).toISOString() : null;
const nextCursor =
merged.length > 0
? new Date(merged[merged.length - 1].created_at as any).toISOString()
: null;
const payload: FeedResponse = { items: merged, nextCursor };
return NextResponse.json(payload);
}

10
app/api/fetcher/anti-anti-detector.ts
View File

@ -1,6 +1,6 @@
// index.js
import { chromium } from 'playwright-extra';
import stealth from 'puppeteer-extra-plugin-stealth'
import { chromium } from "playwright-extra";
import stealth from "puppeteer-extra-plugin-stealth";
chromium.use(stealth());
@ -8,9 +8,9 @@ chromium.use(stealth());
const browser = await chromium.launch({ headless: false }); // 需要可视化就 false
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://bot.sannysoft.com/'); // 常用自测页
console.log('Title:', await page.title());
await page.screenshot({ path: 'stealth.png', fullPage: true });
await page.goto("https://bot.sannysoft.com/"); // 常用自测页
console.log("Title:", await page.title());
await page.screenshot({ path: "stealth.png", fullPage: true });
setTimeout(async () => {
await browser.close();
}, 1000_000);

139
app/api/fetcher/browser.ts
View File

@ -1,99 +1,98 @@
export const runtime = 'nodejs'
export const runtime = "nodejs";
import { type Browser, type BrowserContext } from 'playwright'
import { chromium } from 'playwright-extra' // A simple singleton manager for a persistent Chromium context with ref-counting. // Prevents concurrent tasks from closing the shared window prematurely.
import stealth from 'puppeteer-extra-plugin-stealth'
import { type Browser, type BrowserContext } from "playwright";
import { chromium } from "playwright-extra"; // A simple singleton manager for a persistent Chromium context with ref-counting. // Prevents concurrent tasks from closing the shared window prematurely.
import stealth from "puppeteer-extra-plugin-stealth";
chromium.use(stealth());
let contextPromise: Promise<BrowserContext> | null = null
let context: BrowserContext | null = null
let refCount = 0
let idleCloseTimer: NodeJS.Timeout | null = null
let contextPromise: Promise<BrowserContext> | null = null;
let context: BrowserContext | null = null;
let refCount = 0;
let idleCloseTimer: NodeJS.Timeout | null = null;
const USER_DATA_DIR = process.env.USER_DATA_DIR ?? 'chrome-profile/douyin'
const USER_DATA_DIR = process.env.USER_DATA_DIR ?? "chrome-profile/douyin";
async function launchContext(): Promise<BrowserContext> {
const ctx = await chromium.launchPersistentContext(
USER_DATA_DIR,
{
headless: process.env.CHROMIUM_HEADLESS === 'true',
const ctx = await chromium.launchPersistentContext(USER_DATA_DIR, {
headless: process.env.CHROMIUM_HEADLESS === "true",
viewport: {
width: Number(process.env.CHROMIUM_VIEWPORT_WIDTH ?? 1280),
height: Number(process.env.CHROMIUM_VIEWPORT_HEIGHT ?? 1080)
}
}
)
height: Number(process.env.CHROMIUM_VIEWPORT_HEIGHT ?? 1080),
},
});
// When the context is closed externally, reset manager state
ctx.on('close', () => {
context = null
contextPromise = null
refCount = 0
ctx.on("close", () => {
context = null;
contextPromise = null;
refCount = 0;
if (idleCloseTimer) {
clearTimeout(idleCloseTimer)
idleCloseTimer = null
clearTimeout(idleCloseTimer);
idleCloseTimer = null;
}
})
return ctx
});
return ctx;
}
export async function acquireBrowserContext(): Promise<BrowserContext> {
// Cancel any pending idle close if a new consumer arrives
if (idleCloseTimer) {
clearTimeout(idleCloseTimer)
idleCloseTimer = null
clearTimeout(idleCloseTimer);
idleCloseTimer = null;
}
if (context) {
refCount += 1
return context
refCount += 1;
return context;
}
if (!contextPromise) {
contextPromise = launchContext()
contextPromise = launchContext();
}
context = await contextPromise
refCount += 1
return context
context = await contextPromise;
refCount += 1;
return context;
}
export async function releaseBrowserContext(options?: { idleMillis?: number }): Promise<void> {
const idleMillis = options?.idleMillis ?? 15_000
refCount = Math.max(0, refCount - 1)
export async function releaseBrowserContext(options?: {
idleMillis?: number;
}): Promise<void> {
const idleMillis = options?.idleMillis ?? 15_000;
refCount = Math.max(0, refCount - 1);
if (refCount > 0 || !context) return
if (refCount > 0 || !context) return;
// Delay the close to allow bursty workloads to reuse the context
if (idleCloseTimer) {
clearTimeout(idleCloseTimer)
idleCloseTimer = null
clearTimeout(idleCloseTimer);
idleCloseTimer = null;
}
idleCloseTimer = setTimeout(async () => {
try {
if (context && refCount === 0) {
await context.close()
await context.close();
}
} finally {
context = null
contextPromise = null
idleCloseTimer = null
context = null;
contextPromise = null;
idleCloseTimer = null;
}
}, idleMillis)
}, idleMillis);
}
// --- Isolated context support for per-scrape independence ---
const isolatedMap = new WeakMap<BrowserContext, Browser>()
const isolatedMap = new WeakMap<BrowserContext, Browser>();
async function getSharedStorageState(): Promise<any | undefined> {
try {
const shared = await acquireBrowserContext()
const state = await shared.storageState()
const shared = await acquireBrowserContext();
const state = await shared.storageState();
// Do not force-close immediately; keep ref-counting behavior
await releaseBrowserContext()
return state
await releaseBrowserContext();
return state;
} catch {
// If shared context not available, proceed without storageState
return undefined
return undefined;
}
}
@ -103,37 +102,39 @@ async function getSharedStorageState(): Promise<any | undefined> {
* so you remain logged-in, but isolates network events, cache and listeners.
*/
export async function acquireIsolatedContext(): Promise<BrowserContext> {
const storageState = await getSharedStorageState()
const storageState = await getSharedStorageState();
const browser = await chromium.launch({
headless: process.env.CHROMIUM_HEADLESS === 'true'
})
headless: process.env.CHROMIUM_HEADLESS === "true",
});
const ctx = await browser.newContext({
storageState,
viewport: {
width: Number(process.env.CHROMIUM_VIEWPORT_WIDTH ?? 1280),
height: Number(process.env.CHROMIUM_VIEWPORT_HEIGHT ?? 1080)
}
})
isolatedMap.set(ctx, browser)
ctx.on('close', () => {
const b = isolatedMap.get(ctx)
height: Number(process.env.CHROMIUM_VIEWPORT_HEIGHT ?? 1080),
},
});
isolatedMap.set(ctx, browser);
ctx.on("close", () => {
const b = isolatedMap.get(ctx);
if (b) {
b.close().catch(() => {})
isolatedMap.delete(ctx)
b.close().catch(() => {});
isolatedMap.delete(ctx);
}
})
return ctx
});
return ctx;
}
export async function releaseIsolatedContext(ctx: BrowserContext | null | undefined): Promise<void> {
if (!ctx) return
export async function releaseIsolatedContext(
ctx: BrowserContext | null | undefined,
): Promise<void> {
if (!ctx) return;
try {
await ctx.close()
await ctx.close();
} finally {
const b = isolatedMap.get(ctx)
const b = isolatedMap.get(ctx);
if (b) {
await b.close().catch(() => {})
isolatedMap.delete(ctx)
await b.close().catch(() => {});
isolatedMap.delete(ctx);
}
}
}

343
app/api/fetcher/index.ts
View File

@ -1,22 +1,31 @@
export const runtime = 'nodejs'
export const runtime = "nodejs";
// src/scrapeDouyin.ts
import { BrowserContext, Page, type Response } from 'playwright';
import { chromium } from 'playwright-extra';
import { prisma } from '@/lib/prisma';
import { uploadFile, generateUniqueFileName } from '@/lib/minio';
import { createCamelCompatibleProxy } from '@/app/api/fetcher/utils';
import { waitForFirstResponse, waitForResponseWithTimeout, safeJson, downloadBinary, collectResponsesWithinTime } from '@/app/api/fetcher/network';
import { pickBestPlayAddr } from '@/app/api/fetcher/media';
import { handleImagePost } from '@/app/api/fetcher/uploader';
import { saveToDB, saveImagePostToDB } from '@/app/api/fetcher/persist';
import chalk from 'chalk';
import { acquireIsolatedContext, releaseIsolatedContext } from '@/app/api/fetcher/browser';
import { extractFirstFrame } from '@/app/api/media';
import { transcriptAweme } from '../stt';
import { BrowserContext, Page, type Response } from "playwright";
import { chromium } from "playwright-extra";
import { prisma } from "@/lib/prisma";
import { uploadFile, generateUniqueFileName } from "@/lib/minio";
import { createCamelCompatibleProxy } from "@/app/api/fetcher/utils";
import {
waitForFirstResponse,
waitForResponseWithTimeout,
safeJson,
downloadBinary,
collectResponsesWithinTime,
} from "@/app/api/fetcher/network";
import { pickBestPlayAddr } from "@/app/api/fetcher/media";
import { handleImagePost } from "@/app/api/fetcher/uploader";
import { saveToDB, saveImagePostToDB } from "@/app/api/fetcher/persist";
import chalk from "chalk";
import {
acquireIsolatedContext,
releaseIsolatedContext,
} from "@/app/api/fetcher/browser";
import { extractFirstFrame } from "@/app/api/media";
import { transcriptAweme } from "../stt";
const DETAIL_PATH = '/aweme/v1/web/aweme/detail/';
const COMMENT_PATH = '/aweme/v1/web/comment/list/';
const POST_PATH = '/aweme/v1/web/aweme/post/'
const DETAIL_PATH = "/aweme/v1/web/aweme/detail/";
const COMMENT_PATH = "/aweme/v1/web/comment/list/";
const POST_PATH = "/aweme/v1/web/aweme/post/";
/**
* 滚动页面并收集评论
@ -28,15 +37,20 @@ const POST_PATH = '/aweme/v1/web/aweme/post/'
async function scrollAndCollectComments(
context: BrowserContext,
page: Page,
durationMs: number = 10_000
durationMs: number = 10_000,
): Promise<Response[]> {
console.log(chalk.blue(`📜 开始滚动页面收集评论（持续 ${durationMs / 1000} 秒）...`));
console.log(
chalk.blue(`📜 开始滚动页面收集评论（持续 ${durationMs / 1000} 秒）...`),
);
// 启动评论响应收集器
const commentResponsesPromise = collectResponsesWithinTime(
context,
(r: Response) => r.url().includes(COMMENT_PATH) && r.status() === 200 && r.request().frame()?.page() === page,
durationMs
(r: Response) =>
r.url().includes(COMMENT_PATH) &&
r.status() === 200 &&
r.request().frame()?.page() === page,
durationMs,
);
// 在指定时间内持续滚动页面
@ -46,17 +60,18 @@ async function scrollAndCollectComments(
const selector = "div[data-e2e='comment-list']";
// 1) 等元素出现并可见
await page.waitForSelector(selector, { state: 'visible', timeout: 5000 });
await page.waitForSelector(selector, { state: "visible", timeout: 5000 });
// 2) 确保滚动到可见区域
const list = page.locator(selector);
await list.scrollIntoViewIfNeeded();
// 3) 执行 hover（推荐用 locator 的 hover）
list.hover({ timeout: 5000 }).catch(() => { });
while (Date.now() - startTime < durationMs - 500) { // 留 500ms 缓冲
list.hover({ timeout: 5000 }).catch(() => {});
while (Date.now() - startTime < durationMs - 500) {
// 留 500ms 缓冲
try {
list.hover({ timeout: 2000 }).catch(() => { });
list.hover({ timeout: 2000 }).catch(() => {});
// 使用 Playwright 的 mouse.wheel 方法滚动
// 每次滚动一大段距离
// await list.hover();
@ -68,57 +83,68 @@ async function scrollAndCollectComments(
// 等待一段时间，让评论加载
await page.waitForTimeout(scrollInterval);
} catch (e) {
console.warn(chalk.yellow(` ⚠ 滚动时出现警告: ${(e as Error)?.message}`));
console.warn(
chalk.yellow(` ⚠ 滚动时出现警告: ${(e as Error)?.message}`),
);
}
}
// 等待收集器完成
const commentResponses = await commentResponsesPromise;
console.log(chalk.green(`✓ 评论收集完成，共收集到 ${commentResponses.length} 个评论响应`));
console.log(
chalk.green(
`✓ 评论收集完成，共收集到 ${commentResponses.length} 个评论响应`,
),
);
return commentResponses;
}
async function readPostMem(context: BrowserContext, page: Page) {
const md = await page.evaluate(() => {
// @ts-ignore
let data = window.__pace_captured__.find(i => i[1] && i[1].includes(`"awemeId":`))[1]
return JSON.parse(data.slice(data.indexOf("{")).replaceAll("]\n", ''))
const md = await page
.evaluate(() => {
const captured = (window as any).__pace_captured__ as Array<unknown[]>;
let data = captured.find(
(item) => typeof item[1] === "string" && item[1].includes(`"awemeId":`),
)?.[1] as string | undefined;
if (!data) return null;
return JSON.parse(data.slice(data.indexOf("{")).replaceAll("]\n", ""));
// return {aweme: { detail: {} } };
}).catch(() => null);
})
.catch(() => null);
// await new Promise((res) => setTimeout(res, 1000000));
let aweme_mem = md?.aweme?.detail as DouyinImageAweme;
if (!aweme_mem) throw new Error('页面内存数据中未找到作品详情');
if (!aweme_mem) throw new Error("页面内存数据中未找到作品详情");
// @ts-ignore
aweme_mem.author = aweme_mem.authorInfo
aweme_mem.author = aweme_mem.authorInfo;
// @ts-ignore
aweme_mem.statistics = aweme_mem.stats
aweme_mem.statistics = aweme_mem.stats;
const comments = md.comment ? createCamelCompatibleProxy<DouyinCommentResponse>(md.comment) : null;
const comments = md.comment
? createCamelCompatibleProxy<DouyinCommentResponse>(md.comment)
: null;
const aweme = createCamelCompatibleProxy(aweme_mem);
return { aweme, comments }
return { aweme, comments };
}
export class ScrapeError extends Error {
constructor(
message: string,
public statusCode: number = 500,
public code?: string
public code?: string,
) {
super(message);
this.name = 'ScrapeError';
this.name = "ScrapeError";
}
}
export async function scrapeDouyin(url: string) {
console.log(chalk.blue('🚀 启动共享 Chromium 浏览器...'));
console.log(chalk.blue("🚀 启动共享 Chromium 浏览器..."));
let context: BrowserContext | null = await acquireIsolatedContext();
const page = await context.newPage();
console.log(chalk.cyan(`📄 正在访问: ${chalk.underline(url)}`));
@ -131,9 +157,11 @@ export async function scrapeDouyin(url: string) {
const captured = (window as any).__pace_captured__;
const proxyArr = new Proxy([] as any[], {
get(target, prop, receiver) {
if (prop === 'push') {
if (prop === "push") {
return (...items: any[]) => {
try { captured.push(...items); } catch { }
try {
captured.push(...items);
} catch {}
return Array.prototype.push.apply(target, items);
};
}
@ -141,9 +169,10 @@ export async function scrapeDouyin(url: string) {
},
set(target, prop, value, receiver) {
// 兼容站点可能直接赋初始数组： self.__pace_f = [a,b]
if (prop === 'length') return Reflect.set(target, prop, value, receiver);
if (prop === "length")
return Reflect.set(target, prop, value, receiver);
}
return Reflect.set(target, prop, value, receiver);
},
});
(self as any).__pace_f = proxyArr;
@ -152,38 +181,69 @@ export async function scrapeDouyin(url: string) {
try {
// 先注册“先到先得”的监听，再导航，避免漏包
const firstTypePromise = waitForFirstResponse(context, [
{ key: 'detail', test: (r: Response) => r.url().includes(DETAIL_PATH) && r.status() === 200 && r.request().frame()?.page() === page },
{ key: 'post', test: (r: Response) => r.url().includes(POST_PATH) && r.status() === 200 && r.request().frame()?.page() === page },
], 10_000);
const firstTypePromise = waitForFirstResponse(
context,
[
{
key: "detail",
test: (r: Response) =>
r.url().includes(DETAIL_PATH) &&
r.status() === 200 &&
r.request().frame()?.page() === page,
},
{
key: "post",
test: (r: Response) =>
r.url().includes(POST_PATH) &&
r.status() === 200 &&
r.request().frame()?.page() === page,
},
],
10_000,
);
await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 20_000 });
await page.goto(url, { waitUntil: "domcontentloaded", timeout: 20_000 });
// 查找页面中是否存在 "视频不存在" 的提示
const isNotFound = await page.locator('text=视频不存在').count().then(count => count > 0).catch(() => false);
const isNotFound = await page
.locator("text=视频不存在")
.count()
.then((count) => count > 0)
.catch(() => false);
if (isNotFound) {
console.error(chalk.red('✗ 视频不存在或已被删除'));
throw new ScrapeError('视频不存在或已被删除', 404, 'VIDEO_NOT_FOUND');
console.error(chalk.red("✗ 视频不存在或已被删除"));
throw new ScrapeError("视频不存在或已被删除", 404, "VIDEO_NOT_FOUND");
}
// 等待作品类型判定
const firstType = await firstTypePromise;
// 尝试从内存读取图文数据（如果是图文作品）
let memoryData: { aweme: any; comments: DouyinCommentResponse | null } | null = null;
let memoryData: {
aweme: any;
comments: DouyinCommentResponse | null;
} | null = null;
try {
memoryData = await readPostMem(context, page);
console.log(chalk.green('✓ 从内存读取图文数据成功'));
console.log(chalk.green("✓ 从内存读取图文数据成功"));
} catch {
// 内存读取失败，稍后通过网络获取
}
if (!firstType && !memoryData) {
console.error(chalk.red('✗ 既无法从内存读取数据,也无法从网络获得数据'));
throw new ScrapeError('无法获取作品数据,可能是网络问题或作品已下架', 404, 'NO_DATA');
console.error(chalk.red("✗ 既无法从内存读取数据,也无法从网络获得数据"));
throw new ScrapeError(
"无法获取作品数据,可能是网络问题或作品已下架",
404,
"NO_DATA",
);
}
console.log(chalk.cyan(`📡 检测到作品类型: ${chalk.bold(firstType?.key === 'post' || memoryData ? '图文' : '视频')}`));
console.log(
chalk.cyan(
`📡 检测到作品类型: ${chalk.bold(firstType?.key === "post" || memoryData ? "图文" : "视频")}`,
),
);
let allComments: DouyinComment[] = [];
try {
@ -198,27 +258,38 @@ export async function scrapeDouyin(url: string) {
allComments.push(...commentData.comments);
}
} catch (e) {
console.warn(chalk.yellow(`⚠ 解析评论响应失败: ${(e as Error)?.message}`));
console.warn(
chalk.yellow(`⚠ 解析评论响应失败: ${(e as Error)?.message}`),
);
}
}
} catch (error) {
console.warn(chalk.yellow(`⚠ 评论收集失败: ${(error as Error)?.message}`));
console.warn(
chalk.yellow(`⚠ 评论收集失败: ${(error as Error)?.message}`),
);
}
// 去重评论（根据 cid）
const uniqueComments = Array.from(
new Map(allComments.map(c => [c.cid, c])).values()
new Map(allComments.map((c) => [c.cid, c])).values(),
);
console.log(chalk.green(`✓ 共收集到 ${uniqueComments.length} 条独立评论（去重前: ${allComments.length}）`));
console.log(
chalk.green(
`✓ 共收集到 ${uniqueComments.length} 条独立评论（去重前: ${allComments.length}）`,
),
);
// 如果从内存读取到了评论，合并进来作为兜底
let comments: DouyinCommentResponse;
if (memoryData?.comments?.comments?.length) {
console.log(chalk.blue(`📝 合并内存中的 ${memoryData.comments.comments.length} 条评论`));
console.log(
chalk.blue(
`📝 合并内存中的 ${memoryData.comments.comments.length} 条评论`,
),
);
const memComments = memoryData.comments.comments;
const mergedMap = new Map(uniqueComments.map(c => [c.cid, c]));
const mergedMap = new Map(uniqueComments.map((c) => [c.cid, c]));
for (const c of memComments) {
if (!mergedMap.has(c.cid)) {
mergedMap.set(c.cid, c);
@ -227,14 +298,14 @@ export async function scrapeDouyin(url: string) {
comments = {
comments: Array.from(mergedMap.values()),
total: mergedMap.size,
status_code: 0
status_code: 0,
};
console.log(chalk.green(`✓ 合并后共 ${comments.comments.length} 条评论`));
} else {
comments = {
comments: uniqueComments,
total: uniqueComments.length,
status_code: 0
status_code: 0,
};
}
@ -244,75 +315,128 @@ export async function scrapeDouyin(url: string) {
const aweme = memoryData.aweme;
const uploads = await handleImagePost(context, aweme);
const saved = await saveImagePostToDB(context, aweme, comments, uploads); // 传递完整 JSON
console.log(chalk.green.bold('✓ 图文作品保存成功'));
console.log(chalk.green.bold("✓ 图文作品保存成功"));
return { type: "image", ...saved };
} else if (firstType?.key === 'post') {
} else if (firstType?.key === "post") {
// 图文作品（网络）
const postJson = await safeJson<DouyinPostListResponse>(firstType.response);
if (!postJson?.aweme_list?.length) throw new ScrapeError('图文作品响应为空', 404, 'EMPTY_POST_RESPONSE');
const postJson = await safeJson<DouyinPostListResponse>(
firstType.response,
);
if (!postJson?.aweme_list?.length)
throw new ScrapeError("图文作品响应为空", 404, "EMPTY_POST_RESPONSE");
const currentURL = page.url();
const target_aweme_id = currentURL.split('/').at(-1);
const target_aweme_id = currentURL.split("/").at(-1);
const awemeList = postJson.aweme_list as unknown as DouyinImageAweme[];
let aweme = awemeList.find((pt: DouyinImageAweme) => pt.aweme_id === target_aweme_id);
let aweme = awemeList.find(
(pt: DouyinImageAweme) => pt.aweme_id === target_aweme_id,
);
if (!aweme) {
throw new ScrapeError('无法找到目标作品,可能已被删除', 404, 'POST_NOT_FOUND');
throw new ScrapeError(
"无法找到目标作品,可能已被删除",
404,
"POST_NOT_FOUND",
);
}
const uploads = await handleImagePost(context, aweme);
const saved = await saveImagePostToDB(context, aweme, comments, uploads, postJson); // 传递完整 JSON
console.log(chalk.green.bold('✓ 图文作品保存成功'));
const saved = await saveImagePostToDB(
context,
aweme,
comments,
uploads,
postJson,
); // 传递完整 JSON
console.log(chalk.green.bold("✓ 图文作品保存成功"));
return { type: "image", ...saved };
} else if (firstType?.key === 'detail') {
} else if (firstType?.key === "detail") {
// 视频作品
const detail = (await safeJson<DouyinVideoDetailResponse>(firstType.response))!;
const detail = (await safeJson<DouyinVideoDetailResponse>(
firstType.response,
))!;
// 找到比特率最高的 url
const bestPlayAddr = pickBestPlayAddr(
detail?.aweme_detail?.video.bit_rate
detail?.aweme_detail?.video.bit_rate,
);
const bestVUrl = bestPlayAddr?.url_list?.[0];
const fps = bestPlayAddr?.FPS ?? null; // 提取 FPS
console.log(chalk.cyan(`📹 最佳视频 URL: ${chalk.dim(bestVUrl)}`));
console.log(chalk.cyan(`🎞️ 视频帧率: ${chalk.bold(fps || 'N/A')} FPS`));
console.log(chalk.cyan(`🎞️ 视频帧率: ${chalk.bold(fps || "N/A")} FPS`));
if (bestPlayAddr?.width && bestPlayAddr?.height) {
console.log(chalk.cyan(`📐 视频分辨率: ${chalk.bold(`${bestPlayAddr.width}x${bestPlayAddr.height}`)}`));
console.log(
chalk.cyan(
`📐 视频分辨率: ${chalk.bold(`${bestPlayAddr.width}x${bestPlayAddr.height}`)}`,
),
);
}
// 下载视频并上传至 MinIO，获取外链
let uploadedUrl: string | undefined;
let coverUrl: string | undefined;
if (bestVUrl && detail?.aweme_detail) {
console.log(chalk.blue('⬇️ 正在下载视频...'));
const { buffer, contentType, ext } = await downloadBinary(context, bestVUrl);
console.log(chalk.blue("⬇️ 正在下载视频..."));
const { buffer, contentType, ext } = await downloadBinary(
context,
bestVUrl,
);
const awemeId = detail.aweme_detail.aweme_id;
const fileName = generateUniqueFileName(`${awemeId}.${ext}`, 'douyin/videos');
const fileName = generateUniqueFileName(
`${awemeId}.${ext}`,
"douyin/videos",
);
console.log(chalk.blue('⬆️ 正在上传视频到 MinIO...'));
uploadedUrl = await uploadFile(buffer, fileName, { 'Content-Type': contentType });
console.log(chalk.green(`✓ 视频上传成功: ${chalk.underline(uploadedUrl)}`));
console.log(chalk.blue("⬆️ 正在上传视频到 MinIO..."));
uploadedUrl = await uploadFile(buffer, fileName, {
"Content-Type": contentType,
});
console.log(
chalk.green(`✓ 视频上传成功: ${chalk.underline(uploadedUrl)}`),
);
// 提取首帧作为封面并上传
try {
console.log(chalk.blue('🖼️ 正在提取视频封面...'));
console.log(chalk.blue("🖼️ 正在提取视频封面..."));
const cover = await extractFirstFrame(buffer);
if (cover) {
const coverName = generateUniqueFileName(`${awemeId}.jpg`, 'douyin/covers');
coverUrl = await uploadFile(cover.buffer, coverName, { 'Content-Type': cover.contentType });
console.log(chalk.green(`✓ 封面上传成功: ${chalk.underline(coverUrl)}`));
const coverName = generateUniqueFileName(
`${awemeId}.jpg`,
"douyin/covers",
);
coverUrl = await uploadFile(cover.buffer, coverName, {
"Content-Type": cover.contentType,
});
console.log(
chalk.green(`✓ 封面上传成功: ${chalk.underline(coverUrl)}`),
);
}
} catch (e) {
console.warn(chalk.yellow(`⚠ 提取封面失败，跳过: ${(e as Error)?.message || e}`));
console.warn(
chalk.yellow(`⚠ 提取封面失败，跳过: ${(e as Error)?.message || e}`),
);
}
}
const saved = await saveToDB(context, detail, comments, uploadedUrl, bestPlayAddr?.width, bestPlayAddr?.height, coverUrl, fps ?? undefined);
console.log(chalk.green.bold('✓ 视频作品保存成功'));
const saved = await saveToDB(
context,
detail,
comments,
uploadedUrl,
bestPlayAddr?.width,
bestPlayAddr?.height,
coverUrl,
fps ?? undefined,
);
console.log(chalk.green.bold("✓ 视频作品保存成功"));
transcriptAweme(detail.aweme_detail.aweme_id).catch((e) => {}); // 异步转写，不阻塞主流程
return { type: "video", ...saved };
} else {
throw new ScrapeError('无法判定作品类型,接口响应异常', 500, 'UNKNOWN_TYPE');
throw new ScrapeError(
"无法判定作品类型,接口响应异常",
500,
"UNKNOWN_TYPE",
);
}
} catch (error) {
// 如果是我们自定义的错误,直接抛出
@ -325,25 +449,30 @@ export async function scrapeDouyin(url: string) {
console.error(chalk.red(`✗ 爬取失败: ${errMsg}`));
// 根据错误类型返回不同的状态码
if (errMsg.includes('timeout') || errMsg.includes('超时')) {
throw new ScrapeError('请求超时,请稍后重试', 408, 'TIMEOUT');
if (errMsg.includes("timeout") || errMsg.includes("超时")) {
throw new ScrapeError("请求超时,请稍后重试", 408, "TIMEOUT");
}
if (errMsg.includes('页面内存数据中未找到作品详情')) {
throw new ScrapeError('作品数据加载失败', 404, 'DATA_NOT_LOADED');
if (errMsg.includes("页面内存数据中未找到作品详情")) {
throw new ScrapeError("作品数据加载失败", 404, "DATA_NOT_LOADED");
}
if (errMsg.includes('net::')) {
throw new ScrapeError('网络连接失败', 503, 'NETWORK_ERROR');
if (errMsg.includes("net::")) {
throw new ScrapeError("网络连接失败", 503, "NETWORK_ERROR");
}
// 默认服务器错误
throw new ScrapeError(errMsg || '爬取过程中发生未知错误', 500, 'UNKNOWN_ERROR');
throw new ScrapeError(
errMsg || "爬取过程中发生未知错误",
500,
"UNKNOWN_ERROR",
);
} finally {
console.log(chalk.gray('🧹 清理资源...'));
try { await page.close({ runBeforeUnload: true }); } catch { }
console.log(chalk.gray("🧹 清理资源..."));
try {
await page.close({ runBeforeUnload: true });
} catch {}
// 关闭本次任务的隔离上下文与浏览器
await releaseIsolatedContext(context);
await prisma.$disconnect();
console.log(chalk.gray('✓ 资源清理完成'));
console.log(chalk.gray("✓ 资源清理完成"));
}
}

7
app/api/fetcher/media.ts
View File

@ -1,8 +1,7 @@
export const runtime = 'nodejs'
import { execFile } from 'child_process';
import { promisify } from 'util';
export const runtime = "nodejs";
import { execFile } from "child_process";
import { promisify } from "util";
export function pickBestPlayAddr(variants: PlayVariant[] | undefined | null) {
if (!variants?.length) return null;

37
app/api/fetcher/network.ts
View File

@ -1,10 +1,10 @@
export const runtime = 'nodejs'
export const runtime = "nodejs";
import type { BrowserContext, Response } from 'playwright';
import type { BrowserContext, Response } from "playwright";
export async function safeJson<T>(res: Response): Promise<T | null> {
const ctype = res.headers()['content-type'] || '';
if (ctype.includes('application/json')) {
const ctype = res.headers()["content-type"] || "";
if (ctype.includes("application/json")) {
return (await res.json()) as T;
}
const t = await res.text();
@ -24,10 +24,10 @@ export async function downloadBinary(
context: BrowserContext,
url: string,
): Promise<{ buffer: Buffer; contentType: string; ext: string }> {
console.log('下载：', url);
console.log("下载：", url);
const headers = {
referer: 'https://www.douyin.com/',
referer: "https://www.douyin.com/",
} as Record<string, string>;
const res = await context.request.get(url, {
@ -42,8 +42,9 @@ export async function downloadBinary(
}
const buffer = await res.body();
const contentType = res.headers()['content-type'] || 'application/octet-stream';
const ext = (contentType.split('/')[1] || 'bin').split(';')[0] || 'bin';
const contentType =
res.headers()["content-type"] || "application/octet-stream";
const ext = (contentType.split("/")[1] || "bin").split(";")[0] || "bin";
return { buffer, contentType, ext };
}
@ -54,7 +55,7 @@ export async function downloadBinary(
export function waitForFirstResponse(
context: BrowserContext,
candidates: { key: string; test: (r: Response) => boolean }[],
timeoutMs = 20_000
timeoutMs = 20_000,
): Promise<{ key: string; response: Response } | null> {
return new Promise((resolve) => {
let resolved = false;
@ -77,11 +78,11 @@ export function waitForFirstResponse(
};
const cleanup = () => {
context.off('response', handler);
context.off("response", handler);
if (timer) clearTimeout(timer);
};
context.on('response', handler);
context.on("response", handler);
if (timeoutMs > 0) {
timer = setTimeout(() => {
if (!resolved) {
@ -101,7 +102,7 @@ export function waitForFirstResponse(
export function collectResponsesWithinTime(
context: BrowserContext,
predicate: (r: Response) => boolean,
durationMs: number
durationMs: number,
): Promise<Response[]> {
return new Promise((resolve) => {
const collected: Response[] = [];
@ -124,11 +125,11 @@ export function collectResponsesWithinTime(
};
const cleanup = () => {
context.off('response', handler);
context.off("response", handler);
if (timer) clearTimeout(timer);
};
context.on('response', handler);
context.on("response", handler);
timer = setTimeout(() => {
cleanup();
resolve(collected);
@ -142,7 +143,7 @@ export function collectResponsesWithinTime(
export function waitForResponseWithTimeout(
context: BrowserContext,
predicate: (r: Response) => boolean,
timeoutMs = 5_000
timeoutMs = 5_000,
): Promise<Response> {
return new Promise<Response>((resolve, reject) => {
let timer: NodeJS.Timeout | undefined;
@ -159,15 +160,15 @@ export function waitForResponseWithTimeout(
};
const cleanup = () => {
context.off('response', handler);
context.off("response", handler);
if (timer) clearTimeout(timer);
};
context.on('response', handler);
context.on("response", handler);
if (timeoutMs > 0) {
timer = setTimeout(() => {
cleanup();
reject(new Error('timeout'));
reject(new Error("timeout"));
}, timeoutMs);
}
});

170
app/api/fetcher/persist.ts
View File

@ -1,7 +1,7 @@
import type { BrowserContext } from 'playwright';
import { prisma } from '@/lib/prisma';
import { uploadAvatarFromUrl, uploadImageFromUrl } from './uploader';
import { firstUrl } from './utils';
import type { BrowserContext } from "playwright";
import { prisma } from "@/lib/prisma";
import { uploadAvatarFromUrl, uploadImageFromUrl } from "./uploader";
import { firstUrl } from "./utils";
export async function saveToDB(
context: BrowserContext,
@ -11,14 +11,18 @@ export async function saveToDB(
width?: number,
height?: number,
coverUrl?: string,
fps?: number
fps?: number,
) {
if (!detailResp?.aweme_detail) throw new Error('视频详情为空');
if (!detailResp?.aweme_detail) throw new Error("视频详情为空");
const d = detailResp.aweme_detail;
// 1) Upsert Author
const authorAvatarSrc = firstUrl(d.author.avatar_thumb?.url_list);
const authorAvatarUploaded = await uploadAvatarFromUrl(context, authorAvatarSrc, `authors/${d.author.sec_uid}`);
const authorAvatarUploaded = await uploadAvatarFromUrl(
context,
authorAvatarSrc,
`authors/${d.author.sec_uid}`,
);
const author = await prisma.author.upsert({
where: { sec_uid: d.author.sec_uid },
create: {
@ -59,8 +63,8 @@ export async function saveToDB(
share_count: BigInt(d.statistics?.share_count || 0),
collect_count: BigInt(d.statistics?.collect_count || 0),
authorId: author.sec_uid,
tags: (d.tags?.map(t => t.tag_name) ?? []),
video_url: videoUrl ?? '',
tags: d.tags?.map((t) => t.tag_name) ?? [],
video_url: videoUrl ?? "",
width: width ?? null,
height: height ?? null,
cover_url: coverUrl ?? null,
@ -90,20 +94,25 @@ export async function saveToDB(
// 3) Upsert Comments + CommentUser
const comments = commentResp?.comments ?? [];
for (const c of comments) {
const origAvatar: string | null = firstUrl(c.user?.avatar_thumb?.url_list) ?? null;
const nameHint = `comment-users/${(c.user?.nickname || 'unknown').replace(/\s+/g, '_')}-${c.cid}`;
const uploadedAvatar = await uploadAvatarFromUrl(context, origAvatar ?? undefined, nameHint);
const origAvatar: string | null =
firstUrl(c.user?.avatar_thumb?.url_list) ?? null;
const nameHint = `comment-users/${(c.user?.nickname || "unknown").replace(/\s+/g, "_")}-${c.cid}`;
const uploadedAvatar = await uploadAvatarFromUrl(
context,
origAvatar ?? undefined,
nameHint,
);
const finalAvatar = uploadedAvatar ?? origAvatar; // string | null
const finalAvatarKey = finalAvatar ?? '';
const finalAvatarKey = finalAvatar ?? "";
const cu = await prisma.commentUser.upsert({
where: {
nickname_avatar_url: {
nickname: c.user?.nickname || '未知用户',
nickname: c.user?.nickname || "未知用户",
avatar_url: finalAvatarKey,
},
},
create: {
nickname: c.user?.nickname || '未知用户',
nickname: c.user?.nickname || "未知用户",
avatar_url: finalAvatar ?? null,
},
update: {
@ -132,17 +141,30 @@ export async function saveToDB(
// 处理评论贴纸/配图上传与入库
try {
const sources: { url?: string | null; width?: number; height?: number }[] = [];
const sources: {
url?: string | null;
width?: number;
height?: number;
}[] = [];
// 贴纸（当作第一张）
const stickerUrl = firstUrl(c.sticker?.animate_url?.url_list);
if (stickerUrl) {
sources.push({ url: stickerUrl, width: c.sticker?.animate_url?.width, height: c.sticker?.animate_url?.height });
sources.push({
url: stickerUrl,
width: c.sticker?.animate_url?.width,
height: c.sticker?.animate_url?.height,
});
}
// 配图列表
const imgs = c.image_list || [];
for (const it of imgs) {
const u = firstUrl(it?.origin_url?.url_list);
if (u) sources.push({ url: u, width: it?.origin_url?.width as any, height: it?.origin_url?.height as any });
if (u)
sources.push({
url: u,
width: it?.origin_url?.width as any,
height: it?.origin_url?.height as any,
});
}
for (let i = 0; i < sources.length; i++) {
@ -159,36 +181,53 @@ export async function saveToDB(
commentId: savedComment.cid,
order: i,
url: uploaded,
width: typeof s.width === 'number' ? s.width : null,
height: typeof s.height === 'number' ? s.height : null,
width: typeof s.width === "number" ? s.width : null,
height: typeof s.height === "number" ? s.height : null,
},
update: {
url: uploaded,
width: typeof s.width === 'number' ? s.width : null,
height: typeof s.height === 'number' ? s.height : null,
width: typeof s.width === "number" ? s.width : null,
height: typeof s.height === "number" ? s.height : null,
},
});
}
} catch (e) {
console.warn('[comment-images] 保存失败：', (e as Error)?.message || e);
console.warn("[comment-images] 保存失败：", (e as Error)?.message || e);
}
}
return { aweme_id: video.aweme_id, author_sec_uid: author.sec_uid, comment_count: comments.length };
return {
aweme_id: video.aweme_id,
author_sec_uid: author.sec_uid,
comment_count: comments.length,
};
}
export async function saveImagePostToDB(
context: BrowserContext,
aweme: DouyinImageAweme,
commentResp: DouyinCommentResponse,
uploads: { images: { url: string; width?: number; height?: number, video?: string }[]; musicUrl?: string },
rawJson?: any
uploads: {
images: {
url: string;
width?: number;
height?: number;
video?: string;
duration?: number;
}[];
musicUrl?: string;
},
rawJson?: any,
) {
if (!aweme?.author?.sec_uid) throw new Error('作者 sec_uid 缺失');
if (!aweme?.author?.sec_uid) throw new Error("作者 sec_uid 缺失");
// Upsert Author（与视频一致）
const authorAvatarSrc = firstUrl(aweme.author.avatar_thumb?.url_list);
const authorAvatarUploaded = await uploadAvatarFromUrl(context, authorAvatarSrc, `authors/${aweme.author.sec_uid}`);
const authorAvatarUploaded = await uploadAvatarFromUrl(
context,
authorAvatarSrc,
`authors/${aweme.author.sec_uid}`,
);
const author = await prisma.author.upsert({
where: { sec_uid: aweme.author.sec_uid },
create: {
@ -221,13 +260,13 @@ export async function saveImagePostToDB(
aweme_id: aweme.aweme_id,
desc: aweme.desc,
created_at: new Date((aweme.create_time || 0) * 1000),
share_url: aweme.share_url || '',
share_url: aweme.share_url || "",
digg_count: BigInt(aweme.statistics?.digg_count || 0),
comment_count: BigInt(aweme.statistics?.comment_count || 0),
share_count: BigInt(aweme.statistics?.share_count || 0),
collect_count: BigInt(aweme.statistics?.collect_count || 0),
authorId: author.sec_uid,
tags: (aweme.video_tag?.map(t => t.tag_name) ?? []),
tags: aweme.video_tag?.map((t) => t.tag_name) ?? [],
music_url: uploads.musicUrl ?? null,
raw_json: rawJson ?? null, // 保存完整接口 JSON
},
@ -240,7 +279,7 @@ export async function saveImagePostToDB(
share_count: BigInt(aweme.statistics?.share_count || 0),
collect_count: BigInt(aweme.statistics?.collect_count || 0),
authorId: author.sec_uid,
tags: (aweme.video_tag?.map(t => t.tag_name) ?? []),
tags: aweme.video_tag?.map((t) => t.tag_name) ?? [],
music_url: uploads.musicUrl ?? undefined,
raw_json: rawJson ?? undefined, // 更新完整接口 JSON
},
@ -248,22 +287,28 @@ export async function saveImagePostToDB(
// Upsert ImageFiles（按顺序）
for (let i = 0; i < uploads.images.length; i++) {
const { url, width, height, video } = uploads.images[i];
const { url, width, height, video, duration } = uploads.images[i];
const durationMs =
typeof duration === "number" && Number.isFinite(duration)
? Math.max(1, Math.round(duration))
: null;
await prisma.imageFile.upsert({
where: { postId_order: { postId: imagePost.aweme_id, order: i } },
create: {
postId: imagePost.aweme_id,
order: i,
url,
width: typeof width === 'number' ? width : null,
height: typeof height === 'number' ? height : null,
width: typeof width === "number" ? width : null,
height: typeof height === "number" ? height : null,
animated: video || null,
duration: durationMs,
},
update: {
url,
width: typeof width === 'number' ? width : null,
height: typeof height === 'number' ? height : null,
width: typeof width === "number" ? width : null,
height: typeof height === "number" ? height : null,
animated: video || null,
duration: durationMs,
},
});
}
@ -271,20 +316,25 @@ export async function saveImagePostToDB(
// 评论入库：关联到 ImagePost
const comments = commentResp?.comments ?? [];
for (const c of comments) {
const origAvatar: string | null = firstUrl(c.user?.avatar_thumb?.url_list) ?? null;
const nameHint = `comment-users/${(c.user?.nickname || 'unknown').replace(/\s+/g, '_')}-${c.cid}`;
const uploadedAvatar = await uploadAvatarFromUrl(context, origAvatar ?? undefined, nameHint);
const origAvatar: string | null =
firstUrl(c.user?.avatar_thumb?.url_list) ?? null;
const nameHint = `comment-users/${(c.user?.nickname || "unknown").replace(/\s+/g, "_")}-${c.cid}`;
const uploadedAvatar = await uploadAvatarFromUrl(
context,
origAvatar ?? undefined,
nameHint,
);
const finalAvatar = uploadedAvatar ?? origAvatar; // string | null
const finalAvatarKey = finalAvatar ?? '';
const finalAvatarKey = finalAvatar ?? "";
const cu = await prisma.commentUser.upsert({
where: {
nickname_avatar_url: {
nickname: c.user?.nickname || '未知用户',
nickname: c.user?.nickname || "未知用户",
avatar_url: finalAvatarKey,
},
},
create: {
nickname: c.user?.nickname || '未知用户',
nickname: c.user?.nickname || "未知用户",
avatar_url: finalAvatar ?? null,
},
update: {
@ -313,17 +363,30 @@ export async function saveImagePostToDB(
// 处理评论贴纸/配图上传与入库
try {
const sources: { url?: string | null; width?: number; height?: number }[] = [];
const sources: {
url?: string | null;
width?: number;
height?: number;
}[] = [];
// 贴纸（当作第一张）
const stickerUrl = firstUrl(c.sticker?.animate_url?.url_list);
if (stickerUrl) {
sources.push({ url: stickerUrl, width: c.sticker?.animate_url?.width, height: c.sticker?.animate_url?.height });
sources.push({
url: stickerUrl,
width: c.sticker?.animate_url?.width,
height: c.sticker?.animate_url?.height,
});
}
// 配图列表
const imgs = c.image_list || [];
for (const it of imgs) {
const u = firstUrl(it?.origin_url?.url_list);
if (u) sources.push({ url: u, width: it?.origin_url?.width as any, height: it?.origin_url?.height as any });
if (u)
sources.push({
url: u,
width: it?.origin_url?.width as any,
height: it?.origin_url?.height as any,
});
}
for (let i = 0; i < sources.length; i++) {
@ -340,20 +403,25 @@ export async function saveImagePostToDB(
commentId: savedComment.cid,
order: i,
url: uploaded,
width: typeof s.width === 'number' ? s.width : null,
height: typeof s.height === 'number' ? s.height : null,
width: typeof s.width === "number" ? s.width : null,
height: typeof s.height === "number" ? s.height : null,
},
update: {
url: uploaded,
width: typeof s.width === 'number' ? s.width : null,
height: typeof s.height === 'number' ? s.height : null,
width: typeof s.width === "number" ? s.width : null,
height: typeof s.height === "number" ? s.height : null,
},
});
}
} catch (e) {
console.warn('[comment-images] 保存失败：', (e as Error)?.message || e);
console.warn("[comment-images] 保存失败：", (e as Error)?.message || e);
}
}
return { aweme_id: imagePost.aweme_id, author_sec_uid: author.sec_uid, image_count: uploads.images.length, comment_count: comments.length };
return {
aweme_id: imagePost.aweme_id,
author_sec_uid: author.sec_uid,
image_count: uploads.images.length,
comment_count: comments.length,
};
}

30
app/api/fetcher/route.ts
View File

@ -1,17 +1,17 @@
export const runtime = 'nodejs'
export const runtime = "nodejs";
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'
import { scrapeDouyin, ScrapeError } from '.';
import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { scrapeDouyin, ScrapeError } from ".";
async function handleDouyinScrape(req: NextRequest) {
const { searchParams } = new URL(req.url);
const videoUrl = searchParams.get('url');
const videoUrl = searchParams.get("url");
if (!videoUrl) {
return NextResponse.json(
{ error: '缺少视频URL', code: 'MISSING_URL' },
{ status: 400 }
{ error: "缺少视频URL", code: "MISSING_URL" },
{ status: 400 },
);
}
@ -20,7 +20,7 @@ async function handleDouyinScrape(req: NextRequest) {
const result = await scrapeDouyin(videoUrl);
return NextResponse.json({
success: true,
data: result
data: result,
});
} catch (error) {
// 处理自定义的 ScrapeError
@ -29,23 +29,23 @@ async function handleDouyinScrape(req: NextRequest) {
{
success: false,
error: error.message,
code: error.code
code: error.code,
},
{ status: error.statusCode }
{ status: error.statusCode },
);
}
// 处理未知错误
console.error('未捕获的错误:', error);
console.error("未捕获的错误:", error);
return NextResponse.json(
{
success: false,
error: '服务器内部错误',
code: 'INTERNAL_ERROR'
error: "服务器内部错误",
code: "INTERNAL_ERROR",
},
{ status: 500 }
{ status: 500 },
);
}
}
export const GET = handleDouyinScrape
export const GET = handleDouyinScrape;

16
app/api/fetcher/types.d.ts vendored
View File

@ -17,17 +17,17 @@ interface DouyinComment {
animate_url: {
width: number;
height: number;
url_list: string[]
}
},
url_list: string[];
};
};
image_list?: {
origin_url:{
origin_url: {
width: number;
height: number;
url_list: string[]
}
}[]
url_list: string[];
};
}[];
}
/** 用户信息（精简版） */
@ -143,7 +143,7 @@ interface DouyinImageInfo {
width: number;
height: number;
video: {
play_addr: { src: string }[]
play_addr: { src: string }[];
} | null; // 如果是动图，会有 video 信息
}

122
app/api/fetcher/uploader.ts
View File

@ -1,10 +1,10 @@
export const runtime = 'nodejs'
export const runtime = "nodejs";
import type { BrowserContext } from 'playwright';
import { uploadFile, generateUniqueFileName } from '@/lib/minio';
import { downloadBinary } from './network';
import { pickFirstUrl } from './utils';
import { getVideoDuration } from '@/app/api/media';
import type { BrowserContext } from "playwright";
import { uploadFile, generateUniqueFileName } from "@/lib/minio";
import { downloadBinary } from "./network";
import { pickFirstUrl } from "./utils";
import { getVideoDuration } from "@/app/api/media";
/**
* 下载头像并上传到 MinIO，返回外链；失败时回退为原始链接。
@ -17,13 +17,18 @@ export async function uploadAvatarFromUrl(
if (!srcUrl) return undefined;
try {
const { buffer, contentType, ext } = await downloadBinary(context, srcUrl);
const safeExt = ext || 'jpg';
const safeExt = ext || "jpg";
const baseName = nameHint ? `${nameHint}.${safeExt}` : `avatar.${safeExt}`;
const fileName = generateUniqueFileName(baseName, 'douyin/avatars');
const uploaded = await uploadFile(buffer, fileName, { 'Content-Type': contentType });
const fileName = generateUniqueFileName(baseName, "douyin/avatars");
const uploaded = await uploadFile(buffer, fileName, {
"Content-Type": contentType,
});
return uploaded;
} catch (e) {
console.warn('[avatar] 上传失败，使用原始链接：', (e as Error)?.message || e);
console.warn(
"[avatar] 上传失败，使用原始链接：",
(e as Error)?.message || e,
);
return srcUrl || undefined;
}
}
@ -39,13 +44,18 @@ export async function uploadImageFromUrl(
if (!srcUrl) return undefined;
try {
const { buffer, contentType, ext } = await downloadBinary(context, srcUrl);
const safeExt = ext || 'jpg';
const safeExt = ext || "jpg";
const baseName = nameHint ? `${nameHint}.${safeExt}` : `image.${safeExt}`;
const fileName = generateUniqueFileName(baseName, 'douyin/comment-images');
const uploaded = await uploadFile(buffer, fileName, { 'Content-Type': contentType });
const fileName = generateUniqueFileName(baseName, "douyin/comment-images");
const uploaded = await uploadFile(buffer, fileName, {
"Content-Type": contentType,
});
return uploaded;
} catch (e) {
console.warn('[image] 上传失败，使用原始链接：', (e as Error)?.message || e);
console.warn(
"[image] 上传失败，使用原始链接：",
(e as Error)?.message || e,
);
return srcUrl || undefined;
}
}
@ -53,10 +63,25 @@ export async function uploadImageFromUrl(
/** 下载图文作品的图片和音乐并上传到 MinIO */
export async function handleImagePost(
context: BrowserContext,
aweme: DouyinImageAweme
): Promise<{ images: { url: string; width?: number; height?: number; video?: string; duration?: number }[]; musicUrl?: string }> {
aweme: DouyinImageAweme,
): Promise<{
images: {
url: string;
width?: number;
height?: number;
video?: string;
duration?: number;
}[];
musicUrl?: string;
}> {
const awemeId = aweme.aweme_id;
const uploadedImages: { url: string; width?: number; height?: number; video?: string; duration?: number }[] = [];
const uploadedImages: {
url: string;
width?: number;
height?: number;
video?: string;
duration?: number;
}[] = [];
// 下载图片（顺序保持）
for (let i = 0; i < (aweme.images?.length || 0); i++) {
@ -64,19 +89,33 @@ export async function handleImagePost(
const url = pickFirstUrl(img?.url_list);
if (!url) continue;
const { buffer, contentType, ext } = await downloadBinary(context, url);
const safeExt = ext || 'jpg';
const fileName = generateUniqueFileName(`${awemeId}/${i}.${safeExt}`, 'douyin/images');
const uploaded = await uploadFile(buffer, fileName, { 'Content-Type': contentType });
const safeExt = ext || "jpg";
const fileName = generateUniqueFileName(
`${awemeId}/${i}.${safeExt}`,
"douyin/images",
);
const uploaded = await uploadFile(buffer, fileName, {
"Content-Type": contentType,
});
if (img.video?.play_addr) {
// 如果是动图，下载 video 并上传
const videoUrl = img.video.play_addr[0]?.src;
if (videoUrl) {
try {
const { buffer: videoBuffer, contentType: videoContentType, ext: videoExt } = await downloadBinary(context, videoUrl);
const safeVideoExt = videoExt || 'mp4';
const videoFileName = generateUniqueFileName(`${awemeId}/${i}_animated.${safeVideoExt}`, 'douyin/images');
const uploadedVideo = await uploadFile(videoBuffer, videoFileName, { 'Content-Type': videoContentType });
const {
buffer: videoBuffer,
contentType: videoContentType,
ext: videoExt,
} = await downloadBinary(context, videoUrl);
const safeVideoExt = videoExt || "mp4";
const videoFileName = generateUniqueFileName(
`${awemeId}/${i}_animated.${safeVideoExt}`,
"douyin/images",
);
const uploadedVideo = await uploadFile(videoBuffer, videoFileName, {
"Content-Type": videoContentType,
});
// 获取动图时长
const duration = await getVideoDuration(videoBuffer);
@ -87,19 +126,30 @@ export async function handleImagePost(
width: img?.width,
height: img?.height,
video: uploadedVideo,
duration: duration ?? undefined
duration: duration ?? undefined,
});
if (duration) {
console.log(`[image] 动图 ${i} 时长: ${duration}ms`);
}
} catch (e) {
console.warn(`[image] 动图视频上传失败，跳过：`, (e as Error)?.message || e);
uploadedImages.push({ url: uploaded, width: img?.width, height: img?.height });
console.warn(
`[image] 动图视频上传失败，跳过：`,
(e as Error)?.message || e,
);
uploadedImages.push({
url: uploaded,
width: img?.width,
height: img?.height,
});
}
}
} else {
uploadedImages.push({ url: uploaded, width: img?.width, height: img?.height });
uploadedImages.push({
url: uploaded,
width: img?.width,
height: img?.height,
});
}
}
@ -107,10 +157,18 @@ export async function handleImagePost(
let musicUrl: string | undefined;
const audioSrc = pickFirstUrl(aweme.music?.play_url?.url_list);
if (audioSrc) {
const { buffer, contentType, ext } = await downloadBinary(context, audioSrc);
const safeExt = ext || 'mp3';
const fileName = generateUniqueFileName(`${awemeId}.${safeExt}`, 'douyin/audios');
musicUrl = await uploadFile(buffer, fileName, { 'Content-Type': contentType });
const { buffer, contentType, ext } = await downloadBinary(
context,
audioSrc,
);
const safeExt = ext || "mp3";
const fileName = generateUniqueFileName(
`${awemeId}.${safeExt}`,
"douyin/audios",
);
musicUrl = await uploadFile(buffer, fileName, {
"Content-Type": contentType,
});
}
return { images: uploadedImages, musicUrl };

15
app/api/fetcher/utils.ts
View File

@ -1,4 +1,4 @@
export const runtime = 'nodejs'
export const runtime = "nodejs";
export function toCamelCaseKey(key: string): string {
return key.replace(/_([a-zA-Z])/g, (_, c: string) => c.toUpperCase());
@ -16,7 +16,7 @@ export function createCamelCompatibleProxy<T extends object>(root: T): T {
const seen = new WeakMap<object, any>();
const wrap = (value: any): any => {
if (value === null || typeof value !== 'object') return value;
if (value === null || typeof value !== "object") return value;
if (seen.has(value)) return seen.get(value);
const proxied = new Proxy(value, handler);
seen.set(value, proxied);
@ -26,13 +26,14 @@ export function createCamelCompatibleProxy<T extends object>(root: T): T {
const handler: ProxyHandler<any> = {
get(target, prop, receiver) {
// 非字符串属性（如 Symbol、数字索引）直接透传
if (typeof prop !== 'string') {
if (typeof prop !== "string") {
return wrap(Reflect.get(target, prop, receiver));
}
const primary = prop;
if (primary in target) return wrap(Reflect.get(target, primary, receiver));
if (primary in target)
return wrap(Reflect.get(target, primary, receiver));
const camel = toCamelCaseKey(primary);
if (camel in target) return wrap(Reflect.get(target, camel, receiver));
@ -43,14 +44,14 @@ export function createCamelCompatibleProxy<T extends object>(root: T): T {
return wrap(Reflect.get(target, prop, receiver));
},
has(target, prop) {
if (typeof prop !== 'string') return prop in target;
const primary = prop === 'auther' ? 'autherInfo' : prop;
if (typeof prop !== "string") return prop in target;
const primary = prop === "auther" ? "autherInfo" : prop;
return (
primary in target ||
toCamelCaseKey(primary) in target ||
toSnakeCaseKey(primary) in target
);
}
},
};
return wrap(root);

169
app/api/media.ts
View File

@ -1,16 +1,18 @@
import { execFile } from 'child_process';
import { promises as fs } from 'fs';
import os from 'os';
import path from 'path';
import { promisify } from 'util';
import { execFile } from "child_process";
import { promises as fs } from "fs";
import os from "os";
import path from "path";
import { promisify } from "util";
const execFileAsync = promisify(execFile);
/**
* 使用 ffmpeg 从视频二进制中提取第一帧，返回 JPEG buffer
*/
export async function extractFirstFrame(videoBuffer: Buffer): Promise<{ buffer: Buffer; contentType: string; ext: string } | null> {
const ffmpegCmd = process.env.FFMPEG_PATH || 'ffmpeg';
export async function extractFirstFrame(
videoBuffer: Buffer,
): Promise<{ buffer: Buffer; contentType: string; ext: string } | null> {
const ffmpegCmd = process.env.FFMPEG_PATH || "ffmpeg";
const tmpDir = os.tmpdir();
const base = `dy_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
const inPath = path.join(tmpDir, `${base}.mp4`);
@ -19,36 +21,54 @@ export async function extractFirstFrame(videoBuffer: Buffer): Promise<{ buffer:
try {
await fs.writeFile(inPath, videoBuffer);
const args = [
'-hide_banner',
'-loglevel', 'error',
'-ss', '0',
'-i', inPath,
'-frames:v', '1',
'-q:v', '2',
'-f', 'image2',
'-y',
"-hide_banner",
"-loglevel",
"error",
"-ss",
"0",
"-i",
inPath,
"-frames:v",
"1",
"-q:v",
"2",
"-f",
"image2",
"-y",
outPath,
];
await execFileAsync(ffmpegCmd, args, { windowsHide: true });
const img = await fs.readFile(outPath);
return { buffer: img, contentType: 'image/jpeg', ext: 'jpg' };
return { buffer: img, contentType: "image/jpeg", ext: "jpg" };
} catch (e: any) {
if (e && (e.code === 'ENOENT' || /not found|is not recognized/i.test(String(e.message)))) {
console.warn('系统未检测到 ffmpeg，可安装并配置 PATH 或设置 FFMPEG_PATH 后启用封面提取。');
if (
e &&
(e.code === "ENOENT" ||
/not found|is not recognized/i.test(String(e.message)))
) {
console.warn(
"系统未检测到 ffmpeg，可安装并配置 PATH 或设置 FFMPEG_PATH 后启用封面提取。",
);
return null;
}
throw e;
} finally {
try { await fs.unlink(inPath); } catch { }
try { await fs.unlink(outPath); } catch { }
try {
await fs.unlink(inPath);
} catch {}
try {
await fs.unlink(outPath);
} catch {}
}
}
/**
* 使用 ffprobe 获取视频时长（毫秒）
*/
export async function getVideoDuration(videoBuffer: Buffer): Promise<number | null> {
const ffprobeCmd = process.env.FFPROBE_PATH || 'ffprobe';
export async function getVideoDuration(
videoBuffer: Buffer,
): Promise<number | null> {
const ffprobeCmd = process.env.FFPROBE_PATH || "ffprobe";
const tmpDir = os.tmpdir();
const base = `dy_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
const inPath = path.join(tmpDir, `${base}.mp4`);
@ -56,24 +76,37 @@ export async function getVideoDuration(videoBuffer: Buffer): Promise<number | nu
try {
await fs.writeFile(inPath, videoBuffer);
const args = [
'-v', 'error',
'-show_entries', 'format=duration',
'-of', 'default=noprint_wrappers=1:nokey=1',
"-v",
"error",
"-show_entries",
"format=duration",
"-of",
"default=noprint_wrappers=1:nokey=1",
inPath,
];
const { stdout } = await execFileAsync(ffprobeCmd, args, { windowsHide: true });
const { stdout } = await execFileAsync(ffprobeCmd, args, {
windowsHide: true,
});
const durationSeconds = parseFloat(stdout.trim());
if (isNaN(durationSeconds)) return null;
return Math.round(durationSeconds * 1000); // 转换为毫秒
} catch (e: any) {
if (e && (e.code === 'ENOENT' || /not found|is not recognized/i.test(String(e.message)))) {
console.warn('系统未检测到 ffprobe，可安装并配置 PATH 或设置 FFPROBE_PATH 后启用时长提取。');
if (
e &&
(e.code === "ENOENT" ||
/not found|is not recognized/i.test(String(e.message)))
) {
console.warn(
"系统未检测到 ffprobe，可安装并配置 PATH 或设置 FFPROBE_PATH 后启用时长提取。",
);
return null;
}
console.warn(`获取视频时长失败: ${e?.message || e}`);
return null;
} finally {
try { await fs.unlink(inPath); } catch { }
try {
await fs.unlink(inPath);
} catch {}
}
}
@ -89,67 +122,93 @@ export async function getVideoDuration(videoBuffer: Buffer): Promise<number | nu
*/
export async function extractAudio(
videoBuffer: Buffer,
opts?: { format?: 'mp3' | 'aac' | 'wav'; bitrateKbps?: number }
opts?: { format?: "mp3" | "aac" | "wav"; bitrateKbps?: number },
): Promise<{ buffer: Buffer; contentType: string; ext: string } | null> {
const ffmpegCmd = process.env.FFMPEG_PATH || 'ffmpeg';
const ffmpegCmd = process.env.FFMPEG_PATH || "ffmpeg";
const tmpDir = os.tmpdir();
const base = `dy_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
const inPath = path.join(tmpDir, `${base}.mp4`);
const format = opts?.format ?? 'mp3';
const format = opts?.format ?? "mp3";
const bitrate = Math.max(32, Math.min(512, opts?.bitrateKbps ?? 192)); // 安全范围 32~512 kbps
// 根据目标格式设置输出路径、MIME 与编码参数
let outPath = '';
let contentType = '';
let ext = '';
let outPath = "";
let contentType = "";
let ext = "";
let codecArgs: string[] = [];
if (format === 'mp3') {
ext = 'mp3';
contentType = 'audio/mpeg';
if (format === "mp3") {
ext = "mp3";
contentType = "audio/mpeg";
outPath = path.join(tmpDir, `${base}.${ext}`);
codecArgs = ['-c:a', 'libmp3lame', '-b:a', `${bitrate}k`];
} else if (format === 'aac') {
codecArgs = ["-c:a", "libmp3lame", "-b:a", `${bitrate}k`];
} else if (format === "aac") {
// 使用 m4a 容器更通用
ext = 'm4a';
contentType = 'audio/mp4';
ext = "m4a";
contentType = "audio/mp4";
outPath = path.join(tmpDir, `${base}.${ext}`);
codecArgs = ['-c:a', 'aac', '-b:a', `${bitrate}k`, '-movflags', '+faststart'];
codecArgs = [
"-c:a",
"aac",
"-b:a",
`${bitrate}k`,
"-movflags",
"+faststart",
];
} else {
// wav
ext = 'wav';
contentType = 'audio/wav';
ext = "wav";
contentType = "audio/wav";
outPath = path.join(tmpDir, `${base}.${ext}`);
codecArgs = ['-f', 'wav', '-acodec', 'pcm_s16le', '-ar', '44100', '-ac', '2'];
codecArgs = [
"-f",
"wav",
"-acodec",
"pcm_s16le",
"-ar",
"44100",
"-ac",
"2",
];
}
try {
await fs.writeFile(inPath, videoBuffer);
const args = [
'-hide_banner',
'-loglevel', 'error',
'-i', inPath,
'-vn', // 丢弃视频流
"-hide_banner",
"-loglevel",
"error",
"-i",
inPath,
"-vn", // 丢弃视频流
...codecArgs,
'-y',
"-y",
outPath,
];
await execFileAsync(ffmpegCmd, args, { windowsHide: true });
const audio = await fs.readFile(outPath);
return { buffer: audio, contentType, ext };
} catch (e: any) {
if (e && (e.code === 'ENOENT' || /not found|is not recognized/i.test(String(e.message)))) {
console.warn('系统未检测到 ffmpeg，可安装并配置 PATH 或设置 FFMPEG_PATH 后启用音频提取。');
if (
e &&
(e.code === "ENOENT" ||
/not found|is not recognized/i.test(String(e.message)))
) {
console.warn(
"系统未检测到 ffmpeg，可安装并配置 PATH 或设置 FFMPEG_PATH 后启用音频提取。",
);
return null;
}
// 一些环境可能缺少特定编码器（如 libmp3lame），提示并抛出原始错误
console.warn(`提取音频失败: ${e?.message || e}`);
throw e;
} finally {
try { await fs.unlink(inPath); } catch { }
try {
await fs.unlink(inPath);
} catch {}
try {
if (outPath) await fs.unlink(outPath);
} catch { }
} catch {}
}
}

94
app/api/search/route.ts
View File

@ -1,13 +1,16 @@
import { json } from '@/lib/json';
import { getFileUrl } from '@/lib/minio';
import { prisma } from '@/lib/prisma'; // 你的 Prisma 客户端实例
import { NextResponse } from 'next/server';
import { json } from "@/lib/json";
import { getFileUrl } from "@/lib/minio";
import { prisma } from "@/lib/prisma"; // 你的 Prisma 客户端实例
import { NextResponse } from "next/server";
export async function GET(req: Request) {
const { searchParams } = new URL(req.url);
const q = (searchParams.get('q') || '').trim();
const page = Math.max(1, Number(searchParams.get('page') || 1));
const limit = Math.min(50, Math.max(1, Number(searchParams.get('limit') || 20)));
const q = (searchParams.get("q") || "").trim();
const page = Math.max(1, Number(searchParams.get("page") || 1));
const limit = Math.min(
50,
Math.max(1, Number(searchParams.get("limit") || 20)),
);
const offset = (page - 1) * limit;
if (!q) {
@ -24,7 +27,7 @@ export async function GET(req: Request) {
{
id: string;
awemeId: string;
type: 'video' | 'image';
type: "video" | "image";
rank: number;
snippet: string;
}[]
@ -86,9 +89,11 @@ export async function GET(req: Request) {
`;
// 查询总数（参数化，避免注入）
const totalRows = await prisma.$queryRaw<{
const totalRows = await prisma.$queryRaw<
{
count: number;
}[]>`
}[]
>`
WITH tsq AS (
SELECT websearch_to_tsquery('zhcfg', ${q}) AS query
)
@ -104,11 +109,18 @@ export async function GET(req: Request) {
`;
// 分离视频和图文ID
const videoIds = rows.filter(r => r.type === 'video').map(r => r.awemeId);
const imagePostIds = rows.filter(r => r.type === 'image').map(r => r.awemeId);
const videoIds = rows
.filter((r) => r.type === "video")
.map((r) => r.awemeId);
const imagePostIds = rows
.filter((r) => r.type === "image")
.map((r) => r.awemeId);
// 批量查询视频元信息
const videos = videoIds.length > 0 ? (await prisma.video.findMany({
const videos =
videoIds.length > 0
? (
await prisma.video.findMany({
where: { aweme_id: { in: videoIds } },
select: {
aweme_id: true,
@ -116,49 +128,69 @@ export async function GET(req: Request) {
cover_url: true,
video_url: true,
duration_ms: true,
author: true
author: true,
},
})).map(v => (
{ ...v, cover_url: getFileUrl(v.cover_url || ''),
author: { ...v.author, avatar_url: getFileUrl(v.author.avatar_url || '') },
video_url: getFileUrl(v.video_url || '') })
) : [];
})
).map((v) => ({
...v,
cover_url: getFileUrl(v.cover_url || ""),
author: {
...v.author,
avatar_url: getFileUrl(v.author.avatar_url || ""),
},
video_url: getFileUrl(v.video_url || ""),
}))
: [];
// 批量查询图文元信息
const imagePosts = imagePostIds.length > 0 ? (await prisma.imagePost.findMany({
const imagePosts =
imagePostIds.length > 0
? (
await prisma.imagePost.findMany({
where: { aweme_id: { in: imagePostIds } },
select: {
aweme_id: true,
desc: true,
author: true,
images: {
orderBy: { order: 'asc' },
orderBy: { order: "asc" },
take: 1,
select: {
url: true,
width: true,
height: true,
}
}
},
})).map(ip => ({
},
},
})
).map((ip) => ({
...ip,
author: { ...ip.author, avatar_url: getFileUrl(ip.author.avatar_url || '') },
author: {
...ip.author,
avatar_url: getFileUrl(ip.author.avatar_url || ""),
},
cover_url: ip.images[0] ? getFileUrl(ip.images[0].url) : null,
})) : [];
}))
: [];
return json({
results: rows.map(r => ({
results: rows.map((r) => ({
...r,
video: r.type === 'video' ? videos.find(v => v.aweme_id === r.awemeId) : undefined,
imagePost: r.type === 'image' ? imagePosts.find(ip => ip.aweme_id === r.awemeId) : undefined,
video:
r.type === "video"
? videos.find((v) => v.aweme_id === r.awemeId)
: undefined,
imagePost:
r.type === "image"
? imagePosts.find((ip) => ip.aweme_id === r.awemeId)
: undefined,
})),
total: totalRows?.[0]?.count ?? 0,
page,
limit,
});
} catch (err) {
console.error('Search error:', err);
return NextResponse.json({ error: 'Search failed' }, { status: 500 });
console.error("Search error:", err);
return NextResponse.json({ error: "Search failed" }, { status: 500 });
}
}

9
app/api/stt/index.ts
View File

@ -54,7 +54,7 @@ async function transcriptAudio(audio: Buffer | string) {
response_format: zodResponseFormat(SttSchema, "stt_result"),
});
const data = completion.choices?.[0]?.message
const data = completion.choices?.[0]?.message;
console.log("转写结果", data.content);
if (!data || !data.content) {
@ -74,10 +74,13 @@ export async function transcriptAweme(awemeId: string): Promise<SttResult> {
if (!aweme) {
throw new Error("Aweme not found or aweme is not a video post");
}
const vPath = aweme.video_url
const vPath = aweme.video_url;
const buffer = await downloadFile(vPath);
const audioDat = await extractAudio(buffer, { format: "mp3", bitrateKbps: 128 });
const audioDat = await extractAudio(buffer, {
format: "mp3",
bitrateKbps: 128,
});
if (!audioDat || !audioDat.buffer) {
throw new Error("Failed to extract audio from video");

19
app/api/stt/route.ts
View File

@ -1,19 +1,22 @@
export const runtime = "nodejs";
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import type { FeedItem, FeedResponse } from '@/app/types/feed';
import { getFileUrl } from '@/lib/minio';
import { transcriptAweme } from '.';
import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import type { FeedItem, FeedResponse } from "@/app/types/feed";
import { getFileUrl } from "@/lib/minio";
import { transcriptAweme } from ".";
// Contract
// Inputs: search params { before?: ISOString, limit?: number }
// Output: { items: FeedItem[], nextCursor: ISOString | null }
export async function GET(req: NextRequest) {
const { searchParams } = new URL(req.url)
const awemeId = searchParams.get('awemeId');
const { searchParams } = new URL(req.url);
const awemeId = searchParams.get("awemeId");
if (!awemeId) {
return NextResponse.json({ error: "Missing awemeId parameter" }, { status: 400 });
return NextResponse.json(
{ error: "Missing awemeId parameter" },
{ status: 400 },
);
}
const script = await transcriptAweme(awemeId);
return NextResponse.json(script);

52
app/author/[secUid]/page.tsx
View File

@ -6,7 +6,11 @@ import { FeedItem } from "@/app/types/feed";
import { notFound } from "next/navigation";
import Image from "next/image";
export default async function AuthorPage({ params }: { params: Promise<{ secUid: string }> }) {
export default async function AuthorPage({
params,
}: {
params: Promise<{ secUid: string }>;
}) {
const secUid = (await params).secUid;
const author = await prisma.author.findUnique({
@ -22,15 +26,15 @@ export default async function AuthorPage({ params }: { params: Promise<{ secUid:
const [videos, posts] = await Promise.all([
prisma.video.findMany({
where: { authorId: secUid },
orderBy: { created_at: 'desc' },
orderBy: { created_at: "desc" },
take: limit,
include: { author: true },
}),
prisma.imagePost.findMany({
where: { authorId: secUid },
orderBy: { created_at: 'desc' },
orderBy: { created_at: "desc" },
take: limit,
include: { author: true, images: { orderBy: { order: 'asc' }, take: 1 } },
include: { author: true, images: { orderBy: { order: "asc" }, take: 1 } },
}),
]);
@ -41,11 +45,15 @@ export default async function AuthorPage({ params }: { params: Promise<{ secUid:
created_at: v.created_at,
desc: v.desc,
video_url: getFileUrl(v.video_url),
cover_url: getFileUrl(v.cover_url ?? 'default_cover.png'),
cover_url: getFileUrl(v.cover_url ?? "default_cover.png"),
width: v.width ?? null,
height: v.height ?? null,
author: { nickname: v.author.nickname, avatar_url: getFileUrl(v.author.avatar_url ?? ''), sec_uid: v.author.sec_uid },
likes: Number(v.digg_count)
author: {
nickname: v.author.nickname,
avatar_url: getFileUrl(v.author.avatar_url ?? ""),
sec_uid: v.author.sec_uid,
},
likes: Number(v.digg_count),
})),
...posts.map((p) => ({
type: "image" as const,
@ -55,13 +63,23 @@ export default async function AuthorPage({ params }: { params: Promise<{ secUid:
cover_url: getFileUrl(p.images?.[0]?.url ?? null),
width: p.images?.[0]?.width ?? null,
height: p.images?.[0]?.height ?? null,
author: { nickname: p.author.nickname, avatar_url: getFileUrl(p.author.avatar_url ?? ''), sec_uid: p.author.sec_uid },
likes: Number(p.digg_count)
author: {
nickname: p.author.nickname,
avatar_url: getFileUrl(p.author.avatar_url ?? ""),
sec_uid: p.author.sec_uid,
},
likes: Number(p.digg_count),
})),
].sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at))
]
.sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at))
.slice(0, limit);
const initialCursor = initialItems.length > 0 ? new Date(initialItems[initialItems.length - 1].created_at as any).toISOString() : null;
const initialCursor =
initialItems.length > 0
? new Date(
initialItems[initialItems.length - 1].created_at as any,
).toISOString()
: null;
return (
<main className="min-h-screen bg-white dark:bg-black text-black dark:text-white">
@ -75,7 +93,7 @@ export default async function AuthorPage({ params }: { params: Promise<{ secUid:
<div className="flex flex-col md:flex-row items-center md:items-start gap-6 mb-12">
<div className="relative w-24 h-24 md:w-32 md:h-32 shrink-0">
<Image
src={getFileUrl(author.avatar_url || 'default-avatar.png')}
src={getFileUrl(author.avatar_url || "default-avatar.png")}
alt={author.nickname}
fill
className="rounded-full object-cover border-2 border-gray-200 dark:border-gray-800"
@ -86,7 +104,7 @@ export default async function AuthorPage({ params }: { params: Promise<{ secUid:
<div>
<h2 className="text-2xl font-bold">{author.nickname}</h2>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
抖音号：{author.unique_id || author.short_id || '未知'}
抖音号：{author.unique_id || author.short_id || "未知"}
</p>
</div>
@ -98,11 +116,15 @@ export default async function AuthorPage({ params }: { params: Promise<{ secUid:
<div className="flex items-center justify-center md:justify-start gap-6 text-sm">
<div className="flex items-center gap-1">
<span className="font-bold text-lg">{Number(author.total_favorited).toLocaleString()}</span>
<span className="font-bold text-lg">
{Number(author.total_favorited).toLocaleString()}
</span>
<span className="text-gray-500">获赞</span>
</div>
<div className="flex items-center gap-1">
<span className="font-bold text-lg">{Number(author.follower_count).toLocaleString()}</span>
<span className="font-bold text-lg">
{Number(author.follower_count).toLocaleString()}
</span>
<span className="text-gray-500">粉丝</span>
</div>
</div>

233
app/aweme/[awemeId]/Client.tsx
View File

@ -1,9 +1,15 @@
"use client";
import { useRouter } from "next/navigation";
import { useEffect, useMemo, useRef, useState } from "react";
import { Pause, Play } from "lucide-react";
import type { AwemeData, ImageData, Neighbors, VideoData, VideoTranscript } from "./types.ts";
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";
@ -18,7 +24,6 @@ import { useImageCarousel } from "./hooks/useImageCarousel";
import { useNavigation } from "./hooks/useNavigation";
import { usePlayerState } from "./hooks/usePlayerState";
import { useVideoPlayer } from "./hooks/useVideoPlayer";
import { Prisma } from "@prisma/client";
const SEGMENT_MS = 4000;
@ -28,7 +33,11 @@ interface AwemeDetailClientProps {
transcript: VideoTranscript | null;
}
export default function AwemeDetailClient({ data, neighbors, transcript }: AwemeDetailClientProps) {
export default function AwemeDetailClient({
data,
neighbors,
transcript,
}: AwemeDetailClientProps) {
const router = useRouter();
const isVideo = data.type === "video";
@ -44,6 +53,19 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
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({
@ -53,7 +75,6 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
neighbors,
volume: playerState.volume,
audioRef,
scrollerRef,
setProgress: playerState.setProgress,
segmentMs: SEGMENT_MS,
});
@ -84,50 +105,32 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
return;
}
if (!images?.length) return;
imageCarouselState.seekTo(ratio);
};
// 计算每张图片的时长
const durations = images.map(img => img.duration ?? SEGMENT_MS);
const totalDuration = durations.reduce((sum, d) => sum + d, 0);
const targetTime = ratio * totalDuration;
const seekImageByVisualRatio = (ratio: number) => {
if (!images?.length) return;
// 找到目标时间对应的图片索引和进度
let accumulatedTime = 0;
let targetIdx = 0;
let remainder = 0;
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);
};
for (let i = 0; i < images.length; i++) {
if (accumulatedTime + durations[i] > targetTime) {
targetIdx = i;
remainder = (targetTime - accumulatedTime) / durations[i];
break;
const handleControlSeek = (ratio: number) => {
if (isVideo) {
seekTo(ratio);
return;
}
accumulatedTime += durations[i];
if (i === images.length - 1) {
targetIdx = i;
remainder = 1;
}
}
imageCarouselState.idxRef.current = targetIdx;
imageCarouselState.setIdx(targetIdx);
imageCarouselState.segStartRef.current = performance.now() - remainder * durations[targetIdx];
// 重新计算总进度
let totalProgress = 0;
for (let i = 0; i < targetIdx; i++) {
totalProgress += 1;
}
totalProgress += remainder;
playerState.setProgress(totalProgress / images.length);
// 虚拟滚动不需要实际滚动 DOM
seekImageByVisualRatio(ratio);
};
const togglePlay = async () => {
if (isVideo) {
const v = videoRef.current;
if (!v) return;
if (v.paused) await v.play().catch(() => { });
if (v.paused) await v.play().catch(() => {});
else v.pause();
return;
}
@ -135,23 +138,23 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
if (!playerState.isPlaying) {
playerState.setIsPlaying(true);
try {
await el?.play().catch(() => { });
} catch { }
await el?.play().catch(() => {});
} catch {}
} else {
playerState.setIsPlaying(false);
el?.pause();
pauseImageMedia();
}
};
const toggleFullscreen = () => {
if (!document.fullscreenElement) {
if (document.body.requestFullscreen) {
document.body.requestFullscreen().catch(() => { });
document.body.requestFullscreen().catch(() => {});
return;
}
const vRef = videoRef.current;
if (vRef && vRef.requestFullscreen) {
vRef.requestFullscreen().catch(() => { });
vRef.requestFullscreen().catch(() => {});
return;
}
// @ts-ignore
@ -160,26 +163,23 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
vRef.webkitEnterFullscreen();
}
} else {
document.exitFullscreen().catch(() => { });
document.exitFullscreen().catch(() => {});
}
};
const prevImg = () => {
if (!images?.length) return;
const next = Math.max(0, imageCarouselState.idxRef.current - 1);
imageCarouselState.idxRef.current = next;
imageCarouselState.setIdx(next);
imageCarouselState.segStartRef.current = performance.now();
// 虚拟滚动不需要实际滚动 DOM
imageCarouselState.goToIndex(next);
};
const nextImg = () => {
if (!images?.length) return;
const next = Math.min(images.length - 1, imageCarouselState.idxRef.current + 1);
imageCarouselState.idxRef.current = next;
imageCarouselState.setIdx(next);
imageCarouselState.segStartRef.current = performance.now();
// 虚拟滚动不需要实际滚动 DOM
const next = Math.min(
images.length - 1,
imageCarouselState.idxRef.current + 1,
);
imageCarouselState.goToIndex(next);
};
const handleDownload = () => {
@ -223,6 +223,27 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
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;
@ -236,20 +257,28 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
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}` }] : [];
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 { }
} catch {}
// 更新播放状态
try {
ms.playbackState = playerState.isPlaying ? "playing" : "paused";
} catch { }
} catch {}
const getImagesTotalMs = () =>
(images || []).reduce((sum, img) => sum + (img.duration ?? SEGMENT_MS), 0);
const getImagesTotalMs = () => imageCarouselState.totalDurationMs;
const updatePosition = () => {
try {
@ -267,11 +296,14 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
} else if (images?.length) {
const totalMs = getImagesTotalMs();
const duration = totalMs / 1000;
const position = Math.max(0, Math.min(duration, (playerState.progress * totalMs) / 1000));
const position = Math.max(
0,
Math.min(duration, (playerState.progress * totalMs) / 1000),
);
// @ts-ignore
ms.setPositionState({ duration, position, playbackRate: 1 });
}
} catch { }
} catch {}
};
// 绑定视频事件以同步状态
@ -279,11 +311,15 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
const v = videoRef.current;
if (isVideo && v) {
const onPlay = () => {
try { ms.playbackState = "playing"; } catch { }
try {
ms.playbackState = "playing";
} catch {}
updatePosition();
};
const onPause = () => {
try { ms.playbackState = "paused"; } catch { }
try {
ms.playbackState = "paused";
} catch {}
updatePosition();
};
const onTimeUpdate = () => updatePosition();
@ -317,6 +353,7 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
data.author.avatar_url,
data.created_at,
imageCarouselState.idx,
imageCarouselState.totalDurationMs,
images,
playerState.isPlaying,
playerState.progress,
@ -329,16 +366,19 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
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 getImagesTotalMs = () => imageCarouselState.totalDurationMs;
const handlePlay = async () => {
if (isVideo) {
const v = videoRef.current;
try { await v?.play(); } catch { }
try {
await v?.play();
} catch {}
} else {
playerState.setIsPlaying(true);
try { await audioRef.current?.play(); } catch { }
try {
await audioRef.current?.play();
} catch {}
}
};
const handlePause = () => {
@ -347,23 +387,30 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
v?.pause();
} else {
playerState.setIsPlaying(false);
audioRef.current?.pause();
pauseImageMedia();
}
};
const handleStop = () => {
if (isVideo) {
const v = videoRef.current;
if (v) { v.pause(); v.currentTime = 0; }
if (v) {
v.pause();
v.currentTime = 0;
}
} else {
playerState.setIsPlaying(false);
audioRef.current?.pause();
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));
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;
@ -387,8 +434,12 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
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("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);
});
@ -417,7 +468,7 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
ms.setActionHandler("seekto", null);
ms.setActionHandler("previoustrack", null);
ms.setActionHandler("nexttrack", null);
} catch { }
} catch {}
};
}, [
isVideo,
@ -426,6 +477,8 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
neighbors.next,
router,
playerState.progress,
pauseImageMedia,
imageCarouselState.totalDurationMs,
]);
return (
@ -434,15 +487,19 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
<div className="relative h-full landscape:flex landscape:flex-row">
{/* 主媒体区域 */}
<section ref={mediaContainerRef} className="relative h-screen landscape:flex-1">
<div className="relative h-screen overflow-hidden">
<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 === "loop"}
loop={playerState.loopMode !== "sequential"}
onTogglePlay={togglePlay}
/>
) : (
@ -450,13 +507,19 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
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 grid place-items-center">
<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>
@ -496,7 +559,7 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
hasTranscript={isVideo && !!transcript?.speech_detected}
onShowTranscript={() => setTranscriptOpen(true)}
onTogglePlay={togglePlay}
onSeek={seekTo}
onSeek={handleControlSeek}
onVolumeChange={playerState.setVolume}
onRateChange={playerState.setRate}
onRotationChange={playerState.setRotation}
@ -512,8 +575,12 @@ export default function AwemeDetailClient({ data, neighbors, transcript }: Aweme
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}`)}
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>

5
app/aweme/[awemeId]/components/BackgroundCanvas.tsx
View File

@ -2,7 +2,10 @@ import { forwardRef } from "react";
interface BackgroundCanvasProps {}
export const BackgroundCanvas = forwardRef<HTMLCanvasElement, BackgroundCanvasProps>((props, ref) => {
export const BackgroundCanvas = forwardRef<
HTMLCanvasElement,
BackgroundCanvasProps
>((props, ref) => {
return (
<canvas
ref={ref}

33
app/aweme/[awemeId]/components/CommentList.tsx
View File

@ -18,12 +18,21 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
<header className="flex items-center gap-4 mb-5">
<div className="size-10 rounded-full overflow-hidden bg-zinc-700/60">
{author.avatar_url ? (
<img src={author.avatar_url} alt="avatar" className="w-full h-full object-cover" />
<img
src={author.avatar_url}
alt="avatar"
className="w-full h-full object-cover"
/>
) : null}
</div>
<div>
<div className="font-medium text-white/95 text-sm sm:text-base">{author.nickname}</div>
<div className="text-xs text-white/50" title={formatAbsoluteUTC(createdAt)}>
<div className="font-medium text-white/95 text-sm sm:text-base">
{author.nickname}
</div>
<div
className="text-xs text-white/50"
title={formatAbsoluteUTC(createdAt)}
>
发布于 {formatRelativeTime(createdAt)}
</div>
</div>
@ -34,13 +43,21 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
<li key={c.cid} className="flex items-start gap-3 sm:gap-4">
<div className="size-8 rounded-full overflow-hidden bg-zinc-700/60 shrink-0">
{c.user.avatar_url ? (
<img src={c.user.avatar_url} alt="avatar" className="w-full h-full object-cover" />
<img
src={c.user.avatar_url}
alt="avatar"
className="w-full h-full object-cover"
/>
) : null}
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="font-medium text-white/95 text-sm">{c.user.nickname}</span>
<span className="text-xs text-white/50">{formatRelativeTime(c.created_at)}</span>
<span className="font-medium text-white/95 text-sm">
{c.user.nickname}
</span>
<span className="text-xs text-white/50">
{formatRelativeTime(c.created_at)}
</span>
</div>
<p className="mt-1 text-sm leading-relaxed text-white/90 break-words">
<CommentText text={c.text} />
@ -75,7 +92,9 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
</div>
</li>
))}
{comments.length === 0 ? <li className="text-sm text-white/60">暂无评论</li> : null}
{comments.length === 0 ? (
<li className="text-sm text-white/60">暂无评论</li>
) : null}
</ul>
{/* 图片预览灯箱 */}

101
app/aweme/[awemeId]/components/CommentPanel.tsx
View File

@ -12,13 +12,23 @@ interface CommentPanelProps {
mounted: boolean;
}
export function CommentPanel({ open, onClose, author, createdAt, awemeId, mounted }: CommentPanelProps) {
export function CommentPanel({
open,
onClose,
author,
createdAt,
awemeId,
mounted,
}: CommentPanelProps) {
const [comments, setComments] = useState<Comment[]>([]);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);
// ranked 排序的稳定参数（由后端返回，前端透传保证会话内稳定）
const [rankParams, setRankParams] = useState<null | { seed: string; snapshot: string }>(null);
const [rankParams, setRankParams] = useState<null | {
seed: string;
snapshot: string;
}>(null);
// 两套滚动容器与哨兵，分别对应横屏与竖屏面板
const scrollRefLandscape = useRef<HTMLDivElement>(null);
const sentinelRefLandscape = useRef<HTMLDivElement>(null);
@ -27,7 +37,8 @@ export function CommentPanel({ open, onClose, author, createdAt, awemeId, mounte
const loadingRef = useRef(false);
// 加载评论
const loadComments = useCallback(async (reset = false) => {
const loadComments = useCallback(
async (reset = false) => {
if (loadingRef.current || (!reset && !hasMore)) return;
loadingRef.current = true;
@ -38,13 +49,15 @@ export function CommentPanel({ open, onClose, author, createdAt, awemeId, mounte
const query = new URLSearchParams({
skip: String(skip),
take: String(20),
mode: 'ranked',
mode: "ranked",
});
if (rankParams) {
query.set('seed', rankParams.seed);
query.set('snapshot', rankParams.snapshot);
query.set("seed", rankParams.seed);
query.set("snapshot", rankParams.snapshot);
}
const response = await fetch(`/api/comments/${awemeId}?${query.toString()}`);
const response = await fetch(
`/api/comments/${awemeId}?${query.toString()}`,
);
const data = await response.json();
// 统一做一次基于 cid 的去重，避免分页偶发重复
@ -72,11 +85,20 @@ export function CommentPanel({ open, onClose, author, createdAt, awemeId, mounte
setTotal(data.total);
setHasMore(data.hasMore);
if (data.mode === 'ranked' && data.seed && data.snapshot) {
if (data.mode === "ranked" && data.seed && data.snapshot) {
// 初始化或重置时更新稳定参数
setRankParams((prev) => {
if (reset) return { seed: String(data.seed), snapshot: String(data.snapshot) };
return prev ?? { seed: String(data.seed), snapshot: String(data.snapshot) };
if (reset)
return {
seed: String(data.seed),
snapshot: String(data.snapshot),
};
return (
prev ?? {
seed: String(data.seed),
snapshot: String(data.snapshot),
}
);
});
} else if (reset) {
setRankParams(null);
@ -87,7 +109,9 @@ export function CommentPanel({ open, onClose, author, createdAt, awemeId, mounte
setLoading(false);
loadingRef.current = false;
}
}, [awemeId, comments.length, hasMore]);
},
[awemeId, comments.length, hasMore],
);
// 面板打开时加载初始评论
useEffect(() => {
@ -102,7 +126,10 @@ export function CommentPanel({ open, onClose, author, createdAt, awemeId, mounte
const observers: IntersectionObserver[] = [];
const setup = (rootEl: HTMLDivElement | null, targetEl: HTMLDivElement | null) => {
const setup = (
rootEl: HTMLDivElement | null,
targetEl: HTMLDivElement | null,
) => {
if (!rootEl || !targetEl) return;
const io = new IntersectionObserver(
(entries) => {
@ -113,9 +140,9 @@ export function CommentPanel({ open, onClose, author, createdAt, awemeId, mounte
},
{
root: rootEl,
rootMargin: '0px 0px 200px 0px', // 距底部 200px 触发
rootMargin: "0px 0px 200px 0px", // 距底部 200px 触发
threshold: 0,
}
},
);
io.observe(targetEl);
observers.push(io);
@ -180,19 +207,28 @@ export function CommentPanel({ open, onClose, author, createdAt, awemeId, mounte
</div>
</div>
<div ref={scrollRefLandscape} className="p-3 overflow-auto comment-scroll">
<CommentList author={author} createdAt={createdAt} comments={comments} />
<div
ref={scrollRefLandscape}
className="p-3 overflow-auto comment-scroll"
>
<CommentList
author={author}
createdAt={createdAt}
comments={comments}
/>
{/* 底部加载触发区 */}
{hasMore && (
<div ref={sentinelRefLandscape} className="h-1 w-full" />
)}
{hasMore && <div ref={sentinelRefLandscape} className="h-1 w-full" />}
{loading && (
<div className="py-4 text-center text-white/60 text-sm">加载中...</div>
<div className="py-4 text-center text-white/60 text-sm">
加载中...
</div>
)}
{!hasMore && comments.length > 0 && (
<div className="py-4 text-center text-white/40 text-sm">没有更多评论了</div>
<div className="py-4 text-center text-white/40 text-sm">
没有更多评论了
</div>
)}
</div>
</aside>
@ -221,19 +257,28 @@ export function CommentPanel({ open, onClose, author, createdAt, awemeId, mounte
</button>
</div>
<div ref={scrollRefPortrait} className="p-3 overflow-auto comment-scroll">
<CommentList author={author} createdAt={createdAt} comments={comments} />
<div
ref={scrollRefPortrait}
className="p-3 overflow-auto comment-scroll"
>
<CommentList
author={author}
createdAt={createdAt}
comments={comments}
/>
{/* 底部加载触发区 */}
{hasMore && (
<div ref={sentinelRefPortrait} className="h-1 w-full" />
)}
{hasMore && <div ref={sentinelRefPortrait} className="h-1 w-full" />}
{loading && (
<div className="py-4 text-center text-white/60 text-sm">加载中...</div>
<div className="py-4 text-center text-white/60 text-sm">
加载中...
</div>
)}
{!hasMore && comments.length > 0 && (
<div className="py-4 text-center text-white/40 text-sm">没有更多评论了</div>
<div className="py-4 text-center text-white/40 text-sm">
没有更多评论了
</div>
)}
</div>
</aside>

5
app/aweme/[awemeId]/components/CommentText.tsx
View File

@ -20,7 +20,10 @@ export function CommentText({ text }: { text: string }) {
// 如果图片加载失败，显示原始文本
e.currentTarget.style.display = "none";
const textNode = document.createTextNode(`[${part.name}]`);
e.currentTarget.parentNode?.insertBefore(textNode, e.currentTarget);
e.currentTarget.parentNode?.insertBefore(
textNode,
e.currentTarget,
);
}}
/>
);

230
app/aweme/[awemeId]/components/ImageCarousel.tsx
View File

@ -1,78 +1,134 @@
import { forwardRef, useEffect, useRef, useState } from "react";
import type { ImageData } from "../types.ts";
import {
forwardRef,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import type { ImageData, LoopMode } from "../types.ts";
interface ImageCarouselProps {
images: ImageData["images"];
currentIndex: number;
isPlaying: boolean;
segmentProgress: number;
mediaSyncToken: number;
loopMode: LoopMode;
onTogglePlay: () => void;
onAnimatedDuration?: (imageId: string, durationMs: number) => void;
}
export const ImageCarousel = forwardRef<HTMLDivElement, ImageCarouselProps>(
({ images, currentIndex, onTogglePlay }, ref) => {
const [offset, setOffset] = useState(0);
const [isTransitioning, setIsTransitioning] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
(
{
images,
currentIndex,
isPlaying,
segmentProgress,
mediaSyncToken,
loopMode,
onTogglePlay,
onAnimatedDuration,
},
ref,
) => {
const videoRefs = useRef<Map<string, HTMLVideoElement>>(new Map());
const playedVideos = useRef<Set<string>>(new Set());
const activeVideoIdRef = useRef<string | null>(null);
const segmentProgressRef = useRef(segmentProgress);
const [useLightweightMode, setUseLightweightMode] = useState(false);
useEffect(() => {
segmentProgressRef.current = segmentProgress;
}, [segmentProgress]);
const syncVideoToSegmentProgress = useCallback(
(videoEl: HTMLVideoElement, progress: number, force = false) => {
const duration = videoEl.duration;
if (!Number.isFinite(duration) || duration <= 0) return;
const clampedProgress = Math.max(0, Math.min(1, progress));
const maxTime = Math.max(0, duration - 0.05);
const targetTime = Math.min(maxTime, duration * clampedProgress);
if (force || Math.abs(videoEl.currentTime - targetTime) > 0.12) {
try {
videoEl.currentTime = targetTime;
} catch {}
}
},
[],
);
useEffect(() => {
const userAgent = navigator.userAgent;
const isIOS =
/iPad|iPhone|iPod/.test(userAgent) ||
(navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
const isSafari =
/Safari/.test(userAgent) && !/CriOS|FxiOS|EdgiOS/.test(userAgent);
setUseLightweightMode(isIOS && isSafari);
}, []);
// 虚拟滚动：只渲染当前图片和前后各一张
const visibleIndices = (() => {
const visibleIndices = useMemo(() => {
if (useLightweightMode) return [currentIndex];
const indices: number[] = [];
if (currentIndex > 0) indices.push(currentIndex - 1);
indices.push(currentIndex);
if (currentIndex < images.length - 1) indices.push(currentIndex + 1);
return indices;
})();
}, [currentIndex, images.length, useLightweightMode]);
// 当 currentIndex 变化时，触发滚动动画
// iOS Safari 对多个同屏 video 很敏感，这里只让当前动图持有 video 元素并跟随全局播放状态。
useEffect(() => {
setIsTransitioning(true);
setOffset(-currentIndex * 100);
const currentImage = images[currentIndex];
if (!currentImage?.animated) {
activeVideoIdRef.current = null;
videoRefs.current.forEach((videoEl) => videoEl.pause());
return;
}
const timer = setTimeout(() => {
setIsTransitioning(false);
}, 300); // 与 CSS transition 时间匹配
const videoEl = videoRefs.current.get(currentImage.id);
return () => clearTimeout(timer);
}, [currentIndex]);
videoRefs.current.forEach((itemVideoEl, imageId) => {
if (imageId !== currentImage.id || !isPlaying) {
itemVideoEl.pause();
}
});
if (videoEl) {
if (activeVideoIdRef.current !== currentImage.id) {
activeVideoIdRef.current = currentImage.id;
syncVideoToSegmentProgress(videoEl, segmentProgressRef.current, true);
}
if (isPlaying) {
videoEl.play().catch(() => {});
} else {
videoEl.pause();
}
}
}, [currentIndex, images, isPlaying, loopMode, syncVideoToSegmentProgress]);
// 管理动图播放：进入视口时播放一次
useEffect(() => {
const currentImage = images[currentIndex];
if (!currentImage?.animated) return;
const videoKey = currentImage.id;
const videoEl = videoRefs.current.get(videoKey);
const videoEl = videoRefs.current.get(currentImage.id);
if (!videoEl) return;
if (videoEl) {
// 检查是否已经播放过
if (!playedVideos.current.has(videoKey)) {
// 重置并播放
videoEl.currentTime = 0;
videoEl.play().catch(() => {});
playedVideos.current.add(videoKey);
} else {
// 已播放过，重置到开头但不自动播放
videoEl.currentTime = 0;
videoEl.play().catch(() => {});
}
}
}, [currentIndex, images]);
// 当切换到其他图片时，清除已播放标记（切回来会重新播放）
useEffect(() => {
const currentImage = images[currentIndex];
if (currentImage?.animated) {
const videoKey = currentImage.id;
// 清除其他视频的播放记录
playedVideos.current.forEach(key => {
if (key !== videoKey) {
playedVideos.current.delete(key);
}
});
}
}, [currentIndex, images]);
syncVideoToSegmentProgress(videoEl, segmentProgressRef.current, true);
if (isPlaying) videoEl.play().catch(() => {});
}, [
currentIndex,
images,
isPlaying,
loopMode,
mediaSyncToken,
syncVideoToSegmentProgress,
]);
const handleVideoRef = (el: HTMLVideoElement | null, imageId: string) => {
if (el) {
@ -83,49 +139,81 @@ export const ImageCarousel = forwardRef<HTMLDivElement, ImageCarouselProps>(
};
return (
<div
ref={ref}
className="relative h-full w-full overflow-hidden"
>
<div
ref={containerRef}
className="flex h-full w-full"
style={{
transform: `translateX(${offset}%)`,
transition: isTransitioning ? 'transform 300ms ease-out' : 'none',
}}
>
<div ref={ref} className="relative h-full w-full overflow-hidden">
<div className="relative h-full w-full">
{visibleIndices.map((i) => {
const img = images[i];
const isCurrent = i === currentIndex;
const animatedSrc = isCurrent ? img.animated : null;
return (
<div
key={img.id}
className="relative h-full min-w-full flex items-center justify-center bg-black/70 cursor-pointer"
data-active={isCurrent ? "true" : undefined}
className="absolute inset-0 h-full w-full flex items-center justify-center bg-black/70 cursor-pointer"
style={{
transform: `translateX(${i * 100}%)`,
position: 'absolute',
left: 0,
top: 0,
width: '100%',
transform: useLightweightMode
? "translateX(0)"
: `translateX(${(i - currentIndex) * 100}%)`,
transition: useLightweightMode
? "none"
: "transform 240ms ease-out",
zIndex: isCurrent ? 1 : 0,
}}
onClick={onTogglePlay}
>
{img.animated ? (
{animatedSrc ? (
<video
ref={(el) => handleVideoRef(el, img.id)}
src={img.animated}
src={animatedSrc}
poster={img.url}
muted
playsInline
loop={loopMode === "single"}
preload={useLightweightMode ? "none" : "metadata"}
controls={false}
disablePictureInPicture
className="max-w-full max-h-full object-contain"
style={{
width: img.width ? `${img.width}px` : undefined,
height: img.height ? `${img.height}px` : undefined,
}}
onLoadedMetadata={(e) => {
const duration = e.currentTarget.duration;
if (Number.isFinite(duration) && duration > 0) {
onAnimatedDuration?.(
img.id,
Math.round(duration * 1000),
);
if (isCurrent) {
syncVideoToSegmentProgress(
e.currentTarget,
segmentProgressRef.current,
true,
);
}
}
}}
onCanPlay={(e) => {
if (isCurrent) {
syncVideoToSegmentProgress(
e.currentTarget,
segmentProgressRef.current,
);
}
if (isCurrent && isPlaying)
e.currentTarget.play().catch(() => {});
}}
onEnded={(e) => {
// 播放结束后停留在最后一帧
e.currentTarget.pause();
if (loopMode !== "single") e.currentTarget.pause();
}}
/>
) : (
<img
src={img.url}
alt={`image-${i + 1}`}
loading={isCurrent ? "eager" : "lazy"}
decoding="async"
className="max-w-full max-h-full object-contain"
style={{
width: img.width ? `${img.width}px` : undefined,
@ -139,7 +227,7 @@ export const ImageCarousel = forwardRef<HTMLDivElement, ImageCarouselProps>(
</div>
</div>
);
}
},
);
ImageCarousel.displayName = "ImageCarousel";

122
app/aweme/[awemeId]/components/MediaControls.tsx
View File

@ -8,6 +8,7 @@ import {
Minimize2,
Pause,
Play,
Repeat,
Repeat1,
RotateCcw,
RotateCw,
@ -89,8 +90,39 @@ export function MediaControls({
onDownload,
onToggleFullscreen,
}: MediaControlsProps) {
const normalizedLoopMode =
isVideo && loopMode === "single" ? "loop" : loopMode;
const loopLabel = isVideo
? normalizedLoopMode === "loop"
? "循环播放"
: "顺序播放"
: loopMode === "single"
? "单页循环"
: loopMode === "loop"
? "图文循环"
: "顺序播放";
const handleLoopModeToggle = () => {
if (isVideo) {
onLoopModeChange(normalizedLoopMode === "loop" ? "sequential" : "loop");
return;
}
onLoopModeChange(
loopMode === "loop"
? "single"
: loopMode === "single"
? "sequential"
: "loop",
);
};
const renderLoopIcon = () => {
if (!isVideo && loopMode === "single") return <Repeat1 size={18} />;
if (normalizedLoopMode === "loop") return <Repeat size={18} />;
return <ArrowDownUp size={18} />;
};
return (
<div className="absolute left-0 right-0 bottom-0 px-3 pb-4 pt-2 bg-gradient-to-b from-black/0 via-black/45 to-black/65 flex flex-col gap-2.5">
<div className="absolute left-0 right-0 bottom-0 z-40 px-3 pb-4 pt-2 bg-gradient-to-b from-black/0 via-black/45 to-black/65 flex flex-col gap-2.5">
{/* 描述行 */}
<div className="flex items-center gap-2.5 mb-1 pointer-events-none">
{author.sec_uid ? (
@ -98,16 +130,30 @@ export function MediaControls({
href={`/author/${author.sec_uid}`}
className="flex items-center gap-2.5 pointer-events-auto hover:opacity-80 transition-opacity"
>
<img src={author.avatar_url!} alt="" className="w-8 h-8 rounded-full" />
<span className="text-[15px] leading-tight text-white/95 drop-shadow font-medium">{author.nickname}</span>
<img
src={author.avatar_url!}
alt=""
className="w-8 h-8 rounded-full"
/>
<span className="text-[15px] leading-tight text-white/95 drop-shadow font-medium">
{author.nickname}
</span>
</Link>
) : (
<div className="flex items-center gap-2.5">
<img src={author.avatar_url!} alt="" className="w-8 h-8 rounded-full" />
<span className="text-[15px] leading-tight text-white/95 drop-shadow">{author.nickname}</span>
<img
src={author.avatar_url!}
alt=""
className="w-8 h-8 rounded-full"
/>
<span className="text-[15px] leading-tight text-white/95 drop-shadow">
{author.nickname}
</span>
</div>
)}
<span className="text-[13px] leading-tight text-white/95 drop-shadow">·</span>
<span className="text-[13px] leading-tight text-white/95 drop-shadow">
·
</span>
<span
className="text-[11px] leading-tight text-white/95 drop-shadow"
title={formatAbsoluteUTC(createdAt)}
@ -150,16 +196,16 @@ export function MediaControls({
{/* 播放进度显示 - 所有设备都显示 */}
<div className="text-[13px] text-white/90 font-mono min-w-[70px] sm:min-w-[80px]">
{isVideo ? (
(() => {
{isVideo
? (() => {
const v = videoRef?.current;
const current = v?.currentTime ?? 0;
const total = v?.duration ?? 0;
return total > 0 ? `${formatTime(current)} / ${formatTime(total)}` : "--:-- / --:--";
return total > 0
? `${formatTime(current)} / ${formatTime(total)}`
: "--:-- / --:--";
})()
) : (
`${currentIndex + 1} / ${totalSegments}`
)}
: `${currentIndex + 1} / ${totalSegments}`}
</div>
{/* 倍速 - 中等屏幕以上显示，仅视频 */}
@ -231,21 +277,31 @@ export function MediaControls({
{/* 循环模式 - 中等屏幕以上显示 */}
<button
className="hidden md:inline-flex w-[34px] h-[34px] items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
onClick={() => onLoopModeChange(loopMode === "loop" ? "sequential" : "loop")}
aria-label={loopMode === "loop" ? "循环播放" : "顺序播放"}
title={loopMode === "loop" ? "循环播放" : "顺序播放"}
onClick={handleLoopModeToggle}
aria-label={loopLabel}
title={loopLabel}
>
{loopMode === "loop" ? <Repeat1 size={18} /> : <ArrowDownUp size={18} />}
{renderLoopIcon()}
</button>
{/* 适配模式 - 小屏幕以上显示 */}
<button
className="hidden sm:inline-flex w-[34px] h-[34px] items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
onClick={() => onObjectFitChange(objectFit === "contain" ? "cover" : "contain")}
aria-label={objectFit === "contain" ? "切换到填充模式" : "切换到适应模式"}
title={objectFit === "contain" ? "切换到填充模式" : "切换到适应模式"}
onClick={() =>
onObjectFitChange(objectFit === "contain" ? "cover" : "contain")
}
aria-label={
objectFit === "contain" ? "切换到填充模式" : "切换到适应模式"
}
title={
objectFit === "contain" ? "切换到填充模式" : "切换到适应模式"
}
>
{objectFit === "contain" ? <Maximize2 size={18} /> : <Minimize size={18} />}
{objectFit === "contain" ? (
<Maximize2 size={18} />
) : (
<Minimize size={18} />
)}
</button>
{/* 转录文本 - 仅视频且有转录时显示，中等屏幕以上 */}
@ -277,18 +333,28 @@ export function MediaControls({
{/* 小屏幕隐藏的适配模式 */}
<div className="sm:hidden">
<MoreMenuItem
icon={objectFit === "contain" ? <Maximize2 size={18} /> : <Minimize size={18} />}
icon={
objectFit === "contain" ? (
<Maximize2 size={18} />
) : (
<Minimize size={18} />
)
}
label={objectFit === "contain" ? "填充模式" : "适应模式"}
onClick={() => onObjectFitChange(objectFit === "contain" ? "cover" : "contain")}
onClick={() =>
onObjectFitChange(
objectFit === "contain" ? "cover" : "contain",
)
}
/>
</div>
{/* 中等屏幕以下隐藏的循环模式 */}
<div className="md:hidden">
<MoreMenuItem
icon={loopMode === "loop" ? <Repeat1 size={18} /> : <ArrowDownUp size={18} />}
label={loopMode === "loop" ? "循环播放" : "顺序播放"}
onClick={() => onLoopModeChange(loopMode === "loop" ? "sequential" : "loop")}
icon={renderLoopIcon()}
label={loopLabel}
onClick={handleLoopModeToggle}
/>
</div>
@ -338,13 +404,13 @@ export function MediaControls({
>
{isFullscreen ? <Minimize2 size={18} /> : <Maximize size={18} />}
</button>
</div>
</div>
{/* 图文 BGM（隐藏控件，仅用于播放） */}
{!isVideo && musicUrl ? <audio ref={audioRef} src={musicUrl} loop preload="metadata" /> : null}
{!isVideo && musicUrl ? (
<audio ref={audioRef} src={musicUrl} loop preload="metadata" />
) : null}
</div>
);
}

4
app/aweme/[awemeId]/components/MoreMenu.tsx
View File

@ -51,9 +51,7 @@ export function MoreMenu({ children }: MoreMenuProps) {
className="absolute bottom-full right-0 mb-2 bg-zinc-900/95 backdrop-blur-xl border border-white/20 rounded-xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-200"
style={{ minWidth: "200px" }}
>
<div className="p-2 flex flex-col gap-1">
{children}
</div>
<div className="p-2 flex flex-col gap-1">{children}</div>
</div>
)}
</div>

30
app/aweme/[awemeId]/components/NavigationButtons.tsx
View File

@ -1,4 +1,9 @@
import { ChevronDown, ChevronUp, MessageSquareText, ThumbsUp } from "lucide-react";
import {
ChevronDown,
ChevronUp,
MessageSquareText,
ThumbsUp,
} from "lucide-react";
import type { Neighbors } from "../types.ts";
interface NavigationButtonsProps {
@ -21,14 +26,13 @@ export function NavigationButtons({
return (
<>
<div className="absolute right-4 top-8/14 flex flex-col items-center gap-8 z-10">
<button
className="grid place-items-center w-[54px] h-[54px] rounded-full -translate-y-1/2"
>
<button className="grid place-items-center w-[54px] h-[54px] rounded-full -translate-y-1/2">
<div className="grid place-items-center gap-1 drop-shadow-lg">
<ThumbsUp size={40} className="" />
<span className="text-[16px] font-semibold text-white/90 drop-shadow">{likesCount}</span>
<span className="text-[16px] font-semibold text-white/90 drop-shadow">
{likesCount}
</span>
</div>
</button>
{/* 评论开关（右侧中部） */}
@ -40,13 +44,17 @@ export function NavigationButtons({
<div className="grid place-items-center gap-1 drop-shadow-lg">
<MessageSquareText size={40} className="" />
{commentsCount > 0 ? <span className="text-[16px] font-semibold text-white/90 drop-shadow">{commentsCount}</span> :
<span className="text-[12px] font-semibold text-white/90 drop-shadow">暂无评论</span>
}
{commentsCount > 0 ? (
<span className="text-[16px] font-semibold text-white/90 drop-shadow">
{commentsCount}
</span>
) : (
<span className="text-[12px] font-semibold text-white/90 drop-shadow">
暂无评论
</span>
)}
</div>
</button>
</div>
{/* 上下切换按钮（右侧胶囊形状） */}

34
app/aweme/[awemeId]/components/ProgressBar.tsx
View File

@ -4,15 +4,41 @@ interface ProgressBarProps {
}
export function ProgressBar({ progress, onSeek }: ProgressBarProps) {
const seekFromClientX = (clientX: number, element: HTMLElement) => {
const rect = element.getBoundingClientRect();
onSeek((clientX - rect.left) / rect.width);
};
return (
<div
className="relative h-1.5 rounded-full bg-white/25 overflow-hidden cursor-pointer"
className="relative h-1.5 rounded-full bg-white/25 overflow-hidden cursor-pointer touch-none"
onClick={(e) => {
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
onSeek((e.clientX - rect.left) / rect.width);
seekFromClientX(e.clientX, e.currentTarget as HTMLElement);
}}
onPointerDown={(e) => {
if (e.pointerType === "mouse" && e.button !== 0) return;
e.currentTarget.setPointerCapture(e.pointerId);
seekFromClientX(e.clientX, e.currentTarget);
}}
onPointerMove={(e) => {
if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
seekFromClientX(e.clientX, e.currentTarget);
}}
onPointerUp={(e) => {
if (e.currentTarget.hasPointerCapture(e.pointerId)) {
e.currentTarget.releasePointerCapture(e.pointerId);
}
}}
onPointerCancel={(e) => {
if (e.currentTarget.hasPointerCapture(e.pointerId)) {
e.currentTarget.releasePointerCapture(e.pointerId);
}
}}
>
<div className="origin-left h-full bg-white" style={{ transform: `scaleX(${progress || 0})` }} />
<div
className="origin-left h-full bg-white"
style={{ transform: `scaleX(${progress || 0})` }}
/>
</div>
);
}

36
app/aweme/[awemeId]/components/SegmentedProgressBar.tsx
View File

@ -11,12 +11,35 @@ export function SegmentedProgressBar({
segmentProgress,
onSeek,
}: SegmentedProgressBarProps) {
const seekFromClientX = (clientX: number, element: HTMLElement) => {
const rect = element.getBoundingClientRect();
onSeek((clientX - rect.left) / rect.width);
};
return (
<div
className="relative h-1.5 cursor-pointer"
className="relative h-1.5 cursor-pointer touch-none"
onClick={(e) => {
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
onSeek((e.clientX - rect.left) / rect.width);
seekFromClientX(e.clientX, e.currentTarget as HTMLElement);
}}
onPointerDown={(e) => {
if (e.pointerType === "mouse" && e.button !== 0) return;
e.currentTarget.setPointerCapture(e.pointerId);
seekFromClientX(e.clientX, e.currentTarget);
}}
onPointerMove={(e) => {
if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
seekFromClientX(e.clientX, e.currentTarget);
}}
onPointerUp={(e) => {
if (e.currentTarget.hasPointerCapture(e.pointerId)) {
e.currentTarget.releasePointerCapture(e.pointerId);
}
}}
onPointerCancel={(e) => {
if (e.currentTarget.hasPointerCapture(e.pointerId)) {
e.currentTarget.releasePointerCapture(e.pointerId);
}
}}
>
<div className="flex gap-1.5 h-full">
@ -30,7 +53,12 @@ export function SegmentedProgressBar({
aria-label={`第 ${i + 1} 段`}
className="relative flex-1 h-full rounded-full bg-white/25 overflow-hidden"
>
<div className="h-full origin-left bg-white" style={{ transform: `scaleX(${fill})` }} />
<div
className="h-full origin-left bg-white"
style={{
transform: `scaleX(${Math.max(0, Math.min(1, fill))})`,
}}
/>
</div>
);
})}

6
app/aweme/[awemeId]/components/TranscriptPanel.tsx
View File

@ -10,7 +10,11 @@ interface TranscriptPanelProps {
transcript: VideoTranscript | null;
}
export function TranscriptPanel({ open, onClose, transcript }: TranscriptPanelProps) {
export function TranscriptPanel({
open,
onClose,
transcript,
}: TranscriptPanelProps) {
const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
const [copiedAll, setCopiedAll] = useState(false);

2
app/aweme/[awemeId]/components/VideoPlayer.tsx
View File

@ -35,7 +35,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
onClick={onTogglePlay}
/>
);
}
},
);
VideoPlayer.displayName = "VideoPlayer";

217
app/aweme/[awemeId]/emojis.ts
View File

@ -1,3 +1,216 @@
export const emojiList = [
"微笑", "色", "发呆", "酷拽", "抠鼻", "流泪", "捂脸", "发怒", "呲牙", "尬笑", "害羞", "调皮", "舔屏", "看", "爱心", "比心", "赞", "鼓掌", "感谢", "抱抱你", "玫瑰", "尴尬流汗", "戳手手", "星星眼", "杀马特", "黄脸干杯", "抱紧自己", "拜拜", "热化了", "黄脸祈祷", "懵", "举手", "加功德", "摊手", "无语流汗", "续火花吧", "点火", "哭哭", "吐舌小狗", "送花", "爱心手", "贴贴", "灵机一动", "耶", "打脸", "大笑", "机智", "送心", "666", "闭嘴", "来看我", "一起加油", "哈欠", "震惊", "晕", "衰", "困", "疑问", "泣不成声", "小鼓掌", "大金牙", "偷笑", "石化", "思考", "吐血", "可怜", "嘘", "撇嘴", "笑哭", "奸笑", "得意", "憨笑", "坏笑", "抓狂", "泪奔", "钱", "恐惧", "愉快", "快哭了", "翻白眼", "互粉", "我想静静", "委屈", "鄙视", "飞吻", "再见", "紫薇别走", "听歌", "求抱抱", "绝望的凝视", "不失礼貌的微笑", "不看", "裂开", "干饭人", "庆祝", "吐舌", "呆无辜", "白眼", "猪头", "冷漠", "暗中观察", "二哈", "菜狗", "黑脸", "展开说说", "蜜蜂狗", "柴犬", "摸头", "皱眉", "擦汗", "红脸", "做鬼脸", "强", "如花", "吐", "惊喜", "敲打", "奋斗", "吐彩虹", "大哭", "嘿哈", "惊恐", "囧", "难过", "斜眼", "阴险", "悠闲", "咒骂", "吃瓜群众", "绿帽子", "敢怒不敢言", "求求了", "眼含热泪", "叹气", "好开心", "不是吧", "鞠躬", "躺平", "九转大肠", "不你不想", "一头乱麻", "kisskiss", "你不大行", "噢买尬", "宕机", "苦涩", "逞强落泪", "求机位-黄脸", "求机位3", "点赞", "精选", "强壮", "碰拳", "OK", "击掌", "左上", "握手", "抱拳", "勾引", "拳头", "弱", "胜利", "右边", "左边", "嘴唇", "心碎", "凋谢", "愤怒", "垃圾", "啤酒", "咖啡", "蛋糕", "礼物", "撒花", "加一", "减一", "okk", "V5", "绝", "给力", "红包", "屎", "发", "18禁", "炸弹", "西瓜", "加鸡腿", "握爪", "太阳", "月亮", "给跪了", "蕉绿", "扎心", "胡瓜", "打call", "栓Q", "雪花", "圣诞树", "平安果", "圣诞帽", "气球", "烟花", "福", "candy", "糖葫芦", "鞭炮", "元宝", "灯笼", "锦鲤", "巧克力", "戒指", "棒棒糖", "纸飞机", "粽子"
]
"微笑",
"色",
"发呆",
"酷拽",
"抠鼻",
"流泪",
"捂脸",
"发怒",
"呲牙",
"尬笑",
"害羞",
"调皮",
"舔屏",
"看",
"爱心",
"比心",
"赞",
"鼓掌",
"感谢",
"抱抱你",
"玫瑰",
"尴尬流汗",
"戳手手",
"星星眼",
"杀马特",
"黄脸干杯",
"抱紧自己",
"拜拜",
"热化了",
"黄脸祈祷",
"懵",
"举手",
"加功德",
"摊手",
"无语流汗",
"续火花吧",
"点火",
"哭哭",
"吐舌小狗",
"送花",
"爱心手",
"贴贴",
"灵机一动",
"耶",
"打脸",
"大笑",
"机智",
"送心",
"666",
"闭嘴",
"来看我",
"一起加油",
"哈欠",
"震惊",
"晕",
"衰",
"困",
"疑问",
"泣不成声",
"小鼓掌",
"大金牙",
"偷笑",
"石化",
"思考",
"吐血",
"可怜",
"嘘",
"撇嘴",
"笑哭",
"奸笑",
"得意",
"憨笑",
"坏笑",
"抓狂",
"泪奔",
"钱",
"恐惧",
"愉快",
"快哭了",
"翻白眼",
"互粉",
"我想静静",
"委屈",
"鄙视",
"飞吻",
"再见",
"紫薇别走",
"听歌",
"求抱抱",
"绝望的凝视",
"不失礼貌的微笑",
"不看",
"裂开",
"干饭人",
"庆祝",
"吐舌",
"呆无辜",
"白眼",
"猪头",
"冷漠",
"暗中观察",
"二哈",
"菜狗",
"黑脸",
"展开说说",
"蜜蜂狗",
"柴犬",
"摸头",
"皱眉",
"擦汗",
"红脸",
"做鬼脸",
"强",
"如花",
"吐",
"惊喜",
"敲打",
"奋斗",
"吐彩虹",
"大哭",
"嘿哈",
"惊恐",
"囧",
"难过",
"斜眼",
"阴险",
"悠闲",
"咒骂",
"吃瓜群众",
"绿帽子",
"敢怒不敢言",
"求求了",
"眼含热泪",
"叹气",
"好开心",
"不是吧",
"鞠躬",
"躺平",
"九转大肠",
"不你不想",
"一头乱麻",
"kisskiss",
"你不大行",
"噢买尬",
"宕机",
"苦涩",
"逞强落泪",
"求机位-黄脸",
"求机位3",
"点赞",
"精选",
"强壮",
"碰拳",
"OK",
"击掌",
"左上",
"握手",
"抱拳",
"勾引",
"拳头",
"弱",
"胜利",
"右边",
"左边",
"嘴唇",
"心碎",
"凋谢",
"愤怒",
"垃圾",
"啤酒",
"咖啡",
"蛋糕",
"礼物",
"撒花",
"加一",
"减一",
"okk",
"V5",
"绝",
"给力",
"红包",
"屎",
"发",
"18禁",
"炸弹",
"西瓜",
"加鸡腿",
"握爪",
"太阳",
"月亮",
"给跪了",
"蕉绿",
"扎心",
"胡瓜",
"打call",
"栓Q",
"雪花",
"圣诞树",
"平安果",
"圣诞帽",
"气球",
"烟花",
"福",
"candy",
"糖葫芦",
"鞭炮",
"元宝",
"灯笼",
"锦鲤",
"巧克力",
"戒指",
"棒棒糖",
"纸飞机",
"粽子",
];

44
app/aweme/[awemeId]/hooks/useBackgroundCanvas.ts
View File

@ -23,6 +23,13 @@ export function useBackgroundCanvas({
const ctx = canvas.getContext("2d");
if (!ctx) return;
if (!isVideo) {
canvas.width = 1;
canvas.height = 1;
ctx.clearRect(0, 0, 1, 1);
return;
}
const updateCanvasSize = () => {
canvas.width = Math.floor(window.innerWidth / 10);
canvas.height = Math.floor(window.innerHeight / 10);
@ -39,40 +46,29 @@ export function useBackgroundCanvas({
const drawMediaToCanvas = () => {
if (!ctx) return;
let sourceElement: HTMLVideoElement | HTMLImageElement | null = null;
const sourceElement = videoRef.current;
if (isVideo) {
sourceElement = videoRef.current;
} else {
const scroller = scrollerRef.current;
if (scroller) {
// 虚拟滚动：查找所有图片容器，找到当前显示的那个
const containers = scroller.querySelectorAll<HTMLElement>('div[style*="translateX"]');
for (const container of containers) {
const img = container.querySelector("img, video");
if (img && container.style.transform.includes(`${idx * 100}%`)) {
sourceElement = img as HTMLImageElement | HTMLVideoElement;
break;
}
}
}
}
if (!sourceElement || (sourceElement instanceof HTMLVideoElement && sourceElement.readyState < 2)) return;
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;
const sourceWidth = sourceElement.videoWidth;
const sourceHeight = sourceElement.videoHeight;
if (!sourceWidth || !sourceHeight) return;
const canvasRatio = canvasWidth / canvasHeight;
const sourceRatio = sourceWidth / sourceHeight;
let drawWidth: number, drawHeight: number, offsetX: number, offsetY: number;
let drawWidth: number,
drawHeight: number,
offsetX: number,
offsetY: number;
if (canvasRatio > sourceRatio) {
drawWidth = canvasWidth;

288
app/aweme/[awemeId]/hooks/useImageCarousel.ts
View File

@ -1,8 +1,32 @@
import { useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { RefObject } from "react";
import { useRouter } from "next/navigation";
import type { ImageData, LoopMode, Neighbors } from "../types.ts";
const MIN_SEGMENT_MS = 250;
const UI_UPDATE_INTERVAL_MS = 33;
const PROGRESS_EPSILON = 0.0001;
function normalizeDuration(
duration: number | null | undefined,
fallback: number,
) {
if (
typeof duration !== "number" ||
!Number.isFinite(duration) ||
duration <= 0
) {
return fallback;
}
return Math.max(MIN_SEGMENT_MS, Math.round(duration));
}
function sumDurations(durations: number[], end: number) {
let total = 0;
for (let i = 0; i < end; i++) total += durations[i] ?? 0;
return total;
}
interface UseImageCarouselProps {
images: ImageData["images"];
isPlaying: boolean;
@ -10,7 +34,6 @@ interface UseImageCarouselProps {
neighbors: Neighbors;
volume: number;
audioRef: RefObject<HTMLAudioElement | null>;
scrollerRef: RefObject<HTMLDivElement | null>;
setProgress: (progress: number) => void;
/** 单张图片显示时长（毫秒），默认 5000ms */
segmentMs?: number;
@ -23,22 +46,186 @@ export function useImageCarousel({
neighbors,
volume,
audioRef,
scrollerRef,
setProgress,
segmentMs = 5000,
}: UseImageCarouselProps) {
const router = useRouter();
const [idx, setIdx] = useState(0);
const [segProgress, setSegProgress] = useState(0);
const [durationOverrides, setDurationOverrides] = useState<
Record<string, number>
>({});
const [mediaSyncToken, setMediaSyncToken] = useState(0);
const segStartRef = useRef<number | null>(null);
const idxRef = useRef<number>(0);
const rafRef = useRef<number | null>(null);
const timerRef = useRef<number | null>(null);
const lastUiUpdateRef = useRef(0);
const segProgressRef = useRef(0);
const totalProgressRef = useRef(0);
const fallbackDuration = normalizeDuration(segmentMs, 5000);
const segmentDurations = useMemo(
() =>
images.map((img) =>
normalizeDuration(
durationOverrides[img.id] ?? img.duration,
fallbackDuration,
),
),
[durationOverrides, fallbackDuration, images],
);
const imageKey = useMemo(
() => images.map((img) => img.id).join("|"),
[images],
);
const totalDurationMs = useMemo(
() => segmentDurations.reduce((sum, duration) => sum + duration, 0),
[segmentDurations],
);
const syncProgress = useCallback(
(index: number, segmentProgress: number, force = false) => {
const segmentDuration = segmentDurations[index] ?? fallbackDuration;
const completedMs = sumDurations(segmentDurations, index);
const totalProgress =
totalDurationMs > 0
? (completedMs + segmentDuration * segmentProgress) / totalDurationMs
: 0;
const nextSegProgress = Math.max(0, Math.min(1, segmentProgress));
const nextTotalProgress = Math.max(0, Math.min(1, totalProgress));
if (
force ||
Math.abs(nextSegProgress - segProgressRef.current) > PROGRESS_EPSILON
) {
segProgressRef.current = nextSegProgress;
setSegProgress(nextSegProgress);
}
if (
force ||
Math.abs(nextTotalProgress - totalProgressRef.current) >
PROGRESS_EPSILON
) {
totalProgressRef.current = nextTotalProgress;
setProgress(nextTotalProgress);
}
},
[fallbackDuration, segmentDurations, setProgress, totalDurationMs],
);
const setSegmentDuration = useCallback(
(imageId: string, durationMs: number) => {
if (!Number.isFinite(durationMs) || durationMs <= 0) return;
const normalizedDuration = normalizeDuration(
durationMs,
fallbackDuration,
);
setDurationOverrides((current) => {
if (current[imageId] === normalizedDuration) return current;
return { ...current, [imageId]: normalizedDuration };
});
},
[fallbackDuration],
);
const goToIndex = useCallback(
(index: number, segmentProgress = 0) => {
if (!images.length) return;
const nextIndex = Math.max(0, Math.min(images.length - 1, index));
const nextSegmentProgress = Math.max(0, Math.min(1, segmentProgress));
const now = performance.now();
const segmentDuration = segmentDurations[nextIndex] ?? fallbackDuration;
idxRef.current = nextIndex;
setIdx(nextIndex);
segStartRef.current = now - nextSegmentProgress * segmentDuration;
lastUiUpdateRef.current = now;
syncProgress(nextIndex, nextSegmentProgress, true);
setMediaSyncToken((token) => token + 1);
},
[fallbackDuration, images.length, segmentDurations, syncProgress],
);
const seekTo = useCallback(
(ratio: number) => {
if (!images.length || totalDurationMs <= 0) return;
const clampedRatio = Math.max(0, Math.min(1, ratio));
const targetMs = Math.min(
totalDurationMs - 1,
clampedRatio * totalDurationMs,
);
let accumulatedMs = 0;
let targetIndex = 0;
let segmentElapsedMs = 0;
for (let i = 0; i < segmentDurations.length; i++) {
const duration = segmentDurations[i] ?? fallbackDuration;
if (
targetMs < accumulatedMs + duration ||
i === segmentDurations.length - 1
) {
targetIndex = i;
segmentElapsedMs = Math.max(
0,
Math.min(duration, targetMs - accumulatedMs),
);
break;
}
accumulatedMs += duration;
}
const targetDuration = segmentDurations[targetIndex] ?? fallbackDuration;
const nextSegmentProgress =
targetDuration > 0 ? segmentElapsedMs / targetDuration : 0;
goToIndex(targetIndex, nextSegmentProgress);
},
[
fallbackDuration,
goToIndex,
images.length,
segmentDurations,
totalDurationMs,
],
);
useEffect(() => {
idxRef.current = idx;
}, [idx]);
useEffect(() => {
const validIds = new Set(images.map((img) => img.id));
setDurationOverrides((current) => {
let changed = false;
const next: Record<string, number> = {};
for (const [id, duration] of Object.entries(current)) {
if (validIds.has(id)) {
next[id] = duration;
} else {
changed = true;
}
}
return changed ? next : current;
});
}, [images]);
useEffect(() => {
idxRef.current = 0;
setIdx(0);
segStartRef.current = null;
segProgressRef.current = 0;
totalProgressRef.current = 0;
setSegProgress(0);
setProgress(0);
setMediaSyncToken((token) => token + 1);
}, [imageKey, setProgress]);
// BGM 控制
useEffect(() => {
const el = audioRef.current;
@ -51,33 +238,42 @@ export function useImageCarousel({
}
}, [audioRef, isPlaying, volume]);
useEffect(() => {
return () => {
audioRef.current?.pause();
};
}, [audioRef]);
// 自动切页
useEffect(() => {
if (!images?.length || !segmentDurations.length || totalDurationMs <= 0)
return;
const now = performance.now();
const currentSegmentDuration =
segmentDurations[idxRef.current] ?? fallbackDuration;
segStartRef.current = now - segProgressRef.current * currentSegmentDuration;
if (!isPlaying) return;
const tick = () => {
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;
const ts = performance.now();
let start = segStartRef.current!;
let localIdx = idxRef.current;
let elapsed = ts - start;
// 获取当前图片的显示时长（动图使用其 duration，静态图片使用 segmentMs）
const getCurrentSegmentDuration = (index: number) => {
const img = images[index];
return img?.duration ?? segmentMs;
};
let currentSegmentDuration = getCurrentSegmentDuration(localIdx);
let currentSegmentDuration =
segmentDurations[localIdx] ?? fallbackDuration;
while (elapsed >= currentSegmentDuration) {
if (loopMode === "single") {
elapsed %= currentSegmentDuration;
break;
}
elapsed -= currentSegmentDuration;
if (localIdx >= images.length - 1) {
@ -90,43 +286,59 @@ export function useImageCarousel({
localIdx = localIdx + 1;
}
// 更新下一张图片的时长
currentSegmentDuration = getCurrentSegmentDuration(localIdx);
currentSegmentDuration = segmentDurations[localIdx] ?? fallbackDuration;
}
segStartRef.current = ts - elapsed;
if (localIdx !== idxRef.current) {
const indexChanged = localIdx !== idxRef.current;
if (indexChanged) {
idxRef.current = localIdx;
setIdx(localIdx);
// 虚拟滚动不需要实际滚动 DOM
}
const localSeg = Math.max(0, Math.min(1, elapsed / currentSegmentDuration));
setSegProgress(localSeg);
const localSeg = Math.max(
0,
Math.min(1, elapsed / currentSegmentDuration),
);
// 计算总进度：已完成的图片 + 当前图片的进度
let totalProgress = 0;
for (let i = 0; i < localIdx; i++) {
totalProgress += 1;
if (
indexChanged ||
ts - lastUiUpdateRef.current >= UI_UPDATE_INTERVAL_MS
) {
lastUiUpdateRef.current = ts;
syncProgress(localIdx, localSeg, indexChanged);
}
totalProgress += localSeg;
setProgress(totalProgress / images.length);
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
tick();
timerRef.current = window.setInterval(tick, UI_UPDATE_INTERVAL_MS);
return () => {
if (rafRef.current) cancelAnimationFrame(rafRef.current);
rafRef.current = null;
if (timerRef.current) window.clearInterval(timerRef.current);
timerRef.current = null;
};
}, [images, isPlaying, loopMode, neighbors?.next, router, scrollerRef, setProgress, segmentMs]);
}, [
fallbackDuration,
images,
isPlaying,
loopMode,
neighbors?.next,
router,
segmentDurations,
syncProgress,
totalDurationMs,
]);
return {
idx,
setIdx,
segProgress,
segmentDurations,
totalDurationMs,
mediaSyncToken,
segStartRef,
idxRef,
setSegmentDuration,
goToIndex,
seekTo,
};
}

6
app/aweme/[awemeId]/hooks/useNavigation.ts
View File

@ -65,7 +65,11 @@ export function useNavigation({
useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
const target = e.target as HTMLElement;
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
if (
target.tagName === "INPUT" ||
target.tagName === "TEXTAREA" ||
target.isContentEditable
) {
return;
}

17
app/aweme/[awemeId]/hooks/usePlayerState.ts
View File

@ -1,19 +1,28 @@
import { useEffect, useState } from "react";
import type { LoopMode, ObjectFit } from "../types.ts";
import { getNumberFromStorage, getStringFromStorage, saveToStorage } from "../utils";
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 [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<ObjectFit>("contain");
const [loopMode, setLoopMode] = useState<LoopMode>(() => {
const saved = getStringFromStorage("aweme_player_loop_mode", "loop");
return saved === "sequential" ? "sequential" : "loop";
if (saved === "single" || saved === "sequential") return saved;
return "loop";
});
// 持久化音量

6
app/aweme/[awemeId]/hooks/useVideoPlayer.ts
View File

@ -51,7 +51,11 @@ export function useVideoPlayer({
const now = Date.now();
const fiveMinutes = 5 * 60 * 1000;
if (now - timestamp < fiveMinutes && time > 1 && time < v.duration - 1) {
if (
now - timestamp < fiveMinutes &&
time > 1 &&
time < v.duration - 1
) {
v.currentTime = time;
console.log(`恢复播放进度: ${Math.round(time)}s`);
} else if (now - timestamp >= fiveMinutes) {

119
app/aweme/[awemeId]/page.tsx
View File

@ -5,7 +5,11 @@ import type { Metadata } from "next";
import { getFileUrl } from "@/lib/minio";
import { AwemeData, VideoTranscript } from "./types";
export async function generateMetadata({ params }: { params: Promise<{ awemeId: string }> }): Promise<Metadata> {
export async function generateMetadata({
params,
}: {
params: Promise<{ awemeId: string }>;
}): Promise<Metadata> {
const id = (await params).awemeId;
const [video, post] = await Promise.all([
@ -16,7 +20,7 @@ export async function generateMetadata({ params }: { params: Promise<{ awemeId:
prisma.imagePost.findUnique({
where: { aweme_id: id },
select: { desc: true, author: { select: { nickname: true } } },
})
}),
]);
const data = video || post;
@ -28,7 +32,10 @@ export async function generateMetadata({ params }: { params: Promise<{ awemeId:
const desc = data.desc || "查看作品详情";
const author = data.author.nickname;
const title = desc.length > 50 ? `${desc.slice(0, 50)}... - ${author}` : `${desc} - ${author}`;
const title =
desc.length > 50
? `${desc.slice(0, 50)}... - ${author}`
: `${desc} - ${author}`;
return {
title,
@ -36,7 +43,11 @@ export async function generateMetadata({ params }: { params: Promise<{ awemeId:
};
}
export default async function AwemeDetail({ params }: { params: Promise<{ awemeId: string }> }) {
export default async function AwemeDetail({
params,
}: {
params: Promise<{ awemeId: string }>;
}) {
const id = (await params).awemeId;
const [video, post] = await Promise.all([
@ -47,7 +58,7 @@ export default async function AwemeDetail({ params }: { params: Promise<{ awemeI
prisma.imagePost.findUnique({
where: { aweme_id: id },
include: { author: true, images: { orderBy: { order: "asc" } } },
})
}),
]);
if (!video && !post) return <main className="p-8">找不到该作品</main>;
@ -68,63 +79,107 @@ export default async function AwemeDetail({ params }: { params: Promise<{ awemeI
commentsCount,
author: {
nickname: aweme!.author.nickname,
avatar_url: getFileUrl(aweme!.author.avatar_url || 'default-avatar.png'),
sec_uid: aweme!.author.sec_uid
avatar_url: getFileUrl(aweme!.author.avatar_url || "default-avatar.png"),
sec_uid: aweme!.author.sec_uid,
},
...(() => {
if (isVideo) {
const aweme = video!
const aweme = video!;
return {
type: "video" as const,
cover_url: getFileUrl(aweme!.cover_url ?? 'default-cover.png'),
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,
height: aweme!.height ?? null,
}
};
} else {
const aweme = post!
const aweme = post!;
return {
type: "image" as const,
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'),
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"),
};
}
})()
}
})(),
};
const transcript: VideoTranscript | null = isVideo ? await prisma.videoTranscript.findUnique({
const transcript: VideoTranscript | null = isVideo
? await prisma.videoTranscript.findUnique({
where: { videoId: id },
}) : null;
})
: null;
// Compute prev/next neighbors by created_at across videos and image posts
const currentCreatedAt = (isVideo ? video!.created_at : post!.created_at);
const currentCreatedAt = isVideo ? video!.created_at : post!.created_at;
const [newerVideo, newerPost, olderVideo, olderPost] = await Promise.all([
prisma.video.findFirst({ where: { created_at: { gt: currentCreatedAt } }, orderBy: { created_at: "asc" }, select: { aweme_id: true, created_at: true } }),
prisma.imagePost.findFirst({ where: { created_at: { gt: currentCreatedAt } }, orderBy: { created_at: "asc" }, select: { aweme_id: true, created_at: true } }),
prisma.video.findFirst({ where: { created_at: { lt: currentCreatedAt } }, orderBy: { created_at: "desc" }, select: { aweme_id: true, created_at: true } }),
prisma.imagePost.findFirst({ where: { created_at: { lt: currentCreatedAt } }, orderBy: { created_at: "desc" }, select: { aweme_id: true, created_at: true } }),
prisma.video.findFirst({
where: { created_at: { gt: currentCreatedAt } },
orderBy: { created_at: "asc" },
select: { aweme_id: true, created_at: true },
}),
prisma.imagePost.findFirst({
where: { created_at: { gt: currentCreatedAt } },
orderBy: { created_at: "asc" },
select: { aweme_id: true, created_at: true },
}),
prisma.video.findFirst({
where: { created_at: { lt: currentCreatedAt } },
orderBy: { created_at: "desc" },
select: { aweme_id: true, created_at: true },
}),
prisma.imagePost.findFirst({
where: { created_at: { lt: currentCreatedAt } },
orderBy: { created_at: "desc" },
select: { aweme_id: true, created_at: true },
}),
]);
const pickPrev = (() => {
const cands: { aweme_id: string; created_at: Date }[] = [];
if (newerVideo) cands.push({ aweme_id: newerVideo.aweme_id, created_at: newerVideo.created_at });
if (newerPost) cands.push({ aweme_id: newerPost.aweme_id, created_at: newerPost.created_at });
if (newerVideo)
cands.push({
aweme_id: newerVideo.aweme_id,
created_at: newerVideo.created_at,
});
if (newerPost)
cands.push({
aweme_id: newerPost.aweme_id,
created_at: newerPost.created_at,
});
if (cands.length === 0) return null;
cands.sort((a, b) => +a.created_at - +b.created_at);
return { aweme_id: cands[0].aweme_id };
})();
const pickNext = (() => {
const cands: { aweme_id: string; created_at: Date }[] = [];
if (olderVideo) cands.push({ aweme_id: olderVideo.aweme_id, created_at: olderVideo.created_at });
if (olderPost) cands.push({ aweme_id: olderPost.aweme_id, created_at: olderPost.created_at });
if (olderVideo)
cands.push({
aweme_id: olderVideo.aweme_id,
created_at: olderVideo.created_at,
});
if (olderPost)
cands.push({
aweme_id: olderPost.aweme_id,
created_at: olderPost.created_at,
});
if (cands.length === 0) return null;
cands.sort((a, b) => +b.created_at - +a.created_at);
return { aweme_id: cands[0].aweme_id };
})();
const neighbors: { prev: { aweme_id: string } | null; next: { aweme_id: string } | null } = { prev: pickPrev, next: pickNext };
const neighbors: {
prev: { aweme_id: string } | null;
next: { aweme_id: string } | null;
} = { prev: pickPrev, next: pickNext };
return (
<main className="min-h-screen w-full">
@ -135,7 +190,11 @@ export default async function AwemeDetail({ params }: { params: Promise<{ awemeI
className="inline-flex items-center justify-center w-9 h-9 rounded-full bg-white/15 text-white border border-white/20 backdrop-blur hover:bg-white/25"
/>
</div>
<AwemeDetailClient data={data} neighbors={neighbors} transcript={transcript} />
<AwemeDetailClient
data={data}
neighbors={neighbors}
transcript={transcript}
/>
</main>
);
}

21
app/aweme/[awemeId]/types.ts
View File

@ -1,4 +1,8 @@
export type User = { nickname: string; avatar_url: string | null; sec_uid?: string };
export type User = {
nickname: string;
avatar_url: string | null;
sec_uid?: string;
};
export type Comment = {
cid: string;
@ -13,7 +17,7 @@ export type VideoData = {
type: "video";
aweme_id: string;
cover_url: string;
cover_size: {w: number; h: number};
cover_size: { w: number; h: number };
desc: string;
created_at: string | Date;
duration_ms: number | null;
@ -29,10 +33,17 @@ export type ImageData = {
type: "image";
aweme_id: string;
cover_url: string;
cover_size: {w: number; h: number};
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 }[];
images: {
id: string;
url: string;
width: number | null;
height: number | null;
animated: string | null;
duration: number | null;
}[];
music_url: string | null;
author: User;
commentsCount: number;
@ -52,5 +63,5 @@ export type Neighbors = {
next: { aweme_id: string } | null;
};
export type LoopMode = "loop" | "sequential";
export type LoopMode = "loop" | "single" | "sequential";
export type ObjectFit = "contain" | "cover";

14
app/aweme/[awemeId]/utils.ts
View File

@ -26,7 +26,9 @@ export function formatTime(seconds: number): string {
}
// 处理评论文本中的表情占位符
export function parseCommentText(text: string): (string | { type: "emoji"; name: string })[] {
export function parseCommentText(
text: string,
): (string | { type: "emoji"; name: string })[] {
const parts: (string | { type: "emoji"; name: string })[] = [];
const regex = /\[([^\]]+)\]/g;
let lastIndex = 0;
@ -51,7 +53,10 @@ export function parseCommentText(text: string): (string | { type: "emoji"; name:
}
// 从 localStorage 获取数值
export function getNumberFromStorage(key: string, defaultValue: number): number {
export function getNumberFromStorage(
key: string,
defaultValue: number,
): number {
if (typeof window === "undefined") return defaultValue;
const saved = localStorage.getItem(key);
if (!saved) return defaultValue;
@ -60,7 +65,10 @@ export function getNumberFromStorage(key: string, defaultValue: number): number
}
// 从 localStorage 获取字符串
export function getStringFromStorage(key: string, defaultValue: string): string {
export function getStringFromStorage(
key: string,
defaultValue: string,
): string {
if (typeof window === "undefined") return defaultValue;
return localStorage.getItem(key) || defaultValue;
}

29
app/components/BackButton.tsx
View File

@ -1,9 +1,9 @@
'use client';
"use client";
import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { ArrowLeft } from 'lucide-react';
import React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowLeft } from "lucide-react";
type BackButtonProps = {
className?: string;
@ -18,17 +18,24 @@ type BackButtonProps = {
* - Fallback: if close fails (e.g., not opened by script), navigates to '/'
* - Uses <Link> so that Ctrl/Cmd-click or middle-click opens the fallback URL in a new tab naturally
*/
export default function BackButton({ className, ariaLabel = '返回', hrefFallback = '/', children }: BackButtonProps) {
export default function BackButton({
className,
ariaLabel = "返回",
hrefFallback = "/",
children,
}: BackButtonProps) {
const router = useRouter();
const onClick = React.useCallback<React.MouseEventHandler<HTMLAnchorElement>>((e) => {
const onClick = React.useCallback<React.MouseEventHandler<HTMLAnchorElement>>(
(e) => {
// Respect modifier clicks (new tab/window) and non-left clicks
if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
return;
e.preventDefault();
// Try to close the window first
if (typeof window !== 'undefined') {
if (typeof window !== "undefined") {
window.close();
// If window.close() didn't work (window still open after a short delay),
@ -39,7 +46,9 @@ export default function BackButton({ className, ariaLabel = '返回', hrefFallba
}
}, 80);
}
}, [router, hrefFallback]);
},
[router, hrefFallback],
);
return (
<Link

132
app/components/FeedMasonry.tsx
View File

@ -1,9 +1,9 @@
"use client";
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import Link from 'next/link';
import HoverVideo from './HoverVideo';
import { ThumbsUp } from 'lucide-react';
import type { FeedItem, FeedResponse } from '@/app/types/feed';
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Link from "next/link";
import HoverVideo from "./HoverVideo";
import { ThumbsUp } from "lucide-react";
import type { FeedItem, FeedResponse } from "@/app/types/feed";
type Props = {
initialItems: FeedItem[];
@ -11,7 +11,11 @@ type Props = {
fetchUrl?: string;
};
export default function FeedMasonry({ initialItems, initialCursor, fetchUrl = '/api/feed' }: Props) {
export default function FeedMasonry({
initialItems,
initialCursor,
fetchUrl = "/api/feed",
}: Props) {
// 哨兵与容器
const [cursor, setCursor] = useState<string | null>(initialCursor);
const [loading, setLoading] = useState(false);
@ -22,7 +26,7 @@ export default function FeedMasonry({ initialItems, initialCursor, fetchUrl = '/
// 响应式列数：<640:1, >=640:2, >=1024:3, >=1280:4
const getColumnCount = useCallback(() => {
if (typeof window === 'undefined') return 1;
if (typeof window === "undefined") return 1;
const w = window.innerWidth;
if (w >= 1280) return 4; // xl
if (w >= 1024) return 3; // lg
@ -37,8 +41,8 @@ export default function FeedMasonry({ initialItems, initialCursor, fetchUrl = '/
// 挂载后立即根据当前窗口宽度更新一次列数
setColumnCount(getColumnCount());
const onResize = () => setColumnCount(getColumnCount());
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
}, [getColumnCount]);
// 估算卡片高度（用于分配到“最短列”）
@ -46,8 +50,11 @@ export default function FeedMasonry({ initialItems, initialCursor, fetchUrl = '/
// 媒体区域高度
let mediaH = 200; // fallback
if (item.width && item.height) {
mediaH = Math.max(80, (Number(item.height) / Number(item.width)) * colWidth);
} else if (item.type === 'video') {
mediaH = Math.max(
80,
(Number(item.height) / Number(item.width)) * colWidth,
);
} else if (item.type === "video") {
mediaH = (9 / 16) * colWidth; // 常见视频比例
}
// 文本 + 作者栏的高度粗估
@ -62,12 +69,15 @@ export default function FeedMasonry({ initialItems, initialCursor, fetchUrl = '/
const cols: FeedItem[][] = Array.from({ length: columnCount }, () => []);
return cols;
});
const [colHeights, setColHeights] = useState<number[]>(() => Array.from({ length: columnCount }, () => 0));
const [colHeights, setColHeights] = useState<number[]>(() =>
Array.from({ length: columnCount }, () => 0),
);
// 初始化与当列数变化时重排
useEffect(() => {
const containerWidth = containerRef.current?.clientWidth ?? 0;
const colWidth = columnCount > 0 ? containerWidth / columnCount : containerWidth;
const colWidth =
columnCount > 0 ? containerWidth / columnCount : containerWidth;
// 用 initialItems 重排
const newCols: FeedItem[][] = Array.from({ length: columnCount }, () => []);
const newHeights: number[] = Array.from({ length: columnCount }, () => 0);
@ -90,16 +100,19 @@ export default function FeedMasonry({ initialItems, initialCursor, fetchUrl = '/
setLoading(true);
try {
const params = new URLSearchParams();
if (cursor) params.set('before', cursor);
params.set('limit', '24');
const url = fetchUrl.includes('?') ? `${fetchUrl}&${params.toString()}` : `${fetchUrl}?${params.toString()}`;
const res = await fetch(url, { cache: 'no-store' });
if (cursor) params.set("before", cursor);
params.set("limit", "24");
const url = fetchUrl.includes("?")
? `${fetchUrl}&${params.toString()}`
: `${fetchUrl}?${params.toString()}`;
const res = await fetch(url, { cache: "no-store" });
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data: FeedResponse = await res.json();
// 将新数据按最短列分配
setColumns((prevCols) => {
const containerWidth = containerRef.current?.clientWidth ?? 0;
const colWidth = columnCount > 0 ? containerWidth / columnCount : containerWidth;
const colWidth =
columnCount > 0 ? containerWidth / columnCount : containerWidth;
const cols = prevCols.map((c) => [...c]);
const heights = [...colHeights];
for (const item of data.items) {
@ -117,7 +130,7 @@ export default function FeedMasonry({ initialItems, initialCursor, fetchUrl = '/
setCursor(data.nextCursor);
if (!data.nextCursor || data.items.length === 0) setEnded(true);
} catch (e) {
console.error('fetch more feed failed', e);
console.error("fetch more feed failed", e);
// 失败也不要死循环
setEnded(true);
} finally {
@ -128,24 +141,38 @@ export default function FeedMasonry({ initialItems, initialCursor, fetchUrl = '/
useEffect(() => {
const el = sentinelRef.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
const io = new IntersectionObserver(
(entries) => {
const entry = entries[0];
if (entry.isIntersecting) {
fetchMore();
}
}, { rootMargin: '800px 0px 800px 0px' });
},
{ rootMargin: "800px 0px 800px 0px" },
);
io.observe(el);
return () => io.disconnect();
}, [fetchMore]);
const renderCard = useCallback((item: FeedItem) => (
<article key={item.aweme_id} className="mb-4 group relative overflow-hidden rounded-2xl shadow-sm ring-1 ring-black/5 bg-white/80 dark:bg-zinc-900/60 backdrop-blur-sm transition-transform duration-300 hover:-translate-y-1">
<Link href={`/aweme/${item.aweme_id}`} target="_blank" className="block relative w-full">
const renderCard = useCallback(
(item: FeedItem) => (
<article
key={item.aweme_id}
className="mb-4 group relative overflow-hidden rounded-2xl shadow-sm ring-1 ring-black/5 bg-white/80 dark:bg-zinc-900/60 backdrop-blur-sm transition-transform duration-300 hover:-translate-y-1"
>
<Link
href={`/aweme/${item.aweme_id}`}
target="_blank"
className="block relative w-full"
>
<div
className="relative w-full"
style={{ aspectRatio: `${(item.width && item.height) ? `${item.width}/${item.height}` : ''}` as any }}
style={{
aspectRatio:
`${item.width && item.height ? `${item.width}/${item.height}` : ""}` as any,
}}
>
{item.type === 'video' ? (
{item.type === "video" ? (
<HoverVideo
videoUrl={(item as any).video_url}
coverUrl={item.cover_url}
@ -154,8 +181,8 @@ export default function FeedMasonry({ initialItems, initialCursor, fetchUrl = '/
) : (
<img
loading="lazy"
src={item.cover_url || '/placeholder.svg'}
alt={item.desc?.slice(0, 20) || 'image'}
src={item.cover_url || "/placeholder.svg"}
alt={item.desc?.slice(0, 20) || "image"}
className="absolute inset-0 w-full h-full object-cover"
/>
)}
@ -165,7 +192,7 @@ export default function FeedMasonry({ initialItems, initialCursor, fetchUrl = '/
{item.desc}
</p>
<span className="shrink-0 inline-flex items-center gap-2 rounded-full bg-white/85 px-2 py-1 text-xs text-zinc-800">
{item.type === 'video' ? '视频' : '图文'}
{item.type === "video" ? "视频" : "图文"}
</span>
</div>
</div>
@ -173,43 +200,70 @@ export default function FeedMasonry({ initialItems, initialCursor, fetchUrl = '/
<div className="flex items-center gap-2 p-3">
{item.author.sec_uid ? (
<Link href={`/author/${item.author.sec_uid}`} className="flex items-center gap-2 min-w-0 flex-1 hover:opacity-80 transition-opacity">
<Link
href={`/author/${item.author.sec_uid}`}
className="flex items-center gap-2 min-w-0 flex-1 hover:opacity-80 transition-opacity"
>
<div className="size-6 rounded-full overflow-hidden bg-zinc-200 shrink-0">
{item.author.avatar_url ? (
<img src={item.author.avatar_url} alt="avatar" className="w-full h-full object-cover" />
<img
src={item.author.avatar_url}
alt="avatar"
className="w-full h-full object-cover"
/>
) : null}
</div>
<span className="text-sm text-zinc-700 dark:text-zinc-300 truncate">{item.author.nickname}</span>
<span className="text-sm text-zinc-700 dark:text-zinc-300 truncate">
{item.author.nickname}
</span>
</Link>
) : (
<div className="flex items-center gap-2 min-w-0 flex-1">
<div className="size-6 rounded-full overflow-hidden bg-zinc-200 shrink-0">
{item.author.avatar_url ? (
<img src={item.author.avatar_url} alt="avatar" className="w-full h-full object-cover" />
<img
src={item.author.avatar_url}
alt="avatar"
className="w-full h-full object-cover"
/>
) : null}
</div>
<span className="text-sm text-zinc-700 dark:text-zinc-300 truncate">{item.author.nickname}</span>
<span className="text-sm text-zinc-700 dark:text-zinc-300 truncate">
{item.author.nickname}
</span>
</div>
)}
<span className="ml-auto text-sm text-zinc-700 dark:text-zinc-300 flex items-center gap-1">
{item.likes} <ThumbsUp size={16} style={{ color: 'var(--color-zinc-700)' }} />
{item.likes}{" "}
<ThumbsUp size={16} style={{ color: "var(--color-zinc-700)" }} />
</span>
</div>
</article>
), []);
),
[],
);
return (
<>
{/* Masonry（按列渲染，动态分配到最短列） */}
<div ref={containerRef} className="grid gap-4" style={{ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }}>
<div
ref={containerRef}
className="grid gap-4"
style={{
gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
}}
>
{columns.map((col, idx) => (
<div key={idx} className="flex flex-col">
{col.map((item) => renderCard(item))}
</div>
))}
</div>
<div ref={sentinelRef} className="h-10 flex items-center justify-center text-sm text-zinc-500">
{ended ? '没有更多了' : (loading ? '加载中…' : '下拉加载更多')}
<div
ref={sentinelRef}
className="h-10 flex items-center justify-center text-sm text-zinc-500"
>
{ended ? "没有更多了" : loading ? "加载中…" : "下拉加载更多"}
</div>
</>
);

22
app/components/HoverVideo.tsx
View File

@ -1,6 +1,6 @@
'use client';
"use client";
import React, { useCallback, useRef, useState } from 'react';
import React, { useCallback, useRef, useState } from "react";
type HoverVideoProps = {
videoUrl: string;
@ -12,7 +12,12 @@ type HoverVideoProps = {
/**
* 鼠标移入才加载视频并自动播放，移出暂停并释放资源；默认显示封面。
*/
export default function HoverVideo({ videoUrl, coverUrl, className, style }: HoverVideoProps) {
export default function HoverVideo({
videoUrl,
coverUrl,
className,
style,
}: HoverVideoProps) {
const [active, setActive] = useState(false);
const videoRef = useRef<HTMLVideoElement | null>(null);
@ -38,14 +43,19 @@ export default function HoverVideo({ videoUrl, coverUrl, className, style }: Hov
}, []);
return (
<div className={className} style={style} onMouseEnter={onEnter} onMouseLeave={onLeave}>
<div
className={className}
style={style}
onMouseEnter={onEnter}
onMouseLeave={onLeave}
>
{/* 封面始终渲染在底层 */}
<img
src={coverUrl || '/placeholder.svg'}
src={coverUrl || "/placeholder.svg"}
alt="cover"
className="absolute inset-0 w-full h-full object-cover"
draggable={false}
loading='lazy'
loading="lazy"
/>
{/* 仅在激活后渲染视频；初始不设置 src，防止提前加载 */}

20
app/globals.css
View File

@ -3,6 +3,11 @@
:root {
--background: #161823; /* theme background */
--foreground: #ededed;
--font-geist-sans:
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
--font-geist-mono:
"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
@theme inline {
@ -23,11 +28,13 @@ body {
margin: 0;
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
font-family: var(--font-geist-sans);
}
/* 滚动条隐藏 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* 搜索结果高亮标记样式 */
mark {
@ -37,12 +44,15 @@ mark {
border-radius: 0.25rem;
font-weight: 500;
}
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.h-screen{
.h-screen {
height: 100dvh;
}
.min-h-screen{
.min-h-screen {
min-height: 100dvh;
}

17
app/layout.tsx
View File

@ -1,17 +1,6 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: {
default: "抖歪 - 记录当下时代",
@ -30,11 +19,7 @@ export default function RootLayout({
}>) {
return (
<html lang="zh-CN">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
<body className="antialiased">{children}</body>
</html>
);
}

29
app/page.tsx
View File

@ -33,11 +33,15 @@ export default async function Home() {
created_at: v.created_at,
desc: v.desc,
video_url: getFileUrl(v.video_url),
cover_url: getFileUrl(v.cover_url ?? ''),
cover_url: getFileUrl(v.cover_url ?? ""),
width: v.width ?? null,
height: v.height ?? null,
author: { nickname: v.author.nickname, avatar_url: getFileUrl(v.author.avatar_url ?? ''), sec_uid: v.author.sec_uid },
likes: Number(v.digg_count)
author: {
nickname: v.author.nickname,
avatar_url: getFileUrl(v.author.avatar_url ?? ""),
sec_uid: v.author.sec_uid,
},
likes: Number(v.digg_count),
})),
...posts.map((p) => ({
type: "image" as const,
@ -47,8 +51,12 @@ export default async function Home() {
cover_url: getFileUrl(p.images?.[0]?.url ?? null),
width: p.images?.[0]?.width ?? null,
height: p.images?.[0]?.height ?? null,
author: { nickname: p.author.nickname, avatar_url: getFileUrl(p.author.avatar_url ?? ''), sec_uid: p.author.sec_uid },
likes: Number(p.digg_count)
author: {
nickname: p.author.nickname,
avatar_url: getFileUrl(p.author.avatar_url ?? ""),
sec_uid: p.author.sec_uid,
},
likes: Number(p.digg_count),
})),
]
//.sort(() => Math.random() - 0.5)
@ -73,8 +81,15 @@ export default async function Home() {
<div className="w-full">
{(() => {
const initial = feed.slice(0, 24);
const cursor = initial.length > 0 ? new Date(initial[initial.length - 1].created_at as any).toISOString() : null;
return <FeedMasonry initialItems={initial} initialCursor={cursor} />;
const cursor =
initial.length > 0
? new Date(
initial[initial.length - 1].created_at as any,
).toISOString()
: null;
return (
<FeedMasonry initialItems={initial} initialCursor={cursor} />
);
})()}
</div>
</div>

51
app/search/SearchClient.tsx
View File

@ -9,7 +9,7 @@ import { Search, ArrowLeft, X, MessageSquare } from "lucide-react";
type SearchResultItem = {
id: string;
awemeId: string;
type: 'video' | 'image';
type: "video" | "image";
rank: number;
snippet: string; // 后端返回的高亮片段，已包含<mark>标签
video?: {
@ -35,7 +35,11 @@ type SearchResultItem = {
};
};
};
export default function SearchClient({ initialQuery }: { initialQuery: string }) {
export default function SearchClient({
initialQuery,
}: {
initialQuery: string;
}) {
const searchParams = useSearchParams();
const router = useRouter();
@ -53,7 +57,9 @@ export default function SearchClient({ initialQuery }: { initialQuery: string })
setLoading(true);
setSearched(true);
try {
const res = await fetch(`/api/search?q=${encodeURIComponent(q.trim())}&limit=60`);
const res = await fetch(
`/api/search?q=${encodeURIComponent(q.trim())}&limit=60`,
);
if (!res.ok) throw new Error("Search failed");
const data = await res.json();
setResults(data.results || []);
@ -101,7 +107,10 @@ export default function SearchClient({ initialQuery }: { initialQuery: string })
<ArrowLeft size={24} />
</button>
<form onSubmit={handleSearch} className="flex-1 flex items-center gap-3">
<form
onSubmit={handleSearch}
className="flex-1 flex items-center gap-3"
>
<div className="relative flex-1">
<input
type="text"
@ -160,7 +169,9 @@ export default function SearchClient({ initialQuery }: { initialQuery: string })
<div className="flex flex-col items-center justify-center py-20 text-white/40">
<Search size={64} className="mb-4 opacity-20" />
<p className="text-xl">输入关键词开始搜索</p>
<p className="text-sm mt-2">支持搜索视频描述、图文描述及语音转写内容</p>
<p className="text-sm mt-2">
支持搜索视频描述、图文描述及语音转写内容
</p>
</div>
)}
@ -168,14 +179,19 @@ export default function SearchClient({ initialQuery }: { initialQuery: string })
<div>
<div className="mb-6 flex items-center justify-between">
<h2 className="text-lg text-white/80">
找到 <span className="text-white font-semibold">{results.length}</span> 个结果
找到{" "}
<span className="text-white font-semibold">
{results.length}
</span>{" "}
个结果
</h2>
</div>
{/* 单列列表布局 */}
<div className="space-y-4">
{results.map((item) => {
const content = item.type === 'video' ? item.video : item.imagePost;
const content =
item.type === "video" ? item.video : item.imagePost;
if (!content) return null;
return (
@ -202,12 +218,14 @@ export default function SearchClient({ initialQuery }: { initialQuery: string })
<div className="flex-1 min-w-0 flex flex-col">
{/* 类型标签 */}
<div className="flex items-center gap-2 mb-2">
<span className={`px-2 py-0.5 text-xs rounded ${
item.type === 'video'
? 'bg-blue-600/20 text-blue-300'
: 'bg-purple-600/20 text-purple-300'
}`}>
{item.type === 'video' ? '视频' : '图文'}
<span
className={`px-2 py-0.5 text-xs rounded ${
item.type === "video"
? "bg-blue-600/20 text-blue-300"
: "bg-purple-600/20 text-purple-300"
}`}
>
{item.type === "video" ? "视频" : "图文"}
</span>
<span className="flex items-center gap-1 px-2 py-0.5 bg-green-600/20 text-green-300 text-xs rounded">
<MessageSquare size={12} />
@ -216,7 +234,10 @@ export default function SearchClient({ initialQuery }: { initialQuery: string })
</div>
{/* 描述 */}
<Link href={`/aweme/${content.aweme_id}`} target="_blank">
<Link
href={`/aweme/${content.aweme_id}`}
target="_blank"
>
<p className="text-white/90 text-sm sm:text-base line-clamp-2 mb-3 hover:text-white transition-colors">
{content.desc || "无描述"}
</p>
@ -245,7 +266,7 @@ export default function SearchClient({ initialQuery }: { initialQuery: string })
className="text-xs text-white/70 bg-white/5 rounded-lg p-2 leading-relaxed"
dangerouslySetInnerHTML={{ __html: item.snippet }}
style={{
wordBreak: 'break-word',
wordBreak: "break-word",
}}
/>
</div>

6
app/search/page.tsx
View File

@ -2,7 +2,11 @@
import { Suspense } from "react";
import SearchClient from "./SearchClient";
export default function Page({ searchParams }: { searchParams: { q?: string } }) {
export default function Page({
searchParams,
}: {
searchParams: { q?: string };
}) {
const q = typeof searchParams.q === "string" ? searchParams.q : "";
return (
<Suspense fallback={<div className="p-6 text-zinc-400">Loading…</div>}>

298
app/tasks/page.tsx
View File

@ -1,7 +1,20 @@
"use client";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { AlertTriangle, CheckCircle2, Clipboard, Clock, ExternalLink, Link2, Loader2, PlayCircle, Plus, Square, Trash2, X } from "lucide-react";
import {
AlertTriangle,
CheckCircle2,
Clipboard,
Clock,
ExternalLink,
Link2,
Loader2,
PlayCircle,
Plus,
Square,
Trash2,
X,
} from "lucide-react";
type TaskStatus = "pending" | "running" | "success" | "error";
@ -22,7 +35,7 @@ const extractDouyinLinks = (text: string): string[] => {
const trailing = /[)\]】>。，、！!？?\s]+$/; // 去掉常见中文/英文结尾符号
const cleaned = matches
.map((m) => m.replace(trailing, ""))
.map((m) => m.endsWith("/") ? m : m); // 保持原样，通常短链以 / 结尾
.map((m) => (m.endsWith("/") ? m : m)); // 保持原样，通常短链以 / 结尾
// 去重
return Array.from(new Set(cleaned));
};
@ -43,16 +56,22 @@ export default function TasksPage() {
}, []);
const inProgressUrls = useMemo(
() => new Set(tasks.filter(t => t.status === "pending" || t.status === "running").map(t => t.url)),
[tasks]
() =>
new Set(
tasks
.filter((t) => t.status === "pending" || t.status === "running")
.map((t) => t.url),
),
[tasks],
);
const addTasks = useCallback((urls: string[]) => {
const addTasks = useCallback(
(urls: string[]) => {
if (!urls.length) return;
const now = Date.now();
setTasks((prev) => {
const existing = new Set(prev.map((t) => t.id));
const notDuplicated = urls.filter(u => !inProgressUrls.has(u));
const notDuplicated = urls.filter((u) => !inProgressUrls.has(u));
const newTasks: Task[] = [];
for (const url of notDuplicated) {
const id = `${now}-${Math.random().toString(36).slice(2, 8)}`;
@ -61,25 +80,34 @@ export default function TasksPage() {
// 新任务添加到最前面
return [...newTasks, ...prev];
});
}, [inProgressUrls]);
},
[inProgressUrls],
);
const handleSubmit = useCallback((e?: React.FormEvent) => {
const handleSubmit = useCallback(
(e?: React.FormEvent) => {
e?.preventDefault();
const urls = extractDouyinLinks(input);
if (!urls.length) {
alert("未检测到 Douyin 短链，请粘贴包含 https://v.douyin.com/... 的文本");
alert(
"未检测到 Douyin 短链，请粘贴包含 https://v.douyin.com/... 的文本",
);
return;
}
addTasks(urls);
setInput("");
}, [input, addTasks]);
},
[input, addTasks],
);
const handlePasteAndAdd = useCallback(async () => {
try {
const text = await navigator.clipboard.readText();
const urls = extractDouyinLinks(text);
if (!urls.length) {
alert("剪贴板中未检测到 Douyin 短链，请复制包含 https://v.douyin.com/... 的文本");
alert(
"剪贴板中未检测到 Douyin 短链，请复制包含 https://v.douyin.com/... 的文本",
);
return;
}
addTasks(urls);
@ -94,22 +122,44 @@ export default function TasksPage() {
if (controllers.current.has(task.id)) return;
const ctrl = new AbortController();
controllers.current.set(task.id, ctrl);
setTasks(prev => prev.map(t => t.id === task.id ? { ...t, status: "running", startedAt: Date.now(), error: undefined } : t));
setTasks((prev) =>
prev.map((t) =>
t.id === task.id
? { ...t, status: "running", startedAt: Date.now(), error: undefined }
: t,
),
);
try {
const res = await fetch(`/api/fetcher?url=${encodeURIComponent(task.url)}`, { signal: ctrl.signal, method: "GET" });
const res = await fetch(
`/api/fetcher?url=${encodeURIComponent(task.url)}`,
{ signal: ctrl.signal, method: "GET" },
);
const data = await res.json().catch(() => null);
if (!res.ok) {
// 使用后端返回的结构化错误信息
const errorMsg = data?.error || `请求失败: ${res.status}`;
const errorCode = data?.code || 'UNKNOWN';
const errorCode = data?.code || "UNKNOWN";
throw new Error(`${errorMsg} (${errorCode})`);
}
setTasks(prev => prev.map(t => t.id === task.id ? { ...t, status: "success", finishedAt: Date.now(), result: data } : t));
setTasks((prev) =>
prev.map((t) =>
t.id === task.id
? { ...t, status: "success", finishedAt: Date.now(), result: data }
: t,
),
);
} catch (err: any) {
const msg = err?.name === 'AbortError' ? '已取消' : (err?.message || String(err));
setTasks(prev => prev.map(t => t.id === task.id ? { ...t, status: "error", finishedAt: Date.now(), error: msg } : t));
const msg =
err?.name === "AbortError" ? "已取消" : err?.message || String(err);
setTasks((prev) =>
prev.map((t) =>
t.id === task.id
? { ...t, status: "error", finishedAt: Date.now(), error: msg }
: t,
),
);
} finally {
controllers.current.delete(task.id);
}
@ -117,17 +167,17 @@ export default function TasksPage() {
// 自动拉起 pending 任务（使用 effect 防止每次 render 重复触发）
useEffect(() => {
const pending = tasks.filter(t => t.status === "pending");
const pending = tasks.filter((t) => t.status === "pending");
pending.forEach((t) => startTask(t));
}, [tasks, startTask]);
// 定时器更新运行中任务的耗时显示
useEffect(() => {
const hasRunningTasks = tasks.some(t => t.status === "running");
const hasRunningTasks = tasks.some((t) => t.status === "running");
if (!hasRunningTasks) return;
const timer = setInterval(() => {
setTick(prev => prev + 1);
setTick((prev) => prev + 1);
}, 1000); // 每秒更新一次
return () => clearInterval(timer);
@ -140,27 +190,40 @@ export default function TasksPage() {
}, []);
const retryTask = useCallback((taskId: string) => {
setTasks(prev => prev.map(t => {
setTasks((prev) =>
prev.map((t) => {
if (t.id === taskId) {
return { ...t, status: "pending" as TaskStatus, error: undefined, result: undefined };
return {
...t,
status: "pending" as TaskStatus,
error: undefined,
result: undefined,
};
}
return t;
}));
}),
);
}, []);
const clearFinished = useCallback(() => {
setTasks(prev => prev.filter(t => t.status === "pending" || t.status === "running"));
setTasks((prev) =>
prev.filter((t) => t.status === "pending" || t.status === "running"),
);
}, []);
const toggleOpen = useCallback((id: string) => {
setOpenDetails(prev => {
setOpenDetails((prev) => {
const next = new Set(prev);
if (next.has(id)) next.delete(id); else next.add(id);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
})
});
}, []);
const extractedCount = useMemo(() => extractDouyinLinks(input).length, [input]);
const extractedCount = useMemo(
() => extractDouyinLinks(input).length,
[input],
);
const formatDuration = (startTime?: number, endTime?: number) => {
if (!startTime) return "";
@ -173,11 +236,31 @@ export default function TasksPage() {
};
const StatusBadge = ({ status }: { status: TaskStatus }) => {
const base = "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium";
if (status === 'running') return <span className={`${base} bg-indigo-500/15 text-indigo-300`}><Loader2 className="h-3.5 w-3.5 animate-spin"/> 进行中</span>;
if (status === 'pending') return <span className={`${base} bg-yellow-500/15 text-yellow-300`}><Clock className="h-3.5 w-3.5"/> 待开始</span>;
if (status === 'success') return <span className={`${base} bg-emerald-500/15 text-emerald-300`}><CheckCircle2 className="h-3.5 w-3.5"/> 完成</span>;
return <span className={`${base} bg-red-500/15 text-red-300`}><AlertTriangle className="h-3.5 w-3.5"/> 失败</span>;
const base =
"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium";
if (status === "running")
return (
<span className={`${base} bg-indigo-500/15 text-indigo-300`}>
<Loader2 className="h-3.5 w-3.5 animate-spin" /> 进行中
</span>
);
if (status === "pending")
return (
<span className={`${base} bg-yellow-500/15 text-yellow-300`}>
<Clock className="h-3.5 w-3.5" /> 待开始
</span>
);
if (status === "success")
return (
<span className={`${base} bg-emerald-500/15 text-emerald-300`}>
<CheckCircle2 className="h-3.5 w-3.5" /> 完成
</span>
);
return (
<span className={`${base} bg-red-500/15 text-red-300`}>
<AlertTriangle className="h-3.5 w-3.5" /> 失败
</span>
);
};
return (
@ -192,11 +275,16 @@ export default function TasksPage() {
<h1 className="text-3xl font-semibold tracking-tight text-white">
抖音采集任务
</h1>
<p className="mt-2 text-sm text-neutral-400">粘贴任意文本，我会自动提取 Douyin 短链并提交到后端处理。</p>
<p className="mt-2 text-sm text-neutral-400">
粘贴任意文本，我会自动提取 Douyin 短链并提交到后端处理。
</p>
</div>
{/* 输入卡片 */}
<form onSubmit={handleSubmit} className="rounded-xl border border-white/10 bg-white/5 p-4 shadow-[0_0_0_1px_rgba(255,255,255,0.03)] backdrop-blur">
<form
onSubmit={handleSubmit}
className="rounded-xl border border-white/10 bg-white/5 p-4 shadow-[0_0_0_1px_rgba(255,255,255,0.03)] backdrop-blur"
>
<div className="flex items-start gap-3">
<div className="mt-1 rounded-md bg-neutral-900/60 p-2 ring-1 ring-white/5">
<Link2 className="h-5 w-5 text-neutral-400" />
@ -210,18 +298,31 @@ export default function TasksPage() {
/>
<div className="mt-2 flex items-center justify-between text-xs text-neutral-500">
<span>已提取 {extractedCount} 个短链</span>
<span className="hidden sm:inline">快捷键：Ctrl / Cmd + Enter 提交</span>
<span className="hidden sm:inline">
快捷键：Ctrl / Cmd + Enter 提交
</span>
</div>
</div>
</div>
<div className="mt-4 flex flex-wrap items-center gap-3">
<button type="submit" className="inline-flex items-center gap-2 rounded-md bg-indigo-600/90 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-400/40">
<button
type="submit"
className="inline-flex items-center gap-2 rounded-md bg-indigo-600/90 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-400/40"
>
<Plus className="h-4 w-4" /> 添加任务
</button>
<button type="button" onClick={handlePasteAndAdd} className="inline-flex items-center gap-2 rounded-md bg-emerald-600/90 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400/40">
<button
type="button"
onClick={handlePasteAndAdd}
className="inline-flex items-center gap-2 rounded-md bg-emerald-600/90 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400/40"
>
<Clipboard className="h-4 w-4" /> 粘贴并添加
</button>
<button type="button" onClick={clearFinished} className="inline-flex items-center gap-2 rounded-md bg-neutral-800 px-3 py-2 text-sm text-neutral-200 transition-colors hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-white/10">
<button
type="button"
onClick={clearFinished}
className="inline-flex items-center gap-2 rounded-md bg-neutral-800 px-3 py-2 text-sm text-neutral-200 transition-colors hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-white/10"
>
<Trash2 className="h-4 w-4" /> 清除已完成
</button>
</div>
@ -231,64 +332,91 @@ export default function TasksPage() {
<section className="mt-8">
<div className="mb-3 flex items-center justify-between">
<h2 className="text-lg font-medium">进行中的任务</h2>
<span className="text-xs text-neutral-400">共 {tasks.length} 个</span>
<span className="text-xs text-neutral-400">
共 {tasks.length} 个
</span>
</div>
<ul className="space-y-3">
{tasks.map((t) => {
const isOpen = openDetails.has(t.id);
return (
<li key={t.id} className="rounded-xl border border-white/10 bg-white/5 p-4 shadow-[0_0_0_1px_rgba(255,255,255,0.03)] backdrop-blur">
<li
key={t.id}
className="rounded-xl border border-white/10 bg-white/5 p-4 shadow-[0_0_0_1px_rgba(255,255,255,0.03)] backdrop-blur"
>
<div className="flex items-start justify-between gap-4">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<StatusBadge status={t.status} />
{t.status === 'running' && (
<span className="text-xs text-neutral-400">已耗时 {formatDuration(t.startedAt)}</span>
{t.status === "running" && (
<span className="text-xs text-neutral-400">
已耗时 {formatDuration(t.startedAt)}
</span>
)}
{t.status === 'success' && (
<span className="text-xs text-neutral-400">用时 {formatDuration(t.startedAt, t.finishedAt)}</span>
{t.status === "success" && (
<span className="text-xs text-neutral-400">
用时 {formatDuration(t.startedAt, t.finishedAt)}
</span>
)}
</div>
<div className="mt-1 flex items-center gap-2 text-sm text-neutral-200">
<span className="truncate" title={t.url}>{t.url}</span>
<a className="shrink-0 text-neutral-400 hover:text-neutral-200" href={t.url} target="_blank" rel="noreferrer">
<span className="truncate" title={t.url}>
{t.url}
</span>
<a
className="shrink-0 text-neutral-400 hover:text-neutral-200"
href={t.url}
target="_blank"
rel="noreferrer"
>
<ExternalLink className="h-4 w-4" />
</a>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
{t.status === 'success' && t.result?.data?.aweme_id && (
{t.status === "success" && t.result?.data?.aweme_id && (
<a
href={`/aweme/${t.result.data.aweme_id}`}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-1 rounded-md bg-emerald-600/80 px-2 py-1 text-xs text-white transition-colors hover:bg-emerald-600"
>
<ExternalLink className="h-3.5 w-3.5"/> 查看作品
<ExternalLink className="h-3.5 w-3.5" /> 查看作品
</a>
)}
{t.status === 'error' && (
{t.status === "error" && (
<button
onClick={() => retryTask(t.id)}
className="inline-flex items-center gap-1 rounded-md bg-amber-600/80 px-2 py-1 text-xs text-white transition-colors hover:bg-amber-600"
>
<PlayCircle className="h-3.5 w-3.5"/> 重试
<PlayCircle className="h-3.5 w-3.5" /> 重试
</button>
)}
{t.status === 'running' && (
<button onClick={() => cancelTask(t.id)} className="inline-flex items-center gap-1 rounded-md bg-red-600/80 px-2 py-1 text-xs text-white transition-colors hover:bg-red-600">
<Square className="h-3.5 w-3.5"/> 取消
{t.status === "running" && (
<button
onClick={() => cancelTask(t.id)}
className="inline-flex items-center gap-1 rounded-md bg-red-600/80 px-2 py-1 text-xs text-white transition-colors hover:bg-red-600"
>
<Square className="h-3.5 w-3.5" /> 取消
</button>
)}
<button onClick={() => toggleOpen(t.id)} className="inline-flex items-center gap-1 rounded-md bg-neutral-800 px-2 py-1 text-xs text-neutral-200 transition-colors hover:bg-neutral-700">
{isOpen ? <X className="h-3.5 w-3.5"/> : <PlayCircle className="h-3.5 w-3.5" />} {isOpen ? '收起' : '详情'}
<button
onClick={() => toggleOpen(t.id)}
className="inline-flex items-center gap-1 rounded-md bg-neutral-800 px-2 py-1 text-xs text-neutral-200 transition-colors hover:bg-neutral-700"
>
{isOpen ? (
<X className="h-3.5 w-3.5" />
) : (
<PlayCircle className="h-3.5 w-3.5" />
)}{" "}
{isOpen ? "收起" : "详情"}
</button>
</div>
</div>
{/* 进度条 */}
{t.status === 'running' && (
{t.status === "running" && (
<div className="mt-3 h-1 w-full overflow-hidden rounded bg-neutral-800">
<div className="h-full w-1/3 animate-[progress_1.2s_ease_infinite] rounded bg-indigo-500/70" />
</div>
@ -296,13 +424,17 @@ export default function TasksPage() {
{isOpen && (
<div className="mt-3 rounded-md border border-neutral-800/60 bg-neutral-900/60 p-3">
{t.status === 'error' && t.error && (
{t.status === "error" && t.error && (
<div className="mb-3 space-y-2">
<div className="flex items-start gap-2 rounded-md border border-red-500/30 bg-red-500/10 p-3">
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-400"/>
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-red-200">爬取失败</div>
<div className="mt-1 text-xs text-red-300/90">{t.error}</div>
<div className="text-sm font-medium text-red-200">
爬取失败
</div>
<div className="mt-1 text-xs text-red-300/90">
{t.error}
</div>
</div>
</div>
<div className="text-xs text-neutral-400">
@ -315,33 +447,57 @@ export default function TasksPage() {
</div>
</div>
)}
{typeof t.result !== 'undefined' && (
{typeof t.result !== "undefined" && (
<div>
{t.result?.data?.aweme && (
<div className="mb-3 space-y-2 rounded-md border border-emerald-500/20 bg-emerald-500/5 p-3 text-xs">
<div className="flex items-center gap-2">
<CheckCircle2 className="h-4 w-4 text-emerald-400"/>
<span className="font-medium text-emerald-200">作品信息</span>
<CheckCircle2 className="h-4 w-4 text-emerald-400" />
<span className="font-medium text-emerald-200">
作品信息
</span>
</div>
<div className="space-y-1 text-neutral-300">
<div><span className="text-neutral-400">ID:</span> {t.result.data.aweme.aweme_id}</div>
<div><span className="text-neutral-400">描述:</span> {t.result.data.aweme.desc || '(无)'}</div>
<div>
<span className="text-neutral-400">ID:</span>{" "}
{t.result.data.aweme.aweme_id}
</div>
<div>
<span className="text-neutral-400">
描述:
</span>{" "}
{t.result.data.aweme.desc || "(无)"}
</div>
{t.result.data.aweme.author && (
<div><span className="text-neutral-400">作者:</span> {t.result.data.aweme.author.nickname}</div>
<div>
<span className="text-neutral-400">
作者:
</span>{" "}
{t.result.data.aweme.author.nickname}
</div>
)}
</div>
</div>
)}
<details className="group">
<summary className="cursor-pointer text-xs text-neutral-400 hover:text-neutral-300">
查看完整响应数据 <span className="group-open:hidden">▶</span><span className="hidden group-open:inline">▼</span>
查看完整响应数据{" "}
<span className="group-open:hidden">▶</span>
<span className="hidden group-open:inline">
▼
</span>
</summary>
<pre className="mt-2 max-h-64 overflow-auto rounded bg-neutral-950 p-2 text-xs text-neutral-300">{JSON.stringify(t.result, null, 2)}</pre>
<pre className="mt-2 max-h-64 overflow-auto rounded bg-neutral-950 p-2 text-xs text-neutral-300">
{JSON.stringify(t.result, null, 2)}
</pre>
</details>
</div>
)}
{typeof t.result === 'undefined' && t.status !== 'error' && (
<div className="text-xs text-neutral-400">暂无输出</div>
{typeof t.result === "undefined" &&
t.status !== "error" && (
<div className="text-xs text-neutral-400">
暂无输出
</div>
)}
</div>
)}

12
app/types/feed.ts
View File

@ -1,10 +1,12 @@
export type FeedItem =
| ({
export type FeedItem = (
| {
type: "video";
video_url: string;
} | {
}
| {
type: "image";
}) & {
}
) & {
likes: number;
author: { nickname: string; avatar_url: string | null; sec_uid?: string };
aweme_id: string;
@ -13,7 +15,7 @@ export type FeedItem =
cover_url: string | null;
width?: number | null;
height?: number | null;
};
};
export interface FeedResponse {
items: FeedItem[];

25
bun.lock
View File

@ -8,13 +8,14 @@
"chalk": "^5.6.2",
"lucide-react": "^0.546.0",
"minio": "^8.0.6",
"next": "15.5.6",
"next": "15.5.7",
"openai": "^6.7.0",
"playwright": "1.56.1",
"playwright-extra": "^4.3.6",
"puppeteer-extra-plugin-stealth": "^2.11.2",
"react": "19.1.0",
"react-dom": "19.1.0",
"undici": "^7.16.0",
"zod": "^4.1.12",
},
"devDependencies": {
@ -113,23 +114,23 @@
"@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
"@next/env": ["@next/env@15.5.6", "", {}, "sha512-3qBGRW+sCGzgbpc5TS1a0p7eNxnOarGVQhZxfvTdnV0gFI61lX7QNtQ4V1TSREctXzYn5NetbUsLvyqwLFJM6Q=="],
"@next/env": ["@next/env@15.5.7", "https://registry.npmmirror.com/@next/env/-/env-15.5.7.tgz", {}, "sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg=="],
"@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.5.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ES3nRz7N+L5Umz4KoGfZ4XX6gwHplwPhioVRc25+QNsDa7RtUF/z8wJcbuQ2Tffm5RZwuN2A063eapoJ1u4nPg=="],
"@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.5.7", "https://registry.npmmirror.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz", { "os": "darwin", "cpu": "arm64" }, "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw=="],
"@next/swc-darwin-x64": ["@next/swc-darwin-x64@15.5.6", "", { "os": "darwin", "cpu": "x64" }, "sha512-JIGcytAyk9LQp2/nuVZPAtj8uaJ/zZhsKOASTjxDug0SPU9LAM3wy6nPU735M1OqacR4U20LHVF5v5Wnl9ptTA=="],
"@next/swc-darwin-x64": ["@next/swc-darwin-x64@15.5.7", "https://registry.npmmirror.com/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz", { "os": "darwin", "cpu": "x64" }, "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg=="],
"@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@15.5.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-qvz4SVKQ0P3/Im9zcS2RmfFL/UCQnsJKJwQSkissbngnB/12c6bZTCB0gHTexz1s6d/mD0+egPKXAIRFVS7hQg=="],
"@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@15.5.7", "https://registry.npmmirror.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz", { "os": "linux", "cpu": "arm64" }, "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA=="],
"@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@15.5.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-FsbGVw3SJz1hZlvnWD+T6GFgV9/NYDeLTNQB2MXoPN5u9VA9OEDy6fJEfePfsUKAhJufFbZLgp0cPxMuV6SV0w=="],
"@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@15.5.7", "https://registry.npmmirror.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz", { "os": "linux", "cpu": "arm64" }, "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw=="],
"@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@15.5.6", "", { "os": "linux", "cpu": "x64" }, "sha512-3QnHGFWlnvAgyxFxt2Ny8PTpXtQD7kVEeaFat5oPAHHI192WKYB+VIKZijtHLGdBBvc16tiAkPTDmQNOQ0dyrA=="],
"@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@15.5.7", "https://registry.npmmirror.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz", { "os": "linux", "cpu": "x64" }, "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw=="],
"@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@15.5.6", "", { "os": "linux", "cpu": "x64" }, "sha512-OsGX148sL+TqMK9YFaPFPoIaJKbFJJxFzkXZljIgA9hjMjdruKht6xDCEv1HLtlLNfkx3c5w2GLKhj7veBQizQ=="],
"@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@15.5.7", "https://registry.npmmirror.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz", { "os": "linux", "cpu": "x64" }, "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA=="],
"@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@15.5.6", "", { "os": "win32", "cpu": "arm64" }, "sha512-ONOMrqWxdzXDJNh2n60H6gGyKed42Ieu6UTVPZteXpuKbLZTH4G4eBMsr5qWgOBA+s7F+uB4OJbZnrkEDnZ5Fg=="],
"@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@15.5.7", "https://registry.npmmirror.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz", { "os": "win32", "cpu": "arm64" }, "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ=="],
"@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.5.6", "", { "os": "win32", "cpu": "x64" }, "sha512-pxK4VIjFRx1MY92UycLOOw7dTdvccWsNETQ0kDHkBlcFH1GrTLUjSiHU1ohrznnux6TqRHgv5oflhfIWZwVROQ=="],
"@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.5.7", "https://registry.npmmirror.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz", { "os": "win32", "cpu": "x64" }, "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw=="],
"@prisma/client": ["@prisma/client@6.17.1", "", { "peerDependencies": { "prisma": "*", "typescript": ">=5.1.0" }, "optionalPeers": ["prisma", "typescript"] }, "sha512-zL58jbLzYamjnNnmNA51IOZdbk5ci03KviXCuB0Tydc9btH2kDWsi1pQm2VecviRTM7jGia0OPPkgpGnT3nKvw=="],
@ -503,7 +504,7 @@
"neo-async": ["neo-async@2.6.2", "", {}, "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="],
"next": ["next@15.5.6", "", { "dependencies": { "@next/env": "15.5.6", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.5.6", "@next/swc-darwin-x64": "15.5.6", "@next/swc-linux-arm64-gnu": "15.5.6", "@next/swc-linux-arm64-musl": "15.5.6", "@next/swc-linux-x64-gnu": "15.5.6", "@next/swc-linux-x64-musl": "15.5.6", "@next/swc-win32-arm64-msvc": "15.5.6", "@next/swc-win32-x64-msvc": "15.5.6", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-zTxsnI3LQo3c9HSdSf91O1jMNsEzIXDShXd4wVdg9y5shwLqBXi4ZtUUJyB86KGVSJLZx0PFONvO54aheGX8QQ=="],
"next": ["next@15.5.7", "https://registry.npmmirror.com/next/-/next-15.5.7.tgz", { "dependencies": { "@next/env": "15.5.7", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.5.7", "@next/swc-darwin-x64": "15.5.7", "@next/swc-linux-arm64-gnu": "15.5.7", "@next/swc-linux-arm64-musl": "15.5.7", "@next/swc-linux-x64-gnu": "15.5.7", "@next/swc-linux-x64-musl": "15.5.7", "@next/swc-win32-arm64-msvc": "15.5.7", "@next/swc-win32-x64-msvc": "15.5.7", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ=="],
"node-fetch-native": ["node-fetch-native@1.6.7", "", {}, "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q=="],
@ -631,6 +632,8 @@
"typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
"undici": ["undici@7.16.0", "https://registry.npmmirror.com/undici/-/undici-7.16.0.tgz", {}, "sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g=="],
"undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
"universalify": ["universalify@2.0.1", "", {}, "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="],

18
fix-asset-urls.ts
View File

@ -1,12 +1,12 @@
// scripts/fix-asset-urls.ts
import { PrismaClient } from '@prisma/client';
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
const FROM = 'douyin-archive/';
const TO = '';
const FROM = "douyin-archive/";
const TO = "";
function escapeForPgRegex(s: string) {
return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
const FROM_RE = `^${escapeForPgRegex(FROM)}`; // 只替换“以旧前缀开头”的字符串
const dryRun = false; // true: 只统计，不修改
@ -121,12 +121,14 @@ async function main() {
SELECT 'Video.video_url', video_url FROM "Video" WHERE video_url LIKE '${TO}%' LIMIT 2
)
`);
console.log('Sample after update:', sample);
console.log("Sample after update:", sample);
}
main().catch((e) => {
main()
.catch((e) => {
console.error(e);
process.exit(1);
}).finally(async () => {
})
.finally(async () => {
await prisma.$disconnect();
});
});

4
global.d.ts vendored
View File

@ -1,9 +1,9 @@
declare module '*.md' {
declare module "*.md" {
const content: string;
export default content;
}
declare module '*.txt' {
declare module "*.txt" {
const content: string;
export default content;
}

9
lib/json.ts
View File

@ -1,10 +1,13 @@
// lib/json.ts
export function json(data: unknown, init?: ResponseInit) {
return new Response(
JSON.stringify(data, (_k, v) => (typeof v === 'bigint' ? v.toString() : v)),
JSON.stringify(data, (_k, v) => (typeof v === "bigint" ? v.toString() : v)),
{
...init,
headers: { 'content-type': 'application/json; charset=utf-8', ...(init?.headers || {}) },
}
headers: {
"content-type": "application/json; charset=utf-8",
...(init?.headers || {}),
},
},
);
}

64
lib/minio-examples.ts
View File

@ -14,7 +14,7 @@ import {
downloadFile,
fileExists,
getFileInfo,
} from './minio';
} from "./minio";
// ========================================
// 1. 上传文件示例
@ -25,15 +25,15 @@ import {
*/
async function uploadAvatar(file: File, userId: string) {
// 验证文件类型
const allowedTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
const allowedTypes = ["jpg", "jpeg", "png", "gif", "webp"];
if (!validateFileType(file.name, allowedTypes)) {
throw new Error('不支持的图片格式');
throw new Error("不支持的图片格式");
}
// 验证文件大小（5MB）
const maxSize = 5 * 1024 * 1024;
if (!validateFileSize(file.size, maxSize)) {
throw new Error('文件大小超过限制（最大5MB）');
throw new Error("文件大小超过限制（最大5MB）");
}
// 生成唯一文件名，存储在 avatars 目录下
@ -41,8 +41,8 @@ async function uploadAvatar(file: File, userId: string) {
// 上传文件
const url = await uploadFile(file, path, {
'Content-Type': file.type,
'User-Id': userId,
"Content-Type": file.type,
"User-Id": userId,
});
return { url, path };
@ -52,24 +52,24 @@ async function uploadAvatar(file: File, userId: string) {
* 上传文章封面图
*/
async function uploadPostCover(file: File, postId: string) {
const allowedTypes = ['jpg', 'jpeg', 'png', 'webp'];
const allowedTypes = ["jpg", "jpeg", "png", "webp"];
if (!validateFileType(file.name, allowedTypes)) {
throw new Error('不支持的图片格式');
throw new Error("不支持的图片格式");
}
const maxSize = 10 * 1024 * 1024; // 10MB
if (!validateFileSize(file.size, maxSize)) {
throw new Error('文件大小超过限制（最大10MB）');
throw new Error("文件大小超过限制（最大10MB）");
}
// 按日期组织文件
const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, "0");
const path = generateUniqueFileName(
file.name,
`posts/${year}/${month}/covers`
`posts/${year}/${month}/covers`,
);
const url = await uploadFile(file, path);
@ -81,23 +81,23 @@ async function uploadPostCover(file: File, postId: string) {
* 上传文章内容中的图片
*/
async function uploadPostImage(file: File, postId: string) {
const allowedTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
const allowedTypes = ["jpg", "jpeg", "png", "gif", "webp"];
if (!validateFileType(file.name, allowedTypes)) {
throw new Error('不支持的图片格式');
throw new Error("不支持的图片格式");
}
const maxSize = 5 * 1024 * 1024; // 5MB
if (!validateFileSize(file.size, maxSize)) {
throw new Error('文件大小超过限制（最大5MB）');
throw new Error("文件大小超过限制（最大5MB）");
}
const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, "0");
const path = generateUniqueFileName(
file.name,
`posts/${year}/${month}/images`
`posts/${year}/${month}/images`,
);
const url = await uploadFile(file, path);
@ -126,9 +126,9 @@ function getPublicFileUrl(path: string) {
async function deleteAvatar(avatarPath: string) {
try {
await deleteFile(avatarPath);
console.log('头像删除成功');
console.log("头像删除成功");
} catch (error) {
console.error('删除头像失败:', error);
console.error("删除头像失败:", error);
throw error;
}
}
@ -142,20 +142,20 @@ async function deletePostImages(postId: string) {
const files = await listFiles(`posts/`, true);
// 过滤出该文章的图片（根据实际情况调整逻辑）
const postFiles = files.filter(file =>
file.name?.includes(postId)
);
const postFiles = files.filter((file) => file.name?.includes(postId));
// 批量删除
const paths = postFiles.map(f => f.name).filter((name): name is string => !!name);
const paths = postFiles
.map((f) => f.name)
.filter((name): name is string => !!name);
if (paths.length > 0) {
const { deleteFiles } = await import('./minio');
const { deleteFiles } = await import("./minio");
await deleteFiles(paths);
console.log(`删除了 ${paths.length} 个文件`);
}
} catch (error) {
console.error('删除文章图片失败:', error);
console.error("删除文章图片失败:", error);
throw error;
}
}
@ -171,14 +171,14 @@ async function getUserAvatars(userId: string) {
try {
const files = await listFiles(`avatars/${userId}/`, false);
return files.map(file => ({
return files.map((file) => ({
name: file.name,
size: file.size,
lastModified: file.lastModified,
url: file.name ? getFileUrl(file.name) : null,
}));
} catch (error) {
console.error('获取用户头像列表失败:', error);
console.error("获取用户头像列表失败:", error);
throw error;
}
}
@ -188,16 +188,16 @@ async function getUserAvatars(userId: string) {
*/
async function getPostCoversByMonth(year: number, month: number) {
try {
const monthStr = String(month).padStart(2, '0');
const monthStr = String(month).padStart(2, "0");
const files = await listFiles(`posts/${year}/${monthStr}/covers/`, false);
return files.map(file => ({
return files.map((file) => ({
name: file.name,
size: file.size,
url: file.name ? getFileUrl(file.name) : null,
}));
} catch (error) {
console.error('获取封面列表失败:', error);
console.error("获取封面列表失败:", error);
throw error;
}
}
@ -228,10 +228,10 @@ async function getFileDetails(path: string) {
size: info.size,
lastModified: info.lastModified,
etag: info.etag,
contentType: info.metaData?.['content-type'],
contentType: info.metaData?.["content-type"],
};
} catch (error) {
console.error('获取文件信息失败:', error);
console.error("获取文件信息失败:", error);
throw error;
}
}
@ -247,7 +247,7 @@ async function downloadFileToBuffer(path: string): Promise<Buffer> {
try {
return await downloadFile(path);
} catch (error) {
console.error('下载文件失败:', error);
console.error("下载文件失败:", error);
throw error;
}
}

117
lib/minio.ts
View File

@ -1,22 +1,22 @@
import * as Minio from 'minio';
import * as Minio from "minio";
// MinIO 客户端配置
const useSSL = process.env.MINIO_USE_SSL === 'true';
const useSSL = process.env.MINIO_USE_SSL === "true";
const port = Number(process.env.MINIO_PORT) || 9000;
// 当使用标准HTTPS端口（443）或HTTP端口（80）时，MinIO客户端不需要指定端口
const shouldOmitPort = (useSSL && port === 443) || (!useSSL && port === 80);
const minioClient = new Minio.Client({
endPoint: process.env.MINIO_ENDPOINT || 'localhost',
endPoint: process.env.MINIO_ENDPOINT || "localhost",
...(shouldOmitPort ? {} : { port }),
useSSL,
accessKey: process.env.MINIO_ACCESS_KEY || '',
secretKey: process.env.MINIO_SECRET_KEY || '',
accessKey: process.env.MINIO_ACCESS_KEY || "",
secretKey: process.env.MINIO_SECRET_KEY || "",
pathStyle: true, // 使用路径风格，对反向代理更友好
});
const BUCKET_NAME = process.env.MINIO_BUCKET_NAME || 'home-page';
const BUCKET_NAME = process.env.MINIO_BUCKET_NAME || "home-page";
/**
* 初始化 MinIO Bucket（确保 bucket 存在）
@ -25,30 +25,28 @@ export async function initBucket(): Promise<void> {
try {
const exists = await minioClient.bucketExists(BUCKET_NAME);
if (!exists) {
await minioClient.makeBucket(BUCKET_NAME, 'us-east-1');
await minioClient.makeBucket(BUCKET_NAME, "us-east-1");
console.log(`Bucket ${BUCKET_NAME} created successfully`);
}
// 设置公共读取策略（可选）
const policy = {
Version: '2012-10-17',
Version: "2012-10-17",
Statement: [
{
Effect: 'Allow',
Principal: { AWS: ['*'] },
Action: ['s3:GetObject'],
Effect: "Allow",
Principal: { AWS: ["*"] },
Action: ["s3:GetObject"],
Resource: [`arn:aws:s3:::${BUCKET_NAME}/*`],
},
],
};
await minioClient.setBucketPolicy(BUCKET_NAME, JSON.stringify(policy));
} catch (error) {
console.error('Error initializing bucket:', error);
console.error("Error initializing bucket:", error);
throw error;
}
}
/**
* 上传文件到 MinIO
* @param file - File 对象或 Buffer
@ -59,7 +57,7 @@ export async function initBucket(): Promise<void> {
export async function uploadFile(
file: File | Buffer,
path: string,
metadata?: Record<string, string>
metadata?: Record<string, string>,
): Promise<string> {
try {
await initBucket();
@ -69,27 +67,32 @@ export async function uploadFile(
if (file instanceof File) {
buffer = Buffer.from(await file.arrayBuffer());
contentType = file.type || 'application/octet-stream';
contentType = file.type || "application/octet-stream";
} else {
buffer = file;
contentType = metadata?.['Content-Type'] || 'application/octet-stream';
contentType = metadata?.["Content-Type"] || "application/octet-stream";
}
const metaData = {
'Content-Type': contentType,
"Content-Type": contentType,
...metadata,
};
await minioClient.putObject(BUCKET_NAME, path, buffer, buffer.length, metaData);
await minioClient.putObject(
BUCKET_NAME,
path,
buffer,
buffer.length,
metaData,
);
return path;
} catch (error) {
console.error('Error uploading file:', error);
console.error("Error uploading file:", error);
throw error;
}
}
/**
* 获取文件的公共访问URL
* @param path - 文件路径
@ -112,12 +115,12 @@ export async function downloadFile(path: string): Promise<Buffer> {
const stream = await minioClient.getObject(BUCKET_NAME, path);
return new Promise((resolve, reject) => {
stream.on('data', (chunk) => chunks.push(chunk));
stream.on('end', () => resolve(Buffer.concat(chunks)));
stream.on('error', reject);
stream.on("data", (chunk) => chunks.push(chunk));
stream.on("end", () => resolve(Buffer.concat(chunks)));
stream.on("error", reject);
});
} catch (error) {
console.error('Error downloading file:', error);
console.error("Error downloading file:", error);
throw error;
}
}
@ -127,11 +130,13 @@ export async function downloadFile(path: string): Promise<Buffer> {
* @param path - 文件路径
* @returns 文件流
*/
export async function getFileStream(path: string): Promise<NodeJS.ReadableStream> {
export async function getFileStream(
path: string,
): Promise<NodeJS.ReadableStream> {
try {
return await minioClient.getObject(BUCKET_NAME, path);
} catch (error) {
console.error('Error getting file stream:', error);
console.error("Error getting file stream:", error);
throw error;
}
}
@ -144,7 +149,7 @@ export async function deleteFile(path: string): Promise<void> {
try {
await minioClient.removeObject(BUCKET_NAME, path);
} catch (error) {
console.error('Error deleting file:', error);
console.error("Error deleting file:", error);
throw error;
}
}
@ -157,7 +162,7 @@ export async function deleteFiles(paths: string[]): Promise<void> {
try {
await minioClient.removeObjects(BUCKET_NAME, paths);
} catch (error) {
console.error('Error deleting files:', error);
console.error("Error deleting files:", error);
throw error;
}
}
@ -185,7 +190,7 @@ export async function getFileInfo(path: string): Promise<Minio.BucketItemStat> {
try {
return await minioClient.statObject(BUCKET_NAME, path);
} catch (error) {
console.error('Error getting file info:', error);
console.error("Error getting file info:", error);
throw error;
}
}
@ -197,24 +202,27 @@ export async function getFileInfo(path: string): Promise<Minio.BucketItemStat> {
* @returns 文件列表
*/
export async function listFiles(
prefix: string = '',
recursive: boolean = false
prefix: string = "",
recursive: boolean = false,
): Promise<(Minio.BucketItem & { endpoint: string })[]> {
try {
const files: (Minio.BucketItem & { endpoint: string })[] = [];
const stream = minioClient.listObjects(BUCKET_NAME, prefix, recursive);
return new Promise((resolve, reject) => {
stream.on('data', (obj) => {
stream.on("data", (obj) => {
if (obj.name) {
files.push({ endpoint: `${process.env.MINIO_PUBLIC_DOMAIN}/${BUCKET_NAME}`, ...obj, } as Minio.BucketItem & { endpoint: string });
files.push({
endpoint: `${process.env.MINIO_PUBLIC_DOMAIN}/${BUCKET_NAME}`,
...obj,
} as Minio.BucketItem & { endpoint: string });
}
});
stream.on('end', () => resolve(files));
stream.on('error', reject);
stream.on("end", () => resolve(files));
stream.on("error", reject);
});
} catch (error) {
console.error('Error listing files:', error);
console.error("Error listing files:", error);
throw error;
}
}
@ -224,17 +232,20 @@ export async function listFiles(
* @param sourcePath - 源文件路径
* @param destPath - 目标文件路径
*/
export async function copyFile(sourcePath: string, destPath: string): Promise<void> {
export async function copyFile(
sourcePath: string,
destPath: string,
): Promise<void> {
try {
const conds = new Minio.CopyConditions();
await minioClient.copyObject(
BUCKET_NAME,
destPath,
`/${BUCKET_NAME}/${sourcePath}`,
conds
conds,
);
} catch (error) {
console.error('Error copying file:', error);
console.error("Error copying file:", error);
throw error;
}
}
@ -245,15 +256,20 @@ export async function copyFile(sourcePath: string, destPath: string): Promise<vo
* @param prefix - 路径前缀（如: 'avatars/' 或 'posts/2024/'）
* @returns 带路径的唯一文件名
*/
export function generateUniqueFileName(originalName: string, prefix: string = ''): string {
export function generateUniqueFileName(
originalName: string,
prefix: string = "",
): string {
const timestamp = Date.now();
const random = Math.random().toString(36).substring(2, 8);
const ext = originalName.split('.').pop();
const nameWithoutExt = originalName.replace(`.${ext}`, '').replace(/[^a-zA-Z0-9]/g, '_');
const ext = originalName.split(".").pop();
const nameWithoutExt = originalName
.replace(`.${ext}`, "")
.replace(/[^a-zA-Z0-9]/g, "_");
const fileName = `${nameWithoutExt}_${timestamp}_${random}.${ext}`;
return prefix ? `${prefix.replace(/\/$/, '')}/${fileName}` : fileName;
return prefix ? `${prefix.replace(/\/$/, "")}/${fileName}` : fileName;
}
/**
@ -262,7 +278,7 @@ export function generateUniqueFileName(originalName: string, prefix: string = ''
* @returns 扩展名（不含点）
*/
export function getFileExtension(filename: string): string {
return filename.split('.').pop() || '';
return filename.split(".").pop() || "";
}
/**
@ -271,9 +287,12 @@ export function getFileExtension(filename: string): string {
* @param allowedTypes - 允许的扩展名数组（如: ['jpg', 'png', 'gif']）
* @returns 是否为允许的类型
*/
export function validateFileType(filename: string, allowedTypes: string[]): boolean {
export function validateFileType(
filename: string,
allowedTypes: string[],
): boolean {
const ext = getFileExtension(filename).toLowerCase();
return allowedTypes.map(t => t.toLowerCase()).includes(ext);
return allowedTypes.map((t) => t.toLowerCase()).includes(ext);
}
/**
@ -292,10 +311,10 @@ export function validateFileSize(size: number, maxSize: number): boolean {
* @returns 格式化后的文件大小
*/
export function formatFileSize(bytes: number): string {
if (bytes === 0) return '0 B';
if (bytes === 0) return "0 B";
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
const sizes = ["B", "KB", "MB", "GB", "TB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;

10
lib/prisma.ts
View File

@ -1,9 +1,9 @@
import { PrismaClient } from '@prisma/client'
import { PrismaClient } from "@prisma/client";
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined
}
prisma: PrismaClient | undefined;
};
export const prisma = globalForPrisma.prisma ?? new PrismaClient()
export const prisma = globalForPrisma.prisma ?? new PrismaClient();
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

22
next.config.ts
View File

@ -2,27 +2,29 @@ import type { NextConfig } from "next";
const nextConfig: NextConfig = {
serverExternalPackages: [
'playwright-extra',
'puppeteer-extra-plugin-stealth',
'puppeteer-extra-plugin',
], webpack: (config) => {
"playwright-extra",
"puppeteer-extra-plugin-stealth",
"puppeteer-extra-plugin",
],
webpack: (config) => {
config.module.rules.push({
test: /\.(md|txt)$/i,
type: 'asset/source', // 让这些文件作为纯文本注入
type: "asset/source", // 让这些文件作为纯文本注入
});
return config;
}, turbopack: {
},
turbopack: {
rules: {
'*.md': { loaders: ['raw-loader'], as: '*.js' },
'*.txt': { loaders: ['raw-loader'], as: '*.js' },
"*.md": { loaders: ["raw-loader"], as: "*.js" },
"*.txt": { loaders: ["raw-loader"], as: "*.js" },
},
},
/* config options here */
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 's3l.xn--876a.net',
protocol: "https",
hostname: "s3l.xn--876a.net",
},
],
},

2
package.json
View File

@ -14,7 +14,7 @@
"chalk": "^5.6.2",
"lucide-react": "^0.546.0",
"minio": "^8.0.6",
"next": "15.5.6",
"next": "15.5.7",
"openai": "^6.7.0",
"playwright": "1.56.1",
"playwright-extra": "^4.3.6",

30
pm2.config.cjs
View File

@ -1,37 +1,39 @@
const path = require('path');
const dotenv = require('dotenv');
const path = require("path");
const dotenv = require("dotenv");
const instances = Number.parseInt(process.env.WEB_CONCURRENCY ?? '1', 10) || 1;
const { parsed: envFromFile = {} } = dotenv.config({ path: path.join(__dirname, '.env') });
const instances = Number.parseInt(process.env.WEB_CONCURRENCY ?? "1", 10) || 1;
const { parsed: envFromFile = {} } = dotenv.config({
path: path.join(__dirname, ".env"),
});
module.exports = {
apps: [
{
name: "DouyinArchive",
script: 'npm',
args: 'run start',
script: "npm",
args: "run start",
cwd: __dirname,
autorestart: true,
restart_delay: 4000,
kill_timeout: 5000,
instances,
exec_mode: instances > 1 ? 'cluster' : 'fork',
exec_mode: instances > 1 ? "cluster" : "fork",
// 注意：不要在生产环境 watch，否则 Next.js 写入 .next 会触发重启风暴，导致 Playwright 进程被提前关闭
watch: false,
ignore_watch: ['.next', '.turbo', 'generated', 'node_modules', '.git'],
ignore_watch: [".next", ".turbo", "generated", "node_modules", ".git"],
env: {
// 明确开发环境可选项（如需）
NODE_ENV: process.env.NODE_ENV || 'development',
NODE_ENV: process.env.NODE_ENV || "development",
...envFromFile,
},
env_production: {
// 关键：确保应用进程中的 NODE_ENV=production，从而禁用 Next.js 的开发特性
NODE_ENV: 'production',
NODE_ENV: "production",
// 为避免多个实例同时拉起共享浏览器，默认单实例；如需并发，请改为独立浏览器服务
WEB_CONCURRENCY: '1',
WEB_CONCURRENCY: "1",
...envFromFile,
},
time: true
}
]
time: true,
},
],
};

2
test.ts
View File

@ -1,4 +1,4 @@
import { createWriteStream, writeFileSync } from "node:fs";
import { initBucket } from "./lib/minio";
initBucket()
initBucket();

8
tsconfig.json
View File

@ -22,6 +22,12 @@
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/aweme/[awemeId]/types.ts"],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"app/aweme/[awemeId]/types.ts"
],
"exclude": ["node_modules"]
}