@funhub/platform 0.2.30 → 0.2.31

package/dist/components/biz/business/advertisement/popup-ad/client.mjs

@@ -1,5 +1,200 @@
 
-"use client";import{trackAdClick as e,trackAdImpression as t,trackAdvertising as n}from"../../../../../utils/tracking.mjs";import{Button as r}from"../../../../ui/button.mjs";import{Image as i}from"../../../../ui/image.mjs";import{Box as a}from"../../../../ui/box.mjs";import{Dialog as o,DialogContent as s}from"../../../../ui/dialog.mjs";import c from"../../../../ui/link.mjs";import{adaptPopupAdMaterials as l,hasMatchedAds as u}from"../ad-match.mjs";import{useAdProvider as d}from"../ad-provider.mjs";import{useEffect as f,useMemo as p,useRef as m,useState as h}from"react";import{jsx as g,jsxs as _}from"react/jsx-runtime";const v=[{id:`popup-ad-1`,title:`弹窗广告标题`,jumpUrl:`/search`,materialUrl:`/static/components-resource/banner.png`,desc:`这里是弹窗广告描述`}];function y(e,t){return Array.isArray(e)&&e.length>0?e:t??[]}function b({items:b,mode:x=`renderer`,pageKey:S=`home`,pageName:C=`首页`}){let w=d(),T=p(()=>u(w?.matchData)?l(w?.matchData):x===`editor`?y(b,v):b??[],[w?.matchData,x,b]),[E,D]=h(0),[O,k]=h(!1),A=m(null),j=w?.matchData?.advertiseLocationCode||`home_popup`;f(()=>{D(0)},[T]),f(()=>{k(!1)},[E,T]),f(()=>()=>{A.current&&window.clearTimeout(A.current)},[]);let M=T[E];f(()=>{M?.id&&t({page_key:S,page_name:C,ad_slot_key:j,ad_slot_name:`弹窗广告`,ad_id:M.id,ad_type:`pop-ups-600800`})},[M?.id,j,S,C]);function N(){D(e=>e+1)}function P(){O||(k(!0),A.current&&window.clearTimeout(A.current),A.current=window.setTimeout(()=>{A.current=null,N()},260))}function F(e){e||P()}function I(){M?.id&&e({page_key:S,page_name:C,ad_slot_key:j,ad_slot_name:`弹窗广告`,ad_id:M.id,ad_type:`pop-ups-600800`})}function L(){M?.id&&(n({event_type:`close`,advertising_key:j,advertising_name:`弹窗广告`,advertising_id:M.id}),P())}return M?g(o,{open:!0,onOpenChange:F,disablePointerDismissal:!0,children:_(s,{showCloseButton:!1,className:`w-[320px] max-w-[calc(100vw-32px)] border-none bg-transparent p-0 shadow-none`,children:[_(a,{className:`flex flex-col items-center gap-[24px]`,style:{animation:O?`funhub-popup-ad-exit 260ms cubic-bezier(0.4, 0, 0.2, 1) both`:`funhub-popup-ad-enter 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both, funhub-popup-ad-float 3.2s ease-in-out 420ms infinite`,transformOrigin:`center bottom`},children:[g(c,{href:M.jumpUrl,className:`block w-full overflow-hidden rounded-[20px] bg-[#434343]`,style:{boxShadow:`0 18px 48px rgba(0, 0, 0, 0.26)`},onClick:I,children:g(a,{className:`w-full overflow-hidden bg-[#434343]`,children:g(i,{src:M.materialUrl,alt:M.title||`弹窗广告`,width:1200,height:1600,className:`block w-full h-auto`,unoptimized:!0})})}),g(r,{type:`button`,"aria-label":`关闭弹窗广告`,variant:`ghost`,size:`icon-lg`,className:`relative h-[54px] w-[54px] rounded-full border-[3px] border-white bg-transparent p-0 text-white hover:bg-white/8`,onClick:L,style:{animation:O?`funhub-popup-ad-close-exit 260ms ease-out both`:`funhub-popup-ad-close-breathe 2.4s ease-in-out 480ms infinite`},children:_(a,{className:`relative h-[24px] w-[24px]`,children:[g(a,{className:`absolute left-1/2 top-1/2 h-[4px] w-full -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-full bg-current`}),g(a,{className:`absolute left-1/2 top-1/2 h-[4px] w-full -translate-x-1/2 -translate-y-1/2 -rotate-45 rounded-full bg-current`})]})})]},M.id),g(`style`,{children:`
+'use client';
+
+import { trackAdClick, trackAdImpression, trackAdvertising } from "../../../../../utils/tracking.mjs";
+import { Button } from "../../../../ui/button.mjs";
+import { Image } from "../../../../ui/image.mjs";
+import { Box } from "../../../../ui/box.mjs";
+import { Dialog, DialogContent } from "../../../../ui/dialog.mjs";
+import Link from "../../../../ui/link.mjs";
+import CommonPlayer from "../../../../common/video-player/index.mjs";
+import { adaptPopupAdMaterials, hasMatchedAds } from "../ad-match.mjs";
+import { useAdProvider } from "../ad-provider.mjs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/biz/business/advertisement/popup-ad/client.tsx
+const POPUP_AD_CLOSE_DURATION = 260;
+const POPUP_AD_DEFAULT_RESOLUTION = "1080x1920";
+const POPUP_AD_DEFAULT_ITEMS = [{
+	id: "popup-ad-1",
+	title: "弹窗广告标题",
+	jumpUrl: "/search",
+	materialUrl: "/static/components-resource/banner.png",
+	desc: "这里是弹窗广告描述"
+}];
+function fallbackEditorItems(items, fallback) {
+	return Array.isArray(items) && items.length > 0 ? items : fallback ?? [];
+}
+/**
+* 判断当前素材是否为视频广告。
+*/
+function isVideoPopupAd(item) {
+	return Number(item?.advertiseType) === 2 && Boolean(item?.videoUrl);
+}
+/**
+* 获取弹窗广告的视频分辨率。
+*/
+function resolvePopupAdResolution(item) {
+	return item?.resolution || POPUP_AD_DEFAULT_RESOLUTION;
+}
+/**
+* 弹窗广告组件。
+*/
+function PopupAd({ items, mode: _mode = "renderer", pageKey = "home", pageName = "首页" }) {
+	const adContext = useAdProvider();
+	const resolvedItems = useMemo(() => {
+		if (hasMatchedAds(adContext?.matchData)) return adaptPopupAdMaterials(adContext?.matchData);
+		if (_mode === "editor") return fallbackEditorItems(items, POPUP_AD_DEFAULT_ITEMS);
+		return items ?? [];
+	}, [
+		adContext?.matchData,
+		_mode,
+		items
+	]);
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const [isClosing, setIsClosing] = useState(false);
+	const closeTimerRef = useRef(null);
+	const adSlotKey = adContext?.matchData?.advertiseLocationCode || "home_popup";
+	useEffect(() => {
+		setCurrentIndex(0);
+	}, [resolvedItems]);
+	useEffect(() => {
+		setIsClosing(false);
+	}, [currentIndex, resolvedItems]);
+	useEffect(() => {
+		return () => {
+			if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+		};
+	}, []);
+	const currentItem = resolvedItems[currentIndex];
+	const isVideoAd = isVideoPopupAd(currentItem);
+	/** 弹窗广告曝光，每个新素材展示时上报 ad_impression。 */
+	useEffect(() => {
+		if (!currentItem?.id) return;
+		trackAdImpression({
+			page_key: pageKey,
+			page_name: pageName,
+			ad_slot_key: adSlotKey,
+			ad_slot_name: "弹窗广告",
+			ad_id: currentItem.id,
+			ad_type: "pop-ups-600800"
+		});
+	}, [
+		currentItem?.id,
+		adSlotKey,
+		pageKey,
+		pageName
+	]);
+	function showNextAd() {
+		setCurrentIndex((prev) => prev + 1);
+	}
+	function playCloseAnimation() {
+		if (isClosing) return;
+		setIsClosing(true);
+		if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+		closeTimerRef.current = window.setTimeout(() => {
+			closeTimerRef.current = null;
+			showNextAd();
+		}, POPUP_AD_CLOSE_DURATION);
+	}
+	function handleOpenChange(nextOpen) {
+		if (!nextOpen) playCloseAnimation();
+	}
+	/** 点击广告图片上报 ad_click。 */
+	function handleAdClick() {
+		if (!currentItem?.id) return;
+		trackAdClick({
+			page_key: pageKey,
+			page_name: pageName,
+			ad_slot_key: adSlotKey,
+			ad_slot_name: "弹窗广告",
+			ad_id: currentItem.id,
+			ad_type: "pop-ups-600800"
+		});
+	}
+	/** 点击跳过按钮上报 advertising，然后关闭当前广告。 */
+	function handleSkip() {
+		if (!currentItem?.id) return;
+		trackAdvertising({
+			event_type: "close",
+			advertising_key: adSlotKey,
+			advertising_name: "弹窗广告",
+			advertising_id: currentItem.id
+		});
+		playCloseAnimation();
+	}
+	if (!currentItem) return null;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: true,
+		onOpenChange: handleOpenChange,
+		disablePointerDismissal: true,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			showCloseButton: false,
+			className: "w-[320px] max-w-[calc(100vw-32px)] border-none bg-transparent p-0 shadow-none",
+			children: [/* @__PURE__ */ jsxs(Box, {
+				className: "flex flex-col items-center gap-[24px]",
+				style: {
+					animation: isClosing ? `funhub-popup-ad-exit ${POPUP_AD_CLOSE_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1) both` : "funhub-popup-ad-enter 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both, funhub-popup-ad-float 3.2s ease-in-out 420ms infinite",
+					transformOrigin: "center bottom"
+				},
+				children: [/* @__PURE__ */ jsx(Box, {
+					className: "w-full overflow-hidden rounded-[20px] bg-[#434343]",
+					style: { boxShadow: "0 18px 48px rgba(0, 0, 0, 0.26)" },
+					onClick: handleAdClick,
+					children: isVideoAd ? /* @__PURE__ */ jsx(Box, {
+						className: "w-full bg-black",
+						children: /* @__PURE__ */ jsxs(Box, {
+							className: "relative aspect-[9/16] w-full cursor-pointer overflow-hidden bg-black",
+							children: [/* @__PURE__ */ jsx(CommonPlayer, {
+								plyerId: `popup-ad-${currentItem.id}`,
+								resolution: resolvePopupAdResolution(currentItem),
+								poster: currentItem.materialUrl || "",
+								videoUrl: currentItem.videoUrl || "",
+								mergeConfig: {
+									fitVideoSize: "fixWidth",
+									autoplayMuted: true,
+									controls: false
+								}
+							}), /* @__PURE__ */ jsx(Link, {
+								href: currentItem.jumpUrl,
+								"aria-label": currentItem.title || "跳转广告详情",
+								className: "absolute inset-0 z-10 block",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: currentItem.title || "跳转广告详情"
+								})
+							})]
+						})
+					}) : /* @__PURE__ */ jsx(Link, {
+						href: currentItem.jumpUrl,
+						className: "block w-full overflow-hidden bg-[#434343]",
+						children: /* @__PURE__ */ jsx(Box, {
+							className: "w-full overflow-hidden bg-[#434343]",
+							children: /* @__PURE__ */ jsx(Image, {
+								src: currentItem.materialUrl,
+								alt: currentItem.title || "弹窗广告",
+								width: 1200,
+								height: 1600,
+								className: "block w-full h-auto",
+								unoptimized: true
+							})
+						})
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					"aria-label": "关闭弹窗广告",
+					variant: "ghost",
+					size: "icon-lg",
+					className: "relative h-[54px] w-[54px] rounded-full border-[3px] border-white bg-transparent p-0 text-white hover:bg-white/8",
+					onClick: handleSkip,
+					style: { animation: isClosing ? `funhub-popup-ad-close-exit ${POPUP_AD_CLOSE_DURATION}ms ease-out both` : "funhub-popup-ad-close-breathe 2.4s ease-in-out 480ms infinite" },
+					children: /* @__PURE__ */ jsxs(Box, {
+						className: "relative h-[24px] w-[24px]",
+						children: [/* @__PURE__ */ jsx(Box, { className: "absolute left-1/2 top-1/2 h-[4px] w-full -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-full bg-current" }), /* @__PURE__ */ jsx(Box, { className: "absolute left-1/2 top-1/2 h-[4px] w-full -translate-x-1/2 -translate-y-1/2 -rotate-45 rounded-full bg-current" })]
+					})
+				})]
+			}, currentItem.id), /* @__PURE__ */ jsx("style", { children: `
           @keyframes funhub-popup-ad-enter {
             0% {
               opacity: 0;
@@ -61,4 +256,10 @@
               animation-iteration-count: 1 !important;
             }
           }
-        `})]})}):null}export{b as PopupAd};
+        ` })]
+		})
+	});
+}
+
+//#endregion
+export { PopupAd };

