@funhub/platform 0.2.29 → 0.2.31

package/dist/components/common/video-player/video-blind-ad-overlay.mjs

@@ -1,2 +1,156 @@
 
-"use client";import{useUserStore as e}from"../../../store/modules/user-store.mjs";import{pContentMatchAds as t}from"../../../service/generated/client.mjs";import{pContentMatchAdsKey as n}from"../../../service/generated/tanstack.mjs";import{trackAdClick as r,trackAdImpression as i}from"../../../utils/tracking.mjs";import{useRequest as a}from"../../../hooks/query/use-query.mjs";import{useVideoPlayerRef as o}from"./video-player-ref-context.mjs";import{create as s}from"zustand";import{createJSONStorage as c,persist as l}from"zustand/middleware";import{useEffect as u,useRef as d,useState as f}from"react";import{useIsClient as p}from"foxact/use-is-client";import{jsx as m}from"react/jsx-runtime";import{createPortal as h}from"react-dom";const g=s()(l((e,t)=>({shownVideoIds:new Set,hasShown:e=>t().shownVideoIds.has(e),markAsShown:n=>{let r=t().shownVideoIds;if(!r.has(n)){let t=new Set(r);t.add(n),e({shownVideoIds:t})}}}),{name:`video-blind-ad-storage`,storage:typeof window<`u`?c(()=>sessionStorage):void 0,partialize:e=>({shownVideoIds:Array.from(e.shownVideoIds)}),merge:(e,t)=>({...t,shownVideoIds:new Set(e.shownVideoIds||[])})})),_=`video_blind`;function v(e,t){return`${e}:${Math.max(1,Math.floor(Number(t)||1))}`}function y({videoId:s,episode:c}){let l=o(),y=p(),b=e(e=>e.userId),{hasShown:x,markAsShown:S}=g(),[C,w]=f(!1),T=d(!1),E={user_id:b,ad_type:`blind`},{data:D,isLoading:O}=a(n(E),()=>t(E)),k=v(s,c),A=x(k),j=D?.data?.materials?.[0]?.advertise_code||``,M=!A&&C;u(()=>{!M||!j||i({page_key:`detail`,page_name:`详情页`,ad_slot_key:_,ad_slot_name:`盲点广告`,ad_id:j,ad_type:`blind`})},[M,j]),u(()=>{if(!D||A)return;let e=(D.data?.settings?.trigger_video_progress_min??0)*60,t=null,n=null;function r(n){if(T.current){t?.off(`timeupdate`,r);return}Number(n?.currentTime||t?.currentTime||0)>=e&&(T.current=!0,w(!0))}function i(){let n=l?.current?.getPlayer?.();return n?(t=n,Number(n.currentTime||0)>=e?(T.current=!0,w(!0),!0):(n.on(`timeupdate`,r),!0)):!1}return i()||(n=window.setInterval(()=>{i()&&n!==null&&(window.clearInterval(n),n=null)},200)),()=>{n!==null&&window.clearInterval(n),t?.off(`timeupdate`,r)}},[l,D,A]),u(()=>{if(M)return document.body.style.overflow=`hidden`,()=>{document.body.style.overflow=``}},[M]);function N(){A||(j&&r({page_key:`detail`,page_name:`详情页`,ad_slot_key:_,ad_slot_name:`盲点广告`,ad_id:j,ad_type:`blind`}),S(k),window.open(D?.data.materials?.[0].advertise_url))}return!y||typeof document>`u`||O||D?.data?.hit===!1||A||!C?null:h(m(`div`,{className:`blind-ad-overlay fixed inset-0 h-screen w-screen z-[99999]`,onClick:N}),document.body)}export{y as VideoBlindAdOverlay};
+'use client';
+
+import { useUserStore } from "../../../store/modules/user-store.mjs";
+import { pContentMatchAds } from "../../../service/generated/client.mjs";
+import { pContentMatchAdsKey } from "../../../service/generated/tanstack.mjs";
+import { trackAdClick, trackAdImpression } from "../../../utils/tracking.mjs";
+import { useRequest } from "../../../hooks/query/use-query.mjs";
+import { useVideoPlayerRef } from "./video-player-ref-context.mjs";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { useEffect, useRef, useState } from "react";
+import { useIsClient } from "foxact/use-is-client";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+
+//#region components/common/video-player/video-blind-ad-overlay.tsx
+const useVideoBlindAdStore = create()(persist((set, get) => ({
+	shownVideoIds: /* @__PURE__ */ new Set(),
+	hasShown: (videoId) => {
+		return get().shownVideoIds.has(videoId);
+	},
+	markAsShown: (videoId) => {
+		const currentSet = get().shownVideoIds;
+		if (!currentSet.has(videoId)) {
+			const newSet = new Set(currentSet);
+			newSet.add(videoId);
+			set({ shownVideoIds: newSet });
+		}
+	}
+}), {
+	name: "video-blind-ad-storage",
+	storage: typeof window !== "undefined" ? createJSONStorage(() => sessionStorage) : void 0,
+	partialize: (state) => ({ shownVideoIds: Array.from(state.shownVideoIds) }),
+	merge: (persistedState, currentState) => {
+		return {
+			...currentState,
+			shownVideoIds: new Set(persistedState.shownVideoIds || [])
+		};
+	}
+}));
+const AD_SLOT_KEY = "video_blind";
+function buildVideoSessionKey(videoId, episode) {
+	return `${videoId}:${Math.max(1, Math.floor(Number(episode) || 1))}`;
+}
+/**
+* 视频盲点广告覆盖层组件
+* 每个视频在会话中只会显示一次盲点广告。
+* 当前播放进度达到 trigger_video_progress_min 分钟后立即展示。
+*/
+function VideoBlindAdOverlay({ videoId, episode }) {
+	const playerRef = useVideoPlayerRef();
+	const isClient = useIsClient();
+	const userId = useUserStore((s) => s.userId);
+	const { hasShown, markAsShown } = useVideoBlindAdStore();
+	/** 是否已达到触发阈值 */
+	const [triggered, setTriggered] = useState(false);
+	const triggeredRef = useRef(false);
+	const reqBody = {
+		user_id: userId,
+		ad_type: "blind"
+	};
+	const { data, isLoading } = useRequest(pContentMatchAdsKey(reqBody), () => {
+		return pContentMatchAds(reqBody);
+	});
+	const videoSessionKey = buildVideoSessionKey(videoId, episode);
+	const hasAdShown = hasShown(videoSessionKey);
+	const adId = data?.data?.materials?.[0]?.advertise_code || "";
+	/** 盲点广告曝光上报（overlay 首次可见时触发）。 */
+	const isOverlayVisible = !hasAdShown && triggered;
+	useEffect(() => {
+		if (!isOverlayVisible || !adId) return;
+		trackAdImpression({
+			page_key: "detail",
+			page_name: "详情页",
+			ad_slot_key: AD_SLOT_KEY,
+			ad_slot_name: "盲点广告",
+			ad_id: adId,
+			ad_type: "blind"
+		});
+	}, [isOverlayVisible, adId]);
+	/** 监听 xgplayer TIME_UPDATE，当前播放进度达到阈值后立即触发。 */
+	useEffect(() => {
+		if (!data || hasAdShown) return;
+		const triggerTimeSeconds = (data.data?.settings?.trigger_video_progress_min ?? 0) * 60;
+		let playerInstance = null;
+		let pollTimer = null;
+		function onTimeUpdate(e) {
+			if (triggeredRef.current) {
+				playerInstance?.off("timeupdate", onTimeUpdate);
+				return;
+			}
+			if (Number(e?.currentTime || playerInstance?.currentTime || 0) >= triggerTimeSeconds) {
+				triggeredRef.current = true;
+				setTriggered(true);
+			}
+		}
+		function bindPlayerListener() {
+			const player = playerRef?.current?.getPlayer?.();
+			if (!player) return false;
+			playerInstance = player;
+			if (Number(player.currentTime || 0) >= triggerTimeSeconds) {
+				triggeredRef.current = true;
+				setTriggered(true);
+				return true;
+			}
+			player.on("timeupdate", onTimeUpdate);
+			return true;
+		}
+		if (!bindPlayerListener()) pollTimer = window.setInterval(() => {
+			if (bindPlayerListener() && pollTimer !== null) {
+				window.clearInterval(pollTimer);
+				pollTimer = null;
+			}
+		}, 200);
+		return () => {
+			if (pollTimer !== null) window.clearInterval(pollTimer);
+			playerInstance?.off("timeupdate", onTimeUpdate);
+		};
+	}, [
+		playerRef,
+		data,
+		hasAdShown
+	]);
+	/** 遮罩可见时锁定页面滚动 */
+	useEffect(() => {
+		if (!isOverlayVisible) return;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [isOverlayVisible]);
+	/** 处理广告点击。 */
+	function handleADClick() {
+		if (hasAdShown) return;
+		if (adId) trackAdClick({
+			page_key: "detail",
+			page_name: "详情页",
+			ad_slot_key: AD_SLOT_KEY,
+			ad_slot_name: "盲点广告",
+			ad_id: adId,
+			ad_type: "blind"
+		});
+		markAsShown(videoSessionKey);
+		window.open(data?.data.materials?.[0].advertise_url);
+	}
+	if (!isClient || typeof document === "undefined" || isLoading || data?.data?.hit === false) return null;
+	if (hasAdShown || !triggered) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "blind-ad-overlay fixed inset-0 h-screen w-screen z-[99999]",
+		onClick: handleADClick
+	}), document.body);
+}
+
+//#endregion
+export { VideoBlindAdOverlay };

