@funhub/platform 0.2.30 → 0.2.31

package/dist/components/pages/video-detail/video-detail-client.mjs

@@ -1,2 +1,396 @@
 
-"use client";import{getChannelList as e}from"../../biz/utils/helpers/get-channel-list.mjs";import{cn as t}from"../../../utils/cn.mjs";import{gContentGetAppChannels as n,gContentGetVideoDetail as r}from"../../../service/generated/client.mjs";import{trackAppPageView as i}from"../../../utils/tracking.mjs";import{useRouter as a}from"../../../utils/use-compatible-router.mjs";import{EmptyState as o}from"../../ui/empty.mjs";import{buildVideoPlayerSrc as ee}from"../../common/video-player/process-m3u8-cache.mjs";import{notifyBridgeEpisodeChanged as s}from"../../../utils/login-modal-bridge.mjs";import{useRequest as c}from"../../../hooks/query/use-query.mjs";import{queryKey as l}from"../../../constants/query-key.mjs";import{useKeepAliveEffect as u,useKeepAliveState as d}from"../../common/keep-scroll-position/index.mjs";import{apiCollectClick as f}from"../../../utils/api-collect.mjs";import p from"../../biz/business/search-bar/variants/detail-search-bar/index.mjs";import{VideoDetailMaterialRuntimeProvider as te}from"../../biz/business/detail/shared/runtime-context-provider.mjs";import{resolveMaterialProps as ne,videoDetailMaterials as m}from"../../biz/business/detail/shared/registry.mjs";import{DetailHero as re}from"../../biz/business/detail/shared/video-hero.mjs";import{Fragment as ie,useCallback as h,useEffect as g,useMemo as _,useRef as v}from"react";import{useParams as ae,useSearchParams as oe}from"next/navigation";import{Fragment as y,jsx as b,jsxs as x}from"react/jsx-runtime";import{useTranslations as se}from"next-intl";const S=[{id:`detail-info`,componentName:`video-detail-info`,props:{}},{id:`detail-info-title-tags-episodes`,componentName:`video-detail-info-title-tags-episodes`,props:{}},{id:`detail-actions`,componentName:`video-detail-actions`,props:{}},{id:`detail-recommend`,componentName:`video-detail-recommend`,props:{title:`猜你喜欢`,rows:2,columns:3,smartTagEnabled:!1,smartTagIds:[`腐剧`],showPlayCount:!0,playCountDelta:0,showEpisode:!0,enableInfinite:!1,items:[{contentId:`d6a35ba3279e6f0d`,contentName:`贺总的私宠罪妻`,titleMode:`custom`,title:`贺总的私宠罪妻`,description:`简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百`,coverMode:`upload`,coverUrl:`/truss/20260227/69a136457d10f.jpgxxx`,showPlayCount:!0,playCountDelta:0,showEpisode:!0},{contentId:`b0f42fed731239a7`,contentName:`少年江湖物语`,titleMode:`custom`,title:`少年江湖物语`,description:`网剧《少年江湖物语》讲述了一个江湖中邪不压正，青春正好，有情有爱的温暖故事。剧中有魔教教主，有天下第一剑客，有身世成谜的江湖大夫，有忠心耿耿的小丫鬟，更有艳压秦淮的当红花魁，众多看似完全没有交集的人物纷纷亮相登场，搅乱江湖一池春水。`,coverMode:`content`,coverUrl:`/md-204/uploads/default/other/2024-08-26/14664d2c31e61c201a29cd4abba267c5.jpg`,showPlayCount:!0,playCountDelta:0,showEpisode:!0},{contentId:`c2304e94ec0ba208`,contentName:`王的男人`,titleMode:`custom`,title:`王的男人`,description:`朝鲜第十代王燕山王君时期，艺人长生（甘宇成饰）和孔吉（李俊基饰）因为不肯加入当地的艺人团，来到京城汉阳谋生。此时暴君燕山君（郑镇荣饰）沉迷于宠妾张绿水（姜成妍饰），朝纲混乱，民不聊生。长生与孔吉二人在街头开始表演讽刺君主的喜剧，大受欢迎，却遭逮捕。后要求到王面前表演，求得一笑。结果，多亏孔吉的急中生智，燕山君才笑了出来。两人随即被留在宫中取乐，孔吉更是因为美色令王倍加宠爱。他们不停表演，大臣们却各自心怀鬼胎，导致了杀戮局面。最终，君王和艺人的命运又将如何呢？`,coverMode:`content`,coverUrl:`/md-204/resource/8c/8cb28f46831558fbeb2f34b2076c3b4e.jpg`,showPlayCount:!0,playCountDelta:0,showEpisode:!0},{contentId:`c7ffc6a558ae8683`,contentName:`怒`,titleMode:`custom`,title:`怒`,description:`炎炎夏日，东京八王子郊外社区，一对夫妇惨遭杀害。事后凶手用血在墙上写下大大的“怒”字，随后逃亡，销声匿迹长达一年之久。而在此期间，三个身份不明的男子和身边的人相遇了。曾自甘堕落的爱子（宫崎葵饰）被父亲（渡边谦饰）领回海滨小镇，邂逅了不善言辞的哲也（松山研一饰）。在东京工作的同性恋优马（妻夫木聪饰）将柔情似水的直人（绫野刚饰）带回了家，他不相信对方，却又尝试去相信。随母亲搬到冲绳的小泉（广濑铃饰）跟着同学辰哉（佐久本宝饰）登上一座荒岛，在废墟中遇到了背包客田中（森山未来饰），他们短暂成为朋友，而可怕的命运突然降临泉的头上。不久之后，通缉令遍布全国，三个男子的真实身份引人生疑……本片根据吉田修一的同名原作改编。`,coverMode:`content`,coverUrl:`/md-204/resource/24/24ef267eef2c35b5e4cf12dac8b55c14.jpg`,showPlayCount:!0,playCountDelta:0,showEpisode:!0},{contentId:`98217427ed96ec51`,contentName:`熔炉`,titleMode:`custom`,title:`熔炉`,description:`来自首尔的哑语美术老师仁浩（孔宥饰）来到雾津，应聘慈爱聋哑人学校。天降大雾，他意外撞车，维修时邂逅了人权组织成员柔珍（郑有美饰）。仁浩妻子早亡，8岁女儿天生哮喘由祖母照看，所以他不辞辛苦谋职养家。然而，双胞胎的校长与教导主任竟逼仁浩索贿5千万韩元。同时，仁浩逐渐发现学校笼罩着一种紧张压抑的气氛，令人窒息。有三个孩子引人关注：聪颖的金妍斗（金贤秀饰）、贪吃的陈宥利（郑仁絮饰）和弟弟自杀身亡的全民秀（白承焕饰），民秀总是满脸淤青。下课后，仁浩还听到女厕所中有呼喊与哭泣，在门卫的阻拦下他未深究。之后。他意外目睹了校长行贿警察，教导员毒打民秀，宿导溺罚妍斗的行径。一个惊天的隐秘被慢慢揭开，真相令韩国震惊……本片取材于2005年光州一所聋哑障碍人学校的真实事件，改编自韩国作家孔枝泳的同名小说。`,coverMode:`content`,coverUrl:`/md-204/resource/b4/b410ccdcd86936455b9460a9152aaa47.jpg`,showPlayCount:!0,playCountDelta:0,showEpisode:!0},{contentId:`caa2b4eb4eb40de0`,contentName:`再次来寻我`,titleMode:`custom`,title:`再次来寻我`,description:`在宇回到曾经与初恋志勋相遇的303号房，这里即将被拆迁，他在房间里回忆和志勋的点点滴滴，突然被书桌上的电话所吸引，一拿起话筒听到的竟是志勋的声音！在房子主人的同意下，在宇带着电话离开了303室，在回家的途中他发现自己像走在一个陌生的地方，而对面走来的竟是已消失已久的志勋…`,coverMode:`content`,coverUrl:`/md-204/resource/2b/2b43375f2248c1a012847d4507fd21a3.jpg`,showPlayCount:!0,playCountDelta:0,showEpisode:!0}]}}];function C(e,t){let n=String(e||``).split(`/`).filter(Boolean),r=n.findIndex(e=>e===`video`||e===`webview`);return r<0?!1:n[r+1]===t}function w({detailId:f,initialInformation:w,isWebView:T=!1,materialConfig:E}){let D=se(`components.pages.videoDetail`),O=a(),k=ae(),ce=oe(),A=v(!1),j=k.level,M=Array.isArray(j)?j:typeof j==`string`?[j]:[],N=M.findIndex(e=>e===`episode`),le=N>=0?M[N+1]:M[2],P=Math.max(1,Number(le)||1),[ue,F]=d(`detail-current-series-num-${f}`,P);g(()=>{F(P)},[P,F]);let I=Math.max(1,Number(ue)||1),L=Math.max(0,I-1),{data:R,isPending:z,isFetching:B,isError:V,isSuccess:H}=c(_(()=>[`video-detail`,f],[f]),async()=>f?await r({id:f}):null,{enabled:!!f}),U=_(()=>{let e=R?.data?.video;return!e||typeof e!=`object`?null:{...e,content_type:1,episode_cnt:e.links?.length||0}},[R?.data?.video]),de=w??U??null,[W,G]=d(`detail-information-${f}`,de);g(()=>{!W?.id||A.current||(A.current=!0,i({page_key:`page_video_detail`,page_name:`详情页`}))},[W?.id]);let fe=W?.links?.[L]?.id||``,K=!!f&&!W&&(z||B),q=!f||!!W||V||H,[pe,me]=d(`info-detail-active-tab-${f}`,`video`),[J,Y]=d(`info-detail-comment-add-count-${f}`,0),[X,he]=d(`info-detail-comment-total-${f}`,void 0);g(()=>{!W&&U&&G(U)},[W,U,G]);let Z=h(e=>{G(t=>t&&{...t,...e})},[G]);u(()=>{W?.id&&W.id},[W?.id],`detail-page-report-${f}`),g(()=>{!W||typeof window>`u`||window.sensors?.track?.(`detail_page_view`,{object_id:W.id||f,author_id:W.up_user,object_type:W.content_type,object_category:W.content_type,object_tags:W.tags?.map(e=>e.name),block_id:``,page_source:window.location?.pathname||``})},[f,W]),g(()=>{Y(0)},[fe,Y]),_(()=>(typeof X==`number`?X:0)+J,[J,X]);let ge=h(()=>{},[!1,me]);h(()=>{Y(e=>e+1)},[Y]),g(()=>{},[!1,ge,W?.id,ce]);let Q=h(e=>{let t=Math.max(1,Math.floor(Number(e)||1));if(typeof window>`u`)return;let n=String(W?.id||f||``).trim();if(!n)return;let r=T||window.isWebView===!0,i=`/${r?`webview`:`video`}/${n}/${encodeURIComponent(W?.name||``)}/episode/${t}`,{search:a,hash:o,pathname:c}=window.location,l=`${i}${a}${o}`,u=`${c}${a}${o}`,d=C(c,n);if(u!==l){if(r){let e=W?.links?.[Math.max(0,t-1)],r=ee(String(e?.m3u8_url||e?.preview_m3u8_url||``).trim());s({poster:String(W?.img_y||W?.img_x||W?.preview_images?.[0]||``).trim(),src:r,title:String(W?.title||W?.name||``).trim(),contentId:n,episode:t}),I!==t&&F(t);return}d&&typeof window.history?.replaceState==`function`?(window.history.replaceState(window.history.state,``,l),F(t)):O.replace(l,{scroll:!1});return}I!==t&&F(t)},[I,f,W?.id,W?.img_x,W?.img_y,W?.links,W?.name,W?.preview_images,W?.title,T,O,F]);g(()=>{let e=Array.isArray(W?.links)?W.links.length:0;e<=0||I<=e||Q(1)},[I,Q,W?.links]);let $=W?.status===`1`,{data:_e}=c([l.CHANNEL],()=>n()),ve=e(_e?.data),ye=_(()=>{if(E!==void 0){let e=new Map(S.map(e=>[e.componentName,e]));return E.map(t=>{let n=e.get(t.componentName);return{...n,...t,props:{...n?.props??{},...t.props??{}}}})}return S},[E]),be=_(()=>({information:W??void 0,currentSeriesNum:I,onEpisodeChange:Q,onUpdateInformation:Z,detailId:f,episodeIndex:L,isShow:!0,isWebView:T,isInformationLoading:K,isInformationResolved:q}),[I,f,L,Q,Z,W,K,q,T,!0]),xe=h(e=>{if(!W)return null;let t=m[e.componentName];if(!t)return null;let n=t.clientComponent,r=ne(t,e.props);return r.isValid?b(n,{...r.props}):b(`div`,{children:`组件配置错误`})},[W]);return x(`div`,{className:`w-full min-h-screen bg-bg2 text-text1 ${T?``:`pt-11`}`,children:[!T&&b(`div`,{className:`fixed bg-black top-0 left-0 right-0 z-[1000]`,children:b(p,{data:{list:ve}})}),b(`div`,{className:`mx-auto w-full max-w-[840px] pb-6`,children:x(y,{children:[W&&!$&&b(o,{type:`no-content`,text:D(`videoDetailClient.videoUnavailable`)}),W&&$&&x(y,{children:[!T&&b(re,{isVideo:!0,information:W,episodeIndex:L}),b(`div`,{id:`selectPopupPosition`,className:`w-full`}),!1,x(`div`,{className:t(`w-full`,!1),children:[b(te,{value:be,children:ye.map(e=>b(ie,{children:xe(e)},e.id))}),!1]}),!1]}),!W&&b(o,{type:`no-content`,text:D(`videoDetailClient.videoDeleted`)})]})})]})}export{w as default};
+'use client';
+
+import { getChannelList } from "../../biz/utils/helpers/get-channel-list.mjs";
+import { cn } from "../../../utils/cn.mjs";
+import { gContentGetAppChannels, gContentGetVideoDetail } from "../../../service/generated/client.mjs";
+import { trackAppPageView } from "../../../utils/tracking.mjs";
+import { useRouter as useRouter$1 } from "../../../utils/use-compatible-router.mjs";
+import { EmptyState } from "../../ui/empty.mjs";
+import { buildVideoPlayerSrc } from "../../common/video-player/process-m3u8-cache.mjs";
+import { notifyBridgeEpisodeChanged } from "../../../utils/login-modal-bridge.mjs";
+import { useRequest } from "../../../hooks/query/use-query.mjs";
+import { queryKey } from "../../../constants/query-key.mjs";
+import { useKeepAliveEffect, useKeepAliveState } from "../../common/keep-scroll-position/index.mjs";
+import { apiCollectClick } from "../../../utils/api-collect.mjs";
+import detail_search_bar_default from "../../biz/business/search-bar/variants/detail-search-bar/index.mjs";
+import { normalizeHomeRecommendRuntimeProps } from "../../biz/business/home-recommend/shared/home-recommend-runtime-props.mjs";
+import { VideoDetailMaterialRuntimeProvider } from "../../biz/business/detail/shared/runtime-context-provider.mjs";
+import { resolveMaterialProps, videoDetailMaterials } from "../../biz/business/detail/shared/registry.mjs";
+import { DetailHero } from "../../biz/business/detail/shared/video-hero.mjs";
+import { useParams, useSearchParams } from "next/navigation";
+import { Fragment, useCallback, useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/pages/video-detail/video-detail-client.tsx
+const DEFAULT_VIDEO_DETAIL_MATERIAL_CONFIG = [
+	{
+		id: "detail-info",
+		componentName: "video-detail-info",
+		props: {}
+	},
+	{
+		id: "detail-info-title-tags-episodes",
+		componentName: "video-detail-info-title-tags-episodes",
+		props: {}
+	},
+	{
+		id: "detail-actions",
+		componentName: "video-detail-actions",
+		props: {}
+	},
+	{
+		id: "detail-recommend",
+		componentName: "video-detail-recommend",
+		props: {
+			title: "猜你喜欢",
+			rows: 2,
+			columns: 3,
+			recommendContentConfig: {
+				enabled: false,
+				categories: [],
+				tags: [{ name: "腐剧" }],
+				sortRule: "popular",
+				contentForms: []
+			},
+			showPlayCount: true,
+			playCountDelta: 0,
+			showEpisode: true,
+			enableInfinite: false,
+			items: [
+				{
+					contentId: "d6a35ba3279e6f0d",
+					contentName: "贺总的私宠罪妻",
+					titleMode: "custom",
+					title: "贺总的私宠罪妻",
+					description: "简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百简介多少字是不是两百",
+					coverMode: "upload",
+					coverUrl: "/truss/20260227/69a136457d10f.jpgxxx",
+					showPlayCount: true,
+					playCountDelta: 0,
+					showEpisode: true
+				},
+				{
+					contentId: "b0f42fed731239a7",
+					contentName: "少年江湖物语",
+					titleMode: "custom",
+					title: "少年江湖物语",
+					description: "网剧《少年江湖物语》讲述了一个江湖中邪不压正，青春正好，有情有爱的温暖故事。剧中有魔教教主，有天下第一剑客，有身世成谜的江湖大夫，有忠心耿耿的小丫鬟，更有艳压秦淮的当红花魁，众多看似完全没有交集的人物纷纷亮相登场，搅乱江湖一池春水。",
+					coverMode: "content",
+					coverUrl: "/md-204/uploads/default/other/2024-08-26/14664d2c31e61c201a29cd4abba267c5.jpg",
+					showPlayCount: true,
+					playCountDelta: 0,
+					showEpisode: true
+				},
+				{
+					contentId: "c2304e94ec0ba208",
+					contentName: "王的男人",
+					titleMode: "custom",
+					title: "王的男人",
+					description: "朝鲜第十代王燕山王君时期，艺人长生（甘宇成饰）和孔吉（李俊基饰）因为不肯加入当地的艺人团，来到京城汉阳谋生。此时暴君燕山君（郑镇荣饰）沉迷于宠妾张绿水（姜成妍饰），朝纲混乱，民不聊生。长生与孔吉二人在街头开始表演讽刺君主的喜剧，大受欢迎，却遭逮捕。后要求到王面前表演，求得一笑。结果，多亏孔吉的急中生智，燕山君才笑了出来。两人随即被留在宫中取乐，孔吉更是因为美色令王倍加宠爱。他们不停表演，大臣们却各自心怀鬼胎，导致了杀戮局面。最终，君王和艺人的命运又将如何呢？",
+					coverMode: "content",
+					coverUrl: "/md-204/resource/8c/8cb28f46831558fbeb2f34b2076c3b4e.jpg",
+					showPlayCount: true,
+					playCountDelta: 0,
+					showEpisode: true
+				},
+				{
+					contentId: "c7ffc6a558ae8683",
+					contentName: "怒",
+					titleMode: "custom",
+					title: "怒",
+					description: "炎炎夏日，东京八王子郊外社区，一对夫妇惨遭杀害。事后凶手用血在墙上写下大大的“怒”字，随后逃亡，销声匿迹长达一年之久。而在此期间，三个身份不明的男子和身边的人相遇了。曾自甘堕落的爱子（宫崎葵饰）被父亲（渡边谦饰）领回海滨小镇，邂逅了不善言辞的哲也（松山研一饰）。在东京工作的同性恋优马（妻夫木聪饰）将柔情似水的直人（绫野刚饰）带回了家，他不相信对方，却又尝试去相信。随母亲搬到冲绳的小泉（广濑铃饰）跟着同学辰哉（佐久本宝饰）登上一座荒岛，在废墟中遇到了背包客田中（森山未来饰），他们短暂成为朋友，而可怕的命运突然降临泉的头上。不久之后，通缉令遍布全国，三个男子的真实身份引人生疑……本片根据吉田修一的同名原作改编。",
+					coverMode: "content",
+					coverUrl: "/md-204/resource/24/24ef267eef2c35b5e4cf12dac8b55c14.jpg",
+					showPlayCount: true,
+					playCountDelta: 0,
+					showEpisode: true
+				},
+				{
+					contentId: "98217427ed96ec51",
+					contentName: "熔炉",
+					titleMode: "custom",
+					title: "熔炉",
+					description: "来自首尔的哑语美术老师仁浩（孔宥饰）来到雾津，应聘慈爱聋哑人学校。天降大雾，他意外撞车，维修时邂逅了人权组织成员柔珍（郑有美饰）。仁浩妻子早亡，8岁女儿天生哮喘由祖母照看，所以他不辞辛苦谋职养家。然而，双胞胎的校长与教导主任竟逼仁浩索贿5千万韩元。同时，仁浩逐渐发现学校笼罩着一种紧张压抑的气氛，令人窒息。有三个孩子引人关注：聪颖的金妍斗（金贤秀饰）、贪吃的陈宥利（郑仁絮饰）和弟弟自杀身亡的全民秀（白承焕饰），民秀总是满脸淤青。下课后，仁浩还听到女厕所中有呼喊与哭泣，在门卫的阻拦下他未深究。之后。他意外目睹了校长行贿警察，教导员毒打民秀，宿导溺罚妍斗的行径。一个惊天的隐秘被慢慢揭开，真相令韩国震惊……本片取材于2005年光州一所聋哑障碍人学校的真实事件，改编自韩国作家孔枝泳的同名小说。",
+					coverMode: "content",
+					coverUrl: "/md-204/resource/b4/b410ccdcd86936455b9460a9152aaa47.jpg",
+					showPlayCount: true,
+					playCountDelta: 0,
+					showEpisode: true
+				},
+				{
+					contentId: "caa2b4eb4eb40de0",
+					contentName: "再次来寻我",
+					titleMode: "custom",
+					title: "再次来寻我",
+					description: "在宇回到曾经与初恋志勋相遇的303号房，这里即将被拆迁，他在房间里回忆和志勋的点点滴滴，突然被书桌上的电话所吸引，一拿起话筒听到的竟是志勋的声音！在房子主人的同意下，在宇带着电话离开了303室，在回家的途中他发现自己像走在一个陌生的地方，而对面走来的竟是已消失已久的志勋…",
+					coverMode: "content",
+					coverUrl: "/md-204/resource/2b/2b43375f2248c1a012847d4507fd21a3.jpg",
+					showPlayCount: true,
+					playCountDelta: 0,
+					showEpisode: true
+				}
+			]
+		}
+	}
+];
+/**
+* 判断当前 pathname 是否命中同一详情页路由（/video/:id 或 /webview/:id）。
+*/
+function isSameDetailEpisodeRoute(pathname, expectedDetailId) {
+	const segments = String(pathname || "").split("/").filter(Boolean);
+	const routeRootIndex = segments.findIndex((segment) => segment === "video" || segment === "webview");
+	if (routeRootIndex < 0) return false;
+	return segments[routeRootIndex + 1] === expectedDetailId;
+}
+function VideoDetailClient({ detailId, initialInformation, isWebView = false, materialConfig }) {
+	const t = useTranslations("components.pages.videoDetail");
+	const router = useRouter$1();
+	const params = useParams();
+	const searchParams = useSearchParams();
+	const hasTrackedPageViewRef = useRef(false);
+	const level = params.level;
+	const normalizedLevel = Array.isArray(level) ? level : typeof level === "string" ? [level] : [];
+	const episodeTokenIndex = normalizedLevel.findIndex((item) => item === "episode");
+	const seriesNumText = episodeTokenIndex >= 0 ? normalizedLevel[episodeTokenIndex + 1] : normalizedLevel[2];
+	const routeSeriesNum = Math.max(1, Number(seriesNumText) || 1);
+	const [activeSeriesNum, setActiveSeriesNum] = useKeepAliveState(`detail-current-series-num-${detailId}`, routeSeriesNum);
+	useEffect(() => {
+		setActiveSeriesNum(routeSeriesNum);
+	}, [routeSeriesNum, setActiveSeriesNum]);
+	const currentSeriesNum = Math.max(1, Number(activeSeriesNum) || 1);
+	const episodeIndex = Math.max(0, currentSeriesNum - 1);
+	const { data: videoDetailRes, isPending: isDetailPending, isFetching: isDetailFetching, isError: isDetailError, isSuccess: isDetailSuccess } = useRequest(useMemo(() => {
+		return ["video-detail", detailId];
+	}, [detailId]), async () => {
+		if (!detailId) return null;
+		return await gContentGetVideoDetail({ id: detailId });
+	}, { enabled: Boolean(detailId) });
+	const resolvedDetailInformation = useMemo(() => {
+		const detail = videoDetailRes?.data?.video;
+		if (!detail || typeof detail !== "object") return null;
+		return {
+			...detail,
+			content_type: 1,
+			episode_cnt: detail.links?.length || 0
+		};
+	}, [videoDetailRes?.data?.video]);
+	const resolvedInitialInformation = initialInformation ?? resolvedDetailInformation ?? null;
+	const [information, setInformation] = useKeepAliveState(`detail-information-${detailId}`, resolvedInitialInformation);
+	useEffect(() => {
+		if (!information?.id || hasTrackedPageViewRef.current) return;
+		hasTrackedPageViewRef.current = true;
+		trackAppPageView({
+			page_key: "page_video_detail",
+			page_name: "详情页"
+		});
+	}, [information?.id]);
+	const currentEpisodeId = information?.links?.[episodeIndex]?.id || "";
+	const isInformationLoading = Boolean(detailId) && !information && (isDetailPending || isDetailFetching);
+	const isInformationResolved = !detailId || Boolean(information) || isDetailError || isDetailSuccess;
+	const [activeTab, setActiveTab] = useKeepAliveState(`info-detail-active-tab-${detailId}`, "video");
+	const [commentAddCount, setCommentAddCount] = useKeepAliveState(`info-detail-comment-add-count-${detailId}`, 0);
+	const [commentTotal, setCommentTotal] = useKeepAliveState(`info-detail-comment-total-${detailId}`, void 0);
+	useEffect(() => {
+		if (!information && resolvedDetailInformation) setInformation(resolvedDetailInformation);
+	}, [
+		information,
+		resolvedDetailInformation,
+		setInformation
+	]);
+	const handleUpdateInformation = useCallback((nextData) => {
+		setInformation((prev) => {
+			if (!prev) return prev;
+			return {
+				...prev,
+				...nextData
+			};
+		});
+	}, [setInformation]);
+	useKeepAliveEffect(() => {
+		if (!information?.id) return;
+		/* @__PURE__ */ apiCollectClick({ contentId: information.id });
+	}, [information?.id], `detail-page-report-${detailId}`);
+	useEffect(() => {
+		if (!information || typeof window === "undefined") return;
+		window.sensors?.track?.("detail_page_view", {
+			object_id: information.id || detailId,
+			author_id: information.up_user,
+			object_type: information.content_type,
+			object_category: information.content_type,
+			object_tags: information.tags?.map((item) => item.name),
+			block_id: "",
+			page_source: window.location?.pathname || ""
+		});
+	}, [detailId, information]);
+	useEffect(() => {
+		setCommentAddCount(0);
+	}, [currentEpisodeId, setCommentAddCount]);
+	useMemo(() => {
+		return (typeof commentTotal === "number" ? commentTotal : 0) + commentAddCount;
+	}, [commentAddCount, commentTotal]);
+	const enableDiscussion = false;
+	const showVideoTab = true;
+	const handleNavigateToDiscussion = useCallback(() => {}, [enableDiscussion, setActiveTab]);
+	useCallback(() => {
+		setCommentAddCount((prev) => prev + 1);
+	}, [setCommentAddCount]);
+	useEffect(() => {}, [
+		enableDiscussion,
+		handleNavigateToDiscussion,
+		information?.id,
+		searchParams
+	]);
+	const handleEpisodeChange = useCallback((nextSeriesNum) => {
+		const resolvedSeriesNum = Math.max(1, Math.floor(Number(nextSeriesNum) || 1));
+		if (typeof window === "undefined") return;
+		const resolvedDetailId = String(information?.id || detailId || "").trim();
+		if (!resolvedDetailId) return;
+		const runtimeIsWebView = isWebView || window.isWebView === true;
+		const nextPath = `/${runtimeIsWebView ? "webview" : "video"}/${resolvedDetailId}/${encodeURIComponent(information?.name || "")}/episode/${resolvedSeriesNum}`;
+		const { search, hash, pathname } = window.location;
+		const nextUrl = `${nextPath}${search}${hash}`;
+		const currentUrl = `${pathname}${search}${hash}`;
+		const canUseHistoryReplace = isSameDetailEpisodeRoute(pathname, resolvedDetailId);
+		if (currentUrl !== nextUrl) {
+			if (runtimeIsWebView) {
+				const episodeLink = information?.links?.[Math.max(0, resolvedSeriesNum - 1)];
+				const src = buildVideoPlayerSrc(String(episodeLink?.m3u8_url || episodeLink?.preview_m3u8_url || "").trim());
+				notifyBridgeEpisodeChanged({
+					poster: String(information?.img_y || information?.img_x || information?.preview_images?.[0] || "").trim(),
+					src,
+					title: String(information?.title || information?.name || "").trim(),
+					contentId: resolvedDetailId,
+					episode: resolvedSeriesNum
+				});
+				if (currentSeriesNum !== resolvedSeriesNum) setActiveSeriesNum(resolvedSeriesNum);
+				return;
+			}
+			if (canUseHistoryReplace && typeof window.history?.replaceState === "function") {
+				window.history.replaceState(window.history.state, "", nextUrl);
+				setActiveSeriesNum(resolvedSeriesNum);
+			} else router.replace(nextUrl, { scroll: false });
+			return;
+		}
+		if (currentSeriesNum !== resolvedSeriesNum) setActiveSeriesNum(resolvedSeriesNum);
+	}, [
+		currentSeriesNum,
+		detailId,
+		information?.id,
+		information?.img_x,
+		information?.img_y,
+		information?.links,
+		information?.name,
+		information?.preview_images,
+		information?.title,
+		isWebView,
+		router,
+		setActiveSeriesNum
+	]);
+	useEffect(() => {
+		const availableEpisodeCount = Array.isArray(information?.links) ? information.links.length : 0;
+		if (availableEpisodeCount <= 0 || currentSeriesNum <= availableEpisodeCount) return;
+		handleEpisodeChange(1);
+	}, [
+		currentSeriesNum,
+		handleEpisodeChange,
+		information?.links
+	]);
+	const isValidStatus = information?.status === "1";
+	const { data: _channelDataRes } = useRequest([queryKey.CHANNEL], () => gContentGetAppChannels());
+	const channelDataList = getChannelList(_channelDataRes?.data);
+	const resolvedMaterialConfig = useMemo(() => {
+		if (materialConfig !== void 0) {
+			const defaultMap = new Map(DEFAULT_VIDEO_DETAIL_MATERIAL_CONFIG.map((item) => [item.componentName, item]));
+			return materialConfig.map((config) => {
+				const fallback = defaultMap.get(config.componentName);
+				return {
+					...fallback,
+					...config,
+					props: {
+						...fallback?.props ?? {},
+						...config.props ?? {}
+					}
+				};
+			});
+		}
+		return DEFAULT_VIDEO_DETAIL_MATERIAL_CONFIG;
+	}, [materialConfig]);
+	const runtimeContext = useMemo(() => {
+		return {
+			information: information ?? void 0,
+			currentSeriesNum,
+			onEpisodeChange: handleEpisodeChange,
+			onUpdateInformation: handleUpdateInformation,
+			detailId,
+			episodeIndex,
+			isShow: showVideoTab,
+			isWebView,
+			isInformationLoading,
+			isInformationResolved
+		};
+	}, [
+		currentSeriesNum,
+		detailId,
+		episodeIndex,
+		handleEpisodeChange,
+		handleUpdateInformation,
+		information,
+		isInformationLoading,
+		isInformationResolved,
+		isWebView,
+		showVideoTab
+	]);
+	const renderMaterial = useCallback((config) => {
+		if (!information) return null;
+		const material = videoDetailMaterials[config.componentName];
+		if (!material) return null;
+		const Component = material.clientComponent;
+		const resolvedProps = resolveMaterialProps(material, config.props);
+		if (!resolvedProps.isValid) return /* @__PURE__ */ jsx("div", { children: "组件配置错误" });
+		return /* @__PURE__ */ jsx(Component, { ...config.componentName === "video-detail-recommend" ? normalizeHomeRecommendRuntimeProps(resolvedProps.props) : resolvedProps.props });
+	}, [information]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `w-full min-h-screen bg-bg2 text-text1 ${isWebView ? "" : "pt-11"}`,
+		children: [!isWebView && /* @__PURE__ */ jsx("div", {
+			className: "fixed bg-black top-0 left-0 right-0 z-[1000]",
+			children: /* @__PURE__ */ jsx(detail_search_bar_default, { data: { list: channelDataList } })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mx-auto w-full max-w-[840px] pb-6",
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				information && !isValidStatus && /* @__PURE__ */ jsx(EmptyState, {
+					type: "no-content",
+					text: t("videoDetailClient.videoUnavailable")
+				}),
+				information && isValidStatus && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					!isWebView && /* @__PURE__ */ jsx(DetailHero, {
+						isVideo: true,
+						information,
+						episodeIndex
+					}),
+					/* @__PURE__ */ jsx("div", {
+						id: "selectPopupPosition",
+						className: "w-full"
+					}),
+					enableDiscussion,
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("w-full", false),
+						children: [/* @__PURE__ */ jsx(VideoDetailMaterialRuntimeProvider, {
+							value: runtimeContext,
+							children: resolvedMaterialConfig.map((config) => /* @__PURE__ */ jsx(Fragment, { children: renderMaterial(config) }, config.id))
+						}), enableDiscussion]
+					}),
+					enableDiscussion
+				] }),
+				!information && /* @__PURE__ */ jsx(EmptyState, {
+					type: "no-content",
+					text: t("videoDetailClient.videoDeleted")
+				})
+			] })
+		})]
+	});
+}
+
+//#endregion
+export { VideoDetailClient as default };

