@funhub/platform 0.2.29 → 0.2.31

package/dist/components/common/series-episodes/index.mjs

@@ -1,2 +1,827 @@
 
-"use client";import{trackPageClick as e}from"../../../utils/tracking.mjs";import{Box as t}from"../../ui/box.mjs";import{Text as n}from"../../ui/text.mjs";import{Sheet as r,SheetContent as i,SheetHeader as a,SheetTitle as o}from"../../ui/sheet.mjs";import{Switch as s}from"../../ui/switch.mjs";import{useKeepAliveState as c}from"../keep-scroll-position/index.mjs";import l from"../../../assets/icons/common/right_arrow.mjs";import u from"../../ui/popup.mjs";import{toast as d}from"sonner";import{useCallback as f,useEffect as p,useMemo as m,useRef as h,useState as g}from"react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{useTranslations as ee}from"next-intl";const b=`funhub:detail-series-popup-query`,x=`funhub:detail-series-popup-close`;function S(e){return e.type===b&&e instanceof CustomEvent}function C({active:e}){return e?y(`svg`,{width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,className:`shrink-0`,"aria-hidden":!0,children:[v(`circle`,{cx:`16`,cy:`12`,r:`3`,fill:`white`}),v(`path`,{d:`M8 5H16C19.866 5 23 8.13401 23 12C23 15.866 19.866 19 16 19H8C4.13401 19 1 15.866 1 12C1 8.13401 4.13401 5 8 5ZM16 15C17.6569 15 19 13.6569 19 12C19 10.3431 17.6569 9 16 9C14.3431 9 13 10.3431 13 12C13 13.6569 14.3431 15 16 15Z`,fill:`#9054E5`})]}):y(`svg`,{width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,className:`shrink-0`,"aria-hidden":!0,children:[v(`path`,{d:`M1.5 12C1.5 8.68629 4.18629 6 7.5 6H16.5C19.8137 6 22.5 8.68629 22.5 12C22.5 15.3137 19.8137 18 16.5 18H7.5C4.18629 18 1.5 15.3137 1.5 12Z`,stroke:`currentColor`,strokeWidth:`1.5`,strokeOpacity:`0.6`}),v(`circle`,{cx:`9`,cy:`12`,r:`3`,fill:`rgba(255,255,255,0.6)`})]})}function te(){return v(`svg`,{width:`20`,height:`20`,viewBox:`0 0 20 20`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,className:`block h-[20px] w-[20px]`,"aria-hidden":!0,children:v(`path`,{d:`M10 8.61116L14.8611 3.75L16.25 5.13889L11.3889 10L16.25 14.8611L14.8611 16.25L10 11.3889L5.13889 16.25L3.75 14.8611L8.61111 10L3.75 5.13889L5.13889 3.75L10 8.61116Z`,fill:`currentColor`})})}function w(e,t){let n=String(t||``).trim();if(!n)return e;let r=e.replace(/\s+/g,``);return n.replace(/\s+/g,``)===r?e:`${e} ${n}`}function T(e,t,n){return(e||[]).map((e,r)=>{let i=Number.parseInt(e?.id||``,10),a=Number.isNaN(i)?r+1:i,o=e?.name||``,s=w(n(a),o);return{id:e?.id||`${t}-${a}`,series_num:a,title:s}})}function E(e,t,n){return(e||[]).map((e,r)=>{let i=Number(e?.id),a=Number.isNaN(i)?r+1:i,o=n(a);return{id:e?.id||`${t}-${a}`,series_num:a,title:o}})}function D(e,t,n){return e<=0?n(`singleContent`):n(t===`1`?`completedSeriesTotal`:`ongoingSeriesTotal`,{total:e})}function O(){return v(`span`,{"aria-hidden":!0,className:`pointer-events-none absolute inset-0 overflow-hidden rounded-[8px] p-[0.5px]`,style:{backgroundImage:`linear-gradient(90deg, rgba(255,30,172,0.7) 0%, rgba(108,67,238,0) 100%), linear-gradient(180deg, #9756E3 0%, #6C43EE 100%)`},children:v(`span`,{className:`block h-full w-full`,style:{borderRadius:`7.5px`,backgroundColor:`#000000`,backgroundImage:`linear-gradient(90deg, rgba(246,206,255,0.1) 0%, rgba(246,206,255,0.1) 100%), linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%)`}})})}function k(e){return e.mode===`detail`?v(j,{information:e.information,series_num:e.series_num,onEpisodeChange:e.onEpisodeChange}):v(A,{open:e.open,variant:e.variant,title:e.title,videoTitle:e.videoTitle,updateStatus:e.updateStatus,summaryText:e.summaryText,seriesList:e.seriesList,activeEpisodeId:e.activeEpisodeId,showEpisodeTitle:e.showEpisodeTitle,onToggleTitle:e.onToggleTitle,onClose:e.onClose,onSelectEpisode:e.onSelectEpisode,popupBodyStyle:e.popupBodyStyle,popupStylePreset:e.popupStylePreset})}function A({open:e,variant:c,title:l,videoTitle:d,updateStatus:_,summaryText:b,seriesList:x,activeEpisodeId:S,showEpisodeTitle:E=!1,onToggleTitle:k,onClose:A,onSelectEpisode:j,popupBodyStyle:M,popupStylePreset:N=`default`}){let P=ee(`components.common.seriesEpisodes`),F=!!k,I=F&&E,L=c===`popup`&&N===`detail-style-one`,R=h(null),z=h(null),B=m(()=>T(x,`episode`,e=>P(`episodeLabel`,{episode:e})),[x,P]),V=m(()=>{if(B.length===0)return[];let e=[];return B.forEach((t,n)=>{let r=Math.floor(n/50);e[r]||(e[r]=[]),e[r].push(t)}),e},[B,50]),H=m(()=>{if(!S)return 0;let e=B.findIndex(e=>e.id===S);return e<0?0:Math.floor(e/50)},[S,B,50]),[U,W]=g(H);p(()=>{W(H)},[H]);let G=m(()=>typeof b==`string`&&b.trim()?b:D(B.length,_,P),[B.length,b,P,_]),K=l||P(`selectorTitle`),q=String(d||``).trim(),J=f(e=>w(P(`episodeLabel`,{episode:e.series_num}),q),[q,P]);function Y(){let e=R.current;if(e){z.current&&=(window.cancelAnimationFrame(z.current),null),e.scrollTop=0;try{e.scrollTo({top:0,left:0,behavior:`auto`})}catch{}z.current=window.requestAnimationFrame(()=>{z.current=null;let e=R.current;e&&(e.scrollTop=0)})}}p(()=>{e&&Y()},[e,E,U]);function X(e){k&&(k(e),Y())}function Z(e){j?.(e.id,e.series_num),A()}let Q=I?2:5,$=V.length>1?v(`div`,{className:`shrink-0 w-full flex gap-[8px] overflow-x-auto`,children:V.map((e,t)=>{if(e.length===0)return null;let n=t===U,r=t*50+1,i=Math.min((t+1)*50,B.length);return y(`div`,{className:`shrink-0 px-[16px] py-[6px] rounded-[16px] text-[14px] transition-colors cursor-pointer relative overflow-hidden ${n?`text-theme5 bg-bg2`:`text-text2 bg-bg2`}`,onClick:()=>{W(t),Y()},children:[r,`-`,i,n&&v(`div`,{className:`absolute w-full h-full top-0 left-0 opacity-20 bg-theme5`})]},`series-group-${t}`)})}):null,ne=y(`div`,{className:`pb-[8px] flex justify-between`,children:[v(`span`,{className:`text-[16px] text-text1`,children:G}),F&&y(`div`,{className:`flex items-center gap-[4px]`,children:[v(s,{size:`sm`,className:`data-checked:bg-theme5 h-[20px] w-[33px]`,checked:E,onCheckedChange:e=>{X(!!e)}}),v(`button`,{type:`button`,className:`text-[16px] text-text1`,onClick:()=>{X(!E)},children:P(`episodeTitle`)})]})]}),re=v(`div`,{className:`grid w-full gap-2 ${Q===2?`grid-cols-2`:`grid-cols-5`}`,children:(V[U]||[]).map((e,t)=>{let n=!!(S&&e.id===S);return v(`button`,{type:`button`,"data-episode-id":e.id,onClick:()=>{Z(e)},className:`flex items-center justify-center w-full h-[56px] rounded-[8px] transition-colors ${n?``:`bg-white/10`} cursor-pointer select-none transition-colors relative overflow-hidden ${I?`h-[72px] px-[10px] text-[14px]`:``} ${t%Q===0?``:`border-l-0`}`,children:I?v(`span`,{className:`block w-full truncate leading-[22px]`,children:J(e)}):e.series_num},e.id)})}),ie=V.length>1?v(`div`,{className:`flex gap-[8px] overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden`,children:V.map((e,t)=>{if(e.length===0)return null;let n=t===U,r=t*50+1,i=Math.min((t+1)*50,B.length);return v(`button`,{type:`button`,className:`flex h-[28px] w-[72px] shrink-0 items-center justify-center rounded-[100px] px-[4px] transition-colors ${n?`bg-[linear-gradient(90deg,#9756E3_0%,#6C43EE_100%)] text-white`:`bg-white/20 text-white`}`,onClick:()=>{W(t),Y()},children:y(`span`,{className:`font-['PingFang_SC'] text-[14px] font-normal not-italic leading-[20px]`,children:[r,`-`,i]})},`series-popup-group-${t}`)})}):null,ae=y(`div`,{className:`flex items-center justify-between`,children:[v(`span`,{className:`font-['PingFang_SC'] text-[14px] font-normal not-italic leading-[24px] text-white/60`,children:G}),F&&y(`button`,{type:`button`,className:`flex items-center gap-[3px] text-white/60`,onClick:()=>{X(!E)},children:[v(C,{active:E}),v(`span`,{className:`font-['PingFang_SC'] text-[14px] font-normal not-italic leading-[24px] text-white/60`,children:P(`episodeTitle`)})]})]}),oe=I?v(`div`,{className:`flex w-full flex-col gap-[12px]`,children:(V[U]||[]).map(e=>{let t=!!(S&&e.id===S);return y(`button`,{type:`button`,"data-episode-id":e.id,onClick:()=>{Z(e)},className:`relative flex w-full items-start overflow-hidden rounded-[8px] px-[16px] py-[18px] text-left transition-colors ${t?L?``:`border border-[#FF1EFF] bg-[linear-gradient(90deg,rgba(246,206,255,0.1)_0%,rgba(246,206,255,0.1)_100%),linear-gradient(90deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.1)_100%)]`:`bg-white/10`}`,children:[t&&L&&v(O,{}),v(`span`,{className:`relative z-[1] block w-full truncate font-['PingFang_SC'] text-[14px] ${t?`font-medium leading-[16px] text-[#CA3FE9]`:`font-normal leading-[16px] text-white/80`}`,children:J(e)})]},`popup-${e.id}`)})}):v(`div`,{className:`grid w-full grid-cols-[repeat(6,52px)] justify-between gap-y-[8px]`,children:(V[U]||[]).map(e=>{let t=!!(S&&e.id===S);return y(`button`,{type:`button`,"data-episode-id":e.id,onClick:()=>{Z(e)},className:`relative flex h-[52px] w-[52px] items-center justify-center overflow-hidden rounded-[8px] transition-colors ${t?L?`text-[#9756E3]`:`border border-[#E62AFF]/90 bg-[linear-gradient(90deg,rgba(246,206,255,0.1)_0%,rgba(246,206,255,0.1)_100%),linear-gradient(90deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.1)_100%)] text-[#9756E3]`:`bg-white/10 text-white/80`}`,children:[t&&L&&v(O,{}),v(`span`,{className:`relative z-[1] font-['PingFang_SC'] text-[16px] font-medium not-italic leading-[16px]`,children:e.series_num})]},`popup-${e.id}`)})});return c===`sheet`?v(r,{open:e,onOpenChange:e=>!e&&A(),children:y(i,{side:`bottom`,showCloseButton:!0,className:`min-h-[50vh] bg-bg1 text-text1 rounded-t-2xl border-t border-white/10`,children:[v(a,{className:`pt-3 pb-0`,children:v(o,{className:`flex items-center justify-between text-lg text-text1`,children:K})}),y(`div`,{className:`px-4 pb-2 flex flex-col gap-3`,children:[$,ne]}),v(`div`,{ref:R,className:`flex-1 h-0 pt-[4px] pb-[12px] overflow-y-auto px-4`,children:re})]})}):v(u,{open:e,onOpenChange:e=>{e||A()},showCloseButton:!1,className:`!gap-0 !border-0 !bg-transparent !p-0 !shadow-none`,overlayClassName:`bg-black/50 backdrop-blur-0`,children:y(t,{className:`flex h-full w-full flex-col overflow-hidden rounded-t-[16px] bg-black text-text1`,style:{height:`70vh`,...M},children:[y(t,{className:`shrink-0 flex items-center justify-between px-[16px] pt-[32px]`,children:[v(n,{className:`font-['PingFang_SC'] text-[18px] font-medium not-italic leading-[24px] text-white`,children:K}),v(`button`,{type:`button`,"aria-label":`关闭`,className:`flex h-[24px] w-[24px] items-center justify-center text-white opacity-60`,onClick:A,children:v(`span`,{className:`flex h-[24px] w-[24px] items-center overflow-hidden p-[2px]`,children:v(te,{})})})]}),v(t,{className:`flex-1 h-0 w-full px-[16px] pb-[24px]`,children:y(t,{className:`flex h-full flex-col`,children:[ie&&v(t,{className:`mt-[16px] shrink-0`,children:ie}),v(t,{className:`mt-[16px] shrink-0`,children:ae}),v(t,{ref:R,className:`flex-1 overflow-y-auto pb-[17px] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${I?`mt-[12px]`:`mt-[8px]`}`,children:oe})]})})]})})}function j({information:r,series_num:i,onEpisodeChange:a}){let o=ee(`components.common`),[s,u]=c(`detail-series-popup-${r.id}`,!1),[C,te]=c(`detail-series-title-toggle-${r.id}`,!1),[w,T]=c(`detail-series-scroll-left-${r.id}`,null),[D,k]=g(i);p(()=>{k(i)},[r.id,i]),p(()=>{if(typeof window>`u`)return;let e=()=>{u(!1)};return window.addEventListener(x,e),()=>{window.removeEventListener(x,e)}},[u]),p(()=>{if(typeof window>`u`)return;let e=e=>{if(!S(e))return;let t=e.detail||{};t.open=!!t.open||!!s};return window.addEventListener(b,e),()=>{window.removeEventListener(b,e)}},[s]),p(()=>{s&&e(`page_video_detail`,`详情页`,null,`detail_select_episode_popup`)},[s]);let j=m(()=>E((r.links||[]).map(e=>({id:e.id,name:e.name})),r.id||`episode`,e=>o(`seriesEpisodes.episodeLabel`,{episode:e})),[r.id,r.links,o]),M=r.update_status===`1`?o(`seriesEpisodes.completedSeriesTotal`,{total:r.links.length}):o(`seriesEpisodes.ongoingSeriesUpdatedTo`,{total:r.links.length}),N=m(()=>r.links[D-1]?.id||r.links[0]?.id||``,[r.links,D]),P=h(null),F=h(null),I=h(null),L=h(!1),R=h(null),z=h(null),B=h(null),[V,H]=g(!1),U=f((e,t=`smooth`)=>{let n=P.current?.querySelector(`[data-content-id="${e}"]`);if(n&&P.current){let e=P.current,r=Math.max(0,n.offsetLeft-10);e.scrollTo({left:r,behavior:t})}},[]),W=f(()=>{z.current!==null&&(window.clearTimeout(z.current),z.current=null)},[]),G=f(()=>{B.current!==null&&(window.clearTimeout(B.current),B.current=null)},[]),K=f(()=>{R.current!==null&&(d.dismiss(R.current),R.current=null),W(),G()},[G,W]),q=f(()=>{F.current=null,I.current=null,K(),H(!1)},[K]),J=f((e,t)=>{G(),B.current=window.setTimeout(()=>{B.current=null,F.current===e&&q()},Math.max(0,t))},[G,q]);p(()=>{L.current=!1},[r.id]),p(()=>{if(L.current||!N)return;let e=window.requestAnimationFrame(()=>{let e=P.current;e&&(typeof w==`number`?e.scrollTo({left:Math.max(0,w),behavior:`auto`}):(U(N,`auto`),T(Math.max(0,Math.round(e.scrollLeft)))),L.current=!0)});return()=>{window.cancelAnimationFrame(e)}},[N,w,U,T]),p(()=>{let e=F.current;!e||e!==i||J(e,1e3)},[J,i]),p(()=>()=>{q()},[q]);let Y=f((e,t,n)=>{let r=P.current;if(!r||!e)return t;let i=r.querySelector(`[data-content-id="${e}"]`);if(!i)return t;let a=r.getBoundingClientRect();if(a.width<=0||typeof n!=`number`||(n-a.left)/a.width<.5)return t;let o=i.offsetLeft+i.offsetWidth/2,s=r.clientWidth/2,c=Math.max(0,r.scrollWidth-r.clientWidth),l=Math.min(c,Math.max(0,o-s));return r.scrollTo({left:l,behavior:`smooth`}),Math.round(l)},[]),X=f((e,t=`inline`,n,s)=>{if(e!==D){if(!r.links[e-1]){d.error(o(`seriesEpisodes.episodeNotFound`));return}if(typeof window<`u`&&window.isWebView===!0){try{k(e);let c=n||r.links[e-1]?.id||``,l=Math.max(0,Math.round(P.current?.scrollLeft||0));t===`popup`?(c&&U(c,`auto`),T(Math.max(0,Math.round(P.current?.scrollLeft||0)))):T(Y(c,l,s)),H(!0),K(),R.current=d.loading(o(`seriesEpisodes.episodeSwitching`)),F.current=e,I.current=t,z.current=window.setTimeout(()=>{F.current===e&&(k(i),q(),d.error(o(`seriesEpisodes.episodeSwitchFailed`)))},3e3),a(e)}catch(e){k(i),q(),console.error(`切换剧集失败`,e),d.error(o(`seriesEpisodes.episodeSwitchFailed`))}return}try{k(e);let c=n||r.links[e-1]?.id||``,l=Math.max(0,Math.round(P.current?.scrollLeft||0));t===`popup`?(c&&U(c,`auto`),T(Math.max(0,Math.round(P.current?.scrollLeft||0)))):T(Y(c,l,s)),H(!0),K(),R.current=d.loading(o(`seriesEpisodes.episodeSwitching`)),F.current=e,I.current=t,z.current=window.setTimeout(()=>{F.current===e&&(k(i),q(),d.error(o(`seriesEpisodes.episodeSwitchFailed`)))},8e3),a(e)}catch(e){k(i),q(),console.error(`切换剧集失败`,e),d.error(o(`seriesEpisodes.episodeSwitchFailed`))}}},[q,K,r.links,a,D,i,Y,U,T,o]),[Z,Q]=g(`70vh`),$=f(()=>{if(typeof window>`u`)return;if(window.isWebView===!0){Q(`100vh`);return}let e=document.getElementById(`selectPopupPosition`),t=window.visualViewport?.height||window.innerHeight;if(!e){Q(`70vh`);return}let n=Math.max(0,t-e.offsetTop);if(n<=0){Q(`70vh`);return}Q(`${n}px`)},[]);return p(()=>{if(!s)return;$();let e=()=>{$()};return window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,!0)}},[$,s]),j.length<=1?null:y(_,{children:[y(t,{className:`w-full mt-[16px] flex flex-col items-end mb-[4px]`,children:[y(t,{className:`w-fit flex items-center px-[12px] h-[28px]`,onClick:()=>{e(`page_video_detail`,`详情页`,null,`detail_select_episode_btn`),u(!0)},children:[v(n,{className:`text-[14px] text-text2 leading-[20px]`,children:M}),v(l,{className:`w-[11px] h-[18px] ml-[4px] text-text2`})]}),v(`div`,{ref:P,className:`w-full mt-[12px] overflow-x-auto px-[12px] flex gap-x-[8px] h-[56px] ${V?`touch-none`:``}`,children:j.map((t,r)=>y(`div`,{"data-content-id":t.id,className:`relative shrink-0 h-[full] overflow-hidden px-[18px] rounded-[8px] flex items-center justify-center ${C?`min-w-[88px] h-[40px]`:`w-[56px] !px-[0] justify-center`} ${t.id===N?`bg-transparent`:`bg-white/10`}`,onClick:n=>{e(`page_video_detail`,`详情页`,n,`detail_episode_click`,{episode_num:r+1,episode_id:t.id}),X(r+1,`inline`,t.id,n.clientX)},children:[t.id===N&&v(O,{}),v(n,{className:`relative z-[1] text-[14px] text-text1 leading-[22px] line-clamp-2 ${t.id===N?`!text-[#CA3FE9]`:``}`,children:C?t.title:t.series_num})]},t.id))})]}),v(A,{title:o(`seriesEpisodes.selectorTitle`),videoTitle:r.name,variant:`popup`,open:s,updateStatus:r.update_status,summaryText:M,seriesList:(r.links||[]).map(e=>({id:e.id,name:e.name})),activeEpisodeId:N,showEpisodeTitle:C,onToggleTitle:e=>{te(e)},onClose:()=>u(!1),onSelectEpisode:(e,t)=>{u(!1),X(t,`popup`,e)},popupBodyStyle:{height:Z},popupStylePreset:`default`})]})}export{O as DetailStyleOneActiveBorderLayer,k as SeriesEpisodes};
+'use client';
+
+import { trackPageClick } from "../../../utils/tracking.mjs";
+import { Box } from "../../ui/box.mjs";
+import { Text } from "../../ui/text.mjs";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../../ui/sheet.mjs";
+import { Switch } from "../../ui/switch.mjs";
+import { useKeepAliveState } from "../keep-scroll-position/index.mjs";
+import SvgRightArrow from "../../../assets/icons/common/right_arrow.mjs";
+import Popup from "../../ui/popup.mjs";
+import { toast } from "sonner";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/common/series-episodes/index.tsx
+const SHEET_EPISODES_PER_GROUP = 50;
+const POPUP_EPISODES_PER_GROUP = 50;
+const EPISODE_SWITCH_SUCCESS_TOAST_DELAY_MS = 1e3;
+const INLINE_EPISODE_MID_RIGHT_TRIGGER_RATIO = .5;
+const DETAIL_SERIES_POPUP_QUERY_EVENT = "funhub:detail-series-popup-query";
+const DETAIL_SERIES_POPUP_CLOSE_EVENT = "funhub:detail-series-popup-close";
+const DETAIL_STYLE_ONE_ACTIVE_EPISODE_BACKGROUND_FILL = "linear-gradient(90deg, rgba(246,206,255,0.1) 0%, rgba(246,206,255,0.1) 100%), linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%)";
+const DETAIL_STYLE_ONE_ACTIVE_EPISODE_BORDER_GRADIENT = "linear-gradient(90deg, rgba(255,30,172,0.7) 0%, rgba(108,67,238,0) 100%), linear-gradient(180deg, #9756E3 0%, #6C43EE 100%)";
+const DETAIL_STYLE_ONE_ACTIVE_EPISODE_INNER_RADIUS = "7.5px";
+/**
+* 判断是否为「详情选集弹窗状态查询」事件。
+*/
+function isDetailSeriesPopupQueryEvent(event) {
+	return event.type === DETAIL_SERIES_POPUP_QUERY_EVENT && event instanceof CustomEvent;
+}
+function EpisodeTitleToggleIcon({ active }) {
+	if (active) return /* @__PURE__ */ jsxs("svg", {
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		className: "shrink-0",
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "16",
+			cy: "12",
+			r: "3",
+			fill: "white"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M8 5H16C19.866 5 23 8.13401 23 12C23 15.866 19.866 19 16 19H8C4.13401 19 1 15.866 1 12C1 8.13401 4.13401 5 8 5ZM16 15C17.6569 15 19 13.6569 19 12C19 10.3431 17.6569 9 16 9C14.3431 9 13 10.3431 13 12C13 13.6569 14.3431 15 16 15Z",
+			fill: "#9054E5"
+		})]
+	});
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		className: "shrink-0",
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M1.5 12C1.5 8.68629 4.18629 6 7.5 6H16.5C19.8137 6 22.5 8.68629 22.5 12C22.5 15.3137 19.8137 18 16.5 18H7.5C4.18629 18 1.5 15.3137 1.5 12Z",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeOpacity: "0.6"
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: "9",
+			cy: "12",
+			r: "3",
+			fill: "rgba(255,255,255,0.6)"
+		})]
+	});
+}
+function DetailPopupCloseIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "20",
+		height: "20",
+		viewBox: "0 0 20 20",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		className: "block h-[20px] w-[20px]",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M10 8.61116L14.8611 3.75L16.25 5.13889L11.3889 10L16.25 14.8611L14.8611 16.25L10 11.3889L5.13889 16.25L3.75 14.8611L8.61111 10L3.75 5.13889L5.13889 3.75L10 8.61116Z",
+			fill: "currentColor"
+		})
+	});
+}
+/**
+* 构建分集标题展示文案：
+* - 始终包含「第 N 集」前缀
+* - 有视频标题时拼接在后面
+* - 若标题本身已等于分集文案，避免重复
+*/
+function buildEpisodeDisplayTitle(episodeLabel, rawTitle) {
+	const normalizedTitle = String(rawTitle || "").trim();
+	if (!normalizedTitle) return episodeLabel;
+	const compactEpisodeLabel = episodeLabel.replace(/\s+/g, "");
+	if (normalizedTitle.replace(/\s+/g, "") === compactEpisodeLabel) return episodeLabel;
+	return `${episodeLabel} ${normalizedTitle}`;
+}
+/**
+* 把后端/业务侧的「剧集列表」规范化为统一结构：
+* - `series_num`: 优先从 name 解析数字，否则按 index+1
+* - `title`: 数字则显示 `第{n}集`，非数字则尽量透传 name
+*/
+function normalizeEpisodes(list, fallbackIdPrefix, formatEpisodeLabel) {
+	return (list || []).map((item, index) => {
+		const parsed = Number.parseInt(item?.id || "", 10);
+		const seriesNum = Number.isNaN(parsed) ? index + 1 : parsed;
+		const rawName = item?.name || "";
+		const displayName = buildEpisodeDisplayTitle(formatEpisodeLabel(seriesNum), rawName);
+		return {
+			id: item?.id || `${fallbackIdPrefix}-${seriesNum}`,
+			series_num: seriesNum,
+			title: displayName
+		};
+	});
+}
+/**
+* 详情页：保持兼容既有文案（`第{name}集`），并用 name 参与编号解析。
+*/
+function normalizeEpisodesForDetail(list, fallbackIdPrefix, formatEpisodeLabel) {
+	return (list || []).map((item, index) => {
+		const parsedSeriesNum = Number(item?.id);
+		const seriesNum = Number.isNaN(parsedSeriesNum) ? index + 1 : parsedSeriesNum;
+		const displayName = formatEpisodeLabel(seriesNum);
+		return {
+			id: item?.id || `${fallbackIdPrefix}-${seriesNum}`,
+			series_num: seriesNum,
+			title: displayName
+		};
+	});
+}
+/**
+* 构建「选集」弹层的摘要文案。
+*/
+function buildSeriesSummaryText(total, updateStatus, t) {
+	if (total <= 0) return t("singleContent");
+	if (updateStatus === "1") return t("completedSeriesTotal", { total });
+	return t("ongoingSeriesTotal", { total });
+}
+function DetailStyleOneActiveBorderLayer() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[8px] p-[0.5px]",
+		style: { backgroundImage: DETAIL_STYLE_ONE_ACTIVE_EPISODE_BORDER_GRADIENT },
+		children: /* @__PURE__ */ jsx("span", {
+			className: "block h-full w-full",
+			style: {
+				borderRadius: DETAIL_STYLE_ONE_ACTIVE_EPISODE_INNER_RADIUS,
+				backgroundColor: "#000000",
+				backgroundImage: DETAIL_STYLE_ONE_ACTIVE_EPISODE_BACKGROUND_FILL
+			}
+		})
+	});
+}
+function SeriesEpisodes(props) {
+	if (props.mode === "detail") return /* @__PURE__ */ jsx(DetailSeriesEpisodes, {
+		information: props.information,
+		series_num: props.series_num,
+		onEpisodeChange: props.onEpisodeChange
+	});
+	return /* @__PURE__ */ jsx(SelectorSeriesEpisodes, {
+		open: props.open,
+		variant: props.variant,
+		title: props.title,
+		videoTitle: props.videoTitle,
+		updateStatus: props.updateStatus,
+		summaryText: props.summaryText,
+		seriesList: props.seriesList,
+		activeEpisodeId: props.activeEpisodeId,
+		showEpisodeTitle: props.showEpisodeTitle,
+		onToggleTitle: props.onToggleTitle,
+		onClose: props.onClose,
+		onSelectEpisode: props.onSelectEpisode,
+		popupBodyStyle: props.popupBodyStyle,
+		popupStylePreset: props.popupStylePreset
+	});
+}
+/**
+* SelectorSeriesEpisodes
+*
+* 用于「只需要弹层」的场景（例如全屏流/剧集页）。
+*/
+function SelectorSeriesEpisodes({ open, variant, title, videoTitle, updateStatus, summaryText, seriesList, activeEpisodeId, showEpisodeTitle = false, onToggleTitle, onClose, onSelectEpisode, popupBodyStyle, popupStylePreset = "default" }) {
+	const t = useTranslations("components.common.seriesEpisodes");
+	const canToggleTitle = Boolean(onToggleTitle);
+	const useTitleLayout = canToggleTitle && showEpisodeTitle;
+	const useDetailStyleOnePopup = variant === "popup" && popupStylePreset === "detail-style-one";
+	const episodesPerGroup = variant === "popup" ? POPUP_EPISODES_PER_GROUP : SHEET_EPISODES_PER_GROUP;
+	const listRef = useRef(null);
+	const scrollToTopRafRef = useRef(null);
+	const episodes = useMemo(() => {
+		return normalizeEpisodes(seriesList, "episode", (episode) => t("episodeLabel", { episode }));
+	}, [seriesList, t]);
+	const episodeGroups = useMemo(() => {
+		if (episodes.length === 0) return [];
+		const groups = [];
+		episodes.forEach((item, index) => {
+			const groupIndex = Math.floor(index / episodesPerGroup);
+			if (!groups[groupIndex]) groups[groupIndex] = [];
+			groups[groupIndex].push(item);
+		});
+		return groups;
+	}, [episodes, episodesPerGroup]);
+	const activeGroupIndex = useMemo(() => {
+		if (!activeEpisodeId) return 0;
+		const activeIndex = episodes.findIndex((item) => item.id === activeEpisodeId);
+		if (activeIndex < 0) return 0;
+		return Math.floor(activeIndex / episodesPerGroup);
+	}, [
+		activeEpisodeId,
+		episodes,
+		episodesPerGroup
+	]);
+	const [groupIndex, setGroupIndex] = useState(activeGroupIndex);
+	useEffect(() => {
+		setGroupIndex(activeGroupIndex);
+	}, [activeGroupIndex]);
+	const resolvedSummaryText = useMemo(() => {
+		if (typeof summaryText === "string" && summaryText.trim()) return summaryText;
+		return buildSeriesSummaryText(episodes.length, updateStatus, t);
+	}, [
+		episodes.length,
+		summaryText,
+		t,
+		updateStatus
+	]);
+	const resolvedTitle = title || t("selectorTitle");
+	const resolvedVideoTitle = String(videoTitle || "").trim();
+	const resolveEpisodeButtonTitle = useCallback((item) => {
+		return buildEpisodeDisplayTitle(t("episodeLabel", { episode: item.series_num }), resolvedVideoTitle);
+	}, [resolvedVideoTitle, t]);
+	function scrollToTop() {
+		const el = listRef.current;
+		if (!el) return;
+		if (scrollToTopRafRef.current) {
+			window.cancelAnimationFrame(scrollToTopRafRef.current);
+			scrollToTopRafRef.current = null;
+		}
+		el.scrollTop = 0;
+		try {
+			el.scrollTo({
+				top: 0,
+				left: 0,
+				behavior: "auto"
+			});
+		} catch {}
+		scrollToTopRafRef.current = window.requestAnimationFrame(() => {
+			scrollToTopRafRef.current = null;
+			const latest = listRef.current;
+			if (latest) latest.scrollTop = 0;
+		});
+	}
+	useEffect(() => {
+		if (open) scrollToTop();
+	}, [
+		open,
+		showEpisodeTitle,
+		groupIndex
+	]);
+	function handleToggleTitle(nextValue) {
+		if (!onToggleTitle) return;
+		onToggleTitle(nextValue);
+		scrollToTop();
+	}
+	function handleSelectEpisode(item) {
+		onSelectEpisode?.(item.id, item.series_num);
+		onClose();
+	}
+	const columns = useTitleLayout ? 2 : 5;
+	const groupTabs = episodeGroups.length > 1 ? /* @__PURE__ */ jsx("div", {
+		className: "shrink-0 w-full flex gap-[8px] overflow-x-auto",
+		children: episodeGroups.map((group, index) => {
+			if (group.length === 0) return null;
+			const isActive = index === groupIndex;
+			const start = index * episodesPerGroup + 1;
+			const end = Math.min((index + 1) * episodesPerGroup, episodes.length);
+			return /* @__PURE__ */ jsxs("div", {
+				className: `shrink-0 px-[16px] py-[6px] rounded-[16px] text-[14px] transition-colors cursor-pointer relative overflow-hidden ${isActive ? "text-theme5 bg-bg2" : "text-text2 bg-bg2"}`,
+				onClick: () => {
+					setGroupIndex(index);
+					scrollToTop();
+				},
+				children: [
+					start,
+					"-",
+					end,
+					isActive && /* @__PURE__ */ jsx("div", { className: "absolute w-full h-full top-0 left-0 opacity-20 bg-theme5" })
+				]
+			}, `series-group-${index}`);
+		})
+	}) : null;
+	const summaryRow = /* @__PURE__ */ jsxs("div", {
+		className: "pb-[8px] flex justify-between",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[16px] text-text1",
+			children: resolvedSummaryText
+		}), canToggleTitle && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-[4px]",
+			children: [/* @__PURE__ */ jsx(Switch, {
+				size: "sm",
+				className: "data-checked:bg-theme5 h-[20px] w-[33px]",
+				checked: showEpisodeTitle,
+				onCheckedChange: (value) => {
+					handleToggleTitle(Boolean(value));
+				}
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "text-[16px] text-text1",
+				onClick: () => {
+					handleToggleTitle(!showEpisodeTitle);
+				},
+				children: t("episodeTitle")
+			})]
+		})]
+	});
+	const grid = /* @__PURE__ */ jsx("div", {
+		className: `grid w-full gap-2 ${columns === 2 ? "grid-cols-2" : "grid-cols-5"}`,
+		children: (episodeGroups[groupIndex] || []).map((item, index) => {
+			const isActive = Boolean(activeEpisodeId && item.id === activeEpisodeId);
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-episode-id": item.id,
+				onClick: () => {
+					handleSelectEpisode(item);
+				},
+				className: `flex items-center justify-center w-full h-[56px] rounded-[8px] transition-colors ${isActive ? "" : "bg-white/10"} cursor-pointer select-none transition-colors relative overflow-hidden ${useTitleLayout ? "h-[72px] px-[10px] text-[14px]" : ""} ${index % columns === 0 ? "" : "border-l-0"}`,
+				children: useTitleLayout ? /* @__PURE__ */ jsx("span", {
+					className: "block w-full truncate leading-[22px]",
+					children: resolveEpisodeButtonTitle(item)
+				}) : item.series_num
+			}, item.id);
+		})
+	});
+	const popupGroupTabs = episodeGroups.length > 1 ? /* @__PURE__ */ jsx("div", {
+		className: "flex gap-[8px] overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+		children: episodeGroups.map((group, index) => {
+			if (group.length === 0) return null;
+			const isActive = index === groupIndex;
+			const start = index * episodesPerGroup + 1;
+			const end = Math.min((index + 1) * episodesPerGroup, episodes.length);
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: `flex h-[28px] w-[72px] shrink-0 items-center justify-center rounded-[100px] px-[4px] transition-colors ${isActive ? "bg-[linear-gradient(90deg,#9756E3_0%,#6C43EE_100%)] text-white" : "bg-white/20 text-white"}`,
+				onClick: () => {
+					setGroupIndex(index);
+					scrollToTop();
+				},
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "font-['PingFang_SC'] text-[14px] font-normal not-italic leading-[20px]",
+					children: [
+						start,
+						"-",
+						end
+					]
+				})
+			}, `series-popup-group-${index}`);
+		})
+	}) : null;
+	const popupSummaryRow = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "font-['PingFang_SC'] text-[14px] font-normal not-italic leading-[24px] text-white/60",
+			children: resolvedSummaryText
+		}), canToggleTitle && /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "flex items-center gap-[3px] text-white/60",
+			onClick: () => {
+				handleToggleTitle(!showEpisodeTitle);
+			},
+			children: [/* @__PURE__ */ jsx(EpisodeTitleToggleIcon, { active: showEpisodeTitle }), /* @__PURE__ */ jsx("span", {
+				className: "font-['PingFang_SC'] text-[14px] font-normal not-italic leading-[24px] text-white/60",
+				children: t("episodeTitle")
+			})]
+		})]
+	});
+	const popupGrid = useTitleLayout ? /* @__PURE__ */ jsx("div", {
+		className: "flex w-full flex-col gap-[12px]",
+		children: (episodeGroups[groupIndex] || []).map((item) => {
+			const isActive = Boolean(activeEpisodeId && item.id === activeEpisodeId);
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-episode-id": item.id,
+				onClick: () => {
+					handleSelectEpisode(item);
+				},
+				className: `relative flex w-full items-start overflow-hidden rounded-[8px] px-[16px] py-[18px] text-left transition-colors ${isActive ? useDetailStyleOnePopup ? "" : "border border-[#FF1EFF] bg-[linear-gradient(90deg,rgba(246,206,255,0.1)_0%,rgba(246,206,255,0.1)_100%),linear-gradient(90deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.1)_100%)]" : "bg-white/10"}`,
+				children: [isActive && useDetailStyleOnePopup && /* @__PURE__ */ jsx(DetailStyleOneActiveBorderLayer, {}), /* @__PURE__ */ jsx("span", {
+					className: `relative z-[1] block w-full truncate font-['PingFang_SC'] text-[14px] ${isActive ? "font-medium leading-[16px] text-[#CA3FE9]" : "font-normal leading-[16px] text-white/80"}`,
+					children: resolveEpisodeButtonTitle(item)
+				})]
+			}, `popup-${item.id}`);
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		className: "grid w-full grid-cols-[repeat(6,52px)] justify-between gap-y-[8px]",
+		children: (episodeGroups[groupIndex] || []).map((item) => {
+			const isActive = Boolean(activeEpisodeId && item.id === activeEpisodeId);
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-episode-id": item.id,
+				onClick: () => {
+					handleSelectEpisode(item);
+				},
+				className: `relative flex h-[52px] w-[52px] items-center justify-center overflow-hidden rounded-[8px] transition-colors ${isActive ? useDetailStyleOnePopup ? "text-[#9756E3]" : "border border-[#E62AFF]/90 bg-[linear-gradient(90deg,rgba(246,206,255,0.1)_0%,rgba(246,206,255,0.1)_100%),linear-gradient(90deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.1)_100%)] text-[#9756E3]" : "bg-white/10 text-white/80"}`,
+				children: [isActive && useDetailStyleOnePopup && /* @__PURE__ */ jsx(DetailStyleOneActiveBorderLayer, {}), /* @__PURE__ */ jsx("span", {
+					className: "relative z-[1] font-['PingFang_SC'] text-[16px] font-medium not-italic leading-[16px]",
+					children: item.series_num
+				})]
+			}, `popup-${item.id}`);
+		})
+	});
+	if (variant === "sheet") return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange: (next) => !next && onClose(),
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: "bottom",
+			showCloseButton: true,
+			className: "min-h-[50vh] bg-bg1 text-text1 rounded-t-2xl border-t border-white/10",
+			children: [
+				/* @__PURE__ */ jsx(SheetHeader, {
+					className: "pt-3 pb-0",
+					children: /* @__PURE__ */ jsx(SheetTitle, {
+						className: "flex items-center justify-between text-lg text-text1",
+						children: resolvedTitle
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "px-4 pb-2 flex flex-col gap-3",
+					children: [groupTabs, summaryRow]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: listRef,
+					className: "flex-1 h-0 pt-[4px] pb-[12px] overflow-y-auto px-4",
+					children: grid
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(Popup, {
+		open,
+		onOpenChange: (next) => {
+			if (!next) onClose();
+		},
+		showCloseButton: false,
+		className: "!gap-0 !border-0 !bg-transparent !p-0 !shadow-none",
+		overlayClassName: "bg-black/50 backdrop-blur-0",
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "flex h-full w-full flex-col overflow-hidden rounded-t-[16px] bg-black text-text1",
+			style: {
+				height: "70vh",
+				...popupBodyStyle
+			},
+			children: [/* @__PURE__ */ jsxs(Box, {
+				className: "shrink-0 flex items-center justify-between px-[16px] pt-[32px]",
+				children: [/* @__PURE__ */ jsx(Text, {
+					className: "font-['PingFang_SC'] text-[18px] font-medium not-italic leading-[24px] text-white",
+					children: resolvedTitle
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "关闭",
+					className: "flex h-[24px] w-[24px] items-center justify-center text-white opacity-60",
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx("span", {
+						className: "flex h-[24px] w-[24px] items-center overflow-hidden p-[2px]",
+						children: /* @__PURE__ */ jsx(DetailPopupCloseIcon, {})
+					})
+				})]
+			}), /* @__PURE__ */ jsx(Box, {
+				className: "flex-1 h-0 w-full px-[16px] pb-[24px]",
+				children: /* @__PURE__ */ jsxs(Box, {
+					className: "flex h-full flex-col",
+					children: [
+						popupGroupTabs && /* @__PURE__ */ jsx(Box, {
+							className: "mt-[16px] shrink-0",
+							children: popupGroupTabs
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							className: "mt-[16px] shrink-0",
+							children: popupSummaryRow
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							ref: listRef,
+							className: `flex-1 overflow-y-auto pb-[17px] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${useTitleLayout ? "mt-[12px]" : "mt-[8px]"}`,
+							children: popupGrid
+						})
+					]
+				})
+			})]
+		})
+	});
+}
+/**
+* DetailSeriesEpisodes
+*
+* 用于视频详情页：包含“选集入口 + 横向集数条 + 弹层”。
+*/
+function DetailSeriesEpisodes({ information, series_num, onEpisodeChange }) {
+	const t = useTranslations("components.common");
+	const [selectSeriesVisible, setSelectSeriesVisible] = useKeepAliveState(`detail-series-popup-${information.id}`, false);
+	const [showEpisodeTitle, setShowEpisodeTitle] = useKeepAliveState(`detail-series-title-toggle-${information.id}`, false);
+	const [savedEpisodeScrollLeft, setSavedEpisodeScrollLeft] = useKeepAliveState(`detail-series-scroll-left-${information.id}`, null);
+	const [optimisticSeriesNum, setOptimisticSeriesNum] = useState(series_num);
+	useEffect(() => {
+		setOptimisticSeriesNum(series_num);
+	}, [information.id, series_num]);
+	/**
+	* 对外暴露「关闭选集弹窗」事件，供 WebView 导航守卫主动收口。
+	*/
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const handleCloseSeriesPopup = () => {
+			setSelectSeriesVisible(false);
+		};
+		window.addEventListener(DETAIL_SERIES_POPUP_CLOSE_EVENT, handleCloseSeriesPopup);
+		return () => {
+			window.removeEventListener(DETAIL_SERIES_POPUP_CLOSE_EVENT, handleCloseSeriesPopup);
+		};
+	}, [setSelectSeriesVisible]);
+	/**
+	* 对外暴露「选集弹窗是否打开」查询事件，支持多实例合并状态。
+	*/
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const handleQuerySeriesPopupState = (event) => {
+			if (!isDetailSeriesPopupQueryEvent(event)) return;
+			const detail = event.detail || {};
+			detail.open = Boolean(detail.open) || Boolean(selectSeriesVisible);
+		};
+		window.addEventListener(DETAIL_SERIES_POPUP_QUERY_EVENT, handleQuerySeriesPopupState);
+		return () => {
+			window.removeEventListener(DETAIL_SERIES_POPUP_QUERY_EVENT, handleQuerySeriesPopupState);
+		};
+	}, [selectSeriesVisible]);
+	useEffect(() => {
+		if (selectSeriesVisible) trackPageClick("page_video_detail", "详情页", null, "detail_select_episode_popup");
+	}, [selectSeriesVisible]);
+	const seriesItems = useMemo(() => {
+		return normalizeEpisodesForDetail((information.links || []).map((link) => ({
+			id: link.id,
+			name: link.name
+		})), information.id || "episode", (episode) => t("seriesEpisodes.episodeLabel", { episode }));
+	}, [
+		information.id,
+		information.links,
+		t
+	]);
+	const seriesTotalText = information.update_status === "1" ? t("seriesEpisodes.completedSeriesTotal", { total: information.links.length }) : t("seriesEpisodes.ongoingSeriesUpdatedTo", { total: information.links.length });
+	const currentPlayingSeriesId = useMemo(() => {
+		return information.links[optimisticSeriesNum - 1]?.id || information.links[0]?.id || "";
+	}, [information.links, optimisticSeriesNum]);
+	const scrollRef = useRef(null);
+	const switchingTargetSeriesNumRef = useRef(null);
+	const switchingSourceRef = useRef(null);
+	const hasInitialAlignedRef = useRef(false);
+	const switchLoadingToastIdRef = useRef(null);
+	const switchTimeoutRef = useRef(null);
+	const switchSuccessDelayTimeoutRef = useRef(null);
+	const [isEpisodeSwitching, setIsEpisodeSwitching] = useState(false);
+	const scrollToCurrentEpisode = useCallback((targetId, behavior = "smooth") => {
+		const target = scrollRef.current?.querySelector(`[data-content-id="${targetId}"]`);
+		if (target && scrollRef.current) {
+			const parent = scrollRef.current;
+			const targetLeft = Math.max(0, target.offsetLeft - 10);
+			parent.scrollTo({
+				left: targetLeft,
+				behavior
+			});
+		}
+	}, []);
+	const clearSwitchTimeout = useCallback(() => {
+		if (switchTimeoutRef.current === null) return;
+		window.clearTimeout(switchTimeoutRef.current);
+		switchTimeoutRef.current = null;
+	}, []);
+	const clearSwitchSuccessDelayTimeout = useCallback(() => {
+		if (switchSuccessDelayTimeoutRef.current === null) return;
+		window.clearTimeout(switchSuccessDelayTimeoutRef.current);
+		switchSuccessDelayTimeoutRef.current = null;
+	}, []);
+	const hideSwitchLoading = useCallback(() => {
+		if (switchLoadingToastIdRef.current !== null) {
+			toast.dismiss(switchLoadingToastIdRef.current);
+			switchLoadingToastIdRef.current = null;
+		}
+		clearSwitchTimeout();
+		clearSwitchSuccessDelayTimeout();
+	}, [clearSwitchSuccessDelayTimeout, clearSwitchTimeout]);
+	const clearSwitchingState = useCallback(() => {
+		switchingTargetSeriesNumRef.current = null;
+		switchingSourceRef.current = null;
+		hideSwitchLoading();
+		setIsEpisodeSwitching(false);
+	}, [hideSwitchLoading]);
+	const scheduleClearSwitchingState = useCallback((expectedSeriesNum, delay) => {
+		clearSwitchSuccessDelayTimeout();
+		switchSuccessDelayTimeoutRef.current = window.setTimeout(() => {
+			switchSuccessDelayTimeoutRef.current = null;
+			if (switchingTargetSeriesNumRef.current !== expectedSeriesNum) return;
+			clearSwitchingState();
+		}, Math.max(0, delay));
+	}, [clearSwitchSuccessDelayTimeout, clearSwitchingState]);
+	useEffect(() => {
+		hasInitialAlignedRef.current = false;
+	}, [information.id]);
+	useEffect(() => {
+		if (hasInitialAlignedRef.current || !currentPlayingSeriesId) return;
+		const frame = window.requestAnimationFrame(() => {
+			const container = scrollRef.current;
+			if (!container) return;
+			if (typeof savedEpisodeScrollLeft === "number") container.scrollTo({
+				left: Math.max(0, savedEpisodeScrollLeft),
+				behavior: "auto"
+			});
+			else {
+				scrollToCurrentEpisode(currentPlayingSeriesId, "auto");
+				setSavedEpisodeScrollLeft(Math.max(0, Math.round(container.scrollLeft)));
+			}
+			hasInitialAlignedRef.current = true;
+		});
+		return () => {
+			window.cancelAnimationFrame(frame);
+		};
+	}, [
+		currentPlayingSeriesId,
+		savedEpisodeScrollLeft,
+		scrollToCurrentEpisode,
+		setSavedEpisodeScrollLeft
+	]);
+	useEffect(() => {
+		const pendingSeriesNum = switchingTargetSeriesNumRef.current;
+		if (!pendingSeriesNum || pendingSeriesNum !== series_num) return;
+		scheduleClearSwitchingState(pendingSeriesNum, EPISODE_SWITCH_SUCCESS_TOAST_DELAY_MS);
+	}, [scheduleClearSwitchingState, series_num]);
+	useEffect(() => {
+		return () => {
+			clearSwitchingState();
+		};
+	}, [clearSwitchingState]);
+	/**
+	* 点击横向剧集时，若点击点落在容器中线到右侧，则把目标项尽量移动到容器中线位置。
+	*/
+	const maybeCenterInlineEpisodeFromMidRightClick = useCallback((targetId, fallbackScrollLeft, clickClientX) => {
+		const container = scrollRef.current;
+		if (!container || !targetId) return fallbackScrollLeft;
+		const targetElement = container.querySelector(`[data-content-id="${targetId}"]`);
+		if (!targetElement) return fallbackScrollLeft;
+		const containerRect = container.getBoundingClientRect();
+		if (containerRect.width <= 0) return fallbackScrollLeft;
+		if (typeof clickClientX !== "number") return fallbackScrollLeft;
+		if ((clickClientX - containerRect.left) / containerRect.width < INLINE_EPISODE_MID_RIGHT_TRIGGER_RATIO) return fallbackScrollLeft;
+		const targetCenterOffset = targetElement.offsetLeft + targetElement.offsetWidth / 2;
+		const desiredCenterOffset = container.clientWidth / 2;
+		const maxScrollLeft = Math.max(0, container.scrollWidth - container.clientWidth);
+		const nextScrollLeft = Math.min(maxScrollLeft, Math.max(0, targetCenterOffset - desiredCenterOffset));
+		container.scrollTo({
+			left: nextScrollLeft,
+			behavior: "smooth"
+		});
+		return Math.round(nextScrollLeft);
+	}, []);
+	const handleSwitchEpisode = useCallback((episode, source = "inline", targetEpisodeId, clickClientX) => {
+		if (episode === optimisticSeriesNum) return;
+		if (!information.links[episode - 1]) {
+			toast.error(t("seriesEpisodes.episodeNotFound"));
+			return;
+		}
+		if (typeof window !== "undefined" && window.isWebView === true) {
+			try {
+				setOptimisticSeriesNum(episode);
+				const targetId = targetEpisodeId || information.links[episode - 1]?.id || "";
+				const currentScrollLeft = Math.max(0, Math.round(scrollRef.current?.scrollLeft || 0));
+				if (source === "popup") {
+					if (targetId) scrollToCurrentEpisode(targetId, "auto");
+					setSavedEpisodeScrollLeft(Math.max(0, Math.round(scrollRef.current?.scrollLeft || 0)));
+				} else setSavedEpisodeScrollLeft(maybeCenterInlineEpisodeFromMidRightClick(targetId, currentScrollLeft, clickClientX));
+				setIsEpisodeSwitching(true);
+				hideSwitchLoading();
+				switchLoadingToastIdRef.current = toast.loading(t("seriesEpisodes.episodeSwitching"));
+				switchingTargetSeriesNumRef.current = episode;
+				switchingSourceRef.current = source;
+				switchTimeoutRef.current = window.setTimeout(() => {
+					if (switchingTargetSeriesNumRef.current !== episode) return;
+					setOptimisticSeriesNum(series_num);
+					clearSwitchingState();
+					toast.error(t("seriesEpisodes.episodeSwitchFailed"));
+				}, 3e3);
+				onEpisodeChange(episode);
+			} catch (error) {
+				setOptimisticSeriesNum(series_num);
+				clearSwitchingState();
+				console.error("切换剧集失败", error);
+				toast.error(t("seriesEpisodes.episodeSwitchFailed"));
+			}
+			return;
+		}
+		try {
+			setOptimisticSeriesNum(episode);
+			const targetId = targetEpisodeId || information.links[episode - 1]?.id || "";
+			const currentScrollLeft = Math.max(0, Math.round(scrollRef.current?.scrollLeft || 0));
+			if (source === "popup") {
+				if (targetId) scrollToCurrentEpisode(targetId, "auto");
+				setSavedEpisodeScrollLeft(Math.max(0, Math.round(scrollRef.current?.scrollLeft || 0)));
+			} else setSavedEpisodeScrollLeft(maybeCenterInlineEpisodeFromMidRightClick(targetId, currentScrollLeft, clickClientX));
+			setIsEpisodeSwitching(true);
+			hideSwitchLoading();
+			switchLoadingToastIdRef.current = toast.loading(t("seriesEpisodes.episodeSwitching"));
+			switchingTargetSeriesNumRef.current = episode;
+			switchingSourceRef.current = source;
+			switchTimeoutRef.current = window.setTimeout(() => {
+				if (switchingTargetSeriesNumRef.current !== episode) return;
+				setOptimisticSeriesNum(series_num);
+				clearSwitchingState();
+				toast.error(t("seriesEpisodes.episodeSwitchFailed"));
+			}, 8e3);
+			onEpisodeChange(episode);
+		} catch (error) {
+			setOptimisticSeriesNum(series_num);
+			clearSwitchingState();
+			console.error("切换剧集失败", error);
+			toast.error(t("seriesEpisodes.episodeSwitchFailed"));
+		}
+	}, [
+		clearSwitchingState,
+		hideSwitchLoading,
+		information.links,
+		onEpisodeChange,
+		optimisticSeriesNum,
+		series_num,
+		maybeCenterInlineEpisodeFromMidRightClick,
+		scrollToCurrentEpisode,
+		setSavedEpisodeScrollLeft,
+		t
+	]);
+	const [popupHeight, setPopupHeight] = useState("70vh");
+	const calculatePopupHeight = useCallback(() => {
+		if (typeof window === "undefined") return;
+		if (window.isWebView === true) {
+			setPopupHeight("100vh");
+			return;
+		}
+		const anchor = document.getElementById("selectPopupPosition");
+		const viewportHeight = window.visualViewport?.height || window.innerHeight;
+		if (!anchor) {
+			setPopupHeight("70vh");
+			return;
+		}
+		const height = Math.max(0, viewportHeight - anchor.offsetTop);
+		if (height <= 0) {
+			setPopupHeight("70vh");
+			return;
+		}
+		setPopupHeight(`${height}px`);
+	}, []);
+	useEffect(() => {
+		if (!selectSeriesVisible) return;
+		calculatePopupHeight();
+		const handleResize = () => {
+			calculatePopupHeight();
+		};
+		window.addEventListener("resize", handleResize);
+		window.addEventListener("scroll", handleResize, true);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+			window.removeEventListener("scroll", handleResize, true);
+		};
+	}, [calculatePopupHeight, selectSeriesVisible]);
+	if (seriesItems.length <= 1) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Box, {
+		className: "w-full mt-[16px] flex flex-col items-end mb-[4px]",
+		children: [/* @__PURE__ */ jsxs(Box, {
+			className: "w-fit flex items-center px-[12px] h-[28px]",
+			onClick: () => {
+				trackPageClick("page_video_detail", "详情页", null, "detail_select_episode_btn");
+				setSelectSeriesVisible(true);
+			},
+			children: [/* @__PURE__ */ jsx(Text, {
+				className: "text-[14px] text-text2 leading-[20px]",
+				children: seriesTotalText
+			}), /* @__PURE__ */ jsx(SvgRightArrow, { className: "w-[11px] h-[18px] ml-[4px] text-text2" })]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: scrollRef,
+			className: `w-full mt-[12px] overflow-x-auto px-[12px] flex gap-x-[8px] h-[56px] ${isEpisodeSwitching ? "touch-none" : ""}`,
+			children: seriesItems.map((item, index) => /* @__PURE__ */ jsxs("div", {
+				"data-content-id": item.id,
+				className: `relative shrink-0 h-[full] overflow-hidden px-[18px] rounded-[8px] flex items-center justify-center ${showEpisodeTitle ? "min-w-[88px] h-[40px]" : "w-[56px] !px-[0] justify-center"} ${item.id === currentPlayingSeriesId ? "bg-transparent" : "bg-white/10"}`,
+				onClick: (event) => {
+					trackPageClick("page_video_detail", "详情页", event, "detail_episode_click", {
+						episode_num: index + 1,
+						episode_id: item.id
+					});
+					handleSwitchEpisode(index + 1, "inline", item.id, event.clientX);
+				},
+				children: [item.id === currentPlayingSeriesId && /* @__PURE__ */ jsx(DetailStyleOneActiveBorderLayer, {}), /* @__PURE__ */ jsx(Text, {
+					className: `relative z-[1] text-[14px] text-text1 leading-[22px] line-clamp-2 ${item.id === currentPlayingSeriesId ? "!text-[#CA3FE9]" : ""}`,
+					children: showEpisodeTitle ? item.title : item.series_num
+				})]
+			}, item.id))
+		})]
+	}), /* @__PURE__ */ jsx(SelectorSeriesEpisodes, {
+		title: t("seriesEpisodes.selectorTitle"),
+		videoTitle: information.name,
+		variant: "popup",
+		open: selectSeriesVisible,
+		updateStatus: information.update_status,
+		summaryText: seriesTotalText,
+		seriesList: (information.links || []).map((link) => ({
+			id: link.id,
+			name: link.name
+		})),
+		activeEpisodeId: currentPlayingSeriesId,
+		showEpisodeTitle,
+		onToggleTitle: (value) => {
+			setShowEpisodeTitle(value);
+		},
+		onClose: () => setSelectSeriesVisible(false),
+		onSelectEpisode: (episodeId, episodeNum) => {
+			setSelectSeriesVisible(false);
+			handleSwitchEpisode(episodeNum, "popup", episodeId);
+		},
+		popupBodyStyle: { height: popupHeight },
+		popupStylePreset: "default"
+	})] });
+}
+
+//#endregion
+export { DetailStyleOneActiveBorderLayer, SeriesEpisodes };