package/dist/components/common/video-player/video-player-ref-context.mjs

@@ -1,2 +1,19 @@
 
-"use client";import{createContext as e,use as t}from"react";const n=e(null);function r(){return t(n)}export{n as VideoPlayerRefContext,r as useVideoPlayerRef};
+'use client';
+
+import { createContext, use } from "react";
+
+//#region components/common/video-player/video-player-ref-context.tsx
+/**
+* 视频播放器 Ref Context
+*/
+const VideoPlayerRefContext = createContext(null);
+/**
+* 使用视频播放器 Ref Hook
+*/
+function useVideoPlayerRef() {
+	return use(VideoPlayerRefContext);
+}
+
+//#endregion
+export { VideoPlayerRefContext, useVideoPlayerRef };

package/dist/components/common/video-player/video-preroll-ad-overlay.mjs

@@ -1,2 +1,168 @@
 
-"use client";import{useUserStore as e}from"../../../store/modules/user-store.mjs";import{pContentMatchAds as t}from"../../../service/generated/client.mjs";import{pContentMatchAdsKey as n}from"../../../service/generated/tanstack.mjs";import{trackAdClick as r,trackAdImpression as i,trackAdvertising as a}from"../../../utils/tracking.mjs";import{useRequest as o}from"../../../hooks/query/use-query.mjs";import{useVideoPlayerRef as s}from"./video-player-ref-context.mjs";import{PrerollSkipButtonContent as c}from"./preroll-skip-button-content.mjs";import{useCallback as l,useEffect as u,useRef as d,useState as f}from"react";import{useIsClient as p}from"foxact/use-is-client";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{createPortal as g}from"react-dom";const _=`video_preroll`;function v(e,t){return`${e}:${Math.max(1,Math.floor(Number(t)||1))}`}const y=new Set;function b({videoId:b,episode:x}){let S=s(),C=p(),w=e(e=>e.userId),[T,E]=f(!1),[D,O]=f(0),k=d(null),A=d(!1),j={user_id:w,ad_type:`preroll`},{data:M,isLoading:N}=o(n(j),()=>t(j)),P=M?.data?.materials?.[0],F=M?.data?.settings?.skip_seconds??5,I=P?.advertise_code||``,L=v(b,x),R=y.has(L);u(()=>{if(M?.data?.hit!==!0||!P||A.current||R)return;function e(){if(!A.current){A.current=!0,E(!0),O(F);try{S?.current?.getPlayer()?.pause?.()}catch{}}}let t=S?.current?.getPlayer();if(t)if(S?.current?.isPlayerReady())e();else return t.once?.(`ready`,e),()=>{t.off?.(`ready`,e)}},[M,R,P,S,F]),u(()=>{if(!(!T||F<=0))return k.current=setInterval(()=>{O(e=>e<=1?(k.current&&=(clearInterval(k.current),null),0):e-1)},1e3),()=>{k.current&&=(clearInterval(k.current),null)}},[T,F]),u(()=>{!T||!I||i({page_key:`detail`,page_name:`详情页`,ad_slot_key:_,ad_slot_name:`视频贴片广告`,ad_id:I,ad_type:`preroll`})},[T,I]);let z=l(()=>{k.current&&=(clearInterval(k.current),null),E(!1),y.add(L);try{S?.current?.getPlayer()?.play?.().catch?.(()=>{})}catch{}I&&a({event_type:`close`,advertising_key:_,advertising_name:`视频贴片广告`,advertising_id:I})},[I,S,L]);function B(){I&&r({page_key:`detail`,page_name:`详情页`,ad_slot_key:_,ad_slot_name:`视频贴片广告`,ad_id:I,ad_type:`preroll`}),P?.advertise_url&&window.open(P.advertise_url)}return!C||typeof document>`u`||N||!T?null:g(h(`div`,{className:`fixed inset-0 z-[99998] bg-black`,children:[P?.advertise_icon&&m(`img`,{src:P.advertise_icon,alt:P.advertise_name||`视频贴片广告`,className:`h-full w-full cursor-pointer object-cover`,onClick:B}),m(`div`,{className:`absolute right-4 top-4 z-10`,children:D<=0?m(`button`,{type:`button`,className:`cursor-pointer rounded-lg bg-black/60 px-3 py-1 text-sm text-white`,onClick:z,children:m(c,{label:`跳过广告`})}):h(`div`,{className:`rounded-lg bg-black/60 px-3 py-1 text-sm text-white`,children:[D,`秒后可跳过`]})})]}),document.body)}export{b as VideoPrerollAdOverlay};
+'use client';
+
+import { useUserStore } from "../../../store/modules/user-store.mjs";
+import { pContentMatchAds } from "../../../service/generated/client.mjs";
+import { pContentMatchAdsKey } from "../../../service/generated/tanstack.mjs";
+import { trackAdClick, trackAdImpression, trackAdvertising } from "../../../utils/tracking.mjs";
+import { useRequest } from "../../../hooks/query/use-query.mjs";
+import { useVideoPlayerRef } from "./video-player-ref-context.mjs";
+import { PrerollSkipButtonContent } from "./preroll-skip-button-content.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useIsClient } from "foxact/use-is-client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+
+//#region components/common/video-player/video-preroll-ad-overlay.tsx
+const AD_SLOT_KEY = "video_preroll";
+function buildVideoSessionKey(videoId, episode) {
+	return `${videoId}:${Math.max(1, Math.floor(Number(episode) || 1))}`;
+}
+/** 会话级去重：记录本次会话已展示过贴片广告的视频 ID。 */
+const shownPrerollVideoIds = /* @__PURE__ */ new Set();
+/**
+* 视频贴片广告覆盖层组件。
+* 视频就绪后即展示，展示期间暂停视频，用户跳过后恢复播放。
+* 同一视频每次会话只展示一次。
+*/
+function VideoPrerollAdOverlay({ videoId, episode }) {
+	const playerRef = useVideoPlayerRef();
+	const isClient = useIsClient();
+	const userId = useUserStore((s) => s.userId);
+	const [isVisible, setIsVisible] = useState(false);
+	const [skipCountdown, setSkipCountdown] = useState(0);
+	const countdownTimerRef = useRef(null);
+	const hasTriggeredRef = useRef(false);
+	const reqBody = {
+		user_id: userId,
+		ad_type: "preroll"
+	};
+	const { data, isLoading } = useRequest(pContentMatchAdsKey(reqBody), () => {
+		return pContentMatchAds(reqBody);
+	});
+	const material = data?.data?.materials?.[0];
+	const skipSeconds = data?.data?.settings?.skip_seconds ?? 5;
+	const adId = material?.advertise_code || "";
+	const videoSessionKey = buildVideoSessionKey(videoId, episode);
+	const hasShown = shownPrerollVideoIds.has(videoSessionKey);
+	/** 数据就绪后触发贴片广告展示，并暂停播放器。 */
+	useEffect(() => {
+		if (data?.data?.hit !== true || !material || hasTriggeredRef.current || hasShown) return;
+		function showAd() {
+			if (hasTriggeredRef.current) return;
+			hasTriggeredRef.current = true;
+			setIsVisible(true);
+			setSkipCountdown(skipSeconds);
+			try {
+				playerRef?.current?.getPlayer()?.pause?.();
+			} catch {}
+		}
+		const player = playerRef?.current?.getPlayer();
+		if (!player) return;
+		if (playerRef?.current?.isPlayerReady()) showAd();
+		else {
+			player.once?.("ready", showAd);
+			return () => {
+				player.off?.("ready", showAd);
+			};
+		}
+	}, [
+		data,
+		hasShown,
+		material,
+		playerRef,
+		skipSeconds
+	]);
+	/** 贴片广告可见时启动跳过倒计时。 */
+	useEffect(() => {
+		if (!isVisible || skipSeconds <= 0) return;
+		countdownTimerRef.current = setInterval(() => {
+			setSkipCountdown((prev) => {
+				if (prev <= 1) {
+					if (countdownTimerRef.current) {
+						clearInterval(countdownTimerRef.current);
+						countdownTimerRef.current = null;
+					}
+					return 0;
+				}
+				return prev - 1;
+			});
+		}, 1e3);
+		return () => {
+			if (countdownTimerRef.current) {
+				clearInterval(countdownTimerRef.current);
+				countdownTimerRef.current = null;
+			}
+		};
+	}, [isVisible, skipSeconds]);
+	/** 贴片广告曝光上报。 */
+	useEffect(() => {
+		if (!isVisible || !adId) return;
+		trackAdImpression({
+			page_key: "detail",
+			page_name: "详情页",
+			ad_slot_key: AD_SLOT_KEY,
+			ad_slot_name: "视频贴片广告",
+			ad_id: adId,
+			ad_type: "preroll"
+		});
+	}, [isVisible, adId]);
+	/** 跳过贴片广告，恢复视频播放并上报。 */
+	const handleSkip = useCallback(() => {
+		if (countdownTimerRef.current) {
+			clearInterval(countdownTimerRef.current);
+			countdownTimerRef.current = null;
+		}
+		setIsVisible(false);
+		shownPrerollVideoIds.add(videoSessionKey);
+		try {
+			playerRef?.current?.getPlayer()?.play?.().catch?.(() => {});
+		} catch {}
+		if (adId) trackAdvertising({
+			event_type: "close",
+			advertising_key: AD_SLOT_KEY,
+			advertising_name: "视频贴片广告",
+			advertising_id: adId
+		});
+	}, [
+		adId,
+		playerRef,
+		videoSessionKey
+	]);
+	/** 点击贴片广告，上报并跳转落地页。 */
+	function handleAdClick() {
+		if (adId) trackAdClick({
+			page_key: "detail",
+			page_name: "详情页",
+			ad_slot_key: AD_SLOT_KEY,
+			ad_slot_name: "视频贴片广告",
+			ad_id: adId,
+			ad_type: "preroll"
+		});
+		if (material?.advertise_url) window.open(material.advertise_url);
+	}
+	if (!isClient || typeof document === "undefined" || isLoading || !isVisible) return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-[99998] bg-black",
+		children: [material?.advertise_icon && /* @__PURE__ */ jsx("img", {
+			src: material.advertise_icon,
+			alt: material.advertise_name || "视频贴片广告",
+			className: "h-full w-full cursor-pointer object-cover",
+			onClick: handleAdClick
+		}), /* @__PURE__ */ jsx("div", {
+			className: "absolute right-4 top-4 z-10",
+			children: skipCountdown <= 0 ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "cursor-pointer rounded-lg bg-black/60 px-3 py-1 text-sm text-white",
+				onClick: handleSkip,
+				children: /* @__PURE__ */ jsx(PrerollSkipButtonContent, { label: "跳过广告" })
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "rounded-lg bg-black/60 px-3 py-1 text-sm text-white",
+				children: [skipCountdown, "秒后可跳过"]
+			})
+		})]
+	}), document.body);
+}
+
+//#endregion
+export { VideoPrerollAdOverlay };