package/dist/components/pages/video-list/index.mjs

@@ -1,2 +1,62 @@
 
-import{pContentGetNewstVideoList as e,pContentGetTopRatedVideoList as t}from"../../../service/generated/client.mjs";import{pContentGetNewstVideoListKey as n,pContentGetTopRatedVideoListKey as r}from"../../../service/generated/tanstack.mjs";import{HydrationBoundary as i}from"../../../hooks/query/hydration-boundary.mjs";import{revalidate as a}from"../../../constants/revalidate.mjs";import{getNextVideoListPageParam as o,resolveNextCursor as s}from"./types.mjs";import c from"./video-list-client.mjs";import{jsx as l}from"react/jsx-runtime";async function u({title:u=`列表页`,tags:d=[]}={}){let f={page_size:10,tags:d.length?d:void 0};return l(i,{prefetch:[{type:`infinite`,queryKey:r(f),queryFn:async e=>{let n=(await t({page_size:10,cursor:e||void 0,tags:d.length?d:void 0},{revalidate:a.TIME})).data,r=Array.isArray(n?.videos)?n.videos:[];return{list:r,nextCursor:r.length<10?``:s(n)}},initialPageParam:``,getNextPageParam:e=>o(e)},{type:`infinite`,queryKey:n(f),queryFn:async t=>{let n=(await e({page_size:10,cursor:t||void 0,tags:d.length?d:void 0},{revalidate:a.TIME})).data,r=Array.isArray(n?.videos)?n.videos:[];return{list:r,nextCursor:r.length<10?``:s(n)}},initialPageParam:``,getNextPageParam:e=>o(e)}],children:l(c,{title:u,tags:d})})}export{u as VideoListPage};
+import { pContentGetNewstVideoList, pContentGetTopRatedVideoList } from "../../../service/generated/client.mjs";
+import { pContentGetNewstVideoListKey, pContentGetTopRatedVideoListKey } from "../../../service/generated/tanstack.mjs";
+import { HydrationBoundary } from "../../../hooks/query/hydration-boundary.mjs";
+import { revalidate } from "../../../constants/revalidate.mjs";
+import { getNextVideoListPageParam, resolveNextCursor } from "./types.mjs";
+import VideoListClient from "./video-list-client.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/pages/video-list/index.tsx
+const PAGE_SIZE = 10;
+const INITIAL_CURSOR = "";
+async function VideoListPage({ title = "列表页", tags = [] } = {}) {
+	const baseQuery = {
+		page_size: PAGE_SIZE,
+		tags: tags.length ? tags : void 0
+	};
+	return /* @__PURE__ */ jsx(HydrationBoundary, {
+		prefetch: [{
+			type: "infinite",
+			queryKey: pContentGetTopRatedVideoListKey(baseQuery),
+			queryFn: async (cursor) => {
+				const d = (await pContentGetTopRatedVideoList({
+					page_size: PAGE_SIZE,
+					cursor: cursor || void 0,
+					tags: tags.length ? tags : void 0
+				}, { revalidate: revalidate.TIME })).data;
+				const nextList = Array.isArray(d?.videos) ? d.videos : [];
+				return {
+					list: nextList,
+					nextCursor: nextList.length < PAGE_SIZE ? "" : resolveNextCursor(d)
+				};
+			},
+			initialPageParam: INITIAL_CURSOR,
+			getNextPageParam: (last) => getNextVideoListPageParam(last)
+		}, {
+			type: "infinite",
+			queryKey: pContentGetNewstVideoListKey(baseQuery),
+			queryFn: async (cursor) => {
+				const d = (await pContentGetNewstVideoList({
+					page_size: PAGE_SIZE,
+					cursor: cursor || void 0,
+					tags: tags.length ? tags : void 0
+				}, { revalidate: revalidate.TIME })).data;
+				const nextList = Array.isArray(d?.videos) ? d.videos : [];
+				return {
+					list: nextList,
+					nextCursor: nextList.length < PAGE_SIZE ? "" : resolveNextCursor(d)
+				};
+			},
+			initialPageParam: INITIAL_CURSOR,
+			getNextPageParam: (last) => getNextVideoListPageParam(last)
+		}],
+		children: /* @__PURE__ */ jsx(VideoListClient, {
+			title,
+			tags
+		})
+	});
+}
+
+//#endregion
+export { VideoListPage };

