@funhub/platform 0.2.30 → 0.2.31

package/dist/components/biz/business/detail/shared/video-hero.mjs

@@ -1,2 +1,903 @@
 
-"use client";import{cn as e}from"../../../../../utils/cn.mjs";import{useUserStore as t}from"../../../../../store/modules/user-store.mjs";import{gUserGetVisitorPermissionConfig as n,pContentMatchAds as r}from"../../../../../service/generated/client.mjs";import{pContentMatchAdsKey as i}from"../../../../../service/generated/tanstack.mjs";import{pxToVw as a}from"../../../../../utils/helper.mjs";import{trackVideoEvent as o}from"../../../../../utils/tracking.mjs";import{Image as s}from"../../../../ui/image.mjs";import{Box as c}from"../../../../ui/box.mjs";import{Text as l}from"../../../../ui/text.mjs";import{useLoginModalStore as ee}from"../../../../../store/modules/login-modal-store.mjs";import{useRequest as te}from"../../../../../hooks/query/use-query.mjs";import{useBrowseReport as ne}from"../../../../../hooks/use-browse-report.mjs";import{MediaPreview as u,useMediaPreview as d}from"../../../../common/media-preview/index.mjs";import f from"../../../../common/video-player/index.mjs";import p from"../../../../../assets/icons/detail/video_play.mjs";import{UserActivityMediaGrid as re}from"../../../../common/list/user-activity-list/user-activity-list-item.mjs";import{VideoPlayerRefContext as m}from"../../../../common/video-player/video-player-ref-context.mjs";import{VideoBlindAdOverlay as h}from"../../../../common/video-player/video-blind-ad-overlay.mjs";import{VideoPrerollAd as ie}from"../../../../common/video-player/video-preroll-ad.mjs";import{VideoPrerollAdOverlay as g}from"../../../../common/video-player/video-preroll-ad-overlay.mjs";import{memo as _,useCallback as v,useEffect as y,useMemo as b,useRef as x,useState as S}from"react";import{jsx as C,jsxs as w}from"react/jsx-runtime";import{useTranslations as T}from"next-intl";function E(e){let t=Number(e);return Number.isFinite(t)&&t>0?t:0}function ae(e){if(!e)return 0;for(let t of[`seconds`,`stay_seconds`,`play_seconds`,`watch_seconds`]){let n=E(e[t]);if(n>0)return n}for(let t of[`内容`,`content`,`video`,`视频`]){let n=e[t],r=E(n?.rule?.seconds);if(r>0)return r}for(let t of Object.values(e)){let e=E(t?.rule?.seconds);if(e>0)return e}return 0}function D(e){return C(oe,{...e})}const oe=_(({mode:n=`renderer`,information:a,isVideo:o,episodeIndex:s=0,resumeProgressSeconds:ee=0,className:ne=``})=>{let f=n===`editor`,p=t(e=>e.userId),m=b(()=>({id:a.id,name:a.name,preview_images:a.preview_images,img_y:a.img_y,img_x:a.img_x}),[a.id,a.name,a.preview_images,a.img_y,a.img_x]),h=b(()=>{let e=a?.medias,t=Array.isArray(e)?e.filter(Boolean):[];return t.length>0?t:(m.preview_images?.length?m.preview_images:[m.img_y||m.img_x||``].filter(Boolean)).filter(Boolean).map(e=>({media_url:e,is_video:!1,cover_image:``}))},[m.img_x,m.img_y,m.preview_images,a]),ie=d(),g=b(()=>h.filter(Boolean).map(e=>{let t=e?.is_video?`video`:`image`,n=String(e?.media_url||``),r=e?.cover_image||a.img_y||a.img_x;return{src:n,type:t,...r?{cover:String(r)}:{}}}).filter(e=>!!e.src),[a.img_x,a.img_y,h]),_=v(e=>{f||!g.length||ie.open(g,e)},[f,ie,g]),y=b(()=>({user_id:p,ad_type:`preroll`}),[p]),x=b(()=>{let e=Math.max(0,Number(s)||0),t=a?.links?.[e]?.id;return t?String(t):`ep-${e+1}`},[s,a?.links]),{data:S,isLoading:T,isFetched:E}=te(b(()=>[`detail-preroll-ad`,a.id,x,...i(y)],[a.id,x,y]),()=>r(y),{enabled:!f&&o,staleTime:0,refetchOnMount:`always`,refetchOnWindowFocus:!1}),ae=b(()=>({data:S?.data??null,isLoading:T,isFetched:E}),[E,T,S?.data]);return f?C(`img`,{src:`/static/components-thumb/video_player.png`,alt:`video-preview`,className:`w-full block`}):o?T?C(`div`,{className:`aspect-video w-full bg-background`}):C(O,{information:a,episodeIndex:s,resumeProgressSeconds:ee,isEditor:f,prerollState:ae}):w(`div`,{className:e(`w-full`,ne),children:[w(c,{className:`mt-3 px-[12px] space-y-1`,children:[C(l,{as:`p`,className:`break-all`,dangerouslySetInnerHTML:{__html:a.description}}),C(re,{medias:h,onItemClick:_})]}),C(u,{})]})});D.displayName=`DetailHero`;const O=_(({information:e,episodeIndex:t,resumeProgressSeconds:n,isEditor:r,prerollState:i})=>{let a=b(()=>({id:e.id,mid:e.mid,img_width:e.img_width,img_height:e.img_height,img_y:e.img_y,img_x:e.img_x,preview_images:e.preview_images}),[e.id,e.mid,e.img_width,e.img_height,e.img_y,e.img_x,e.preview_images]);return C(k,{information:{...e,...a},episodeIndex:t,resumeProgressSeconds:n,isEditor:r,prerollState:i})},(e,t)=>{let n=e.information,r=t.information;return n.id===r.id&&n.mid===r.mid&&n.img_width===r.img_width&&n.img_height===r.img_height&&n.img_y===r.img_y&&n.img_x===r.img_x&&e.resumeProgressSeconds===t.resumeProgressSeconds&&e.episodeIndex===t.episodeIndex&&e.isEditor===t.isEditor&&e.prerollState.data===t.prerollState.data&&e.prerollState.isLoading===t.prerollState.isLoading&&e.prerollState.isFetched===t.prerollState.isFetched});O.displayName=`StableDetailPlayerBox`;function k({information:e,episodeIndex:r,resumeProgressSeconds:i,isEditor:l,prerollState:u}){let d=x(null),re=x(null),_=x(null),E=T(`components.biz.business.detail`),D=t(e=>e.isLogin),oe=t(e=>e.userId),O=ee(e=>e.open),k=ee(e=>e.isOpen),A=x(0),j=x(0),M=x(!1),N=x(!1),P=x(null),ue=x(!1),F=x(!1),de=x(!1),I=Math.max(0,Number(r)||0),fe=I+1,[pe,me]=S(!1),[L,R]=S(`main`),[he,z]=S(`auto`),[ge,B]=S(!1),[V,H]=S(!1),[_e,U]=S(!1),[ve,ye]=S(0),W=b(()=>e?.id,[e?.id]),G=b(()=>({id:e.id,mid:e.mid,img_width:e.img_width,img_height:e.img_height,img_y:e.img_y,img_x:e.img_x,preview_images:e.preview_images,links:e.links}),[e.id,e.mid,e.img_width,e.img_height,e.img_y,e.img_x,e.preview_images,e.links]),be=b(()=>G.mid||G.id,[G.id,G.mid]),K=b(()=>{let e=G.links?.[I]?.id;return e?String(e):`ep-${I+1}`},[I,G.links]),q=b(()=>`__reportData_detail_page__${G.id}:${K}`,[K,G.id]),xe=u.data,Se=u.isLoading,Ce=u.isFetched,we=xe?.materials?.[0],Te=xe?.hit===!0,Ee=!!String(we?.advertise_video||``).trim(),J=Te&&!!we&&Ee,{data:Y}=te(b(()=>[`detail-visitor-permission-config`,oe||`guest`],[oe]),()=>n({user_id:oe||``}),{enabled:!l,staleTime:60*1e3,refetchOnWindowFocus:!1}),X=b(()=>ae(Y?.data?.permission_config),[Y?.data?.permission_config]);y(()=>{ue.current||Y&&(ue.current=!0,console.log(`[visitor-limit] permission config:`,Y?.data?.permission_config||null),console.log(`[visitor-limit] resolved limit: ${X}s`))},[X,Y]);let De=b(()=>{if(l||typeof window>`u`)return 0;try{let e=sessionStorage.getItem(q);if(!e)return 0;let t=JSON.parse(e),n=Number(t.currentTime||0),r=Number(t.duration||0);if(!Number.isFinite(n)||!Number.isFinite(r))return 0;if(n>0&&r>0)return n}catch(e){console.error(`读取 sessionStorage 数据失败:`,e)}return 0},[l,q]),Oe=b(()=>{let e=Number(i||0);return Number.isFinite(e)&&e>0?e:0},[i]),ke=b(()=>Oe>0?Oe:De,[Oe,De]),Z=b(()=>{let t=le(e),n=t[t.length?Math.max(0,Math.min(I,t.length-1)):0]?.url||``,r=!!t.length;if(!r)return{hasVideo:!1,hlsList:[],videoUrl:``,width:1,height:1,resolution:`0x0`,aspectRatio:1,poster:``};let i=Number(G.img_width||0)||1,a=Number(G.img_height||0)||1;return{hasVideo:r,hlsList:t,videoUrl:n,width:i,height:a,resolution:se(i,a),aspectRatio:(i||1)/(a||1),poster:G.img_y||G.img_x||G.preview_images?.[0]||``}},[e.id,e.links,I,G.img_width,G.img_height,G.img_y,G.img_x,G.preview_images]),Ae=v((e,t)=>{if(A.current=e,j.current=t,D||X<=0||M.current){F.current||(F.current=!0,console.log(`[visitor-limit] skip: isLogin=${D}, limit=${X}, triggered=${M.current}`));return}if(e<X){let t=Math.max(0,Math.ceil(X-e));P.current!==t&&(P.current=t,console.log(`[visitor-limit] remaining: ${t}s`));return}M.current=!0,N.current=!0;try{d.current?.getPlayer?.()?.pause?.()}catch(e){console.warn(`暂停视频失败:`,e)}O()},[D,O,X]);y(()=>{D&&(M.current=!1,N.current=!1,P.current=null,F.current=!1)},[D]),y(()=>{let e=de.current;if(de.current=k,!(!e||k||D)&&N.current)try{d.current?.getPlayer?.()?.pause?.()}catch(e){console.warn(`登录弹窗关闭后暂停视频失败:`,e)}},[D,k]);let je=b(()=>Z.videoUrl.endsWith(`m3u8`)?{startTimeSeconds:ke,preload:`none`}:{startTimeSeconds:ke},[ke,Z.videoUrl]);y(()=>{A.current=0,j.current=0,M.current=!1,N.current=!1,P.current=null,F.current=!1,ue.current=!1,de.current=!1},[W,I]),y(()=>{if(me(!1),H(!1),B(!1),U(!1),z(`auto`),ye(e=>e+1),l){R(`main`);return}if(J){R(`preroll`);return}R(`main`)},[W,K,l,G.id,J]),y(()=>()=>{_.current&&=(window.clearInterval(_.current),null)},[]),y(()=>{if(L!==`preroll`)return;let e=d.current?.getPlayer?.();if(e)try{e.paused||e.pause?.()}catch(e){console.warn(`贴片展示时暂停正片失败:`,e)}},[L,K,G.id]);let Me=v(e=>{let t=d.current?.getPlayer?.();if(!t)return null;try{`muted`in t&&(t.muted=e),`video`in t&&t.video&&(t.video.muted=e),t.volume=e?0:1}catch(e){console.warn(`同步详情页播放器静音状态失败:`,e)}return t},[]),Ne=v(()=>{_.current&&=(window.clearInterval(_.current),null);let e=0;_.current=window.setInterval(()=>{e+=1;let t=d.current?.getPlayer?.();if(!t){e>=8&&_.current&&(window.clearInterval(_.current),_.current=null);return}_.current&&=(window.clearInterval(_.current),null),t.play?.().catch(e=>{let t=typeof e==`object`&&e&&`name`in e?String(e.name||``):``,n=typeof e==`object`&&e&&`message`in e?String(e.message||``):String(e||``);if(t===`NotAllowedError`||/user didn't interact|NotAllowedError/i.test(n)){let e=Me(!0);if(!e){U(!0);return}e.play?.().then(()=>{U(!1)}).catch(e=>{console.warn(`详情页静音自动播放失败:`,e),U(!0)});return}console.warn(`详情页恢复正片播放失败:`,e)})},180)},[Me]),Pe=!l&&Ce&&!Se&&!V&&(!J||ge);y(()=>{!Pe||!pe||(U(!1),Ne())},[Ne,pe,Pe]);let Q=ne({contentId:W,browseEpisode:fe,contentType:1,enabled:!l&&!!W,intervalMs:60*1e3,getCurrentTimeSeconds:()=>A.current,getDurationSeconds:()=>j.current}),$=v(()=>{let t=j.current,n=A.current,r=t>0?Math.round(n/t*100):0;return{media_id:e.id,video_id:K,video_title:e.name,video_type_id:e.cat_id||``,video_type_name:e.cat_name||``,video_content_type:e.content_type===2?`short_video`:`video`,recommend_trace_id:``,video_tag_key:e.tags?.map(e=>e.id).join(`,`)||``,video_tag_name:e.tags?.map(e=>e.name).join(`,`)||``,video_duration:t,play_duration:n,play_progress:r}},[K,e.cat_id,e.cat_name,e.content_type,e.id,e.name,e.tags]);v(()=>{Q.handlePlay(),o({...$(),video_behavior_key:`video_play`,video_behavior_name:`播放`})},[Q,$]),v(()=>{Q.handlePause(),o({...$(),video_behavior_key:`video_pause`,video_behavior_name:`暂停`})},[Q,$]),v(()=>{Q.handleEnded();let e=j.current,t=A.current;(e>0?t/e:0)>=.95&&o({...$(),video_behavior_key:`video_complete`,video_behavior_name:`播放完成`})},[Q,$]);let Fe=v(()=>{if(V){let e=d.current?.getPlayer?.();e&&(e.currentTime=0)}B(!0),U(!1),z(`manual`),H(!1),R(`main`)},[V]),Ie=v(()=>{z(`manual`)},[]),Le=v(()=>{me(!0)},[]),Re=v(()=>{H(!1),U(!1)},[]),ze=v(()=>{if(!D&&N.current){try{d.current?.getPlayer?.()?.pause?.()}catch(e){console.warn(`未登录拦截播放时暂停视频失败:`,e)}k||O();return}Re(),Q.handlePlay(),o({...$(),video_behavior_key:`video_play`,video_behavior_name:`播放`})},[Q,$,Re,D,k,O]),Be=v(()=>{Q.handlePause(),o({...$(),video_behavior_key:`video_pause`,video_behavior_name:`暂停`})},[Q,$]),Ve=v(()=>{Q.handleEnded();let e=j.current,t=A.current;(e>0?t/e:0)>=.95&&o({...$(),video_behavior_key:`video_complete`,video_behavior_name:`播放完成`}),J&&(H(!0),U(!1),B(!1),z(`manual`),ye(e=>e+1),R(`main`))},[Q,$,J]),He=J&&L===`main`&&(V||!ge&&he===`manual`),Ue=L===`main`&&_e,We=!l&&!Ce,Ge=We,Ke=Pe,qe=!We&&(!J||ge);async function Je(){J&&(H(!1),B(!1),z(`manual`),R(`preroll`),await re.current?.play?.()||R(`main`))}async function Ye(){let e=Me(!1);if(e)try{await e.play?.(),U(!1)}catch(e){console.warn(`用户点击后启动正片播放失败:`,e)}}if(y(()=>{if(l)return;let e=()=>{if(!(typeof window>`u`)&&!(A.current<=0||j.current<=0))try{sessionStorage.setItem(q,JSON.stringify({episodeId:K,currentTime:A.current,duration:j.current}))}catch(e){console.error(`写入 sessionStorage 失败:`,e)}},t=()=>{e()},n=()=>{document.visibilityState===`hidden`&&e()},r=()=>{e()};return window.addEventListener(`beforeunload`,t),document.addEventListener(`visibilitychange`,n),window.addEventListener(`popstate`,r),()=>{window.removeEventListener(`beforeunload`,t),document.removeEventListener(`visibilitychange`,n),window.removeEventListener(`popstate`,r),e()}},[K,l,q]),!Z.hasVideo)return C(`div`,{className:`mt-3 rounded-xl bg-bg1 px-3 py-10 text-center text-text3`,children:E(`videoHero.noVideos`)});let Xe=ce(430,Z.aspectRatio,242),Ze=Xe.height>0?a(Xe.height):`auto`,Qe=Xe.height>0?`calc(${Ze} + 0px)`:`auto`,$e=a(242);return w(m,{value:d,children:[C(c,{suppressHydrationWarning:!0,className:`w-full`,style:{height:Qe,maxWidth:`100%`,maxHeight:`calc(${$e} + 0px)`}}),w(c,{className:`w-full  bg-bg2 !fixed !top-[44px] !left-0 z-[10]`,children:[Z.poster&&w(`div`,{className:`w-full h-full bg-bg2 absolute top-0 left-0 z-[1] overflow-hidden`,style:{height:Ze},children:[C(s,{src:Z.poster,alt:E(`videoHero.coverAlt`),fill:!0,className:`object-cover`,priority:!0}),C(`div`,{className:`w-full h-full absolute top-0 left-0 z-[1] bg-[rgba(255,255,255,0.2)] backdrop-blur-[4px]`})]}),w(c,{suppressHydrationWarning:!0,"data-aspect-ratio":Z.resolution,className:`w-full overflow-hidden flex justify-center relative z-[2]`,style:{height:Ze,maxWidth:`100%`,maxHeight:$e,backdropFilter:`blur(0)`,WebkitBackdropFilter:`blur(0)`},children:[qe&&C(f,{ref:d,plyerId:`detail-player-${G.id}-${I}`,parentId:be,...Ke?{autoplay:!0}:{autoplay:!1},resolution:Z.resolution||`0x0`,videoUrl:Z.videoUrl,poster:Z.poster,mergeConfig:je,onProgressUpdate:l?void 0:Ae,onPlay:l?void 0:ze,onPause:l?void 0:Be,onEnded:l?void 0:Ve,onPlayerReady:Le},`stable-player-${G.id}-${I}-${Ke?`default-autoplay`:`manual`}`),!l&&J&&C(ie,{ref:re,adData:xe,visible:L===`preroll`,autoStart:L===`preroll`&&he===`auto`,sessionKey:`${G.id}-${K}-${ve}`,onAutoplayBlocked:Ie,onFinish:Fe,onSkip:Fe}),He&&!Ue&&C(`button`,{type:`button`,className:`absolute inset-0 z-[10000] flex items-center justify-center bg-black/35 text-white`,onClick:()=>{Je()},children:C(`span`,{className:`flex items-center justify-center w-14 h-14 rounded-full bg-[rgba(0,0,0,0.55)]`,children:C(p,{className:`w-[18px] h-[24px] text-white translate-x-[1px]`})})}),Ue&&C(`button`,{type:`button`,className:`absolute inset-0 z-[10001] flex items-center justify-center bg-black/35 text-white`,onClick:()=>{Ye()},children:C(`span`,{className:`flex items-center justify-center w-14 h-14 rounded-full bg-[rgba(0,0,0,0.55)]`,children:C(p,{className:`w-[18px] h-[24px] text-white translate-x-[1px]`})})}),Ge&&C(`div`,{className:`absolute inset-0 z-[9998] flex items-center justify-center bg-black/20 text-white`,children:C(`span`,{className:`rounded-full bg-[rgba(0,0,0,0.45)] px-5 py-2 text-sm`,children:`加载中`})}),C(h,{videoId:G.id}),C(g,{videoId:G.id})]})]})]})}function se(e,t){return!e||!t?``:`${e}x${t}`}function ce(e,t,n){let r=e/t;return r<=n?{width:e,height:r}:{width:n*t,height:n}}function le(e){let t=e.links||[];return t.length>0?t.map((e,t)=>({text:e.name||String(t+1),url:e.m3u8_url||e.preview_m3u8_url||``,definition:``,isDefault:t===0})).filter(e=>e.url):[]}export{D as DetailHero};
+'use client';
+
+import { cn } from "../../../../../utils/cn.mjs";
+import { useUserStore } from "../../../../../store/modules/user-store.mjs";
+import { gUserGetVisitorPermissionConfig, pContentMatchAds } from "../../../../../service/generated/client.mjs";
+import { pContentMatchAdsKey } from "../../../../../service/generated/tanstack.mjs";
+import { pxToVw } from "../../../../../utils/helper.mjs";
+import { trackVideoEvent } from "../../../../../utils/tracking.mjs";
+import { Image } from "../../../../ui/image.mjs";
+import { Box } from "../../../../ui/box.mjs";
+import { Text } from "../../../../ui/text.mjs";
+import { useLoginModalStore } from "../../../../../store/modules/login-modal-store.mjs";
+import { useRequest } from "../../../../../hooks/query/use-query.mjs";
+import { useBrowseReport } from "../../../../../hooks/use-browse-report.mjs";
+import { MediaPreview, useMediaPreview } from "../../../../common/media-preview/index.mjs";
+import CommonPlayer from "../../../../common/video-player/index.mjs";
+import SvgVideoPlay from "../../../../../assets/icons/detail/video_play.mjs";
+import { UserActivityMediaGrid } from "../../../../common/list/user-activity-list/user-activity-list-item.mjs";
+import { VideoPlayerRefContext } from "../../../../common/video-player/video-player-ref-context.mjs";
+import { VideoBlindAdOverlay } from "../../../../common/video-player/video-blind-ad-overlay.mjs";
+import { VideoPrerollAd } from "../../../../common/video-player/video-preroll-ad.mjs";
+import { VideoPrerollAdOverlay } from "../../../../common/video-player/video-preroll-ad-overlay.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/biz/business/detail/shared/video-hero.tsx
+const DETAIL_VIDEO_MAX_HEIGHT = 242;
+const DETAIL_SEARCH_BAR_HEIGHT = 0;
+const VIDEO_PROGRESS_SESSION_KEY = "__reportData_detail_page__";
+function toPositiveNumber(value) {
+	const parsed = Number(value);
+	if (Number.isFinite(parsed) && parsed > 0) return parsed;
+	return 0;
+}
+function resolveVisitorLimitSeconds(permissionConfig) {
+	if (!permissionConfig) return 0;
+	for (const key of [
+		"seconds",
+		"stay_seconds",
+		"play_seconds",
+		"watch_seconds"
+	]) {
+		const parsed = toPositiveNumber(permissionConfig[key]);
+		if (parsed > 0) return parsed;
+	}
+	for (const key of [
+		"内容",
+		"content",
+		"video",
+		"视频"
+	]) {
+		const item = permissionConfig[key];
+		const parsed = toPositiveNumber(item?.rule?.seconds);
+		if (parsed > 0) return parsed;
+	}
+	for (const item of Object.values(permissionConfig)) {
+		const parsed = toPositiveNumber(item?.rule?.seconds);
+		if (parsed > 0) return parsed;
+	}
+	return 0;
+}
+function DetailHero(props) {
+	return /* @__PURE__ */ jsx(DetailHeroImpl, { ...props });
+}
+const DetailHeroImpl = memo(({ mode = "renderer", information, isVideo, episodeIndex = 0, resumeProgressSeconds = 0, className = "" }) => {
+	const isEditor = mode === "editor";
+	const userId = useUserStore((s) => s.userId);
+	const imageData = useMemo(() => ({
+		id: information.id,
+		name: information.name,
+		preview_images: information.preview_images,
+		img_y: information.img_y,
+		img_x: information.img_x
+	}), [
+		information.id,
+		information.name,
+		information.preview_images,
+		information.img_y,
+		information.img_x
+	]);
+	const resolvedMedias = useMemo(() => {
+		const rawMedias = information?.medias;
+		const medias = Array.isArray(rawMedias) ? rawMedias.filter(Boolean) : [];
+		if (medias.length > 0) return medias;
+		return (imageData.preview_images?.length ? imageData.preview_images : [imageData.img_y || imageData.img_x || ""].filter(Boolean)).filter(Boolean).map((url) => ({
+			media_url: url,
+			is_video: false,
+			cover_image: ""
+		}));
+	}, [
+		imageData.img_x,
+		imageData.img_y,
+		imageData.preview_images,
+		information
+	]);
+	const mediaPreview = useMediaPreview();
+	const mediaPreviewItems = useMemo(() => {
+		return resolvedMedias.filter(Boolean).map((media) => {
+			const type = media?.is_video ? "video" : "image";
+			const src = String(media?.media_url || "");
+			const cover = media?.cover_image || information.img_y || information.img_x;
+			return {
+				src,
+				type,
+				...cover ? { cover: String(cover) } : {}
+			};
+		}).filter((item) => Boolean(item.src));
+	}, [
+		information.img_x,
+		information.img_y,
+		resolvedMedias
+	]);
+	const handleMediaPreviewOpen = useCallback((startIndex) => {
+		if (isEditor || !mediaPreviewItems.length) return;
+		mediaPreview.open(mediaPreviewItems, startIndex);
+	}, [
+		isEditor,
+		mediaPreview,
+		mediaPreviewItems
+	]);
+	const prerollRequestBody = useMemo(() => {
+		return {
+			user_id: userId,
+			ad_type: "preroll"
+		};
+	}, [userId]);
+	const prerollEpisodeId = useMemo(() => {
+		const safeEpisodeIndex = Math.max(0, Number(episodeIndex) || 0);
+		const episodeId = information?.links?.[safeEpisodeIndex]?.id;
+		if (episodeId) return String(episodeId);
+		return `ep-${safeEpisodeIndex + 1}`;
+	}, [episodeIndex, information?.links]);
+	const { data: prerollMatchRes, isLoading: isPrerollLoading, isFetched: isPrerollFetched } = useRequest(useMemo(() => {
+		return [
+			"detail-preroll-ad",
+			information.id,
+			prerollEpisodeId,
+			...pContentMatchAdsKey(prerollRequestBody)
+		];
+	}, [
+		information.id,
+		prerollEpisodeId,
+		prerollRequestBody
+	]), () => pContentMatchAds(prerollRequestBody), {
+		enabled: !isEditor && isVideo,
+		staleTime: 0,
+		refetchOnMount: "always",
+		refetchOnWindowFocus: false
+	});
+	const prerollState = useMemo(() => {
+		return {
+			data: prerollMatchRes?.data ?? null,
+			isLoading: isPrerollLoading,
+			isFetched: isPrerollFetched
+		};
+	}, [
+		isPrerollFetched,
+		isPrerollLoading,
+		prerollMatchRes?.data
+	]);
+	if (isEditor) return /* @__PURE__ */ jsx("img", {
+		src: "/static/components-thumb/video_player.png",
+		alt: "video-preview",
+		className: "w-full block"
+	});
+	if (isVideo) return /* @__PURE__ */ jsx(StableDetailPlayerBox, {
+		information,
+		episodeIndex,
+		resumeProgressSeconds,
+		isEditor,
+		prerollState
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full", className),
+		children: [/* @__PURE__ */ jsxs(Box, {
+			className: "mt-3 px-[12px] space-y-1",
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "p",
+				className: "break-all",
+				dangerouslySetInnerHTML: { __html: information.description }
+			}), /* @__PURE__ */ jsx(UserActivityMediaGrid, {
+				medias: resolvedMedias,
+				onItemClick: handleMediaPreviewOpen
+			})]
+		}), /* @__PURE__ */ jsx(MediaPreview, {})]
+	});
+});
+DetailHero.displayName = "DetailHero";
+/**
+* 稳定的播放器组件包装器，防止因为 information 对象引用变化导致播放器重新创建。
+*/
+const StableDetailPlayerBox = memo(({ information, episodeIndex, resumeProgressSeconds, isEditor, prerollState }) => {
+	const stableProps = useMemo(() => ({
+		id: information.id,
+		mid: information.mid,
+		img_width: information.img_width,
+		img_height: information.img_height,
+		img_y: information.img_y,
+		img_x: information.img_x,
+		preview_images: information.preview_images
+	}), [
+		information.id,
+		information.mid,
+		information.img_width,
+		information.img_height,
+		information.img_y,
+		information.img_x,
+		information.preview_images
+	]);
+	return /* @__PURE__ */ jsx(DetailPlayerBox, {
+		information: {
+			...information,
+			...stableProps
+		},
+		episodeIndex,
+		resumeProgressSeconds,
+		isEditor,
+		prerollState
+	});
+}, (prevProps, nextProps) => {
+	const prev = prevProps.information;
+	const next = nextProps.information;
+	return prev.id === next.id && prev.mid === next.mid && prev.img_width === next.img_width && prev.img_height === next.img_height && prev.img_y === next.img_y && prev.img_x === next.img_x && prevProps.resumeProgressSeconds === nextProps.resumeProgressSeconds && prevProps.episodeIndex === nextProps.episodeIndex && prevProps.isEditor === nextProps.isEditor && prevProps.prerollState.data === nextProps.prerollState.data && prevProps.prerollState.isLoading === nextProps.prerollState.isLoading && prevProps.prerollState.isFetched === nextProps.prerollState.isFetched;
+});
+StableDetailPlayerBox.displayName = "StableDetailPlayerBox";
+/**
+* 详情页视频播放器容器，固定吸顶展示。
+*/
+function DetailPlayerBox({ information, episodeIndex, resumeProgressSeconds, isEditor, prerollState }) {
+	const playerRef = useRef(null);
+	const prerollRef = useRef(null);
+	const resumeMainPlayTimerRef = useRef(null);
+	const t = useTranslations("components.biz.business.detail");
+	const isLogin = useUserStore((state) => state.isLogin);
+	const userId = useUserStore((state) => state.userId);
+	const openLoginModal = useLoginModalStore((state) => state.open);
+	const isLoginModalOpen = useLoginModalStore((state) => state.isOpen);
+	const currentTimeRef = useRef(0);
+	const videoDurationRef = useRef(0);
+	const hasTriggeredVisitorLimitRef = useRef(false);
+	const shouldBlockPlaybackUntilLoginRef = useRef(false);
+	const lastLoggedRemainingSecondsRef = useRef(null);
+	const hasLoggedVisitorConfigRef = useRef(false);
+	const hasLoggedSkipReasonRef = useRef(false);
+	const wasLoginModalOpenRef = useRef(false);
+	const episodeNumber = Math.max(0, Number(episodeIndex) || 0);
+	const browseEpisode = episodeNumber + 1;
+	const [isMainPlayerReady, setIsMainPlayerReady] = useState(false);
+	const [activeLayer, setActiveLayer] = useState("main");
+	const [prerollStartMode, setPrerollStartMode] = useState("auto");
+	const [prerollCompleted, setPrerollCompleted] = useState(false);
+	const [hasMainEnded, setHasMainEnded] = useState(false);
+	const [requiresMainUserGesture, setRequiresMainUserGesture] = useState(false);
+	const [prerollSessionKey, setPrerollSessionKey] = useState(0);
+	const browseContentId = useMemo(() => {
+		return information?.id;
+	}, [information?.id]);
+	const playerData = useMemo(() => ({
+		id: information.id,
+		mid: information.mid,
+		img_width: information.img_width,
+		img_height: information.img_height,
+		img_y: information.img_y,
+		img_x: information.img_x,
+		preview_images: information.preview_images,
+		links: information.links
+	}), [
+		information.id,
+		information.mid,
+		information.img_width,
+		information.img_height,
+		information.img_y,
+		information.img_x,
+		information.preview_images,
+		information.links
+	]);
+	const parentId = useMemo(() => {
+		return playerData.mid || playerData.id;
+	}, [playerData.id, playerData.mid]);
+	const currentEpisodeId = useMemo(() => {
+		const episodeId = playerData.links?.[episodeNumber]?.id;
+		if (episodeId) return String(episodeId);
+		return `ep-${episodeNumber + 1}`;
+	}, [episodeNumber, playerData.links]);
+	const localProgressStorageKey = useMemo(() => {
+		return `${VIDEO_PROGRESS_SESSION_KEY}${playerData.id}:${currentEpisodeId}`;
+	}, [currentEpisodeId, playerData.id]);
+	const prerollData = prerollState.data;
+	const isPrerollLoading = prerollState.isLoading;
+	const isPrerollFetched = prerollState.isFetched;
+	const prerollMaterial = prerollData?.materials?.[0];
+	const prerollHit = prerollData?.hit === true;
+	const hasPrerollVideo = Boolean(String(prerollMaterial?.advertise_video || "").trim());
+	const shouldUsePreroll = prerollHit && Boolean(prerollMaterial) && hasPrerollVideo;
+	const { data: visitorPermissionRes } = useRequest(useMemo(() => {
+		return ["detail-visitor-permission-config", userId || "guest"];
+	}, [userId]), () => gUserGetVisitorPermissionConfig({ user_id: userId || "" }), {
+		enabled: !isEditor,
+		staleTime: 60 * 1e3,
+		refetchOnWindowFocus: false
+	});
+	const visitorLimitSeconds = useMemo(() => {
+		return resolveVisitorLimitSeconds(visitorPermissionRes?.data?.permission_config);
+	}, [visitorPermissionRes?.data?.permission_config]);
+	useEffect(() => {
+		if (hasLoggedVisitorConfigRef.current) return;
+		if (!visitorPermissionRes) return;
+		hasLoggedVisitorConfigRef.current = true;
+		console.log("[visitor-limit] permission config:", visitorPermissionRes?.data?.permission_config || null);
+		console.log(`[visitor-limit] resolved limit: ${visitorLimitSeconds}s`);
+	}, [visitorLimitSeconds, visitorPermissionRes]);
+	const sessionResumeSeconds = useMemo(() => {
+		if (isEditor || typeof window === "undefined") return 0;
+		try {
+			const data = sessionStorage.getItem(localProgressStorageKey);
+			if (!data) return 0;
+			const parsed = JSON.parse(data);
+			const currentTime = Number(parsed.currentTime || 0);
+			const duration = Number(parsed.duration || 0);
+			if (!Number.isFinite(currentTime) || !Number.isFinite(duration)) return 0;
+			if (currentTime > 0 && duration > 0) return currentTime;
+		} catch (error) {
+			console.error("读取 sessionStorage 数据失败:", error);
+		}
+		return 0;
+	}, [isEditor, localProgressStorageKey]);
+	const apiResumeSeconds = useMemo(() => {
+		const seconds = Number(resumeProgressSeconds || 0);
+		return Number.isFinite(seconds) && seconds > 0 ? seconds : 0;
+	}, [resumeProgressSeconds]);
+	const startTimeSeconds = useMemo(() => {
+		return apiResumeSeconds > 0 ? apiResumeSeconds : sessionResumeSeconds;
+	}, [apiResumeSeconds, sessionResumeSeconds]);
+	const videoData = useMemo(() => {
+		const hlsList = extractHlsList(information);
+		const videoUrl = hlsList[hlsList.length ? Math.max(0, Math.min(episodeNumber, hlsList.length - 1)) : 0]?.url || "";
+		const hasVideo = Boolean(hlsList.length);
+		if (!hasVideo) return {
+			hasVideo: false,
+			hlsList: [],
+			videoUrl: "",
+			width: 1,
+			height: 1,
+			resolution: "0x0",
+			aspectRatio: 1,
+			poster: ""
+		};
+		const width = Number(playerData.img_width || 0) || 1;
+		const height = Number(playerData.img_height || 0) || 1;
+		return {
+			hasVideo,
+			hlsList,
+			videoUrl,
+			width,
+			height,
+			resolution: buildResolutionText(width, height),
+			aspectRatio: (width || 1) / (height || 1),
+			poster: playerData.img_y || playerData.img_x || playerData.preview_images?.[0] || ""
+		};
+	}, [
+		information.id,
+		information.links,
+		episodeNumber,
+		playerData.img_width,
+		playerData.img_height,
+		playerData.img_y,
+		playerData.img_x,
+		playerData.preview_images
+	]);
+	/**
+	* 记录播放进度，便于下次进入恢复播放。
+	*/
+	const handleProgressUpdate = useCallback((currentTime, duration) => {
+		currentTimeRef.current = currentTime;
+		videoDurationRef.current = duration;
+		if (isLogin || visitorLimitSeconds <= 0 || hasTriggeredVisitorLimitRef.current) {
+			if (!hasLoggedSkipReasonRef.current) {
+				hasLoggedSkipReasonRef.current = true;
+				console.log(`[visitor-limit] skip: isLogin=${isLogin}, limit=${visitorLimitSeconds}, triggered=${hasTriggeredVisitorLimitRef.current}`);
+			}
+			return;
+		}
+		if (currentTime < visitorLimitSeconds) {
+			const remainingSeconds = Math.max(0, Math.ceil(visitorLimitSeconds - currentTime));
+			if (lastLoggedRemainingSecondsRef.current !== remainingSeconds) {
+				lastLoggedRemainingSecondsRef.current = remainingSeconds;
+				console.log(`[visitor-limit] remaining: ${remainingSeconds}s`);
+			}
+			return;
+		}
+		hasTriggeredVisitorLimitRef.current = true;
+		shouldBlockPlaybackUntilLoginRef.current = true;
+		try {
+			playerRef.current?.getPlayer?.()?.pause?.();
+		} catch (error) {
+			console.warn("暂停视频失败:", error);
+		}
+		openLoginModal();
+	}, [
+		isLogin,
+		openLoginModal,
+		visitorLimitSeconds
+	]);
+	useEffect(() => {
+		if (isLogin) {
+			hasTriggeredVisitorLimitRef.current = false;
+			shouldBlockPlaybackUntilLoginRef.current = false;
+			lastLoggedRemainingSecondsRef.current = null;
+			hasLoggedSkipReasonRef.current = false;
+		}
+	}, [isLogin]);
+	useEffect(() => {
+		const wasOpen = wasLoginModalOpenRef.current;
+		wasLoginModalOpenRef.current = isLoginModalOpen;
+		if (!wasOpen || isLoginModalOpen || isLogin) return;
+		if (!shouldBlockPlaybackUntilLoginRef.current) return;
+		try {
+			playerRef.current?.getPlayer?.()?.pause?.();
+		} catch (error) {
+			console.warn("登录弹窗关闭后暂停视频失败:", error);
+		}
+	}, [isLogin, isLoginModalOpen]);
+	const playerMergeConfig = useMemo(() => {
+		if (videoData.videoUrl.endsWith("m3u8")) return {
+			startTimeSeconds,
+			preload: "none"
+		};
+		return { startTimeSeconds };
+	}, [startTimeSeconds, videoData.videoUrl]);
+	useEffect(() => {
+		currentTimeRef.current = 0;
+		videoDurationRef.current = 0;
+		hasTriggeredVisitorLimitRef.current = false;
+		shouldBlockPlaybackUntilLoginRef.current = false;
+		lastLoggedRemainingSecondsRef.current = null;
+		hasLoggedSkipReasonRef.current = false;
+		hasLoggedVisitorConfigRef.current = false;
+		wasLoginModalOpenRef.current = false;
+	}, [browseContentId, episodeNumber]);
+	useEffect(() => {
+		setIsMainPlayerReady(false);
+		setHasMainEnded(false);
+		setPrerollCompleted(false);
+		setRequiresMainUserGesture(false);
+		setPrerollStartMode("auto");
+		setPrerollSessionKey((prev) => prev + 1);
+		if (isEditor) {
+			setActiveLayer("main");
+			return;
+		}
+		if (shouldUsePreroll) {
+			setActiveLayer("preroll");
+			return;
+		}
+		setActiveLayer("main");
+	}, [
+		browseContentId,
+		currentEpisodeId,
+		isEditor,
+		playerData.id,
+		shouldUsePreroll
+	]);
+	useEffect(() => {
+		return () => {
+			if (resumeMainPlayTimerRef.current) {
+				window.clearInterval(resumeMainPlayTimerRef.current);
+				resumeMainPlayTimerRef.current = null;
+			}
+		};
+	}, []);
+	useEffect(() => {
+		if (activeLayer !== "preroll") return;
+		const player = playerRef.current?.getPlayer?.();
+		if (!player) return;
+		try {
+			if (!player.paused) player.pause?.();
+		} catch (error) {
+			console.warn("贴片展示时暂停正片失败:", error);
+		}
+	}, [
+		activeLayer,
+		currentEpisodeId,
+		playerData.id
+	]);
+	/**
+	* 同步播放器静音状态，兼容 xgplayer 实例与底层 video 元素。
+	*/
+	const syncPlayerMutedState = useCallback((muted) => {
+		const player = playerRef.current?.getPlayer?.();
+		if (!player) return null;
+		try {
+			if ("muted" in player) player.muted = muted;
+			if ("video" in player && player.video) player.video.muted = muted;
+			player.volume = muted ? 0 : 1;
+		} catch (error) {
+			console.warn("同步详情页播放器静音状态失败:", error);
+		}
+		return player;
+	}, []);
+	const attemptResumeMainPlayback = useCallback(() => {
+		if (resumeMainPlayTimerRef.current) {
+			window.clearInterval(resumeMainPlayTimerRef.current);
+			resumeMainPlayTimerRef.current = null;
+		}
+		let attemptCount = 0;
+		resumeMainPlayTimerRef.current = window.setInterval(() => {
+			attemptCount += 1;
+			const player = playerRef.current?.getPlayer?.();
+			if (!player) {
+				if (attemptCount >= 8 && resumeMainPlayTimerRef.current) {
+					window.clearInterval(resumeMainPlayTimerRef.current);
+					resumeMainPlayTimerRef.current = null;
+				}
+				return;
+			}
+			if (resumeMainPlayTimerRef.current) {
+				window.clearInterval(resumeMainPlayTimerRef.current);
+				resumeMainPlayTimerRef.current = null;
+			}
+			player.play?.().catch((error) => {
+				const errorName = typeof error === "object" && error && "name" in error ? String(error.name || "") : "";
+				const errorMessage = typeof error === "object" && error && "message" in error ? String(error.message || "") : String(error || "");
+				if (errorName === "NotAllowedError" || /user didn't interact|NotAllowedError/i.test(errorMessage)) {
+					const mutedPlayer = syncPlayerMutedState(true);
+					if (!mutedPlayer) {
+						setRequiresMainUserGesture(true);
+						return;
+					}
+					mutedPlayer.play?.().then(() => {
+						setRequiresMainUserGesture(false);
+					}).catch((mutedError) => {
+						console.warn("详情页静音自动播放失败:", mutedError);
+						setRequiresMainUserGesture(true);
+					});
+					return;
+				}
+				console.warn("详情页恢复正片播放失败:", error);
+			});
+		}, 180);
+	}, [syncPlayerMutedState]);
+	const shouldAutoStartMain = !isEditor && isPrerollFetched && !isPrerollLoading && !hasMainEnded && (!shouldUsePreroll || prerollCompleted);
+	useEffect(() => {
+		if (!shouldAutoStartMain || !isMainPlayerReady) return;
+		setRequiresMainUserGesture(false);
+		attemptResumeMainPlayback();
+	}, [
+		attemptResumeMainPlayback,
+		isMainPlayerReady,
+		shouldAutoStartMain
+	]);
+	const browseReport = useBrowseReport({
+		contentId: browseContentId,
+		browseEpisode,
+		contentType: 1,
+		enabled: !isEditor && Boolean(browseContentId),
+		intervalMs: 60 * 1e3,
+		getCurrentTimeSeconds: () => currentTimeRef.current,
+		getDurationSeconds: () => videoDurationRef.current,
+		seriesId: playerData.mid || void 0,
+		source: "detail",
+		playMode: "normal"
+	});
+	/** 构建视频事件 payload 的公共字段。 */
+	const buildVideoPayload = useCallback(() => {
+		const duration = videoDurationRef.current;
+		const currentTime = currentTimeRef.current;
+		const progress = duration > 0 ? Math.round(currentTime / duration * 100) : 0;
+		return {
+			media_id: information.id,
+			video_id: currentEpisodeId,
+			video_title: information.name,
+			video_type_id: information.cat_id || "",
+			video_type_name: information.cat_name || "",
+			video_content_type: information.content_type === 2 ? "short_video" : "video",
+			recommend_trace_id: "",
+			video_tag_key: information.tags?.map((tag) => tag.id).join(",") || "",
+			video_tag_name: information.tags?.map((tag) => tag.name).join(",") || "",
+			video_duration: duration,
+			play_duration: currentTime,
+			play_progress: progress
+		};
+	}, [
+		currentEpisodeId,
+		information.cat_id,
+		information.cat_name,
+		information.content_type,
+		information.id,
+		information.name,
+		information.tags
+	]);
+	useCallback(() => {
+		browseReport.handlePlay();
+		trackVideoEvent({
+			...buildVideoPayload(),
+			video_behavior_key: "video_play",
+			video_behavior_name: "播放"
+		});
+	}, [browseReport, buildVideoPayload]);
+	useCallback(() => {
+		browseReport.handlePause();
+		trackVideoEvent({
+			...buildVideoPayload(),
+			video_behavior_key: "video_pause",
+			video_behavior_name: "暂停"
+		});
+	}, [browseReport, buildVideoPayload]);
+	useCallback(() => {
+		browseReport.handleEnded();
+		const duration = videoDurationRef.current;
+		const currentTime = currentTimeRef.current;
+		if ((duration > 0 ? currentTime / duration : 0) >= .95) trackVideoEvent({
+			...buildVideoPayload(),
+			video_behavior_key: "video_complete",
+			video_behavior_name: "播放完成"
+		});
+	}, [browseReport, buildVideoPayload]);
+	const handlePrerollFinished = useCallback(() => {
+		if (hasMainEnded) {
+			const player = playerRef.current?.getPlayer?.();
+			if (player) player.currentTime = 0;
+		}
+		setPrerollCompleted(true);
+		setRequiresMainUserGesture(false);
+		setPrerollStartMode("manual");
+		setHasMainEnded(false);
+		setActiveLayer("main");
+	}, [hasMainEnded]);
+	const handlePrerollAutoplayBlocked = useCallback(() => {
+		setPrerollStartMode("manual");
+	}, []);
+	const handleMainPlayerReady = useCallback(() => {
+		setIsMainPlayerReady(true);
+	}, []);
+	const handleMainPlay = useCallback(() => {
+		setHasMainEnded(false);
+		setRequiresMainUserGesture(false);
+	}, []);
+	const handleMainPlayerPlay = useCallback(() => {
+		if (!isLogin && shouldBlockPlaybackUntilLoginRef.current) {
+			try {
+				playerRef.current?.getPlayer?.()?.pause?.();
+			} catch (error) {
+				console.warn("未登录拦截播放时暂停视频失败:", error);
+			}
+			if (!isLoginModalOpen) openLoginModal();
+			return;
+		}
+		handleMainPlay();
+		browseReport.handlePlay();
+		trackVideoEvent({
+			...buildVideoPayload(),
+			video_behavior_key: "video_play",
+			video_behavior_name: "播放"
+		});
+	}, [
+		browseReport,
+		buildVideoPayload,
+		handleMainPlay,
+		isLogin,
+		isLoginModalOpen,
+		openLoginModal
+	]);
+	const handleMainPlayerPause = useCallback(() => {
+		browseReport.handlePause();
+		trackVideoEvent({
+			...buildVideoPayload(),
+			video_behavior_key: "video_pause",
+			video_behavior_name: "暂停"
+		});
+	}, [browseReport, buildVideoPayload]);
+	const handleMainEnded = useCallback(() => {
+		browseReport.handleEnded();
+		const duration = videoDurationRef.current;
+		const currentTime = currentTimeRef.current;
+		if ((duration > 0 ? currentTime / duration : 0) >= .95) trackVideoEvent({
+			...buildVideoPayload(),
+			video_behavior_key: "video_complete",
+			video_behavior_name: "播放完成"
+		});
+		if (!shouldUsePreroll) return;
+		setHasMainEnded(true);
+		setRequiresMainUserGesture(false);
+		setPrerollCompleted(false);
+		setPrerollStartMode("manual");
+		setPrerollSessionKey((prev) => prev + 1);
+		setActiveLayer("main");
+	}, [
+		browseReport,
+		buildVideoPayload,
+		shouldUsePreroll
+	]);
+	const showPrerollGate = shouldUsePreroll && activeLayer === "main" && (hasMainEnded || !prerollCompleted && prerollStartMode === "manual");
+	const showMainPlaybackGate = activeLayer === "main" && requiresMainUserGesture;
+	const shouldDeferMainPlayerMount = !isEditor && !isPrerollFetched;
+	const showPrerollLoadingGate = shouldDeferMainPlayerMount;
+	const shouldUseDefaultMainAutoplayBehavior = shouldAutoStartMain;
+	const shouldRenderMainPlayer = !shouldDeferMainPlayerMount && (!shouldUsePreroll || prerollCompleted);
+	async function handleOpenPrerollByUserGesture() {
+		if (!shouldUsePreroll) return;
+		setHasMainEnded(false);
+		setPrerollCompleted(false);
+		setPrerollStartMode("manual");
+		setActiveLayer("preroll");
+		if (!await prerollRef.current?.play?.()) setActiveLayer("main");
+	}
+	async function handleOpenMainByUserGesture() {
+		const player = syncPlayerMutedState(false);
+		if (!player) return;
+		try {
+			await player.play?.();
+			setRequiresMainUserGesture(false);
+		} catch (error) {
+			console.warn("用户点击后启动正片播放失败:", error);
+		}
+	}
+	useEffect(() => {
+		if (isEditor) return;
+		const persistProgress = () => {
+			if (typeof window === "undefined") return;
+			if (currentTimeRef.current <= 0 || videoDurationRef.current <= 0) return;
+			try {
+				sessionStorage.setItem(localProgressStorageKey, JSON.stringify({
+					episodeId: currentEpisodeId,
+					currentTime: currentTimeRef.current,
+					duration: videoDurationRef.current
+				}));
+			} catch (error) {
+				console.error("写入 sessionStorage 失败:", error);
+			}
+		};
+		const handleBeforeUnload = () => {
+			persistProgress();
+		};
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === "hidden") persistProgress();
+		};
+		const handlePopState = () => {
+			persistProgress();
+		};
+		window.addEventListener("beforeunload", handleBeforeUnload);
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		window.addEventListener("popstate", handlePopState);
+		return () => {
+			window.removeEventListener("beforeunload", handleBeforeUnload);
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+			window.removeEventListener("popstate", handlePopState);
+			persistProgress();
+		};
+	}, [
+		currentEpisodeId,
+		isEditor,
+		localProgressStorageKey
+	]);
+	if (!videoData.hasVideo) return /* @__PURE__ */ jsx("div", {
+		className: "mt-3 rounded-xl bg-bg1 px-3 py-10 text-center text-text3",
+		children: t("videoHero.noVideos")
+	});
+	const dimensions = calculateVideoDimensions(430, videoData.aspectRatio, DETAIL_VIDEO_MAX_HEIGHT);
+	const playerHeight = dimensions.height > 0 ? pxToVw(dimensions.height) : "auto";
+	const playerReservedHeight = dimensions.height > 0 ? `calc(${playerHeight} + ${DETAIL_SEARCH_BAR_HEIGHT}px)` : "auto";
+	const playerMaxHeight = pxToVw(DETAIL_VIDEO_MAX_HEIGHT);
+	return /* @__PURE__ */ jsxs(VideoPlayerRefContext, {
+		value: playerRef,
+		children: [/* @__PURE__ */ jsx(Box, {
+			suppressHydrationWarning: true,
+			className: "w-full",
+			style: {
+				height: playerReservedHeight,
+				maxWidth: "100%",
+				maxHeight: `calc(${playerMaxHeight} + ${DETAIL_SEARCH_BAR_HEIGHT}px)`
+			}
+		}), /* @__PURE__ */ jsxs(Box, {
+			className: "w-full  bg-bg2 !fixed !top-[44px] !left-0 z-[10]",
+			children: [videoData.poster && /* @__PURE__ */ jsxs("div", {
+				className: "w-full h-full bg-bg2 absolute top-0 left-0 z-[1] overflow-hidden",
+				style: { height: playerHeight },
+				children: [/* @__PURE__ */ jsx(Image, {
+					src: videoData.poster,
+					alt: t("videoHero.coverAlt"),
+					fill: true,
+					className: "object-cover",
+					priority: true
+				}), /* @__PURE__ */ jsx("div", { className: "w-full h-full absolute top-0 left-0 z-[1] bg-[rgba(255,255,255,0.2)] backdrop-blur-[4px]" })]
+			}), /* @__PURE__ */ jsxs(Box, {
+				suppressHydrationWarning: true,
+				"data-aspect-ratio": videoData.resolution,
+				className: "w-full overflow-hidden flex justify-center relative z-[2]",
+				style: {
+					height: playerHeight,
+					maxWidth: "100%",
+					maxHeight: playerMaxHeight,
+					backdropFilter: "blur(0)",
+					WebkitBackdropFilter: "blur(0)"
+				},
+				children: [
+					shouldRenderMainPlayer && /* @__PURE__ */ jsx(CommonPlayer, {
+						ref: playerRef,
+						plyerId: `detail-player-${playerData.id}-${episodeNumber}`,
+						parentId,
+						...shouldUseDefaultMainAutoplayBehavior ? { autoplay: true } : { autoplay: false },
+						resolution: videoData.resolution || "0x0",
+						videoUrl: videoData.videoUrl,
+						poster: videoData.poster,
+						mergeConfig: playerMergeConfig,
+						onProgressUpdate: isEditor ? void 0 : handleProgressUpdate,
+						onPlay: isEditor ? void 0 : handleMainPlayerPlay,
+						onPause: isEditor ? void 0 : handleMainPlayerPause,
+						onEnded: isEditor ? void 0 : handleMainEnded,
+						onPlayerReady: handleMainPlayerReady
+					}, `stable-player-${playerData.id}-${episodeNumber}-${shouldUseDefaultMainAutoplayBehavior ? "default-autoplay" : "manual"}`),
+					!isEditor && shouldUsePreroll && /* @__PURE__ */ jsx(VideoPrerollAd, {
+						ref: prerollRef,
+						adData: prerollData,
+						visible: activeLayer === "preroll",
+						autoStart: activeLayer === "preroll" && prerollStartMode === "auto",
+						sessionKey: `${playerData.id}-${currentEpisodeId}-${prerollSessionKey}`,
+						onAutoplayBlocked: handlePrerollAutoplayBlocked,
+						onFinish: handlePrerollFinished,
+						onSkip: handlePrerollFinished
+					}),
+					showPrerollGate && !showMainPlaybackGate && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "absolute inset-0 z-[10000] flex items-center justify-center bg-black/35 text-white",
+						onClick: () => {
+							handleOpenPrerollByUserGesture();
+						},
+						children: /* @__PURE__ */ jsx("span", {
+							className: "flex items-center justify-center w-14 h-14 rounded-full bg-[rgba(0,0,0,0.55)]",
+							children: /* @__PURE__ */ jsx(SvgVideoPlay, { className: "w-[18px] h-[24px] text-white translate-x-[1px]" })
+						})
+					}),
+					showMainPlaybackGate && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "absolute inset-0 z-[10001] flex items-center justify-center bg-black/35 text-white",
+						onClick: () => {
+							handleOpenMainByUserGesture();
+						},
+						children: /* @__PURE__ */ jsx("span", {
+							className: "flex items-center justify-center w-14 h-14 rounded-full bg-[rgba(0,0,0,0.55)]",
+							children: /* @__PURE__ */ jsx(SvgVideoPlay, { className: "w-[18px] h-[24px] text-white translate-x-[1px]" })
+						})
+					}),
+					showPrerollLoadingGate && /* @__PURE__ */ jsx("div", {
+						className: "absolute inset-0 z-[9998] flex items-center justify-center bg-black/20 text-white",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "rounded-full bg-[rgba(0,0,0,0.45)] px-5 py-2 text-sm",
+							children: "加载中"
+						})
+					}),
+					/* @__PURE__ */ jsx(VideoBlindAdOverlay, {
+						videoId: playerData.id,
+						episode: browseEpisode
+					}),
+					/* @__PURE__ */ jsx(VideoPrerollAdOverlay, {
+						videoId: playerData.id,
+						episode: browseEpisode
+					})
+				]
+			})]
+		})]
+	});
+}
+/**
+* 构建分辨率文本
+*/
+function buildResolutionText(width, height) {
+	if (!width || !height) return "";
+	return `${width}x${height}`;
+}
+/**
+* 计算视频尺寸
+*/
+function calculateVideoDimensions(parentWidth, aspectRatio, maxHeight) {
+	const heightFromWidth = parentWidth / aspectRatio;
+	if (heightFromWidth <= maxHeight) return {
+		width: parentWidth,
+		height: heightFromWidth
+	};
+	return {
+		width: maxHeight * aspectRatio,
+		height: maxHeight
+	};
+}
+/**
+* 提取 HLS 播放列表
+*/
+function extractHlsList(info) {
+	const linkList = info.links || [];
+	if (linkList.length > 0) return linkList.map((item, index) => {
+		return {
+			text: item.name || String(index + 1),
+			url: item.m3u8_url || item.preview_m3u8_url || "",
+			definition: "",
+			isDefault: index === 0
+		};
+	}).filter((item) => item.url);
+	return [];
+}
+
+//#endregion
+export { DetailHero };