package/dist/components/biz/business/advertisement/popup-ad/material.d.mts

@@ -17,6 +17,9 @@ declare const popupAdMaterial: DefineMaterialOption<typeof PopupAdServer, typeof
     title: zod.ZodOptional<zod.ZodString> & SchemaHasDefaultValue;
     jumpUrl: zod.ZodString & SchemaHasDefaultValue;
     materialUrl: zod.ZodString & SchemaHasDefaultValue;
+    advertiseType: zod.ZodOptional<zod.ZodNumber> & SchemaHasDefaultValue;
+    videoUrl: zod.ZodOptional<zod.ZodString> & SchemaHasDefaultValue;
+    resolution: zod.ZodOptional<zod.ZodString> & SchemaHasDefaultValue;
     desc: zod.ZodOptional<zod.ZodString> & SchemaHasDefaultValue;
   }, zod_v4_core0.$strip>>>;
 } & {

package/dist/components/biz/business/advertisement/popup-ad/material.mjs

@@ -1,2 +1,22 @@
 
-import{defineMaterial as e}from"../../../../../utils/schema/material.mjs";import{PopupAd as t}from"./client.mjs";import{popupAdInspectorPropsSchema as n}from"./schema.mjs";import{PopupAdServer as r}from"./server.mjs";const i=e({type:`popup-ad`,name:`弹窗广告`,icon:`/static/components-thumb/carousel_banner.png`,category:`广告组件`,serverComponent:r,clientComponent:t,propsSchema:n});export{i as popupAdMaterial};
+import { defineMaterial } from "../../../../../utils/schema/material.mjs";
+import { PopupAd } from "./client.mjs";
+import { popupAdInspectorPropsSchema } from "./schema.mjs";
+import { PopupAdServer } from "./server.mjs";
+
+//#region components/biz/business/advertisement/popup-ad/material.ts
+/**
+* 弹窗广告物料定义。
+*/
+const popupAdMaterial = defineMaterial({
+	type: "popup-ad",
+	name: "弹窗广告",
+	icon: "/static/components-thumb/carousel_banner.png",
+	category: "广告组件",
+	serverComponent: PopupAdServer,
+	clientComponent: PopupAd,
+	propsSchema: popupAdInspectorPropsSchema
+});
+
+//#endregion
+export { popupAdMaterial };

package/dist/components/biz/business/advertisement/popup-ad/schema.d.mts

@@ -13,6 +13,9 @@ interface PopupAdItem {
   title?: string;
   jumpUrl: string;
   materialUrl: string;
+  advertiseType?: number;
+  videoUrl?: string;
+  resolution?: string;
   desc?: string;
 }
 /**
@@ -24,6 +27,9 @@ declare const popupAdInspectorPropsSchema: z$1.ZodObject<{
     title: z$1.ZodOptional<z$1.ZodString> & SchemaHasDefaultValue;
     jumpUrl: z$1.ZodString & SchemaHasDefaultValue;
     materialUrl: z$1.ZodString & SchemaHasDefaultValue;
+    advertiseType: z$1.ZodOptional<z$1.ZodNumber> & SchemaHasDefaultValue;
+    videoUrl: z$1.ZodOptional<z$1.ZodString> & SchemaHasDefaultValue;
+    resolution: z$1.ZodOptional<z$1.ZodString> & SchemaHasDefaultValue;
     desc: z$1.ZodOptional<z$1.ZodString> & SchemaHasDefaultValue;
   }, z$1.core.$strip>>>;
 } & {

package/dist/components/biz/business/advertisement/popup-ad/schema.mjs

@@ -1,2 +1,49 @@
 
-import{defineComponentPropsSchema as e,getSchemaDefaultProps as t}from"../../../../../utils/schema/schema.mjs";import n from"zod";const r=e(e=>({items:e.array(n.object({id:e.string(`popup-ad-1`,{label:`广告 ID`,required:!0}),title:e.string(`弹窗广告标题`,{label:`标题`,required:!1}),jumpUrl:e.string(`/search`,{label:`跳转链接`,required:!0}),materialUrl:e.string(`/static/components-resource/banner.png`,{label:`素材地址`,required:!0}),desc:e.string(`这里是弹窗广告描述`,{label:`描述`,required:!1})}),{label:`广告列表`,required:!1})})),i=t(r);export{i as popupAdInspectorDefaultProps,r as popupAdInspectorPropsSchema};
+import { defineComponentPropsSchema, getSchemaDefaultProps } from "../../../../../utils/schema/schema.mjs";
+import z$1 from "zod";
+
+//#region components/biz/business/advertisement/popup-ad/schema.ts
+/**
+* 弹窗广告物料属性。
+*/
+const popupAdInspectorPropsSchema = defineComponentPropsSchema((t) => ({ items: t.array(z$1.object({
+	id: t.string("popup-ad-1", {
+		label: "广告 ID",
+		required: true
+	}),
+	title: t.string("弹窗广告标题", {
+		label: "标题",
+		required: false
+	}),
+	jumpUrl: t.string("/search", {
+		label: "跳转链接",
+		required: true
+	}),
+	materialUrl: t.string("/static/components-resource/banner.png", {
+		label: "素材地址",
+		required: true
+	}),
+	advertiseType: t.number(1, {
+		label: "广告类型",
+		required: false
+	}),
+	videoUrl: t.string("", {
+		label: "视频地址",
+		required: false
+	}),
+	resolution: t.string("1080x1920", {
+		label: "视频分辨率",
+		required: false
+	}),
+	desc: t.string("这里是弹窗广告描述", {
+		label: "描述",
+		required: false
+	})
+}), {
+	label: "广告列表",
+	required: false
+}) }));
+const popupAdInspectorDefaultProps = getSchemaDefaultProps(popupAdInspectorPropsSchema);
+
+//#endregion
+export { popupAdInspectorDefaultProps, popupAdInspectorPropsSchema };

package/dist/components/biz/business/advertisement/popup-ad/server.mjs

@@ -1,2 +1,25 @@
 
-import{AdRuntimeProvider as e}from"../ad-runtime-provider.mjs";import{PopupAd as t}from"./client.mjs";import{jsx as n}from"react/jsx-runtime";async function r(r){let{mode:i=`renderer`,componentId:a,sceneContext:o,...s}=r;return n(e,{adType:`popup`,componentId:a,sceneContext:o,mode:i,children:n(t,{...s,mode:i})})}export{r as PopupAdServer};
+import { AdRuntimeProvider } from "../ad-runtime-provider.mjs";
+import { PopupAd } from "./client.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/biz/business/advertisement/popup-ad/server.tsx
+/**
+* 弹窗广告服务端组件。
+*/
+async function PopupAdServer(props) {
+	const { mode = "renderer", componentId, sceneContext, ...rest } = props;
+	return /* @__PURE__ */ jsx(AdRuntimeProvider, {
+		adType: "popup",
+		componentId,
+		sceneContext,
+		mode,
+		children: /* @__PURE__ */ jsx(PopupAd, {
+			...rest,
+			mode
+		})
+	});
+}
+
+//#endregion
+export { PopupAdServer };