package/dist/components/common/video-player/video-preroll-ad.mjs

@@ -1,2 +1,188 @@
 
-"use client";import e from"../../../utils/get-res-url.mjs";import{useIsClient as t}from"../../../hooks/use-is-client.mjs";import n from"../../../assets/icons/detail/video_play.mjs";import{PrerollSkipButtonContent as r}from"./preroll-skip-button-content.mjs";import{useEffect as i,useImperativeHandle as a,useMemo as o,useRef as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d({ref:d,adData:f=null,visible:p=!1,autoStart:m=!1,sessionKey:h=`default`,onAutoplayBlocked:g,onFinish:_,onSkip:v,onOpenLink:y}){let b=s(null),[x,S]=c(0),[C,w]=c(!1),T=t(),E=s(!1),D=Number(f?.settings?.skip_seconds||0),O=o(()=>f?.materials?.[0],[f?.materials]),k=String(O?.advertise_video||``).trim(),A=o(()=>k?k.startsWith(`/m3f`)?`${e()}/${k}`:`${e()}/m3f${k}`:``,[k]),j=!!k,M=j?C:p,N=x<=0;i(()=>{w(!1),S(D),E.current=!1;let e=b.current;if(e)try{e.pause(),e.currentTime=0,e.load()}catch(e){console.warn(`重置前贴片播放状态失败:`,e)}},[A,h,D]),i(()=>{if(!p||!O)return;if(D<=0){S(0);return}if(!M)return;let e=window.setInterval(()=>{S(t=>t<=1?(window.clearInterval(e),0):t-1)},1e3);return()=>{window.clearInterval(e)}},[O,M,h,D,p]),i(()=>{!p||!m||!j||!b.current||E.current||(E.current=!0,b.current.play().catch(e=>{console.warn(`自动启动前贴片播放失败:`,e),g?.()}))},[m,j,g,h,p]),a(d,()=>({async play(){if(!b.current)return!1;try{return await b.current.play(),!0}catch(e){return console.warn(`手动启动前贴片播放失败:`,e),!1}}}),[]);function P(){N&&v?.()}function F(){if(j&&!C){let e=b.current;if(!e)return;e.play().catch(e=>{console.warn(`手动启动前贴片播放失败:`,e)});return}let e=O?.advertise_url;e&&(y?.(e),window.open(e,`_blank`,`noopener,noreferrer`))}if(!T||typeof window>`u`||!f?.hit||!O||!j)return null;let I=l(`video`,{ref:b,src:A,poster:O?.advertise_icon||``,className:`pointer-events-none w-full h-full object-cover bg-black`,autoPlay:m,muted:!0,playsInline:!0,preload:`none`,onEnded:()=>{_?.()},onPlaying:()=>{w(!0)},onError:e=>{console.warn(`[video-preroll-ad][error]`,{sessionKey:h,error:e.currentTarget?.error})}});return u(`div`,{className:`video-preroll-ad absolute top-0 left-0 w-full h-full z-[9999] ${p?``:`pointer-events-none opacity-0`}`,"aria-hidden":!p,children:[l(`button`,{type:`button`,disabled:!N,onClick:P,className:`absolute z-[10] text-sm top-6 right-6 bg-black/30 text-white rounded-full px-6 py-1.5 flex items-center justify-center disabled:opacity-60 disabled:cursor-not-allowed`,children:N?l(r,{label:`跳过`}):`跳过 ${x}s`}),u(`div`,{role:`button`,tabIndex:0,onClick:F,className:`relative block w-full h-full`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),F())},children:[I,j&&!C&&l(`div`,{className:`absolute inset-0 z-[2] flex items-center justify-center bg-black/20 pointer-events-none`,children:l(`div`,{className:`flex items-center justify-center w-12 h-12 rounded-full bg-[rgba(0,0,0,0.45)]`,children:l(n,{className:`w-[16px] h-[22px] text-white`})})})]})]})}export{d as VideoPrerollAd};
+'use client';
+
+import getResUrl from "../../../utils/get-res-url.mjs";
+import { useIsClient } from "../../../hooks/use-is-client.mjs";
+import SvgVideoPlay from "../../../assets/icons/detail/video_play.mjs";
+import { PrerollSkipButtonContent } from "./preroll-skip-button-content.mjs";
+import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/common/video-player/video-preroll-ad.tsx
+/**
+* 视频前贴片广告组件。
+* 由外层负责请求广告数据与编排展示时机。
+*/
+function VideoPrerollAd({ ref, adData = null, visible = false, autoStart = false, sessionKey = "default", onAutoplayBlocked, onFinish, onSkip, onOpenLink }) {
+	const adPlayerRef = useRef(null);
+	const [remainingSeconds, setRemainingSeconds] = useState(0);
+	const [adStarted, setAdStarted] = useState(false);
+	const isClient = useIsClient();
+	const autoplayAttemptedRef = useRef(false);
+	const skipSeconds = Number(adData?.settings?.skip_seconds || 0);
+	const adMaterial = useMemo(() => {
+		return adData?.materials?.[0];
+	}, [adData?.materials]);
+	const adVideoUrl = String(adMaterial?.advertise_video || "").trim();
+	const adVideoSrc = useMemo(() => {
+		if (!adVideoUrl) return "";
+		if (adVideoUrl.startsWith("/m3f")) return `${getResUrl()}/${adVideoUrl}`;
+		return `${getResUrl()}/m3f${adVideoUrl}`;
+	}, [adVideoUrl]);
+	const hasAdVideo = Boolean(adVideoUrl);
+	const hasCountdownStarted = hasAdVideo ? adStarted : visible;
+	const canSkip = remainingSeconds <= 0;
+	/**
+	* 会话切换或素材变更后，重置贴片倒计时与底层 video 播放状态。
+	*/
+	useEffect(() => {
+		setAdStarted(false);
+		setRemainingSeconds(skipSeconds);
+		autoplayAttemptedRef.current = false;
+		const player = adPlayerRef.current;
+		if (!player) return;
+		try {
+			player.pause();
+			player.currentTime = 0;
+			player.load();
+		} catch (error) {
+			console.warn("重置前贴片播放状态失败:", error);
+		}
+	}, [
+		adVideoSrc,
+		sessionKey,
+		skipSeconds
+	]);
+	useEffect(() => {
+		if (!visible || !adMaterial) return;
+		if (skipSeconds <= 0) {
+			setRemainingSeconds(0);
+			return;
+		}
+		if (!hasCountdownStarted) return;
+		const timer = window.setInterval(() => {
+			setRemainingSeconds((currentSeconds) => {
+				if (currentSeconds <= 1) {
+					window.clearInterval(timer);
+					return 0;
+				}
+				return currentSeconds - 1;
+			});
+		}, 1e3);
+		return () => {
+			window.clearInterval(timer);
+		};
+	}, [
+		adMaterial,
+		hasCountdownStarted,
+		sessionKey,
+		skipSeconds,
+		visible
+	]);
+	/**
+	* 自动播放模式下尝试直接启动贴片；若失败则交给外层切回用户手势流程。
+	*/
+	useEffect(() => {
+		if (!visible || !autoStart || !hasAdVideo || !adPlayerRef.current || autoplayAttemptedRef.current) return;
+		autoplayAttemptedRef.current = true;
+		adPlayerRef.current.play().catch((error) => {
+			console.warn("自动启动前贴片播放失败:", error);
+			onAutoplayBlocked?.();
+		});
+	}, [
+		autoStart,
+		hasAdVideo,
+		onAutoplayBlocked,
+		sessionKey,
+		visible
+	]);
+	useImperativeHandle(ref, () => ({ async play() {
+		if (!adPlayerRef.current) return false;
+		try {
+			await adPlayerRef.current.play();
+			return true;
+		} catch (error) {
+			console.warn("手动启动前贴片播放失败:", error);
+			return false;
+		}
+	} }), []);
+	/**
+	* 处理跳过广告。
+	*/
+	function handleSkip() {
+		if (!canSkip) return;
+		onSkip?.();
+	}
+	/**
+	* 广告未开始时，首次点击用于触发广告播放；开始后再允许点击跳转。
+	*/
+	function handleAdClick() {
+		if (hasAdVideo && !adStarted) {
+			const player = adPlayerRef.current;
+			if (!player) return;
+			player.play().catch((error) => {
+				console.warn("手动启动前贴片播放失败:", error);
+			});
+			return;
+		}
+		const advertiseUrl = adMaterial?.advertise_url;
+		if (!advertiseUrl) return;
+		onOpenLink?.(advertiseUrl);
+		window.open(advertiseUrl, "_blank", "noopener,noreferrer");
+	}
+	if (!isClient || typeof window === "undefined" || !adData?.hit || !adMaterial || !hasAdVideo) return null;
+	const adContent = /* @__PURE__ */ jsx("video", {
+		ref: adPlayerRef,
+		src: adVideoSrc,
+		poster: adMaterial?.advertise_icon || "",
+		className: "pointer-events-none w-full h-full object-cover bg-black",
+		autoPlay: autoStart,
+		muted: true,
+		playsInline: true,
+		preload: "none",
+		onEnded: () => {
+			onFinish?.();
+		},
+		onPlaying: () => {
+			setAdStarted(true);
+		},
+		onError: (event) => {
+			console.warn("[video-preroll-ad][error]", {
+				sessionKey,
+				error: event.currentTarget?.error
+			});
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: `video-preroll-ad absolute top-0 left-0 w-full h-full z-[9999] ${visible ? "" : "pointer-events-none opacity-0"}`,
+		"aria-hidden": !visible,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled: !canSkip,
+			onClick: handleSkip,
+			className: "absolute z-[10] text-sm top-6 right-6 bg-black/30 text-white rounded-full px-6 py-1.5 flex items-center justify-center disabled:opacity-60 disabled:cursor-not-allowed",
+			children: canSkip ? /* @__PURE__ */ jsx(PrerollSkipButtonContent, { label: "跳过" }) : `跳过 ${remainingSeconds}s`
+		}), /* @__PURE__ */ jsxs("div", {
+			role: "button",
+			tabIndex: 0,
+			onClick: handleAdClick,
+			className: "relative block w-full h-full",
+			onKeyDown: (event) => {
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					handleAdClick();
+				}
+			},
+			children: [adContent, hasAdVideo && !adStarted && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 z-[2] flex items-center justify-center bg-black/20 pointer-events-none",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center w-12 h-12 rounded-full bg-[rgba(0,0,0,0.45)]",
+					children: /* @__PURE__ */ jsx(SvgVideoPlay, { className: "w-[16px] h-[22px] text-white" })
+				})
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { VideoPrerollAd };

package/dist/components/common/wait-loading.mjs

@@ -1,2 +1,120 @@
 
-"use client";import e from"../../utils/event-bus.mjs";import{eventKey as t}from"../../constants/event-key.mjs";import{useEffect as n,useRef as r,useState as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s(e){if(!Number.isFinite(e))return 0;let t=e>1?e/100:e;return Math.max(0,Math.min(100,t*100))}function c(c){let{className:l}=c,[u,d]=i(!1),[f,p]=i(`上传中`),[m,h]=i(0),g=r(null);return n(()=>{function n(){g.current!==null&&(window.clearInterval(g.current),g.current=null)}function r(){n(),g.current=window.setInterval(()=>{h(e=>e>=95?(n(),95):e+95/5)},1e3)}function i(e={}){let{show:t=!1,text:i=`上传中`,progress:a}=e;if(!t){n(),d(!1),h(0);return}if(d(!0),p(i),typeof a==`number`){n(),h(s(a));return}h(0),r()}return e.on(t.WAIT_LOADING_SHOW,i),()=>{e.off(t.WAIT_LOADING_SHOW,i),n()}},[]),u?o(`div`,{className:`fixed inset-0 z-[99999] flex items-center justify-center ${l||``}`,children:[a(`div`,{className:`absolute inset-0 bg-black/0`}),o(`div`,{className:`relative w-44 h-14 px-4 rounded-md bg-bg2 flex flex-col items-center justify-center`,children:[a(`div`,{className:`w-full h-2 rounded-full bg-line1/20 overflow-hidden`,children:a(`div`,{className:`h-full rounded-full bg-theme5 transition-all duration-300`,style:{width:`${m}%`}})}),o(`div`,{className:`mt-3 h-3 text-xs leading-3 text-theme5 flex items-center`,children:[f,o(`span`,{className:`ml-1.5 flex items-center gap-0.5`,children:[a(`span`,{className:`h-1 w-1 rounded-full bg-theme5 animate-bounce`,style:{animationDelay:`0ms`}}),a(`span`,{className:`h-1 w-1 rounded-full bg-theme5 animate-bounce`,style:{animationDelay:`150ms`}}),a(`span`,{className:`h-1 w-1 rounded-full bg-theme5 animate-bounce`,style:{animationDelay:`300ms`}})]})]})]})]}):null}export{c as WaitLoading};
+'use client';
+
+import eventBus from "../../utils/event-bus.mjs";
+import { eventKey } from "../../constants/event-key.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/common/wait-loading.tsx
+const MAX_AUTO_PROGRESS = 95;
+const PROGRESS_FULL_TIME = 5;
+/**
+* 规范化进度数值，支持 [0,1] 或 [0,100] 输入。
+* @param value 进度值
+* @returns 百分比进度
+*/
+function normalizeProgress(value) {
+	if (!Number.isFinite(value)) return 0;
+	const ratio = value > 1 ? value / 100 : value;
+	return Math.max(0, Math.min(100, ratio * 100));
+}
+/**
+* 全局上传等待提示（迁移自旧项目 wait-loading）。
+* @returns 组件渲染结果
+*/
+function WaitLoading(props) {
+	const { className } = props;
+	const [visible, setVisible] = useState(false);
+	const [tipText, setTipText] = useState("上传中");
+	const [progress, setProgress] = useState(0);
+	const progressTimerRef = useRef(null);
+	useEffect(() => {
+		/**
+		* 清理自动进度定时器。
+		*/
+		function clearProgressTimer() {
+			if (progressTimerRef.current === null) return;
+			window.clearInterval(progressTimerRef.current);
+			progressTimerRef.current = null;
+		}
+		/**
+		* 启动自动进度动画（保持旧项目的 5 秒填充逻辑）。
+		*/
+		function startAutoProgress() {
+			clearProgressTimer();
+			progressTimerRef.current = window.setInterval(() => {
+				setProgress((prev) => {
+					if (prev >= MAX_AUTO_PROGRESS) {
+						clearProgressTimer();
+						return MAX_AUTO_PROGRESS;
+					}
+					return prev + MAX_AUTO_PROGRESS / PROGRESS_FULL_TIME;
+				});
+			}, 1e3);
+		}
+		/**
+		* 处理全局等待弹窗事件。
+		* @param payload 弹窗控制参数
+		*/
+		function handleShow(payload = {}) {
+			const { show = false, text = "上传中", progress: nextProgress } = payload;
+			if (!show) {
+				clearProgressTimer();
+				setVisible(false);
+				setProgress(0);
+				return;
+			}
+			setVisible(true);
+			setTipText(text);
+			if (typeof nextProgress === "number") {
+				clearProgressTimer();
+				setProgress(normalizeProgress(nextProgress));
+				return;
+			}
+			setProgress(0);
+			startAutoProgress();
+		}
+		eventBus.on(eventKey.WAIT_LOADING_SHOW, handleShow);
+		return () => {
+			eventBus.off(eventKey.WAIT_LOADING_SHOW, handleShow);
+			clearProgressTimer();
+		};
+	}, []);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `fixed inset-0 z-[99999] flex items-center justify-center ${className || ""}`,
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0" }), /* @__PURE__ */ jsxs("div", {
+			className: "relative w-44 h-14 px-4 rounded-md bg-bg2 flex flex-col items-center justify-center",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "w-full h-2 rounded-full bg-line1/20 overflow-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "h-full rounded-full bg-theme5 transition-all duration-300",
+					style: { width: `${progress}%` }
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 h-3 text-xs leading-3 text-theme5 flex items-center",
+				children: [tipText, /* @__PURE__ */ jsxs("span", {
+					className: "ml-1.5 flex items-center gap-0.5",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "h-1 w-1 rounded-full bg-theme5 animate-bounce",
+							style: { animationDelay: "0ms" }
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "h-1 w-1 rounded-full bg-theme5 animate-bounce",
+							style: { animationDelay: "150ms" }
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "h-1 w-1 rounded-full bg-theme5 animate-bounce",
+							style: { animationDelay: "300ms" }
+						})
+					]
+				})]
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { WaitLoading };