package/dist/components/pages/video-list/types.mjs

@@ -1,2 +1,17 @@
 
-function e(e){return e?.cursor??e?.cusor??``}function t(e){return e.nextCursor===``?void 0:e.nextCursor}export{t as getNextVideoListPageParam,e as resolveNextCursor};
+//#region components/pages/video-list/types.ts
+/**
+* 兼容后端历史字段 `cusor` 与新字段 `cursor`，统一得到下一页游标。
+*/
+function resolveNextCursor(data) {
+	return data?.cursor ?? data?.cusor ?? "";
+}
+/**
+* 基于游标判断是否还有下一页。
+*/
+function getNextVideoListPageParam(last) {
+	return last.nextCursor === "" ? void 0 : last.nextCursor;
+}
+
+//#endregion
+export { getNextVideoListPageParam, resolveNextCursor };

package/dist/components/pages/video-list/video-list-client.mjs

@@ -1,2 +1,145 @@
 
-"use client";import{cn as e}from"../../../utils/cn.mjs";import{pContentGetNewstVideoList as t,pContentGetTopRatedVideoList as n}from"../../../service/generated/client.mjs";import{pContentGetNewstVideoListKey as r,pContentGetTopRatedVideoListKey as i}from"../../../service/generated/tanstack.mjs";import{useRouter as a}from"../../../utils/use-compatible-router.mjs";import{Button as o}from"../../ui/button.mjs";import{Box as s}from"../../ui/box.mjs";import{InfiniteScroll as c}from"../../ui/infinite-scroll.mjs";import{Text as l}from"../../ui/text.mjs";import{usePaginated as u}from"../../../hooks/query/use-query.mjs";import d from"../../../assets/icons/left_arrow.mjs";import{getNextVideoListPageParam as f,resolveNextCursor as p}from"./types.mjs";import{VideoListRecommendItem as m}from"./video-list-recommend-item.mjs";import{VideoListSkeleton as h}from"./video-list-skeleton.mjs";import{useEffect as g,useMemo as _,useState as v}from"react";import{jsx as y,jsxs as b}from"react/jsx-runtime";const x=[];function S({title:S=`列表页`,tags:C=x}){let w=a(),[T,E]=v(`hot`),D=_(()=>({page_size:10,tags:C.length?C:void 0}),[C]),{data:O,fetchNextPage:k,hasNextPage:A,isPending:j,isFetching:M}=u({key:_(()=>T===`hot`?i(D):r(D),[D,T]),queryFn:async e=>{let r={page_size:10,cursor:e||void 0,tags:C.length?C:void 0},i=(T===`hot`?await n(r):await t(r)).data,a=Array.isArray(i?.videos)?i.videos:[];return{list:a,nextCursor:a.length<10?``:p(i)}},getNextPageParam:f,initialPageParam:``,options:{staleTime:0,refetchOnMount:`always`,refetchOnWindowFocus:!1,refetchOnReconnect:!1}}),N=_(()=>O?.pages?.flatMap(e=>e.list)??[],[O?.pages]),P=(O?.pages?.length??0)>0,F=_(()=>P?A??!1:!0,[P,A]),I=N.length===0&&(!P||j||M);g(()=>{typeof window>`u`||window.scrollTo({top:0,behavior:`auto`})},[T]);function L(){w.back()}let R=_(()=>N.map(e=>{let t=e.id??e.mid??``;return y(m,{item:e,href:`/video/${t}/${e.name??``}`},t)}),[N]);return I?y(h,{}):b(s,{as:`main`,className:`min-h-[100dvh] bg-[linear-gradient(180deg,#160320_0%,#2a0a56_100%)] text-white`,children:[b(s,{className:`sticky top-0 z-20 bg-[linear-gradient(180deg,rgba(22,3,32,0.98)_0%,rgba(22,3,32,0.92)_100%)] px-[16px] pb-[12px] pt-[10px] backdrop-blur-[16px]`,children:[b(s,{as:`header`,className:`flex items-center justify-between`,children:[y(o,{type:`button`,variant:`ghost`,size:`icon-sm`,onClick:L,className:`h-[24px] w-[24px] rounded-none p-0 text-white hover:bg-transparent`,children:y(d,{className:`h-[16px] w-[16px]`})}),y(l,{as:`h1`,className:`min-w-0 flex-1 truncate px-[16px] text-center text-[18px] font-medium leading-[22px] text-white`,children:S}),y(s,{className:`h-[24px] w-[24px] shrink-0 opacity-0`,"aria-hidden":!0})]}),b(s,{as:`nav`,className:`mt-[12px] flex gap-[14px]`,children:[y(o,{type:`button`,variant:`ghost`,onClick:()=>E(`hot`),className:e(`h-[28px] min-w-[64px] rounded-[100px] px-[16px] text-[14px] font-normal leading-[20px] text-white`,T===`hot`?`bg-[linear-gradient(90deg,#9756e3_0%,#6c43ee_100%)] shadow-[0_8px_20px_rgba(122,76,255,0.35)] hover:bg-transparent`:`bg-white/20 hover:bg-white/25`),children:`最热`}),y(o,{type:`button`,variant:`ghost`,onClick:()=>E(`latest`),className:e(`h-[28px] min-w-[64px] rounded-[100px] px-[16px] text-[14px] font-normal leading-[20px] text-white`,T===`latest`?`bg-[linear-gradient(90deg,#9756e3_0%,#6c43ee_100%)] shadow-[0_8px_20px_rgba(122,76,255,0.35)] hover:bg-transparent`:`bg-white/20 hover:bg-white/25`),children:`最新`})]})]}),y(c,{loadMore:()=>k().then(()=>void 0),hasMore:F,noMoreText:`没有更多了`,threshold:300,className:`px-[16px] pb-[24px]`,children:y(s,{as:`section`,className:`flex flex-col gap-[16px]`,children:R})},T)]})}export{S as default};
+'use client';
+
+import { cn } from "../../../utils/cn.mjs";
+import { pContentGetNewstVideoList, pContentGetTopRatedVideoList } from "../../../service/generated/client.mjs";
+import { pContentGetNewstVideoListKey, pContentGetTopRatedVideoListKey } from "../../../service/generated/tanstack.mjs";
+import { useRouter } from "../../../utils/use-compatible-router.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Box } from "../../ui/box.mjs";
+import { InfiniteScroll } from "../../ui/infinite-scroll.mjs";
+import { Text } from "../../ui/text.mjs";
+import { usePaginated } from "../../../hooks/query/use-query.mjs";
+import SvgLeftArrow from "../../../assets/icons/left_arrow.mjs";
+import { getNextVideoListPageParam, resolveNextCursor } from "./types.mjs";
+import { VideoListRecommendItem } from "./video-list-recommend-item.mjs";
+import { VideoListSkeleton } from "./video-list-skeleton.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/pages/video-list/video-list-client.tsx
+const PAGE_SIZE = 10;
+const DEFAULT_TITLE = "列表页";
+const DEFAULT_TAGS = [];
+const INITIAL_CURSOR = "";
+function VideoListClient({ title = DEFAULT_TITLE, tags = DEFAULT_TAGS }) {
+	const router = useRouter();
+	const [currentTab, setCurrentTab] = useState("hot");
+	const baseQuery = useMemo(() => {
+		return {
+			page_size: PAGE_SIZE,
+			tags: tags.length ? tags : void 0
+		};
+	}, [tags]);
+	const { data, fetchNextPage, hasNextPage, isPending, isFetching } = usePaginated({
+		key: useMemo(() => {
+			return currentTab === "hot" ? pContentGetTopRatedVideoListKey(baseQuery) : pContentGetNewstVideoListKey(baseQuery);
+		}, [baseQuery, currentTab]),
+		queryFn: async (cursor) => {
+			const params = {
+				page_size: PAGE_SIZE,
+				cursor: cursor || void 0,
+				tags: tags.length ? tags : void 0
+			};
+			const d = (currentTab === "hot" ? await pContentGetTopRatedVideoList(params) : await pContentGetNewstVideoList(params)).data;
+			const nextList = Array.isArray(d?.videos) ? d.videos : [];
+			return {
+				list: nextList,
+				nextCursor: nextList.length < PAGE_SIZE ? "" : resolveNextCursor(d)
+			};
+		},
+		getNextPageParam: getNextVideoListPageParam,
+		initialPageParam: INITIAL_CURSOR,
+		options: {
+			staleTime: 0,
+			refetchOnMount: "always",
+			refetchOnWindowFocus: false,
+			refetchOnReconnect: false
+		}
+	});
+	const allList = useMemo(() => data?.pages?.flatMap((p) => p.list) ?? [], [data?.pages]);
+	const hasLoadedAnyPage = (data?.pages?.length ?? 0) > 0;
+	const resolvedHasMore = useMemo(() => {
+		if (!hasLoadedAnyPage) return true;
+		return hasNextPage ?? false;
+	}, [hasLoadedAnyPage, hasNextPage]);
+	const shouldShowInitialSkeleton = allList.length === 0 && (!hasLoadedAnyPage || isPending || isFetching);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		window.scrollTo({
+			top: 0,
+			behavior: "auto"
+		});
+	}, [currentTab]);
+	function handleBack() {
+		router.back();
+	}
+	const videoGrid = useMemo(() => allList.map((item) => {
+		const itemId = item.id ?? item.mid ?? "";
+		return /* @__PURE__ */ jsx(VideoListRecommendItem, {
+			item,
+			href: `/video/${itemId}/${item.name ?? ""}`
+		}, itemId);
+	}), [allList]);
+	if (shouldShowInitialSkeleton) return /* @__PURE__ */ jsx(VideoListSkeleton, {});
+	return /* @__PURE__ */ jsxs(Box, {
+		as: "main",
+		className: "min-h-[100dvh] bg-[linear-gradient(180deg,#160320_0%,#2a0a56_100%)] text-white",
+		children: [/* @__PURE__ */ jsxs(Box, {
+			className: "sticky top-0 z-20 bg-[linear-gradient(180deg,rgba(22,3,32,0.98)_0%,rgba(22,3,32,0.92)_100%)] no-vw-x-16 pb-[12px] pt-[10px] backdrop-blur-[16px]",
+			children: [/* @__PURE__ */ jsxs(Box, {
+				as: "header",
+				className: "flex items-center justify-between",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						onClick: handleBack,
+						className: "h-[24px] w-[24px] rounded-none p-0 text-white hover:bg-transparent",
+						children: /* @__PURE__ */ jsx(SvgLeftArrow, { className: "h-[16px] w-[16px]" })
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						as: "h1",
+						className: "min-w-0 flex-1 truncate px-[16px] text-center text-[18px] font-medium leading-[22px] text-white",
+						children: title
+					}),
+					/* @__PURE__ */ jsx(Box, {
+						className: "h-[24px] w-[24px] shrink-0 opacity-0",
+						"aria-hidden": true
+					})
+				]
+			}), /* @__PURE__ */ jsxs(Box, {
+				as: "nav",
+				className: "mt-[12px] flex gap-[14px]",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					onClick: () => setCurrentTab("hot"),
+					className: cn("h-[28px] min-w-[64px] rounded-[100px] px-[16px] text-[14px] font-normal leading-[20px] text-white", currentTab === "hot" ? "bg-[linear-gradient(90deg,#9756e3_0%,#6c43ee_100%)] shadow-[0_8px_20px_rgba(122,76,255,0.35)] hover:bg-transparent" : "bg-white/20 hover:bg-white/25"),
+					children: "最热"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					onClick: () => setCurrentTab("latest"),
+					className: cn("h-[28px] min-w-[64px] rounded-[100px] px-[16px] text-[14px] font-normal leading-[20px] text-white", currentTab === "latest" ? "bg-[linear-gradient(90deg,#9756e3_0%,#6c43ee_100%)] shadow-[0_8px_20px_rgba(122,76,255,0.35)] hover:bg-transparent" : "bg-white/20 hover:bg-white/25"),
+					children: "最新"
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(InfiniteScroll, {
+			loadMore: () => fetchNextPage().then(() => void 0),
+			hasMore: resolvedHasMore,
+			noMoreText: "没有更多了",
+			threshold: 300,
+			className: "no-vw-x-16 pb-[24px]",
+			children: /* @__PURE__ */ jsx(Box, {
+				as: "section",
+				className: "flex flex-col gap-[16px]",
+				children: videoGrid
+			})
+		}, currentTab)]
+	});
+}
+
+//#endregion
+export { VideoListClient as default };