feat: 播放页按来源列表切换，新增作者/搜索/hashtag 侧栏
- 播放上下文：作品链接带上来源（搜索、标签、作者、hashtag），上一条/下一条 在该列表内移动；当前作品不在列表中时退回全部作品的发布时间顺序 - 顶部提示标签显示当前列表与位置，点击打开侧栏列表，✕ 退出 - 侧栏改为「评论 | TA的作品 | 搜索结果/#hashtag」标签页，作品封面网格可就地切换 - 作者模式：打开「TA的作品」进入，关闭侧栏不退出，点提示 ✕ 后回到原来的列表 - 从搜索结果进入或点 hashtag 时自动打开对应列表 - 描述中的 hashtag 可点击，按完整 hashtag 精确匹配（#丰川祥子 不含 #丰川祥子cos） - 新增 /api/playlist；搜索 SQL 抽到 lib/search-query.ts 与播放页共用，保证顺序一致 - 移动端：底部抽屉、点作品后收起，媒体区支持上下滑切换 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,21 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { json } from "@/lib/json";
|
||||
import { parsePlaybackContext } from "@/lib/playback-context";
|
||||
import { contextItems } from "@/lib/playback-context.server";
|
||||
|
||||
// 按播放上下文的顺序列出作品，供播放页侧栏的网格使用。
|
||||
// 参数与 /aweme/<id> 上的上下文参数相同：?ctx=search&q=…、?ctx=hashtag&hashtag=…、?ctx=author&author=… 等。
|
||||
export async function GET(req: Request) {
|
||||
const ctx = parsePlaybackContext(new URL(req.url).searchParams);
|
||||
if (!ctx) {
|
||||
return NextResponse.json({ error: "Invalid context" }, { status: 400 });
|
||||
}
|
||||
try {
|
||||
return json(await contextItems(ctx));
|
||||
} catch (err) {
|
||||
console.error("Playlist error:", err);
|
||||
return NextResponse.json({ error: "Playlist failed" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
+7
-90
@@ -2,26 +2,10 @@ import { NextResponse } from "next/server";
|
||||
import { json } from "@/lib/json";
|
||||
import { getFileUrl } from "@/lib/minio";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import {
|
||||
buildSnippet,
|
||||
highlightAll,
|
||||
parseSearchQuery,
|
||||
termToPgPattern,
|
||||
} from "@/lib/search";
|
||||
import { buildSnippet, highlightAll, parseSearchQuery } from "@/lib/search";
|
||||
import { searchRows } from "@/lib/search-query";
|
||||
import { isVideoContentTag } from "@/lib/video-tags";
|
||||
|
||||
type SearchRow = {
|
||||
awemeId: string;
|
||||
type: "video" | "image";
|
||||
score: number;
|
||||
inDesc: boolean;
|
||||
inTranscript: boolean;
|
||||
rawDesc: string;
|
||||
rawTranscript: string;
|
||||
contentTags: string[];
|
||||
total: number;
|
||||
};
|
||||
|
||||
export async function GET(req: Request) {
|
||||
const { searchParams } = new URL(req.url);
|
||||
const q = (searchParams.get("q") || "").trim();
|
||||
@@ -43,79 +27,12 @@ export async function GET(req: Request) {
|
||||
return json({ results: [], total: 0, page, limit, terms });
|
||||
}
|
||||
|
||||
// 关键词已在 parseSearchQuery 里转为小写，这里转成正则后与 lower() 后的文本匹配
|
||||
const patterns = terms.map(termToPgPattern);
|
||||
const excludePatterns = excludes.map(termToPgPattern);
|
||||
|
||||
try {
|
||||
// 子串匹配：每个关键词都必须出现在「描述 + 语音转写」里（不区分大小写），
|
||||
// 不依赖分词，所以输入任意片段都能搜到。数据量小，全表扫描足够快。
|
||||
// 打分：描述命中权重更高，按出现次数累加（设上限防止长转写刷分）；同分按发布时间倒序。
|
||||
// 没有关键词、只按标签筛选时，score 都是 0，等价于按时间排序。
|
||||
const rows = await prisma.$queryRaw<SearchRow[]>`
|
||||
WITH params AS (
|
||||
SELECT ${patterns}::text[] AS terms, ${excludePatterns}::text[] AS excludes
|
||||
),
|
||||
docs AS (
|
||||
SELECT
|
||||
v.aweme_id AS "awemeId",
|
||||
'video'::text AS type,
|
||||
v."desc" AS "rawDesc",
|
||||
COALESCE(array_to_string(vt.transcript, E'\n'), '') AS "rawTranscript",
|
||||
v.created_at AS created,
|
||||
v.manual_content_tags AS "contentTags"
|
||||
FROM "Video" v
|
||||
LEFT JOIN "VideoTranscript" vt ON vt."videoId" = v.aweme_id
|
||||
WHERE ${contentTag}::text IS NULL
|
||||
OR v.manual_content_tags @> ARRAY[${contentTag}]::text[]
|
||||
|
||||
UNION ALL
|
||||
|
||||
SELECT
|
||||
ip.aweme_id,
|
||||
'image'::text,
|
||||
ip."desc",
|
||||
'',
|
||||
ip.created_at,
|
||||
ARRAY[]::text[]
|
||||
FROM "ImagePost" ip
|
||||
WHERE ${contentTag}::text IS NULL
|
||||
),
|
||||
lowered AS (
|
||||
SELECT docs.*, lower(docs."rawDesc") AS d, lower(docs."rawTranscript") AS t
|
||||
FROM docs
|
||||
),
|
||||
matched AS (
|
||||
SELECT
|
||||
l.*,
|
||||
COALESCE((
|
||||
SELECT SUM(
|
||||
4 * LEAST(regexp_count(l.d, term), 3)
|
||||
+ LEAST(regexp_count(l.t, term), 10)
|
||||
)
|
||||
FROM unnest(p.terms) term
|
||||
), 0)::float8 AS score,
|
||||
EXISTS (SELECT 1 FROM unnest(p.terms) term WHERE l.d ~ term) AS "inDesc",
|
||||
EXISTS (SELECT 1 FROM unnest(p.terms) term WHERE l.t ~ term) AS "inTranscript"
|
||||
FROM lowered l, params p
|
||||
WHERE NOT EXISTS (
|
||||
SELECT 1 FROM unnest(p.terms) term
|
||||
WHERE l.d !~ term AND l.t !~ term
|
||||
)
|
||||
AND NOT EXISTS (
|
||||
SELECT 1 FROM unnest(p.excludes) x
|
||||
WHERE l.d ~ x OR l.t ~ x
|
||||
)
|
||||
)
|
||||
SELECT
|
||||
"awemeId", type, score, "inDesc", "inTranscript",
|
||||
"rawDesc", "rawTranscript", "contentTags",
|
||||
(COUNT(*) OVER ())::int AS total
|
||||
FROM matched
|
||||
ORDER BY score DESC, created DESC, "awemeId"
|
||||
OFFSET ${offset}
|
||||
LIMIT ${limit};
|
||||
`;
|
||||
const rows = await searchRows(
|
||||
{ terms, excludes, contentTag },
|
||||
offset,
|
||||
limit,
|
||||
);
|
||||
|
||||
const videoIds = rows
|
||||
.filter((r) => r.type === "video")
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { getFileUrl } from "@/lib/minio";
|
||||
import { playbackContextQuery } from "@/lib/playback-context";
|
||||
import FeedMasonry from "@/app/components/FeedMasonry";
|
||||
import BackButton from "@/app/components/BackButton";
|
||||
import { FeedItem } from "@/app/types/feed";
|
||||
@@ -147,6 +148,7 @@ export default async function AuthorPage({
|
||||
initialItems={initialItems}
|
||||
initialCursor={initialCursor}
|
||||
fetchUrl={`/api/author/${secUid}/feed`}
|
||||
linkQuery={playbackContextQuery({ kind: "author", secUid })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+249
-22
@@ -10,32 +10,49 @@ import {
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import {
|
||||
awemeHref,
|
||||
type PlaylistItem,
|
||||
playbackContextQuery,
|
||||
} from "@/lib/playback-context";
|
||||
import { AuthorWorksTab } from "./components/AuthorWorksTab";
|
||||
import { BackgroundCanvas } from "./components/BackgroundCanvas";
|
||||
import { CommentPanel } from "./components/CommentPanel";
|
||||
import { ContextChip } from "./components/ContextChip";
|
||||
import { ContextListTab } from "./components/ContextListTab";
|
||||
import { ImageCarousel } from "./components/ImageCarousel";
|
||||
import { ImageNavigationButtons } from "./components/ImageNavigationButtons";
|
||||
import { MediaControls } from "./components/MediaControls";
|
||||
import { NavigationButtons } from "./components/NavigationButtons";
|
||||
import { SidePanel } from "./components/SidePanel";
|
||||
import { TranscriptPanel } from "./components/TranscriptPanel";
|
||||
import { VideoPlayer } from "./components/VideoPlayer";
|
||||
import { VideoTagEditor } from "./components/VideoTagEditor";
|
||||
import { useBackgroundCanvas } from "./hooks/useBackgroundCanvas";
|
||||
import { useCommentState } from "./hooks/useCommentState";
|
||||
import { useImageCarousel } from "./hooks/useImageCarousel";
|
||||
import { useNavigation } from "./hooks/useNavigation";
|
||||
import { usePlayerState } from "./hooks/usePlayerState";
|
||||
import { usePlaylist } from "./hooks/usePlaylist";
|
||||
import {
|
||||
isPortraitViewport,
|
||||
useSidePanelState,
|
||||
} from "./hooks/useSidePanelState";
|
||||
import { useVideoPlayer } from "./hooks/useVideoPlayer";
|
||||
import type {
|
||||
AbLoop,
|
||||
AwemeData,
|
||||
ImageData,
|
||||
Neighbors,
|
||||
PlaybackContextInfo,
|
||||
VideoData,
|
||||
VideoTranscript,
|
||||
} from "./types.ts";
|
||||
|
||||
const SEGMENT_MS = 4000;
|
||||
|
||||
// 每个搜索 / hashtag 列表只在第一次进入时自动打开侧栏，之后尊重你自己的开关
|
||||
const LIST_AUTO_OPENED_KEY = "aweme_player_list_auto_opened";
|
||||
|
||||
type WebkitVideoElement = HTMLVideoElement & {
|
||||
webkitEnterFullscreen?: () => void;
|
||||
};
|
||||
@@ -52,13 +69,22 @@ type MediaSessionWithPositionState = MediaSession & {
|
||||
|
||||
interface AwemeDetailClientProps {
|
||||
data: AwemeData;
|
||||
/** 服务端按 URL 上的播放上下文算出的上一条/下一条 */
|
||||
neighbors: Neighbors;
|
||||
/** URL 上的上下文（搜索/标签/作者）生效时的提示信息 */
|
||||
playbackContext: PlaybackContextInfo | null;
|
||||
/** URL 上原本的上下文查询串，作者模式下跳转时原样带上 */
|
||||
contextQuery: string;
|
||||
authorWorksCount: number;
|
||||
transcript: VideoTranscript | null;
|
||||
}
|
||||
|
||||
export default function AwemeDetailClient({
|
||||
data,
|
||||
neighbors,
|
||||
neighbors: serverNeighbors,
|
||||
playbackContext,
|
||||
contextQuery,
|
||||
authorWorksCount,
|
||||
transcript,
|
||||
}: AwemeDetailClientProps): ReactElement {
|
||||
const router = useRouter();
|
||||
@@ -66,7 +92,59 @@ export default function AwemeDetailClient({
|
||||
|
||||
// 状态管理
|
||||
const playerState = usePlayerState();
|
||||
const commentState = useCommentState();
|
||||
const panel = useSidePanelState(data.author.sec_uid);
|
||||
// 搜索 / hashtag / 标签上下文才有「列表」标签页（作者上下文和「TA的作品」重复）
|
||||
const listContext =
|
||||
playbackContext && playbackContext.kind !== "author"
|
||||
? playbackContext
|
||||
: null;
|
||||
const activeTab =
|
||||
panel.tab === "list" && !listContext ? "comments" : panel.tab;
|
||||
const authorQuery = data.author.sec_uid
|
||||
? playbackContextQuery({ kind: "author", secUid: data.author.sec_uid })
|
||||
: "";
|
||||
const authorWorks = usePlaylist(
|
||||
authorQuery,
|
||||
panel.authorMode || (panel.open && activeTab === "works"),
|
||||
);
|
||||
const contextList = usePlaylist(
|
||||
listContext ? contextQuery : "",
|
||||
panel.open && activeTab === "list",
|
||||
);
|
||||
|
||||
// 作者模式（打开「TA的作品」时进入，关掉侧栏不退出）：上下切换在该作者的作品里移动；
|
||||
// 点顶部提示的 ✕ 退出后，回到服务端按 URL 上下文算好的顺序，当前视频不变。
|
||||
const authorPlayback = useMemo(() => {
|
||||
if (!panel.authorMode) return null;
|
||||
const items = authorWorks.items;
|
||||
// 列表还没加载出来时先不让上下切换，避免误按到另一个顺序里
|
||||
if (!items) {
|
||||
return {
|
||||
neighbors: { prev: null, next: null } as Neighbors,
|
||||
position: 0,
|
||||
total: 0,
|
||||
};
|
||||
}
|
||||
const index = items.findIndex((item) => item.aweme_id === data.aweme_id);
|
||||
if (index === -1) return null;
|
||||
const link = (item: PlaylistItem | undefined) =>
|
||||
item
|
||||
? {
|
||||
aweme_id: item.aweme_id,
|
||||
href: awemeHref(item.aweme_id, contextQuery),
|
||||
}
|
||||
: null;
|
||||
return {
|
||||
neighbors: {
|
||||
prev: link(items[index - 1]),
|
||||
next: link(items[index + 1]),
|
||||
} as Neighbors,
|
||||
position: index + 1,
|
||||
total: items.length,
|
||||
};
|
||||
}, [panel.authorMode, authorWorks.items, data.aweme_id, contextQuery]);
|
||||
|
||||
const neighbors = authorPlayback?.neighbors ?? serverNeighbors;
|
||||
const [transcriptOpen, setTranscriptOpen] = useState(false);
|
||||
const [isFastForwarding, setIsFastForwarding] = useState(false);
|
||||
const [abLoop, setAbLoop] = useState<AbLoop>({ a: null, b: null });
|
||||
@@ -328,23 +406,106 @@ export default function AwemeDetailClient({
|
||||
setTranscriptOpen(false);
|
||||
}, []);
|
||||
|
||||
const handleCloseComments = useCallback((): void => {
|
||||
commentState.setOpen(false);
|
||||
}, [commentState.setOpen]);
|
||||
|
||||
const handleToggleComments = useCallback((): void => {
|
||||
commentState.setOpen((v) => !v);
|
||||
}, [commentState.setOpen]);
|
||||
panel.toggle("comments");
|
||||
}, [panel.toggle]);
|
||||
|
||||
const handleAuthorClick = useCallback((): void => {
|
||||
panel.toggle("works");
|
||||
}, [panel.toggle]);
|
||||
|
||||
// 竖屏（底部抽屉）点了作品后关掉抽屉露出视频；顺序不受影响，点顶部提示可以再打开
|
||||
const handleWorkSelect = useCallback((): void => {
|
||||
if (isPortraitViewport()) panel.close();
|
||||
}, [panel.close]);
|
||||
|
||||
const handleExitUrlContext = useCallback((): void => {
|
||||
router.replace(awemeHref(data.aweme_id));
|
||||
}, [data.aweme_id, router]);
|
||||
|
||||
const showWorks = useCallback((): void => {
|
||||
panel.show("works");
|
||||
}, [panel.show]);
|
||||
|
||||
// 退出作者模式：回到 URL 上原来的顺序（搜索 / hashtag / 全部作品）；作品网格还开着的话一并关掉
|
||||
const exitAuthorMode = useCallback((): void => {
|
||||
panel.exitAuthorMode();
|
||||
if (panel.open && panel.tab === "works") panel.close();
|
||||
}, [panel.exitAuthorMode, panel.open, panel.tab, panel.close]);
|
||||
|
||||
const showList = useCallback((): void => {
|
||||
panel.show("list");
|
||||
}, [panel.show]);
|
||||
|
||||
// 点描述里的 hashtag：停在当前视频，上下切换改为在带这个 hashtag 的作品里移动，并打开列表
|
||||
const handleHashtagClick = useCallback(
|
||||
(name: string): void => {
|
||||
panel.exitAuthorMode();
|
||||
router.replace(
|
||||
awemeHref(
|
||||
data.aweme_id,
|
||||
playbackContextQuery({ kind: "hashtag", name }),
|
||||
),
|
||||
{ scroll: false },
|
||||
);
|
||||
},
|
||||
[data.aweme_id, router, panel.exitAuthorMode],
|
||||
);
|
||||
|
||||
// 从搜索结果进来、或点了 hashtag 时自动打开列表标签页
|
||||
const listKind = listContext?.kind;
|
||||
useEffect(() => {
|
||||
if (!panel.restored) return;
|
||||
if (listKind !== "search" && listKind !== "hashtag") return;
|
||||
try {
|
||||
if (sessionStorage.getItem(LIST_AUTO_OPENED_KEY) === contextQuery) return;
|
||||
sessionStorage.setItem(LIST_AUTO_OPENED_KEY, contextQuery);
|
||||
} catch {}
|
||||
panel.show("list");
|
||||
}, [panel.restored, panel.show, listKind, contextQuery]);
|
||||
|
||||
const searchPageHref = useMemo(() => {
|
||||
if (listKind !== "search") return null;
|
||||
const params = new URLSearchParams(contextQuery);
|
||||
params.delete("ctx");
|
||||
return `/search?${params.toString()}`;
|
||||
}, [listKind, contextQuery]);
|
||||
|
||||
const listVisible = panel.open && activeTab === "list";
|
||||
const worksVisible = panel.open && activeTab === "works";
|
||||
|
||||
const chip =
|
||||
authorPlayback && authorPlayback.total > 0
|
||||
? {
|
||||
label: `${data.author.nickname} 的作品`,
|
||||
position: authorPlayback.position,
|
||||
total: authorPlayback.total,
|
||||
// 作品网格没在显示时，点提示可以重新打开
|
||||
onExpand: worksVisible ? undefined : showWorks,
|
||||
expandLabel: "查看TA的作品",
|
||||
onExit: exitAuthorMode,
|
||||
exitLabel: "退出作者模式",
|
||||
}
|
||||
: !panel.authorMode && playbackContext
|
||||
? {
|
||||
...playbackContext,
|
||||
// 列表没在显示时，点提示可以打开侧栏里的完整列表
|
||||
onExpand: listContext && !listVisible ? showList : undefined,
|
||||
expandLabel: `查看${playbackContext.listTitle}`,
|
||||
onExit: handleExitUrlContext,
|
||||
exitLabel: "退出当前列表，按全部作品切换",
|
||||
}
|
||||
: null;
|
||||
|
||||
const handleNavigatePrev = useCallback((): void => {
|
||||
if (neighbors.prev) {
|
||||
router.push(`/aweme/${neighbors.prev.aweme_id}`);
|
||||
router.push(neighbors.prev.href);
|
||||
}
|
||||
}, [neighbors.prev, router]);
|
||||
|
||||
const handleNavigateNext = useCallback((): void => {
|
||||
if (neighbors.next) {
|
||||
router.push(`/aweme/${neighbors.next.aweme_id}`);
|
||||
router.push(neighbors.next.href);
|
||||
}
|
||||
}, [neighbors.next, router]);
|
||||
|
||||
@@ -586,14 +747,14 @@ export default function AwemeDetailClient({
|
||||
if (!isVideo && images?.length > 1) {
|
||||
prevImg();
|
||||
} else if (neighbors.prev) {
|
||||
router.push(`/aweme/${neighbors.prev.aweme_id}`);
|
||||
router.push(neighbors.prev.href);
|
||||
}
|
||||
});
|
||||
ms.setActionHandler("nexttrack", () => {
|
||||
if (!isVideo && images?.length > 1) {
|
||||
nextImg();
|
||||
} else if (neighbors.next) {
|
||||
router.push(`/aweme/${neighbors.next.aweme_id}`);
|
||||
router.push(neighbors.next.href);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -670,9 +831,24 @@ export default function AwemeDetailClient({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 播放上下文提示：上下切换当前在哪个列表里移动 */}
|
||||
{chip && (
|
||||
<ContextChip
|
||||
label={chip.label}
|
||||
position={chip.position}
|
||||
total={chip.total}
|
||||
onExpand={chip.onExpand}
|
||||
expandLabel={chip.expandLabel}
|
||||
onExit={chip.onExit}
|
||||
exitLabel={chip.exitLabel}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 长按 2x 快进状态指示 */}
|
||||
{isFastForwarding && (
|
||||
<div className="pointer-events-none absolute top-4 left-1/2 -translate-x-1/2 z-40">
|
||||
<div
|
||||
className={`pointer-events-none absolute left-1/2 -translate-x-1/2 z-40 ${chip ? "top-24 sm:top-14" : "top-4"}`}
|
||||
>
|
||||
<div className="inline-flex items-center gap-1.5 rounded-full bg-black/65 border border-white/20 px-3.5 py-1.5 text-xs font-medium text-white shadow-lg">
|
||||
<FastForward size={14} className="text-amber-300" />
|
||||
<span>2.0x 快进中</span>
|
||||
@@ -740,6 +916,8 @@ export default function AwemeDetailClient({
|
||||
onLoopModeChange={playerState.setLoopMode}
|
||||
onDownload={handleDownload}
|
||||
onToggleFullscreen={toggleFullscreen}
|
||||
onAuthorClick={handleAuthorClick}
|
||||
onHashtagClick={handleHashtagClick}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -754,14 +932,63 @@ export default function AwemeDetailClient({
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* 评论面板 */}
|
||||
<CommentPanel
|
||||
open={commentState.open}
|
||||
onClose={handleCloseComments}
|
||||
author={data.author}
|
||||
createdAt={data.created_at}
|
||||
awemeId={data.aweme_id}
|
||||
mounted={commentState.mounted}
|
||||
{/* 侧栏：评论 / TA的作品 / 搜索结果（或 hashtag） */}
|
||||
<SidePanel
|
||||
open={panel.open}
|
||||
mounted={panel.mounted}
|
||||
tab={activeTab}
|
||||
onTabChange={panel.selectTab}
|
||||
onClose={panel.close}
|
||||
tabs={[
|
||||
{
|
||||
key: "comments",
|
||||
label: "评论",
|
||||
count: data.commentsCount,
|
||||
content: (
|
||||
<CommentPanel
|
||||
open={panel.open && activeTab === "comments"}
|
||||
author={data.author}
|
||||
createdAt={data.created_at}
|
||||
awemeId={data.aweme_id}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "works",
|
||||
label: "TA的作品",
|
||||
count: authorWorks.items?.length ?? authorWorksCount,
|
||||
content: (
|
||||
<AuthorWorksTab
|
||||
active={worksVisible}
|
||||
author={data.author}
|
||||
works={authorWorks}
|
||||
currentId={data.aweme_id}
|
||||
contextQuery={contextQuery}
|
||||
onSelect={handleWorkSelect}
|
||||
/>
|
||||
),
|
||||
},
|
||||
...(listContext
|
||||
? [
|
||||
{
|
||||
key: "list" as const,
|
||||
label: listContext.listTitle,
|
||||
count: listContext.total,
|
||||
content: (
|
||||
<ContextListTab
|
||||
active={panel.open && activeTab === "list"}
|
||||
context={listContext}
|
||||
list={contextList}
|
||||
currentId={data.aweme_id}
|
||||
contextQuery={contextQuery}
|
||||
searchPageHref={searchPageHref}
|
||||
onSelect={handleWorkSelect}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 转录面板 */}
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { memo } from "react";
|
||||
import type { PlaylistState } from "../hooks/usePlaylist";
|
||||
import type { User } from "../types.ts";
|
||||
import { WorksGrid } from "./WorksGrid";
|
||||
|
||||
interface AuthorWorksTabProps {
|
||||
/** 侧栏打开且停在「TA的作品」标签页 */
|
||||
active: boolean;
|
||||
author: User;
|
||||
works: PlaylistState;
|
||||
currentId: string;
|
||||
/** 跳转时原样带上的播放上下文查询串 */
|
||||
contextQuery: string;
|
||||
onSelect: () => void;
|
||||
}
|
||||
|
||||
// 侧栏「TA的作品」：作者在库里的全部作品。点作品就地切换；点作者名字才去独立的作者页。
|
||||
export const AuthorWorksTab = memo(function AuthorWorksTab({
|
||||
active,
|
||||
author,
|
||||
works,
|
||||
currentId,
|
||||
contextQuery,
|
||||
onSelect,
|
||||
}: AuthorWorksTabProps) {
|
||||
const header = author.sec_uid ? (
|
||||
<Link
|
||||
href={`/author/${author.sec_uid}`}
|
||||
className="group flex min-w-0 flex-1 items-center gap-2.5"
|
||||
title="打开作者主页"
|
||||
>
|
||||
{/* biome-ignore lint/performance/noImgElement: 头像来自对象存储，不走 next/image */}
|
||||
<img
|
||||
src={author.avatar_url ?? ""}
|
||||
alt=""
|
||||
className="h-9 w-9 shrink-0 rounded-full bg-white/10 object-cover"
|
||||
/>
|
||||
<span className="truncate font-semibold text-white group-hover:underline">
|
||||
@{author.nickname}
|
||||
</span>
|
||||
<ChevronRight size={16} className="shrink-0 text-white/60" />
|
||||
<span className="ml-auto shrink-0 text-xs text-white/40">作者主页</span>
|
||||
</Link>
|
||||
) : (
|
||||
<span className="truncate font-semibold text-white">
|
||||
@{author.nickname}
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<WorksGrid
|
||||
active={active}
|
||||
list={works}
|
||||
currentId={currentId}
|
||||
hrefQuery={contextQuery}
|
||||
onSelect={onSelect}
|
||||
singleHint="库里只存了这位作者的这一个作品"
|
||||
header={header}
|
||||
/>
|
||||
);
|
||||
});
|
||||
@@ -1,15 +1,13 @@
|
||||
import { X } from "lucide-react";
|
||||
import { memo, useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { Comment, User } from "../types.ts";
|
||||
import { CommentList } from "./CommentList";
|
||||
|
||||
interface CommentPanelProps {
|
||||
/** 侧栏打开且停在「评论」标签页 */
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
author: User;
|
||||
createdAt: string | Date;
|
||||
awemeId: string;
|
||||
mounted: boolean;
|
||||
}
|
||||
|
||||
interface CommentsApiResponse {
|
||||
@@ -21,16 +19,14 @@ interface CommentsApiResponse {
|
||||
snapshot?: string | number;
|
||||
}
|
||||
|
||||
// 侧栏「评论」标签页的内容（外壳与标签切换在 SidePanel 里）
|
||||
export const CommentPanel = memo(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);
|
||||
const [hasOpened, setHasOpened] = useState(open);
|
||||
@@ -93,7 +89,6 @@ export const CommentPanel = memo(function CommentPanel({
|
||||
return deduped;
|
||||
});
|
||||
|
||||
setTotal(typeof data.total === "number" ? data.total : 0);
|
||||
const nextHasMore = Boolean(data.hasMore);
|
||||
hasMoreRef.current = nextHasMore;
|
||||
setHasMore(nextHasMore);
|
||||
@@ -131,7 +126,6 @@ export const CommentPanel = memo(function CommentPanel({
|
||||
hasMoreRef.current = true;
|
||||
rankParamsRef.current = null;
|
||||
setComments([]);
|
||||
setTotal(0);
|
||||
setHasMore(true);
|
||||
setLoading(false);
|
||||
|
||||
@@ -174,57 +168,29 @@ export const CommentPanel = memo(function CommentPanel({
|
||||
}, [open, hasMore, loadComments]);
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={`
|
||||
z-30 flex flex-col bg-[rgba(22,22,22,0.92)] text-white overflow-hidden
|
||||
fixed inset-x-0 bottom-0 w-full h-[min(80vh,88dvh)] border-t border-white/10
|
||||
landscape:relative landscape:inset-auto landscape:h-full landscape:translate-y-0 landscape:border-t-0
|
||||
${mounted ? "transition-transform landscape:transition-[width] duration-200 ease-out" : ""}
|
||||
${
|
||||
open
|
||||
? "translate-y-0 pointer-events-auto landscape:w-[min(420px,36vw)] landscape:border-l landscape:border-white/10"
|
||||
: "translate-y-full pointer-events-none landscape:w-0 landscape:border-l-0"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center justify-between landscape:flex-row-reverse px-3 py-3 border-b border-white/10 shrink-0">
|
||||
<div className="text-white font-semibold">
|
||||
评论 {total > 0 ? `(${total})` : ""}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="w-8 h-8 inline-flex items-center justify-center rounded-full bg-white/15 text-white/90 border border-white/20 hover:bg-white/25 transition-colors cursor-pointer"
|
||||
onClick={onClose}
|
||||
aria-label="关闭评论"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<div ref={scrollRef} className="p-3 overflow-auto comment-scroll flex-1">
|
||||
{(open || hasOpened) && (
|
||||
<>
|
||||
<CommentList
|
||||
author={author}
|
||||
createdAt={createdAt}
|
||||
comments={comments}
|
||||
/>
|
||||
|
||||
<div ref={scrollRef} className="p-3 overflow-auto comment-scroll flex-1">
|
||||
{(open || hasOpened) && (
|
||||
<>
|
||||
<CommentList
|
||||
author={author}
|
||||
createdAt={createdAt}
|
||||
comments={comments}
|
||||
/>
|
||||
{hasMore && <div ref={sentinelRef} className="h-1 w-full" />}
|
||||
|
||||
{hasMore && <div ref={sentinelRef} className="h-1 w-full" />}
|
||||
|
||||
{loading && (
|
||||
<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>
|
||||
</aside>
|
||||
{loading && (
|
||||
<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>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
import { ChevronUp, ListVideo, X } from "lucide-react";
|
||||
import { memo } from "react";
|
||||
|
||||
interface ContextChipProps {
|
||||
label: string;
|
||||
position: number;
|
||||
total: number;
|
||||
/** 提供时整个标签可点：展开 / 打开侧栏里的完整列表 */
|
||||
onExpand?: () => void;
|
||||
expandLabel?: string;
|
||||
onExit: () => void;
|
||||
exitLabel: string;
|
||||
}
|
||||
|
||||
// 顶部的模式提示：说明上下切换当前在哪个列表里移动，避免「为什么跳到这里了」的困惑
|
||||
export const ContextChip = memo(function ContextChip({
|
||||
label,
|
||||
position,
|
||||
total,
|
||||
onExpand,
|
||||
expandLabel,
|
||||
onExit,
|
||||
exitLabel,
|
||||
}: ContextChipProps) {
|
||||
const content = (
|
||||
<>
|
||||
<ListVideo size={14} className="shrink-0 text-rose-300" />
|
||||
<span className="truncate">{label}</span>
|
||||
<span className="shrink-0 tabular-nums text-white/60">
|
||||
{position}/{total}
|
||||
</span>
|
||||
{onExpand && <ChevronUp size={14} className="shrink-0 text-white/70" />}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="absolute left-1/2 top-14 z-40 flex max-w-[calc(100%-1.5rem)] sm:top-3 sm:max-w-[calc(100%-14rem)] -translate-x-1/2 items-center rounded-full border border-white/20 bg-black/60 text-xs font-medium text-white shadow-lg backdrop-blur">
|
||||
{onExpand ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onExpand}
|
||||
className="flex min-w-0 items-center gap-1.5 py-1.5 pl-3 pr-1 cursor-pointer"
|
||||
aria-label={expandLabel}
|
||||
title={expandLabel}
|
||||
>
|
||||
{content}
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex min-w-0 items-center gap-1.5 py-1.5 pl-3 pr-1">
|
||||
{content}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onExit}
|
||||
className="mr-1 grid h-6 w-6 shrink-0 place-items-center rounded-full text-white/70 hover:bg-white/15 hover:text-white cursor-pointer"
|
||||
aria-label={exitLabel}
|
||||
title={exitLabel}
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
import { Hash, Search } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { memo } from "react";
|
||||
import type { PlaylistState } from "../hooks/usePlaylist";
|
||||
import type { PlaybackContextInfo } from "../types.ts";
|
||||
import { WorksGrid } from "./WorksGrid";
|
||||
|
||||
interface ContextListTabProps {
|
||||
active: boolean;
|
||||
context: PlaybackContextInfo;
|
||||
list: PlaylistState;
|
||||
currentId: string;
|
||||
contextQuery: string;
|
||||
/** 对应的搜索结果页链接（搜索上下文才有） */
|
||||
searchPageHref: string | null;
|
||||
onSelect: () => void;
|
||||
}
|
||||
|
||||
// 侧栏的「搜索结果 / #hashtag / 标签」列表：和上下切换的顺序完全一致
|
||||
export const ContextListTab = memo(function ContextListTab({
|
||||
active,
|
||||
context,
|
||||
list,
|
||||
currentId,
|
||||
contextQuery,
|
||||
searchPageHref,
|
||||
onSelect,
|
||||
}: ContextListTabProps) {
|
||||
const Icon = context.kind === "hashtag" ? Hash : Search;
|
||||
const header = (
|
||||
<>
|
||||
<Icon size={18} className="shrink-0 text-rose-300" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate font-semibold text-white">{context.label}</div>
|
||||
<div className="text-xs text-white/50">
|
||||
第 {context.position} 个 · 共 {context.total} 个
|
||||
</div>
|
||||
</div>
|
||||
{searchPageHref && (
|
||||
<Link
|
||||
href={searchPageHref}
|
||||
className="shrink-0 text-xs text-white/50 hover:text-white hover:underline"
|
||||
>
|
||||
在搜索页查看
|
||||
</Link>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<WorksGrid
|
||||
active={active}
|
||||
list={list}
|
||||
currentId={currentId}
|
||||
hrefQuery={contextQuery}
|
||||
onSelect={onSelect}
|
||||
header={header}
|
||||
/>
|
||||
);
|
||||
});
|
||||
@@ -16,7 +16,8 @@ import {
|
||||
VolumeX,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { memo, type ReactNode, type RefObject } from "react";
|
||||
import { memo, type ReactNode, type RefObject, useMemo } from "react";
|
||||
import { parseDescHashtags } from "@/lib/hashtag";
|
||||
import type { AbLoop, LoopMode, ObjectFit, User } from "../types.ts";
|
||||
import { formatAbsoluteUTC, formatRelativeTime, formatTime } from "../utils";
|
||||
import { MoreMenu, MoreMenuItem } from "./MoreMenu";
|
||||
@@ -59,6 +60,10 @@ interface MediaControlsProps {
|
||||
onLoopModeChange: (mode: LoopMode) => void;
|
||||
onDownload: () => void;
|
||||
onToggleFullscreen: () => void;
|
||||
/** 点作者头像/名字：在侧栏打开「TA的作品」 */
|
||||
onAuthorClick?: () => void;
|
||||
/** 点描述里的 hashtag：切到该 hashtag 的作品列表 */
|
||||
onHashtagClick?: (name: string) => void;
|
||||
}
|
||||
|
||||
const CONTROL_BTN_CLASS =
|
||||
@@ -96,7 +101,10 @@ export const MediaControls = memo(function MediaControls({
|
||||
onLoopModeChange,
|
||||
onDownload,
|
||||
onToggleFullscreen,
|
||||
onAuthorClick,
|
||||
onHashtagClick,
|
||||
}: MediaControlsProps) {
|
||||
const descParts = useMemo(() => parseDescHashtags(desc || ""), [desc]);
|
||||
const normalizedLoopMode =
|
||||
isVideo && loopMode === "single" ? "loop" : loopMode;
|
||||
const loopLabel = isVideo
|
||||
@@ -129,10 +137,29 @@ export const MediaControls = memo(function MediaControls({
|
||||
};
|
||||
|
||||
return (
|
||||
<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
|
||||
data-no-swipe
|
||||
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 ? (
|
||||
{author.sec_uid && onAuthorClick ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAuthorClick}
|
||||
className="flex items-center gap-2.5 pointer-events-auto hover:opacity-80 transition-opacity cursor-pointer"
|
||||
title="查看TA的作品"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
) : author.sec_uid ? (
|
||||
<Link
|
||||
href={`/author/${author.sec_uid}`}
|
||||
className="flex items-center gap-2.5 pointer-events-auto hover:opacity-80 transition-opacity"
|
||||
@@ -172,7 +199,23 @@ export const MediaControls = memo(function MediaControls({
|
||||
{desc ? (
|
||||
<div className="pointer-events-none">
|
||||
<p className="text-[13px] leading-tight text-white/95 max-h-[3.9em] overflow-hidden [display:-webkit-box] [-webkit-line-clamp:3] [-webkit-box-orient:vertical] drop-shadow">
|
||||
{desc}
|
||||
{descParts.map((part, i) =>
|
||||
part.type === "hashtag" && onHashtagClick ? (
|
||||
<button
|
||||
// biome-ignore lint/suspicious/noArrayIndexKey: 描述片段顺序固定
|
||||
key={i}
|
||||
type="button"
|
||||
onClick={() => onHashtagClick(part.name)}
|
||||
className="pointer-events-auto font-semibold text-white hover:underline cursor-pointer"
|
||||
title={`查看所有带 #${part.name} 的作品`}
|
||||
>
|
||||
{part.text}
|
||||
</button>
|
||||
) : (
|
||||
// biome-ignore lint/suspicious/noArrayIndexKey: 描述片段顺序固定
|
||||
<span key={i}>{part.text}</span>
|
||||
),
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
import { X } from "lucide-react";
|
||||
import { memo, type ReactNode } from "react";
|
||||
import type { SidePanelTab } from "../hooks/useSidePanelState";
|
||||
|
||||
export type SidePanelTabConfig = {
|
||||
key: SidePanelTab;
|
||||
label: string;
|
||||
count: number;
|
||||
content: ReactNode;
|
||||
};
|
||||
|
||||
interface SidePanelProps {
|
||||
open: boolean;
|
||||
mounted: boolean;
|
||||
tab: SidePanelTab;
|
||||
tabs: SidePanelTabConfig[];
|
||||
onTabChange: (tab: SidePanelTab) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
// 右侧（竖屏为底部抽屉）的侧栏外壳：评论 / TA的作品 / 搜索结果（或 hashtag）几个标签页
|
||||
export const SidePanel = memo(function SidePanel({
|
||||
open,
|
||||
mounted,
|
||||
tab,
|
||||
tabs,
|
||||
onTabChange,
|
||||
onClose,
|
||||
}: SidePanelProps) {
|
||||
const visibility = open
|
||||
? "translate-y-0 pointer-events-auto landscape:w-[min(420px,36vw)] landscape:border-l landscape:border-white/10"
|
||||
: "translate-y-full pointer-events-none landscape:w-0 landscape:border-l-0";
|
||||
// 竖屏时作品网格不需要那么高，给视频多留点位置
|
||||
const portraitHeight =
|
||||
tab === "comments" ? "h-[min(80vh,88dvh)]" : "h-[min(62vh,64dvh)]";
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={`
|
||||
z-30 flex flex-col bg-[rgba(22,22,22,0.92)] text-white overflow-hidden
|
||||
fixed inset-x-0 bottom-0 w-full ${portraitHeight} border-t border-white/10 rounded-t-2xl
|
||||
landscape:relative landscape:inset-auto landscape:h-full landscape:translate-y-0 landscape:border-t-0 landscape:rounded-none
|
||||
${mounted ? "transition-transform landscape:transition-[width] duration-200 ease-out" : ""}
|
||||
${visibility}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center gap-1 px-3 border-b border-white/10 shrink-0">
|
||||
<div
|
||||
className="flex min-w-0 flex-1 items-center gap-5 overflow-x-auto"
|
||||
role="tablist"
|
||||
>
|
||||
{tabs.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={tab === t.key}
|
||||
onClick={() => onTabChange(t.key)}
|
||||
className={`relative shrink-0 max-w-[10em] truncate py-3 text-[15px] transition-colors cursor-pointer ${
|
||||
tab === t.key
|
||||
? "font-semibold text-white"
|
||||
: "text-white/55 hover:text-white/80"
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
{t.count > 0 && (
|
||||
<span className="ml-1 text-xs font-normal text-white/50">
|
||||
{t.count}
|
||||
</span>
|
||||
)}
|
||||
{tab === t.key && (
|
||||
<span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-rose-400" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="w-8 h-8 shrink-0 inline-flex items-center justify-center rounded-full bg-white/15 text-white/90 border border-white/20 hover:bg-white/25 transition-colors cursor-pointer"
|
||||
onClick={onClose}
|
||||
aria-label="关闭侧栏"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{tabs.map((t) => (
|
||||
<div
|
||||
key={t.key}
|
||||
className={tab === t.key ? "flex min-h-0 flex-1 flex-col" : "hidden"}
|
||||
>
|
||||
{t.content}
|
||||
</div>
|
||||
))}
|
||||
</aside>
|
||||
);
|
||||
});
|
||||
@@ -66,7 +66,10 @@ export const VideoTagEditor = memo(function VideoTagEditor({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="absolute right-3 top-3 z-40 flex flex-col items-end gap-2">
|
||||
<div
|
||||
data-no-swipe
|
||||
className="absolute right-3 top-3 z-40 flex flex-col items-end gap-2"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((value) => !value)}
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
import { Heart, Images } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { memo, type ReactNode, useEffect, useRef } from "react";
|
||||
import { awemeHref } from "@/lib/playback-context";
|
||||
import type { PlaylistState } from "../hooks/usePlaylist";
|
||||
|
||||
interface WorksGridProps {
|
||||
/** 所在标签页当前可见 */
|
||||
active: boolean;
|
||||
list: PlaylistState;
|
||||
currentId: string;
|
||||
/** 点击作品跳转时带上的播放上下文查询串 */
|
||||
hrefQuery: string;
|
||||
onSelect: () => void;
|
||||
/** 列表只有当前这一个作品时的提示 */
|
||||
singleHint?: string;
|
||||
/** 网格上方的标题栏 */
|
||||
header: ReactNode;
|
||||
}
|
||||
|
||||
function formatCount(n: number): string {
|
||||
if (n >= 10000) return `${(n / 10000).toFixed(n >= 100000 ? 0 : 1)}万`;
|
||||
return String(n);
|
||||
}
|
||||
|
||||
function PlayingBars() {
|
||||
return (
|
||||
<span className="flex h-4 items-end gap-0.5" aria-hidden>
|
||||
{[60, 100, 40].map((height, i) => (
|
||||
<span
|
||||
key={height}
|
||||
className="w-1 rounded-sm bg-white animate-pulse"
|
||||
style={{ height: `${height}%`, animationDelay: `${i * 150}ms` }}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 侧栏里的作品封面网格（TA的作品 / 搜索结果 / hashtag 共用）：当前作品标「播放中」，点作品就地切换
|
||||
export const WorksGrid = memo(function WorksGrid({
|
||||
active,
|
||||
list,
|
||||
currentId,
|
||||
hrefQuery,
|
||||
onSelect,
|
||||
singleHint,
|
||||
header,
|
||||
}: WorksGridProps) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const currentRef = useRef<HTMLAnchorElement>(null);
|
||||
const items = list.items ?? [];
|
||||
|
||||
// 让「播放中」的作品保持在可见区域（切换作品或列表加载完成时重新定位）
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: currentId / items.length 只用来触发重新定位
|
||||
useEffect(() => {
|
||||
if (!active) return;
|
||||
const container = scrollRef.current;
|
||||
const el = currentRef.current;
|
||||
if (!container || !el) return;
|
||||
const top = el.offsetTop - container.offsetTop;
|
||||
const bottom = top + el.offsetHeight;
|
||||
if (
|
||||
top < container.scrollTop ||
|
||||
bottom > container.scrollTop + container.clientHeight
|
||||
) {
|
||||
container.scrollTop =
|
||||
top - (container.clientHeight - el.offsetHeight) / 2;
|
||||
}
|
||||
}, [active, currentId, items.length]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-0 flex-1 flex-col">
|
||||
<div className="flex items-center gap-3 px-3 py-3 border-b border-white/10 shrink-0">
|
||||
{header}
|
||||
</div>
|
||||
|
||||
<div ref={scrollRef} className="comment-scroll flex-1 overflow-auto p-2">
|
||||
{list.loading && !list.items && (
|
||||
<div className="py-10 text-center text-sm text-white/60">
|
||||
加载中...
|
||||
</div>
|
||||
)}
|
||||
{list.error && !list.items && (
|
||||
<div className="py-10 text-center text-sm text-red-300/80">
|
||||
{list.error}
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{items.map((item) => {
|
||||
const isCurrent = item.aweme_id === currentId;
|
||||
return (
|
||||
<Link
|
||||
key={item.aweme_id}
|
||||
ref={isCurrent ? currentRef : undefined}
|
||||
href={awemeHref(item.aweme_id, hrefQuery)}
|
||||
scroll={false}
|
||||
onClick={onSelect}
|
||||
title={item.desc}
|
||||
aria-current={isCurrent ? "true" : undefined}
|
||||
className={`relative block aspect-[3/4] overflow-hidden rounded-md bg-white/5 ${
|
||||
isCurrent ? "ring-2 ring-rose-400" : "hover:opacity-90"
|
||||
}`}
|
||||
>
|
||||
{item.cover_url ? (
|
||||
// biome-ignore lint/performance/noImgElement: 封面来自对象存储，不走 next/image
|
||||
<img
|
||||
src={item.cover_url}
|
||||
alt={item.desc?.slice(0, 20) || ""}
|
||||
loading="lazy"
|
||||
className="absolute inset-0 h-full w-full object-cover"
|
||||
/>
|
||||
) : null}
|
||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
|
||||
{item.type === "image" && (
|
||||
<span className="absolute right-1 top-1 inline-flex items-center gap-0.5 rounded bg-black/55 px-1 py-0.5 text-[10px] text-white/90">
|
||||
<Images size={10} />
|
||||
图文
|
||||
</span>
|
||||
)}
|
||||
{isCurrent ? (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-1.5 bg-black/55 text-xs text-white">
|
||||
<PlayingBars />
|
||||
播放中
|
||||
</div>
|
||||
) : (
|
||||
<span className="absolute bottom-1 left-1 inline-flex items-center gap-0.5 text-[11px] text-white/90 drop-shadow">
|
||||
<Heart size={11} />
|
||||
{formatCount(item.likes)}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{list.items && items.length <= 1 && singleHint && (
|
||||
<div className="py-6 text-center text-xs text-white/40">
|
||||
{singleHint}
|
||||
</div>
|
||||
)}
|
||||
{list.items && list.total > items.length && (
|
||||
<div className="py-6 text-center text-xs text-white/40">
|
||||
只列出前 {items.length} 个，共 {list.total} 个
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
// Hooks 导出
|
||||
export { useBackgroundCanvas } from "./useBackgroundCanvas";
|
||||
export { useCommentState } from "./useCommentState";
|
||||
export { useSidePanelState } from "./useSidePanelState";
|
||||
export { useImageCarousel } from "./useImageCarousel";
|
||||
export { useNavigation } from "./useNavigation";
|
||||
export { usePlayerState } from "./usePlayerState";
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { getStringFromStorage, saveToStorage } from "../utils";
|
||||
|
||||
export function useCommentState() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
// 从 localStorage 恢复评论区状态
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
const saved = getStringFromStorage("aweme_player_comments_open", "false");
|
||||
if (saved === "true") {
|
||||
setOpen(true);
|
||||
}
|
||||
// 短暂延迟后标记为已挂载，启用动画
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
setMounted(true);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 持久化评论区状态
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
saveToStorage("aweme_player_comments_open", open.toString());
|
||||
}, [open]);
|
||||
|
||||
return { open, setOpen, mounted };
|
||||
}
|
||||
@@ -197,7 +197,7 @@ export function useImageCarousel({
|
||||
|
||||
if (fromIndex >= currentImages.length - 1) {
|
||||
if (loopMode === "sequential" && neighbors?.next) {
|
||||
router.push(`/aweme/${neighbors.next.aweme_id}`);
|
||||
router.push(neighbors.next.href);
|
||||
return;
|
||||
}
|
||||
idxRef.current = 0;
|
||||
|
||||
@@ -50,8 +50,8 @@ export function useNavigation({
|
||||
// 预取路由
|
||||
useEffect(() => {
|
||||
if (!neighbors) return;
|
||||
if (neighbors.next) router.prefetch(`/aweme/${neighbors.next.aweme_id}`);
|
||||
if (neighbors.prev) router.prefetch(`/aweme/${neighbors.prev.aweme_id}`);
|
||||
if (neighbors.next) router.prefetch(neighbors.next.href);
|
||||
if (neighbors.prev) router.prefetch(neighbors.prev.href);
|
||||
}, [neighbors, router]);
|
||||
|
||||
// 鼠标滚轮切换
|
||||
@@ -72,10 +72,10 @@ export function useNavigation({
|
||||
|
||||
if (dy > 0 && neighbors?.next) {
|
||||
wheelCooldownRef.current = now;
|
||||
router.push(`/aweme/${neighbors.next.aweme_id}`);
|
||||
router.push(neighbors.next.href);
|
||||
} else if (dy < 0 && neighbors?.prev) {
|
||||
wheelCooldownRef.current = now;
|
||||
router.push(`/aweme/${neighbors.prev.aweme_id}`);
|
||||
router.push(neighbors.prev.href);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -83,6 +83,90 @@ export function useNavigation({
|
||||
return () => el.removeEventListener("wheel", onWheel);
|
||||
}, [neighbors, mediaContainerRef, router]);
|
||||
|
||||
// 触屏上下滑切换（上滑下一条，下滑上一条）。只认明显的竖向手势，
|
||||
// 不影响图文的左右滑动；从按钮、链接、控制栏（data-no-swipe）上开始的触摸不处理。
|
||||
useEffect(() => {
|
||||
const el = mediaContainerRef.current;
|
||||
if (!el) return;
|
||||
|
||||
let start: { x: number; y: number; t: number } | null = null;
|
||||
let vertical = false;
|
||||
|
||||
const onTouchStart = (e: TouchEvent): void => {
|
||||
const target = e.target as HTMLElement | null;
|
||||
if (
|
||||
e.touches.length !== 1 ||
|
||||
target?.closest(
|
||||
"button, a, input, textarea, select, [role='slider'], [data-no-swipe]",
|
||||
)
|
||||
) {
|
||||
start = null;
|
||||
return;
|
||||
}
|
||||
const touch = e.touches[0];
|
||||
start = { x: touch.clientX, y: touch.clientY, t: performance.now() };
|
||||
vertical = false;
|
||||
};
|
||||
|
||||
const onTouchMove = (e: TouchEvent): void => {
|
||||
if (!start) return;
|
||||
if (e.touches.length !== 1) {
|
||||
start = null;
|
||||
return;
|
||||
}
|
||||
const touch = e.touches[0];
|
||||
const dx = touch.clientX - start.x;
|
||||
const dy = touch.clientY - start.y;
|
||||
if (!vertical && Math.abs(dy) > 12 && Math.abs(dy) > Math.abs(dx) * 1.5) {
|
||||
vertical = true;
|
||||
}
|
||||
// 竖向手势由我们处理，阻止浏览器下拉刷新 / 回弹
|
||||
if (vertical && e.cancelable) e.preventDefault();
|
||||
};
|
||||
|
||||
const onTouchEnd = (e: TouchEvent): void => {
|
||||
if (!start) return;
|
||||
const touch = e.changedTouches[0];
|
||||
const dy = touch.clientY - start.y;
|
||||
const elapsed = performance.now() - start.t;
|
||||
const wasVertical = vertical;
|
||||
start = null;
|
||||
vertical = false;
|
||||
if (!wasVertical) return;
|
||||
|
||||
// 快速轻扫，或者慢慢拖过屏幕高度的四分之一
|
||||
const flick = Math.abs(dy) > 60 && elapsed < 800;
|
||||
const longDrag = Math.abs(dy) > window.innerHeight * 0.25;
|
||||
if (!flick && !longDrag) return;
|
||||
|
||||
const now = performance.now();
|
||||
if (now - wheelCooldownRef.current < 500) return;
|
||||
if (dy < 0 && neighbors?.next) {
|
||||
wheelCooldownRef.current = now;
|
||||
router.push(neighbors.next.href);
|
||||
} else if (dy > 0 && neighbors?.prev) {
|
||||
wheelCooldownRef.current = now;
|
||||
router.push(neighbors.prev.href);
|
||||
}
|
||||
};
|
||||
|
||||
const onTouchCancel = (): void => {
|
||||
start = null;
|
||||
vertical = false;
|
||||
};
|
||||
|
||||
el.addEventListener("touchstart", onTouchStart, { passive: true });
|
||||
el.addEventListener("touchmove", onTouchMove, { passive: false });
|
||||
el.addEventListener("touchend", onTouchEnd);
|
||||
el.addEventListener("touchcancel", onTouchCancel);
|
||||
return () => {
|
||||
el.removeEventListener("touchstart", onTouchStart);
|
||||
el.removeEventListener("touchmove", onTouchMove);
|
||||
el.removeEventListener("touchend", onTouchEnd);
|
||||
el.removeEventListener("touchcancel", onTouchCancel);
|
||||
};
|
||||
}, [neighbors, mediaContainerRef, router]);
|
||||
|
||||
// 键盘快捷键（支持向右箭头 / D 键区分短按与长按 2 倍速，以及视频 [ ] 设置 AB 循环）
|
||||
useEffect(() => {
|
||||
const clearLongPressTimer = (): void => {
|
||||
@@ -124,7 +208,7 @@ export function useNavigation({
|
||||
if (now - wheelCooldownRef.current < 700) return;
|
||||
if (neighbors?.prev) {
|
||||
wheelCooldownRef.current = now;
|
||||
router.push(`/aweme/${neighbors.prev.aweme_id}`);
|
||||
router.push(neighbors.prev.href);
|
||||
}
|
||||
} else if (key === "arrowdown" || key === "s" || code === "KeyS") {
|
||||
e.preventDefault();
|
||||
@@ -132,7 +216,7 @@ export function useNavigation({
|
||||
if (now - wheelCooldownRef.current < 700) return;
|
||||
if (neighbors?.next) {
|
||||
wheelCooldownRef.current = now;
|
||||
router.push(`/aweme/${neighbors.next.aweme_id}`);
|
||||
router.push(neighbors.next.href);
|
||||
}
|
||||
} else if (key === "arrowleft" || key === "a" || code === "KeyA") {
|
||||
e.preventDefault();
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import type { PlaylistItem, PlaylistResponse } from "@/lib/playback-context";
|
||||
|
||||
// 侧栏列表（作者作品 / 搜索结果 / hashtag）缓存在模块里：切换作品时播放页会重新挂载，
|
||||
// 但客户端导航不会清掉 JS 内存，所以在列表里上下切换时可以立刻拿到列表，不用每次重新请求。
|
||||
const STALE_MS = 60_000;
|
||||
|
||||
type CacheEntry = PlaylistResponse & { fetchedAt: number };
|
||||
const cache = new Map<string, CacheEntry>();
|
||||
const inflight = new Map<string, Promise<PlaylistResponse>>();
|
||||
|
||||
function loadPlaylist(query: string): Promise<PlaylistResponse> {
|
||||
const pending = inflight.get(query);
|
||||
if (pending) return pending;
|
||||
const promise = fetch(`/api/playlist${query}`)
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw new Error(`加载列表失败 (${res.status})`);
|
||||
const data = (await res.json()) as PlaylistResponse;
|
||||
cache.set(query, { ...data, fetchedAt: Date.now() });
|
||||
return data;
|
||||
})
|
||||
.finally(() => inflight.delete(query));
|
||||
inflight.set(query, promise);
|
||||
return promise;
|
||||
}
|
||||
|
||||
export type PlaylistState = {
|
||||
items: PlaylistItem[] | null;
|
||||
/** 列表总数（可能多于 items：侧栏最多列出 500 个） */
|
||||
total: number;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
};
|
||||
|
||||
/**
|
||||
* 按播放上下文（/api/playlist 的查询串，含 ?）取作品列表。
|
||||
* query 为空或 enabled 为 false 时不请求。
|
||||
*/
|
||||
export function usePlaylist(query: string, enabled: boolean): PlaylistState {
|
||||
const [state, setState] = useState<PlaylistState>(() => {
|
||||
const cached = query ? cache.get(query) : undefined;
|
||||
return {
|
||||
items: cached?.items ?? null,
|
||||
total: cached?.total ?? 0,
|
||||
loading: false,
|
||||
error: null,
|
||||
};
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!query || !enabled) return;
|
||||
const cached = cache.get(query);
|
||||
setState({
|
||||
items: cached?.items ?? null,
|
||||
total: cached?.total ?? 0,
|
||||
loading: !cached,
|
||||
error: null,
|
||||
});
|
||||
if (cached && Date.now() - cached.fetchedAt < STALE_MS) return;
|
||||
|
||||
let cancelled = false;
|
||||
loadPlaylist(query)
|
||||
.then((data) => {
|
||||
if (!cancelled) {
|
||||
setState({
|
||||
items: data.items,
|
||||
total: data.total,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (cancelled) return;
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
loading: false,
|
||||
error: err instanceof Error ? err.message : "加载失败",
|
||||
}));
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [query, enabled]);
|
||||
|
||||
return state;
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
/** comments：评论；works：TA的作品；list：搜索结果 / hashtag / 标签列表 */
|
||||
export type SidePanelTab = "comments" | "works" | "list";
|
||||
|
||||
// 侧栏开关沿用评论区原来的 localStorage 键；停在哪个标签页、是否处于作者模式只在本次会话内记住，
|
||||
// 这样下次从首页点进来不会莫名其妙停在作者模式。
|
||||
// 切换作品时播放页会整体重新挂载，靠这些存储把状态带到下一个作品。
|
||||
const OPEN_KEY = "aweme_player_comments_open";
|
||||
const TAB_KEY = "aweme_player_panel_tab";
|
||||
const AUTHOR_MODE_KEY = "aweme_player_author_mode";
|
||||
|
||||
function readStorage(storage: () => Storage, key: string): string | null {
|
||||
try {
|
||||
return storage().getItem(key);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function writeStorage(
|
||||
storage: () => Storage,
|
||||
key: string,
|
||||
value: string | null,
|
||||
) {
|
||||
try {
|
||||
if (value === null) storage().removeItem(key);
|
||||
else storage().setItem(key, value);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const local = () => window.localStorage;
|
||||
const session = () => window.sessionStorage;
|
||||
|
||||
export function isPortraitViewport(): boolean {
|
||||
return (
|
||||
typeof window !== "undefined" &&
|
||||
window.matchMedia("(orientation: portrait)").matches
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 侧栏状态与作者模式。
|
||||
* 作者模式和侧栏开关是分开的：打开「TA的作品」进入作者模式（上下切换在该作者的作品里移动），
|
||||
* 关掉侧栏不会退出，只有点顶部提示的 ✕、或切到「搜索结果 / #hashtag」列表才退出。
|
||||
*/
|
||||
export function useSidePanelState(authorSecUid: string | undefined) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [tab, setTab] = useState<SidePanelTab>("comments");
|
||||
// 处于作者模式时记下是哪位作者；切到别的作者的作品（例如浏览器后退）时自动不生效
|
||||
const [authorModeFor, setAuthorModeFor] = useState<string | null>(null);
|
||||
const [restored, setRestored] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setOpen(readStorage(local, OPEN_KEY) === "true");
|
||||
const savedTab = readStorage(session, TAB_KEY);
|
||||
setTab(savedTab === "works" || savedTab === "list" ? savedTab : "comments");
|
||||
setAuthorModeFor(readStorage(session, AUTHOR_MODE_KEY));
|
||||
setRestored(true);
|
||||
// 恢复完成后再开启过渡动画，避免进入页面时侧栏滑入
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => setMounted(true));
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!restored) return;
|
||||
writeStorage(local, OPEN_KEY, String(open));
|
||||
writeStorage(session, TAB_KEY, tab);
|
||||
writeStorage(session, AUTHOR_MODE_KEY, authorModeFor);
|
||||
}, [open, tab, authorModeFor, restored]);
|
||||
|
||||
// 切到哪个列表标签页，上下切换就改用哪个列表的顺序；「评论」不影响顺序
|
||||
const applyTabMode = useCallback(
|
||||
(nextTab: SidePanelTab) => {
|
||||
if (nextTab === "works" && authorSecUid) setAuthorModeFor(authorSecUid);
|
||||
else if (nextTab === "list") setAuthorModeFor(null);
|
||||
},
|
||||
[authorSecUid],
|
||||
);
|
||||
|
||||
const selectTab = useCallback(
|
||||
(nextTab: SidePanelTab) => {
|
||||
setTab(nextTab);
|
||||
applyTabMode(nextTab);
|
||||
},
|
||||
[applyTabMode],
|
||||
);
|
||||
|
||||
const show = useCallback(
|
||||
(nextTab: SidePanelTab) => {
|
||||
selectTab(nextTab);
|
||||
setOpen(true);
|
||||
},
|
||||
[selectTab],
|
||||
);
|
||||
|
||||
const close = useCallback(() => setOpen(false), []);
|
||||
|
||||
/** 打开到指定标签页；已经打开在这个标签页时则关闭（关闭不影响顺序） */
|
||||
const toggle = useCallback(
|
||||
(nextTab: SidePanelTab) => {
|
||||
if (open && tab === nextTab) close();
|
||||
else show(nextTab);
|
||||
},
|
||||
[close, open, show, tab],
|
||||
);
|
||||
|
||||
const exitAuthorMode = useCallback(() => setAuthorModeFor(null), []);
|
||||
|
||||
return {
|
||||
open,
|
||||
tab,
|
||||
mounted,
|
||||
/** 上下切换在当前作者的作品里移动 */
|
||||
authorMode: Boolean(authorSecUid) && authorModeFor === authorSecUid,
|
||||
/** 已从存储里恢复完状态（之后才能安全地自动打开侧栏） */
|
||||
restored,
|
||||
selectTab,
|
||||
show,
|
||||
close,
|
||||
toggle,
|
||||
exitAuthorMode,
|
||||
};
|
||||
}
|
||||
@@ -181,7 +181,7 @@ export function useVideoPlayer({
|
||||
}
|
||||
|
||||
if (loopMode === "sequential" && neighbors?.next) {
|
||||
router.push(`/aweme/${neighbors.next.aweme_id}`);
|
||||
router.push(neighbors.next.href);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import type { Metadata } from "next";
|
||||
import BackButton from "@/app/components/BackButton";
|
||||
import { getFileUrl } from "@/lib/minio";
|
||||
import { parsePlaybackContext } from "@/lib/playback-context";
|
||||
import { resolvePlayback } from "@/lib/playback-context.server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import AwemeDetailClient from "./Client";
|
||||
import type { AwemeData, VideoTranscript } from "./types";
|
||||
@@ -45,8 +47,10 @@ export async function generateMetadata({
|
||||
|
||||
export default async function AwemeDetail({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ awemeId: string }>;
|
||||
searchParams: Promise<Record<string, string | string[] | undefined>>;
|
||||
}) {
|
||||
const id = (await params).awemeId;
|
||||
|
||||
@@ -71,12 +75,10 @@ export default async function AwemeDetail({
|
||||
});
|
||||
|
||||
let data: AwemeData;
|
||||
let currentCreatedAt: Date;
|
||||
let transcript: VideoTranscript | null = null;
|
||||
|
||||
if (video) {
|
||||
transcript = video.transcript ?? null;
|
||||
currentCreatedAt = video.created_at;
|
||||
data = {
|
||||
type: "video",
|
||||
aweme_id: video.aweme_id,
|
||||
@@ -100,7 +102,6 @@ export default async function AwemeDetail({
|
||||
};
|
||||
} else if (post) {
|
||||
const coverImage = post.images[0];
|
||||
currentCreatedAt = post.created_at;
|
||||
data = {
|
||||
type: "image",
|
||||
aweme_id: post.aweme_id,
|
||||
@@ -129,65 +130,16 @@ export default async function AwemeDetail({
|
||||
return <main className="p-8">找不到该作品</main>;
|
||||
}
|
||||
|
||||
// Compute prev/next neighbors by created_at across videos and image posts
|
||||
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 },
|
||||
}),
|
||||
const authorId = video?.authorId ?? post?.authorId ?? null;
|
||||
const [playback, authorWorksCount] = await Promise.all([
|
||||
resolvePlayback(id, parsePlaybackContext(await searchParams)),
|
||||
authorId
|
||||
? Promise.all([
|
||||
prisma.video.count({ where: { authorId } }),
|
||||
prisma.imagePost.count({ where: { authorId } }),
|
||||
]).then(([videos, posts]) => videos + posts)
|
||||
: 0,
|
||||
]);
|
||||
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 (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 (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 };
|
||||
|
||||
return (
|
||||
<main className="min-h-screen w-full">
|
||||
@@ -200,7 +152,10 @@ export default async function AwemeDetail({
|
||||
</div>
|
||||
<AwemeDetailClient
|
||||
data={data}
|
||||
neighbors={neighbors}
|
||||
neighbors={playback.neighbors}
|
||||
playbackContext={playback.context}
|
||||
contextQuery={playback.contextQuery}
|
||||
authorWorksCount={authorWorksCount}
|
||||
transcript={transcript}
|
||||
/>
|
||||
</main>
|
||||
|
||||
@@ -58,9 +58,22 @@ export type VideoTranscript = {
|
||||
transcript: string[];
|
||||
};
|
||||
|
||||
export type NeighborLink = { aweme_id: string; href: string };
|
||||
|
||||
export type Neighbors = {
|
||||
prev: { aweme_id: string } | null;
|
||||
next: { aweme_id: string } | null;
|
||||
prev: NeighborLink | null;
|
||||
next: NeighborLink | null;
|
||||
};
|
||||
|
||||
export type PlaybackContextInfo = {
|
||||
kind: "search" | "tag" | "hashtag" | "author";
|
||||
/** 顶部提示里的说明，如「搜索「百姓」」 */
|
||||
label: string;
|
||||
/** 侧栏列表标签页的标题，如「搜索结果」「#丰川祥子」 */
|
||||
listTitle: string;
|
||||
/** 从 1 开始 */
|
||||
position: number;
|
||||
total: number;
|
||||
};
|
||||
|
||||
export type LoopMode = "loop" | "single" | "sequential";
|
||||
|
||||
@@ -17,6 +17,8 @@ type Props = {
|
||||
initialItems: FeedItem[];
|
||||
initialCursor: string | null;
|
||||
fetchUrl?: string;
|
||||
/** 附加在作品链接上的播放上下文查询串（含 ?），决定播放页上下切换的列表 */
|
||||
linkQuery?: string;
|
||||
};
|
||||
|
||||
type TagUpdateResponse = {
|
||||
@@ -30,6 +32,7 @@ export default function FeedMasonry({
|
||||
initialItems,
|
||||
initialCursor,
|
||||
fetchUrl = "/api/feed",
|
||||
linkQuery = "",
|
||||
}: Props) {
|
||||
// 哨兵与容器
|
||||
const [cursor, setCursor] = useState<string | null>(initialCursor);
|
||||
@@ -264,7 +267,7 @@ export default function FeedMasonry({
|
||||
</button>
|
||||
)}
|
||||
<Link
|
||||
href={`/aweme/${item.aweme_id}`}
|
||||
href={`/aweme/${item.aweme_id}${linkQuery}`}
|
||||
target="_blank"
|
||||
className="block relative w-full"
|
||||
>
|
||||
|
||||
+5
-1
@@ -1,8 +1,9 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { VIDEO_CONTENT_TAGS, isVideoContentTag } from "@/lib/video-tags";
|
||||
import { getFileUrl } from "@/lib/minio";
|
||||
import { playbackContextQuery } from "@/lib/playback-context";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { isVideoContentTag, VIDEO_CONTENT_TAGS } from "@/lib/video-tags";
|
||||
import FeedMasonry from "./components/FeedMasonry";
|
||||
import SearchBox from "./components/SearchBox";
|
||||
import type { FeedItem } from "./types/feed";
|
||||
@@ -142,6 +143,9 @@ export default async function Home({
|
||||
key={selectedTag ?? "all"}
|
||||
initialItems={initial}
|
||||
initialCursor={cursor}
|
||||
linkQuery={playbackContextQuery(
|
||||
selectedTag ? { kind: "tag", tag: selectedTag } : null,
|
||||
)}
|
||||
fetchUrl={
|
||||
selectedTag
|
||||
? `/api/feed?tag=${encodeURIComponent(selectedTag)}`
|
||||
|
||||
@@ -8,9 +8,11 @@ import {
|
||||
type FormEvent,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { playbackContextQuery } from "@/lib/playback-context";
|
||||
import type { SnippetPart } from "@/lib/search";
|
||||
import { isVideoContentTag, VIDEO_CONTENT_TAGS } from "@/lib/video-tags";
|
||||
|
||||
@@ -209,6 +211,15 @@ export default function SearchClient({
|
||||
router.push("/search");
|
||||
};
|
||||
|
||||
// 从搜索结果进入播放页时，上下切换在这次的搜索结果里移动（与当前 URL 上的搜索条件一致）
|
||||
const resultLinkQuery = useMemo(() => {
|
||||
const q = (searchParams.get("q") || "").trim();
|
||||
const tagParam = searchParams.get("tag") || "";
|
||||
const tag = tagParam && isVideoContentTag(tagParam) ? tagParam : null;
|
||||
if (!q && !tag) return "";
|
||||
return playbackContextQuery({ kind: "search", q, tag });
|
||||
}, [searchParams]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white">
|
||||
{/* 顶部搜索栏 */}
|
||||
@@ -333,7 +344,7 @@ export default function SearchClient({
|
||||
<div className="flex gap-4 p-4">
|
||||
{/* 左侧：封面预览 */}
|
||||
<Link
|
||||
href={`/aweme/${content.aweme_id}`}
|
||||
href={`/aweme/${content.aweme_id}${resultLinkQuery}`}
|
||||
target="_blank"
|
||||
className="flex-shrink-0 w-64 h-80 sm:w-70 sm:h-96 rounded-xl overflow-hidden bg-zinc-900 group"
|
||||
>
|
||||
@@ -388,7 +399,7 @@ export default function SearchClient({
|
||||
|
||||
{/* 描述 */}
|
||||
<Link
|
||||
href={`/aweme/${content.aweme_id}`}
|
||||
href={`/aweme/${content.aweme_id}${resultLinkQuery}`}
|
||||
target="_blank"
|
||||
>
|
||||
<p className="text-white/90 text-sm sm:text-base line-clamp-3 mb-3 hover:text-white transition-colors">
|
||||
|
||||
Reference in New Issue
Block a user