@anker-in/headless-ui 1.1.99 → 1.2.1

package/dist/esm/biz-components/MediaPlayerBase/index.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as Se,jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as y,useRef as n,useMemo as ke,useEffect as F,forwardRef as Ne,useImperativeHandle as He}from"react";import{debounce as Te}from"lodash";import{cn as o}from"../../helpers/utils.js";import{withLayout as ze}from"../../shared/Styles.js";import le from"../../components/button.js";import{Heading as Me,Text as se}from"../../components/index.js";import{VideoModal as Le}from"../VideoModal/index.js";import{convertLexicalToHTML as ae}from"@payloadcms/richtext-lexical/html";import{useInView as Re}from"react-intersection-observer";import{useExposure as Ie}from"../../hooks/useExposure.js";import L from"../../helpers/ScrollLoadVideo.js";import{gsap as m}from"gsap";import{SplitText as re}from"gsap/dist/SplitText";import{ScrollTrigger as q}from"gsap/dist/ScrollTrigger";const Ee="media_player_base",Pe="video";m.registerPlugin(q,re);const ne=({defaultConverters:f})=>({...f,text:R=>{const{node:s}=R;return s.$&&s.$.color?`<span class="lexical-${s.$.color}">${s.text}</span>`:s.text}}),ie=Ne(({className:f="",id:R,onBtnClick:s,data:{title:b,videoTitle:h,btnText:w,youtubeId:U,video:k,mobileVideo:Y,theme:I,img:N,shape:E,titleAnimation:H="fade-in",variant:ce,headline:O,paragraphs:P,metrics:S,...pe},..._},de)=>{const{sticky:i}=pe,[G,J]=y(!1),[K,ue]=y(0),[me,fe]=y(0),[T,ge]=y(0),[Q,$]=y(!1),d=n(null),W=n(null),r=n(null),z=n(null),X=n(null),M=n(null),g=n(null),B=n(null),C=n(null),{ref:Z,inView:c}=Re();He(de,()=>r.current);const x=typeof b=="string"?b:b&&ae({data:b,converters:ne}),A=typeof h=="string"?h:h&&ae({data:h,converters:ne});F(()=>{c?(d.current?.play(),J(!0)):(d.current?.pause(),J(!1))},[c]);const V=Te(()=>{if(r.current){const t=r.current.getBoundingClientRect(),a=window.innerHeight,v=window.scrollY||window.pageYOffset,p=t.bottom+v,u=document.documentElement.scrollHeight-p;ue(u>a?a:u)}if(r.current){const t=r.current.clientHeight,a=window.innerHeight;fe(t+a)}},600);F(()=>(V(),window.addEventListener("resize",V),()=>{window.removeEventListener("resize",V)}),[]),F(()=>{function t(){if(!z.current||H!=="fade-in")return;const v=z.current?.clientHeight||80;M.current=new re(z.current,{type:"words",wordsClass:"word"});const p=M.current.words;m.set(p,{opacity:0}),g.current&&m.set(g.current,{opacity:0}),B.current=q.create({trigger:r.current,start:"top center-=10%",end:`top+=${v*1.5+80}px center-=10%`,scrub:!0,onUpdate:ee=>{const u=ee.progress,te=p.length,ve=1/te,oe=.5;p.forEach((ye,be)=>{const he=be/te*(1-oe),we=ve*(1+oe);let D=(u-he)/we;D=Math.max(0,Math.min(D,1)),m.set(ye,{opacity:D})}),m.set(W.current,{opacity:u}),g.current&&m.set(g.current,{opacity:u>=.6?1:0})}})}function a(){C.current=q.create({trigger:r.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:v=>{const p=v.progress;ge(p)}})}return c&&(t(),a()),()=>{M.current&&M.current.revert(),B.current&&B.current.kill(),C.current&&C.current.kill()}},[H,c]),Ie(X,{componentType:Pe,componentName:Ee,componentTitle:x});const xe=ke(()=>c&&T>0&&T<.9?3:c?2:1,[T,c]);if(ce==="text-layout")return l("div",{..._,ref:r,className:o("relative flex w-full items-center overflow-hidden","aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]","laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]",{"aiui-dark":I==="dark","rounded-box":E==="rounded"},f),children:[e("div",{ref:Z,className:"pointer-events-none absolute inset-0"}),l("div",{className:"absolute inset-0 z-0",children:[e(L,{videoRef:d,poster:N?.url||"",src:k?.url,className:"tablet:block hidden size-full",videoClassName:"size-full object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(L,{videoRef:d,poster:N?.url||"",src:Y?.url||k?.url,className:"tablet:hidden block size-full",videoClassName:"size-full object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute inset-0 bg-black/30"})]}),l("div",{className:o("relative z-10 mx-auto flex w-full max-w-[1920px] flex-col","gap-6 px-4 py-10","tablet:gap-8 tablet:px-8","laptop:flex-row laptop:gap-12 laptop:px-16","desktop:gap-16 desktop:px-20","lg-desktop:px-24"),children:[e("div",{className:"laptop:w-1/2 w-full shrink-0",children:O&&e(Me,{as:"h2",size:5,className:"text-info-primary",children:O})}),l("div",{className:o("laptop:w-1/2 flex w-full flex-col justify-start","tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6"),children:[P&&P.length>0&&e("div",{className:"tablet:gap-4 flex flex-col gap-3",children:P.map((t,a)=>e(se,{as:"p",size:3,className:"text-info-primary lg-desktop:text-[18px] opacity-90",children:typeof t=="string"?t:t.text},a))}),S&&S.length>0&&e("div",{className:o("tablet:grid-cols-3 grid grid-cols-2","tablet:gap-6 desktop:gap-8 gap-4"),children:S.map((t,a)=>l("div",{className:"flex flex-col gap-1",children:[e("span",{className:"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]",children:t.value}),e(se,{as:"span",size:2,className:"text-info-primary opacity-80",children:t.label})]},a))})]})]})]});const j="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return l(Se,{children:[i&&e("div",{..._,ref:r,className:o("pointer-events-none relative z-10",j,{"aiui-dark":I==="dark","rounded-box":E==="rounded"},f),children:e("div",{ref:Z,children:!H&&l("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[x&&!G&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),A&&G&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:A}}),w&&e(le,{variant:"link",className:o("member-equity-button-secondary text-info-primary"),onClick:()=>{$(!0),s&&s?.()},children:w})]})})}),l("div",{...i?{}:_,style:i?{marginBottom:`-${K}px`,marginTop:`-${me}px`,zIndex:xe}:{zIndex:5},className:o("relative",f),children:[e("div",{className:"sticky top-0 ",children:l("div",{id:R,className:o("relative overflow-hidden",i?"h-screen w-full":j,{"aiui-dark":I==="dark","rounded-box":E==="rounded"}),children:[H==="fade-in"&&l("div",{className:o("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",i?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[x&&e("div",{ref:z,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),w&&e(le,{ref:g,variant:"link",className:o("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{$(!0),s&&s?.()},children:w})]}),l("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-T*100}vh`},children:[e(L,{videoRef:d,poster:N?.url||"",src:k?.url,className:"tablet:block hidden size-full !h-auto",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(L,{videoRef:d,poster:N?.url||"",src:Y?.url||k?.url,className:"tablet:hidden block min-h-screen w-full",videoClassName:"object-cover w-full h-auto",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:W,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),i&&e("div",{className:o(i&&"pointer-events-none relative box-content block",j),style:i?{height:`${K}px`}:{},ref:X})]}),Q&&U&&e(Le,{visible:Q,youTubeId:U,onCloseModal:()=>$(!1)})]})});ie.displayName="MediaPlayerBase";var Ke=ze(ie);export{Ke as default};
+"use client";import{Fragment as Se,jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as y,useRef as n,useMemo as ke,useEffect as F,forwardRef as Ne,useImperativeHandle as He}from"react";import{debounce as Te}from"lodash";import{cn as o}from"../../helpers/utils.js";import{withLayout as ze}from"../../shared/Styles.js";import le from"../../components/button.js";import{Heading as Me,Text as se}from"../../components/index.js";import{VideoModal as Le}from"../VideoModal/index.js";import{convertLexicalToHTML as ae}from"@payloadcms/richtext-lexical/html";import{useInView as Re}from"react-intersection-observer";import{useExposure as Ie}from"../../hooks/useExposure.js";import L from"../../helpers/ScrollLoadVideo.js";import{gsap as m}from"gsap";import{SplitText as re}from"gsap/dist/SplitText";import{ScrollTrigger as q}from"gsap/dist/ScrollTrigger";const Ee="media_player_base",Pe="video";m.registerPlugin(q,re);const ne=({defaultConverters:f})=>({...f,text:R=>{const{node:s}=R;return s.$&&s.$.color?`<span class="lexical-${s.$.color}">${s.text}</span>`:s.text}}),ie=Ne(({className:f="",id:R,onBtnClick:s,data:{title:b,videoTitle:h,btnText:w,youtubeId:U,video:k,mobileVideo:Y,theme:I,img:N,shape:E,titleAnimation:H="fade-in",variant:ce,headline:O,paragraphs:P,metrics:S,...pe},..._},de)=>{const{sticky:i}=pe,[G,J]=y(!1),[K,ue]=y(0),[me,fe]=y(0),[T,ge]=y(0),[Q,$]=y(!1),d=n(null),W=n(null),r=n(null),z=n(null),X=n(null),M=n(null),g=n(null),B=n(null),C=n(null),{ref:Z,inView:c}=Re();He(de,()=>r.current);const x=typeof b=="string"?b:b&&ae({data:b,converters:ne}),A=typeof h=="string"?h:h&&ae({data:h,converters:ne});F(()=>{c?(d.current?.play(),J(!0)):(d.current?.pause(),J(!1))},[c]);const V=Te(()=>{if(r.current){const t=r.current.getBoundingClientRect(),a=window.innerHeight,v=window.scrollY||window.pageYOffset,p=t.bottom+v,u=document.documentElement.scrollHeight-p;ue(u>a?a:u)}if(r.current){const t=r.current.clientHeight,a=window.innerHeight;fe(t+a)}},600);F(()=>(V(),window.addEventListener("resize",V),()=>{window.removeEventListener("resize",V)}),[]),F(()=>{function t(){if(!z.current||H!=="fade-in")return;const v=z.current?.clientHeight||80;M.current=new re(z.current,{type:"words",wordsClass:"word"});const p=M.current.words;m.set(p,{opacity:0}),g.current&&m.set(g.current,{opacity:0}),B.current=q.create({trigger:r.current,start:"top center-=10%",end:`top+=${v*1.5+80}px center-=10%`,scrub:!0,onUpdate:ee=>{const u=ee.progress,te=p.length,ve=1/te,oe=.5;p.forEach((ye,be)=>{const he=be/te*(1-oe),we=ve*(1+oe);let D=(u-he)/we;D=Math.max(0,Math.min(D,1)),m.set(ye,{opacity:D})}),m.set(W.current,{opacity:u}),g.current&&m.set(g.current,{opacity:u>=.6?1:0})}})}function a(){C.current=q.create({trigger:r.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:v=>{const p=v.progress;ge(p)}})}return c&&(t(),a()),()=>{M.current&&M.current.revert(),B.current&&B.current.kill(),C.current&&C.current.kill()}},[H,c]),Ie(X,{componentType:Pe,componentName:Ee,componentTitle:x});const xe=ke(()=>c&&T>0&&T<.9?3:c?2:1,[T,c]);if(ce==="text-layout")return l("div",{..._,ref:r,className:o("relative flex w-full items-center overflow-hidden","aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]","laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]",{"aiui-dark":I==="dark","rounded-box":E==="rounded"},f),children:[e("div",{ref:Z,className:"pointer-events-none absolute inset-0"}),l("div",{className:"absolute inset-0 z-0",children:[e(L,{videoRef:d,poster:N?.url||"",src:k?.url,className:"tablet:block hidden size-full",videoClassName:"size-full object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(L,{videoRef:d,poster:N?.url||"",src:Y?.url||k?.url,className:"tablet:hidden block size-full",videoClassName:"size-full object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute inset-0 bg-black/30"})]}),l("div",{className:o("relative z-10 mx-auto flex w-full max-w-[1920px] flex-col","gap-6 px-4 py-10","tablet:gap-8 tablet:px-8","laptop:flex-row laptop:gap-12 laptop:px-16","desktop:gap-16 desktop:px-20","lg-desktop:px-24"),children:[e("div",{className:"laptop:w-1/2 w-full shrink-0",children:O&&e(Me,{as:"h2",size:5,className:"text-info-primary",children:O})}),l("div",{className:o("laptop:w-1/2 flex w-full flex-col justify-start","tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6"),children:[P&&P.length>0&&e("div",{className:"tablet:gap-4 flex flex-col gap-3",children:P.map((t,a)=>e(se,{as:"p",size:3,className:"text-info-primary lg-desktop:text-[18px] opacity-90",children:typeof t=="string"?t:t.text},a))}),S&&S.length>0&&e("div",{className:o("tablet:grid-cols-3 grid grid-cols-2","tablet:gap-6 desktop:gap-8 gap-4"),children:S.map((t,a)=>l("div",{className:"flex flex-col gap-1",children:[e("span",{className:"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]",children:t.value}),e(se,{as:"span",size:2,className:"text-info-primary opacity-80",children:t.label})]},a))})]})]})]});const j="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return l(Se,{children:[i&&e("div",{..._,ref:r,className:o("pointer-events-none relative z-10",j,{"aiui-dark":I==="dark","rounded-box":E==="rounded"},f),children:e("div",{ref:Z,children:!H&&l("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[x&&!G&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),A&&G&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:A}}),w&&e(le,{variant:"link",className:o("member-equity-button-secondary text-info-primary"),onClick:()=>{$(!0),s&&s?.()},children:w})]})})}),l("div",{...i?{}:_,style:i?{marginBottom:`-${K}px`,marginTop:`-${me}px`,zIndex:xe}:{zIndex:5},className:o("relative",f),children:[e("div",{className:"sticky top-0 ",children:l("div",{id:R,className:o("relative overflow-hidden",i?"h-screen w-full":j,{"aiui-dark":I==="dark","rounded-box":E==="rounded"}),children:[H==="fade-in"&&l("div",{className:o("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",i?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[x&&e("div",{ref:z,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),w&&e(le,{ref:g,variant:"link",className:o("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{$(!0),s&&s?.()},children:w})]}),l("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-T*100}vh`},children:[e(L,{videoRef:d,poster:N?.url||"",src:k?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(L,{videoRef:d,poster:N?.url||"",src:Y?.url||k?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:W,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),i&&e("div",{className:o(i&&"pointer-events-none relative box-content block",j),style:i?{height:`${K}px`}:{},ref:X})]}),Q&&U&&e(Le,{visible:Q,youTubeId:U,onCloseModal:()=>$(!1)})]})});ie.displayName="MediaPlayerBase";var Ke=ze(ie);export{Ke as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/MediaPlayerBase/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        titleAnimation = 'fade-in',\n        variant,\n        headline,\n        paragraphs,\n        metrics,\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const btnFadeInRef = useRef<HTMLButtonElement>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n            if (btnFadeInRef.current) {\n              gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n            }\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    if (variant === 'text-layout') {\n      return (\n        <div\n          {...rest}\n          ref={titleRef}\n          className={cn(\n            'relative flex w-full items-center overflow-hidden',\n            'aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]',\n            'laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]',\n            {\n              'aiui-dark': theme === 'dark',\n              'rounded-box': shape === 'rounded',\n            },\n            className\n          )}\n        >\n          <div ref={inViewRef} className=\"pointer-events-none absolute inset-0\" />\n\n          {/* Video Background */}\n          <div className=\"absolute inset-0 z-0\">\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={video?.url!}\n              className=\"tablet:block hidden size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={mobileVideo?.url || video?.url!}\n              className=\"tablet:hidden block size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <div className=\"absolute inset-0 bg-black/30\" />\n          </div>\n\n          {/* Content */}\n          {/* Content \u2014 Fix#1/#9: laptop:flex-row, reduced spacing */}\n          <div\n            className={cn(\n              'relative z-10 mx-auto flex w-full max-w-[1920px] flex-col',\n              'gap-6 px-4 py-10',\n              'tablet:gap-8 tablet:px-8',\n              'laptop:flex-row laptop:gap-12 laptop:px-16',\n              'desktop:gap-16 desktop:px-20',\n              'lg-desktop:px-24'\n            )}\n          >\n            {/* 1. Headline */}\n            {/* 1. Headline \u2014 Fix#1(w-1/2) + Fix#5(Heading size=5) */}\n            <div className=\"laptop:w-1/2 w-full shrink-0\">\n              {headline && (\n                <Heading as=\"h2\" size={5} className=\"text-info-primary\">\n                  {headline}\n                </Heading>\n              )}\n            </div>\n\n            {/* Right column for paragraphs and metrics */}\n            {/* Right column \u2014 Fix#1(w-1/2) + Fix#4(justify-start) + Fix#10(gap) */}\n            <div\n              className={cn(\n                'laptop:w-1/2 flex w-full flex-col justify-start',\n                'tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6'\n              )}\n            >\n              {/* 2. Paragraphs */}\n              {paragraphs && paragraphs.length > 0 && (\n                <div className=\"tablet:gap-4 flex flex-col gap-3\">\n                  {paragraphs.map((p, i) => (\n                    <Text key={i} as=\"p\" size={3} className=\"text-info-primary lg-desktop:text-[18px] opacity-90\">\n                      {typeof p === 'string' ? p : p.text}\n                    </Text>\n                  ))}\n                </div>\n              )}\n\n              {/* 3. Metrics */}\n              {metrics && metrics.length > 0 && (\n                <div className={cn('tablet:grid-cols-3 grid grid-cols-2', 'tablet:gap-6 desktop:gap-8 gap-4')}>\n                  {metrics.map((m, i) => (\n                    <div key={i} className=\"flex flex-col gap-1\">\n                      {/* Fix#7: Heading size=4 equivalent classes on span */}\n                      <span className=\"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]\">\n                        {m.value}\n                      </span>\n                      {/* Fix#8: Text size=2 \u2192 14px, removed uppercase/tracking-wider */}\n                      <Text as=\"span\" size={2} className=\"text-info-primary opacity-80\">\n                        {m.label}\n                      </Text>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      )\n    }\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'pointer-events-none relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : { zIndex: 5 }\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && (\n                <div\n                  className={cn(\n                    'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n                    sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n                  )}\n                >\n                  {title_html && (\n                    <div\n                      ref={titleFadeInRef}\n                      className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      ref={btnFadeInRef}\n                      variant=\"link\"\n                      className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                    </Button>\n                  )}\n                </div>\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full !h-auto\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block min-h-screen w-full\"\n                  videoClassName=\"object-cover w-full h-auto\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        titleAnimation = 'fade-in',\n        variant,\n        headline,\n        paragraphs,\n        metrics,\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const btnFadeInRef = useRef<HTMLButtonElement>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n            if (btnFadeInRef.current) {\n              gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n            }\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    if (variant === 'text-layout') {\n      return (\n        <div\n          {...rest}\n          ref={titleRef}\n          className={cn(\n            'relative flex w-full items-center overflow-hidden',\n            'aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]',\n            'laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]',\n            {\n              'aiui-dark': theme === 'dark',\n              'rounded-box': shape === 'rounded',\n            },\n            className\n          )}\n        >\n          <div ref={inViewRef} className=\"pointer-events-none absolute inset-0\" />\n\n          {/* Video Background */}\n          <div className=\"absolute inset-0 z-0\">\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={video?.url!}\n              className=\"tablet:block hidden size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={mobileVideo?.url || video?.url!}\n              className=\"tablet:hidden block size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <div className=\"absolute inset-0 bg-black/30\" />\n          </div>\n\n          {/* Content */}\n          {/* Content \u2014 Fix#1/#9: laptop:flex-row, reduced spacing */}\n          <div\n            className={cn(\n              'relative z-10 mx-auto flex w-full max-w-[1920px] flex-col',\n              'gap-6 px-4 py-10',\n              'tablet:gap-8 tablet:px-8',\n              'laptop:flex-row laptop:gap-12 laptop:px-16',\n              'desktop:gap-16 desktop:px-20',\n              'lg-desktop:px-24'\n            )}\n          >\n            {/* 1. Headline */}\n            {/* 1. Headline \u2014 Fix#1(w-1/2) + Fix#5(Heading size=5) */}\n            <div className=\"laptop:w-1/2 w-full shrink-0\">\n              {headline && (\n                <Heading as=\"h2\" size={5} className=\"text-info-primary\">\n                  {headline}\n                </Heading>\n              )}\n            </div>\n\n            {/* Right column for paragraphs and metrics */}\n            {/* Right column \u2014 Fix#1(w-1/2) + Fix#4(justify-start) + Fix#10(gap) */}\n            <div\n              className={cn(\n                'laptop:w-1/2 flex w-full flex-col justify-start',\n                'tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6'\n              )}\n            >\n              {/* 2. Paragraphs */}\n              {paragraphs && paragraphs.length > 0 && (\n                <div className=\"tablet:gap-4 flex flex-col gap-3\">\n                  {paragraphs.map((p, i) => (\n                    <Text key={i} as=\"p\" size={3} className=\"text-info-primary lg-desktop:text-[18px] opacity-90\">\n                      {typeof p === 'string' ? p : p.text}\n                    </Text>\n                  ))}\n                </div>\n              )}\n\n              {/* 3. Metrics */}\n              {metrics && metrics.length > 0 && (\n                <div className={cn('tablet:grid-cols-3 grid grid-cols-2', 'tablet:gap-6 desktop:gap-8 gap-4')}>\n                  {metrics.map((m, i) => (\n                    <div key={i} className=\"flex flex-col gap-1\">\n                      {/* Fix#7: Heading size=4 equivalent classes on span */}\n                      <span className=\"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]\">\n                        {m.value}\n                      </span>\n                      {/* Fix#8: Text size=2 \u2192 14px, removed uppercase/tracking-wider */}\n                      <Text as=\"span\" size={2} className=\"text-info-primary opacity-80\">\n                        {m.label}\n                      </Text>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      )\n    }\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'pointer-events-none relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : { zIndex: 5 }\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && (\n                <div\n                  className={cn(\n                    'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n                    sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n                  )}\n                >\n                  {title_html && (\n                    <div\n                      ref={titleFadeInRef}\n                      className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      ref={btnFadeInRef}\n                      variant=\"link\"\n                      className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                    </Button>\n                  )}\n                </div>\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "Heading", "Text", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "variant", "headline", "paragraphs", "metrics", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "p", "m", "aspect", "MediaPlayerBase_default"]
 }

package/dist/esm/biz-components/MediaSceneSwitcherV2/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Media, Theme } from '../../types/props.js';
+import type { Media as MediaType, Theme } from '../../types/props.js';
 export type MediaSceneSwitcherV2SemanticName = 'root' | 'header' | 'title' | 'subtitle' | 'container' | 'tabList' | 'tabItem' | 'tabTitle' | 'tabDescription' | 'mediaWrapper' | 'media' | 'swiper' | 'slide' | 'slideMedia' | 'slideContent';
 /**
  * 场景项数据接口
@@ -11,11 +11,11 @@ export interface MediaSceneSwitcherV2Item {
     description?: string;
     /** 场景媒体（图片/视频） */
     media: {
-        mobile?: Media;
-        tablet?: Media;
-        laptop?: Media;
-        desktop?: Media;
-        lgDesktop?: Media;
+        mobile?: MediaType;
+        tablet?: MediaType;
+        laptop?: MediaType;
+        desktop?: MediaType;
+        lgDesktop?: MediaType;
     };
 }
 /**

package/dist/esm/biz-components/MediaSceneSwitcherV2/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as o,jsxs as d}from"react/jsx-runtime";import*as p from"react";import{Swiper as F,SwiperSlide as B}from"swiper/react";import{FreeMode as j,Mousewheel as O,Autoplay as U}from"swiper/modules";import{useMediaQuery as x}from"react-responsive";import{cn as r}from"../../helpers/index.js";import Y from"../../components/picture.js";import{Heading as N,Text as V}from"../../components/index.js";import{withLayout as _}from"../../shared/Styles.js";const D=[{key:"lgDesktop",width:1920},{key:"desktop",width:1440},{key:"laptop",width:1024},{key:"tablet",width:768},{key:"mobile",width:390}],$=(a,i)=>a[i]?.mimeType==="video/mp4",q=a=>D.filter(({key:n})=>a[n]?.url&&a[n]?.mimeType!=="video/mp4").map(({key:n,width:c})=>`${a[n].url} ${c}`).join(", "),K=(a,i)=>{for(const{key:n}of D)if(a[n]?.alt)return a[n].alt;return i},C=({media:a,alt:i,className:n})=>{const c=x({minWidth:1920}),g=x({minWidth:1440,maxWidth:1919}),k=x({minWidth:1025,maxWidth:1439}),m=x({minWidth:768,maxWidth:1024}),u=p.useMemo(()=>{if(c&&a.lgDesktop?.url)return"lgDesktop";if(g&&a.desktop?.url)return"desktop";if(k&&a.laptop?.url)return"laptop";if(m&&a.tablet?.url)return"tablet";if(a.mobile?.url)return"mobile";for(const{key:b}of D)if(a[b]?.url)return b;return"desktop"},[c,g,k,m,a]),l=a[u];if(!l?.url)return null;if($(a,u))return o("video",{src:l.url,className:n,autoPlay:!0,loop:!0,muted:!0,playsInline:!0});const S=q(a);return o(Y,{source:S||l.url,alt:K(a,i),className:n,imgClassName:"size-full object-cover"})},Q=3e3,z=p.forwardRef(({className:a,classNames:i={},data:n,onSceneChange:c,...g},k)=>{const{title:m,subtitle:u,items:l,defaultActiveIndex:S=0,layout:b="left",autoplay:f=!0,autoplayDelay:v=Q}=n,[s,M]=p.useState(S),W=p.useRef(null),h=p.useRef(0),R=p.useRef([]),T=x({minWidth:1025});p.useEffect(()=>!f||l.length<=1||!T?void 0:((()=>{h.current=window.setInterval(()=>{M(e=>(e+1)%l.length)},v)})(),()=>{h.current&&window.clearInterval(h.current)}),[f,v,l.length,T]),p.useEffect(()=>{if(!T||!R.current[s])return;const t=R.current[s],e=t?.parentElement;if(!e||e.scrollHeight<=e.clientHeight)return;const y=requestAnimationFrame(()=>{const A=e.getBoundingClientRect(),I=t.getBoundingClientRect();if(I.top>=A.top&&I.bottom<=A.bottom)return;const P=I.top-A.top-e.clientHeight/2+I.height/2;e.scrollTo({top:e.scrollTop+P,behavior:"smooth"})});return()=>cancelAnimationFrame(y)},[s,T]);const L=p.useCallback(t=>{M(t),c?.(t,l[t]),W.current?.slideTo(t),f&&l.length>1&&(h.current&&window.clearInterval(h.current),h.current=window.setInterval(()=>{M(e=>(e+1)%l.length)},v))},[l,c,f,v]),H=p.useCallback(t=>{const e=t.realIndex;M(e),c?.(e,l[e])},[l,c]),w=l[s],E=b==="top";return d("div",{ref:k,className:r("scene-switcher-root","text-info-primary w-full",a,i.root,{"aiui-dark":n.theme==="dark"}),...g,children:[(m||u)&&d("div",{className:r("scene-switcher-header mb-6",i.header),children:[m&&o(N,{as:"h2",size:4,html:m,className:r("scene-switcher-title",i.title)}),u&&o(V,{as:"p",size:3,className:r("",i?.subtitle),html:u})]}),o("div",{className:r("scene-switcher-swiper","laptop:hidden !overflow-visible",i.swiper),children:o(F,{modules:[j,O,U],onSwiper:t=>{W.current=t},className:"!overflow-visible",onSlideChange:H,slidesPerView:"auto",spaceBetween:12,freeMode:!0,mousewheel:{forceToAxis:!0},initialSlide:S,loop:f&&l.length>1,autoplay:f&&l.length>1?{delay:v,disableOnInteraction:!1}:!1,breakpoints:{768:{spaceBetween:16}},children:l.map((t,e)=>o(B,{className:"h-[462px] !w-[296px]",children:d("div",{className:r("scene-switcher-slide","flex cursor-pointer flex-col",i.slide),onClick:()=>L(e),children:[o("div",{className:r("scene-switcher-slide-media","rounded-box relative aspect-[296/320] w-full overflow-hidden",i.slideMedia),children:o(C,{media:t.media,alt:t.title,className:"rounded-t-box size-full overflow-hidden object-cover"})}),d("div",{className:r("scene-switcher-slide-content"," mt-6  border-t pt-4",s===e?"border-info-primary border-t-4":"border-lines-primary",i.slideContent),children:[o(N,{className:r("scene-switcher-tab-title ",s===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&o(V,{className:r("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2  text-[14px]",s===e?"text-info-primary":"text-info-tertiary"),html:t.description})]})]})},e))})}),E&&d("div",{className:r("scene-switcher-container","laptop:flex laptop:flex-col hidden","laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]",i.container),children:[o("div",{className:r("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:w&&o(C,{media:w.media,alt:w.title,className:r("scene-switcher-media","rounded-box size-full object-cover",i.media)})}),o("div",{className:r("scene-switcher-tab-list","border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t",i.tabList),children:l.map((t,e)=>d("div",{ref:y=>{R.current[e]=y},className:r("scene-switcher-tab-item","desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors",s===e?"border-info-primary border-t-4":"hover:border-lines-primary border-transparent",i.tabItem),onClick:()=>L(e),role:"button","aria-selected":s===e,children:[o(N,{className:r("scene-switcher-tab-title line-clamp-2",s===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&o(V,{className:r("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",s===e?"text-info-primary":"text-info-tertiary"),html:t.description})]},e))})]}),!E&&d("div",{className:r("scene-switcher-container","laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]",b==="right"&&"flex-row-reverse",i.container),children:[o("div",{className:r("scene-switcher-tab-list","laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center",i.tabList),children:o("div",{className:"flex max-h-full w-full flex-col overflow-y-auto",children:l.map((t,e)=>d(p.Fragment,{children:[e>0&&o("div",{className:"border-lines-primary h-8 shrink-0 border-l-4"}),d("div",{ref:y=>{R.current[e]=y},className:r("scene-switcher-tab-item","shrink-0 cursor-pointer border-l-4 pl-5",s===e?"border-info-primary border-l-[6px]":"border-lines-primary hover:border-info-tertiary",i.tabItem),onClick:()=>L(e),role:"button","aria-selected":s===e,children:[o(N,{className:r("scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2",s===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&o(V,{className:r("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",s===e?"text-info-primary":"text-info-tertiary hidden"),html:t.description})]})]},e))})}),o("div",{className:r("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:w&&o(C,{media:w.media,alt:w.title,className:r("scene-switcher-media","rounded-box size-full h-full overflow-visible object-cover",i.media)})})]})]})});z.displayName="MediaSceneSwitcherV2";var oe=_(z);export{oe as default};
+"use client";import{jsx as r,jsxs as n}from"react/jsx-runtime";import*as s from"react";import{Swiper as P,SwiperSlide as B}from"swiper/react";import{FreeMode as O,Mousewheel as W,Autoplay as j}from"swiper/modules";import{useMediaQuery as U}from"react-responsive";import{cn as i}from"../../helpers/index.js";import{Heading as y,Text as g}from"../../components/index.js";import{withLayout as Y}from"../../shared/Styles.js";import I from"../Media/index.js";const V=p=>({pcImage:p.lgDesktop,desktopImage:p.desktop,laptopImage:p.laptop,padImage:p.tablet,mobileImage:p.mobile}),_=3e3,C=s.forwardRef(({className:p,classNames:o={},data:N,onSceneChange:f,...E},z)=>{const{title:S,subtitle:k,items:a,defaultActiveIndex:L=0,layout:R="left",autoplay:c=!0,autoplayDelay:m=_}=N,[l,u]=s.useState(L),A=s.useRef(null),d=s.useRef(0),w=s.useRef([]),b=U({minWidth:1025});s.useEffect(()=>!c||a.length<=1||!b?void 0:((()=>{d.current=window.setInterval(()=>{u(e=>(e+1)%a.length)},m)})(),()=>{d.current&&window.clearInterval(d.current)}),[c,m,a.length,b]),s.useEffect(()=>{if(!b||!w.current[l])return;const t=w.current[l],e=t?.parentElement;if(!e||e.scrollHeight<=e.clientHeight)return;const h=requestAnimationFrame(()=>{const T=e.getBoundingClientRect(),x=t.getBoundingClientRect();if(x.top>=T.top&&x.bottom<=T.bottom)return;const F=x.top-T.top-e.clientHeight/2+x.height/2;e.scrollTo({top:e.scrollTop+F,behavior:"smooth"})});return()=>cancelAnimationFrame(h)},[l,b]);const M=s.useCallback(t=>{u(t),f?.(t,a[t]),A.current?.slideTo(t),c&&a.length>1&&(d.current&&window.clearInterval(d.current),d.current=window.setInterval(()=>{u(e=>(e+1)%a.length)},m))},[a,f,c,m]),H=s.useCallback(t=>{const e=t.realIndex;u(e),f?.(e,a[e])},[a,f]),v=a[l],D=R==="top";return n("div",{ref:z,className:i("scene-switcher-root","text-info-primary w-full",p,o.root,{"aiui-dark":N.theme==="dark"}),...E,children:[(S||k)&&n("div",{className:i("scene-switcher-header mb-6",o.header),children:[S&&r(y,{as:"h2",size:4,html:S,className:i("scene-switcher-title",o.title)}),k&&r(g,{as:"p",size:3,className:i("",o?.subtitle),html:k})]}),r("div",{className:i("scene-switcher-swiper","laptop:hidden !overflow-visible",o.swiper),children:r(P,{modules:[O,W,j],onSwiper:t=>{A.current=t},className:"!overflow-visible",onSlideChange:H,slidesPerView:"auto",spaceBetween:12,freeMode:!0,mousewheel:{forceToAxis:!0},initialSlide:L,loop:c&&a.length>1,autoplay:c&&a.length>1?{delay:m,disableOnInteraction:!1}:!1,breakpoints:{768:{spaceBetween:16}},children:a.map((t,e)=>r(B,{className:"h-[462px] !w-[296px]",children:n("div",{className:i("scene-switcher-slide","flex cursor-pointer flex-col",o.slide),onClick:()=>M(e),children:[r("div",{className:i("scene-switcher-slide-media","rounded-box relative aspect-[296/320] w-full overflow-hidden",o.slideMedia),children:r(I,{...V(t.media),className:"rounded-t-box size-full overflow-hidden object-cover"})}),n("div",{className:i("scene-switcher-slide-content"," mt-6  border-t pt-4",l===e?"border-info-primary border-t-4":"border-lines-primary",o.slideContent),children:[r(y,{className:i("scene-switcher-tab-title ",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2  text-[14px]",l===e?"text-info-primary":"text-info-tertiary"),html:t.description})]})]})},e))})}),D&&n("div",{className:i("scene-switcher-container","laptop:flex laptop:flex-col hidden","laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]",o.container),children:[r("div",{className:i("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",o.mediaWrapper),children:v&&r(I,{...V(v.media),className:i("scene-switcher-media","rounded-box size-full object-cover",o.media)})}),r("div",{className:i("scene-switcher-tab-list","border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t",o.tabList),children:a.map((t,e)=>n("div",{ref:h=>{w.current[e]=h},className:i("scene-switcher-tab-item","desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors",l===e?"border-info-primary border-t-4":"hover:border-lines-primary border-transparent",o.tabItem),onClick:()=>M(e),role:"button","aria-selected":l===e,children:[r(y,{className:i("scene-switcher-tab-title line-clamp-2",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",l===e?"text-info-primary":"text-info-tertiary"),html:t.description})]},e))})]}),!D&&n("div",{className:i("scene-switcher-container","laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]",R==="right"&&"flex-row-reverse",o.container),children:[r("div",{className:i("scene-switcher-tab-list","laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center",o.tabList),children:r("div",{className:"flex max-h-full w-full flex-col overflow-y-auto",children:a.map((t,e)=>n(s.Fragment,{children:[e>0&&r("div",{className:"border-lines-primary h-8 shrink-0 border-l-4"}),n("div",{ref:h=>{w.current[e]=h},className:i("scene-switcher-tab-item","shrink-0 cursor-pointer border-l-4 pl-5",l===e?"border-info-primary border-l-[6px]":"border-lines-primary hover:border-info-tertiary",o.tabItem),onClick:()=>M(e),role:"button","aria-selected":l===e,children:[r(y,{className:i("scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",l===e?"text-info-primary":"text-info-tertiary hidden"),html:t.description})]})]},e))})}),r("div",{className:i("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",o.mediaWrapper),children:v&&r(I,{...V(v.media),className:i("scene-switcher-media","rounded-box size-full h-full overflow-visible object-cover",o.media)})})]})]})});C.displayName="MediaSceneSwitcherV2";var ee=Y(C);export{ee as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/MediaSceneSwitcherV2/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaSceneSwitcherV2/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/index.js'\nimport Picture from '../../components/picture.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nexport type MediaSceneSwitcherV2SemanticName =\n  | 'root'\n  | 'header'\n  | 'title'\n  | 'subtitle'\n  | 'container'\n  | 'tabList'\n  | 'tabItem'\n  | 'tabTitle'\n  | 'tabDescription'\n  | 'mediaWrapper'\n  | 'media'\n  | 'swiper'\n  | 'slide'\n  | 'slideMedia'\n  | 'slideContent'\n\n/**\n * \u573A\u666F\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Item {\n  /** \u573A\u666F\u6807\u9898 */\n  title: string\n  /** \u573A\u666F\u63CF\u8FF0 */\n  description?: string\n  /** \u573A\u666F\u5A92\u4F53\uFF08\u56FE\u7247/\u89C6\u9891\uFF09 */\n  media: {\n    mobile?: Media\n    tablet?: Media\n    laptop?: Media\n    desktop?: Media\n    lgDesktop?: Media\n  }\n}\n\n/**\n * \u5E03\u5C40\u6A21\u5F0F\n * - left: \u5DE6\u6587\u53F3\u56FE\uFF08laptop+ \u9ED8\u8BA4\uFF09\n * - right: \u5DE6\u56FE\u53F3\u6587\n * - top: \u4E0A\u56FE\u4E0B\u6587\uFF08swiper \u5361\u7247\u6A21\u5F0F\uFF09\n */\nexport type MediaSceneSwitcherV2Layout = 'left' | 'right' | 'top'\n\n/**\n * MediaSceneSwitcherV2 \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Data {\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** \u526F\u6807\u9898 */\n  subtitle?: string\n  /** \u573A\u666F\u5217\u8868 */\n  items: MediaSceneSwitcherV2Item[]\n  /** \u9ED8\u8BA4\u9009\u4E2D\u7684\u573A\u666F\u7D22\u5F15 */\n  defaultActiveIndex?: number\n  /** \u5E03\u5C40\u6A21\u5F0F\uFF0C\u9ED8\u8BA4 text-left */\n  layout?: MediaSceneSwitcherV2Layout\n  /** \u662F\u5426\u5F00\u542F\u81EA\u52A8\u8F6E\u64AD\uFF0C\u9ED8\u8BA4 true */\n  autoplay?: boolean\n  /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C\u9ED8\u8BA4 3000 */\n  autoplayDelay?: number\n}\n\nexport interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: MediaSceneSwitcherV2Data\n  /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n  classNames?: Partial<Record<MediaSceneSwitcherV2SemanticName, string>>\n  /** \u573A\u666F\u5207\u6362\u56DE\u8C03 */\n  onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u5A92\u4F53\u7C7B\u578B\n */\ntype ResponsiveMedia = MediaSceneSwitcherV2Item['media']\n\n/** \u65AD\u70B9\u914D\u7F6E */\nconst BREAKPOINTS: { key: keyof ResponsiveMedia; width: number }[] = [\n  { key: 'lgDesktop', width: 1920 },\n  { key: 'desktop', width: 1440 },\n  { key: 'laptop', width: 1024 },\n  { key: 'tablet', width: 768 },\n  { key: 'mobile', width: 390 },\n]\n\n/**\n * \u68C0\u67E5\u5F53\u524D\u65AD\u70B9\u7684\u5A92\u4F53\u662F\u5426\u4E3A\u89C6\u9891\n */\nconst isCurrentMediaVideo = (media: ResponsiveMedia, currentBreakpoint: keyof ResponsiveMedia): boolean => {\n  return media[currentBreakpoint]?.mimeType === 'video/mp4'\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u5A92\u4F53\u5BF9\u8C61\u8F6C\u4E3A Picture source \u683C\u5F0F\u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"url1 1920, url2 1440, url3 1024\"\n */\nconst getImageSource = (media: ResponsiveMedia): string => {\n  const sources = BREAKPOINTS.filter(({ key }) => media[key]?.url && media[key]?.mimeType !== 'video/mp4').map(\n    ({ key, width }) => `${media[key]!.url} ${width}`\n  )\n\n  return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6 alt \u6587\u672C\n */\nconst getMediaAlt = (media: ResponsiveMedia, fallback: string): string => {\n  for (const { key } of BREAKPOINTS) {\n    if (media[key]?.alt) return media[key]!.alt\n  }\n  return fallback\n}\n\n/**\n * \u5A92\u4F53\u6E32\u67D3\u7EC4\u4EF6 - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u6839\u636E\u65AD\u70B9\u6E32\u67D3\u5BF9\u5E94\u8D44\u6E90\n */\nconst MediaRenderer: React.FC<{\n  media: ResponsiveMedia\n  alt: string\n  className?: string\n}> = ({ media, alt, className }) => {\n  const isLgDesktop = useMediaQuery({ minWidth: 1920 })\n  const isDesktop = useMediaQuery({ minWidth: 1440, maxWidth: 1919 })\n  const isLaptop = useMediaQuery({ minWidth: 1025, maxWidth: 1439 })\n  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1024 })\n\n  // \u83B7\u53D6\u5F53\u524D\u65AD\u70B9 key\n  const currentBreakpoint = React.useMemo((): keyof ResponsiveMedia => {\n    if (isLgDesktop && media.lgDesktop?.url) return 'lgDesktop'\n    if (isDesktop && media.desktop?.url) return 'desktop'\n    if (isLaptop && media.laptop?.url) return 'laptop'\n    if (isTablet && media.tablet?.url) return 'tablet'\n    if (media.mobile?.url) return 'mobile'\n\n    // fallback: \u8FD4\u56DE\u7B2C\u4E00\u4E2A\u6709\u6548\u7684\u65AD\u70B9\n    for (const { key } of BREAKPOINTS) {\n      if (media[key]?.url) return key\n    }\n    return 'desktop'\n  }, [isLgDesktop, isDesktop, isLaptop, isTablet, media])\n\n  const currentMedia = media[currentBreakpoint]\n\n  if (!currentMedia?.url) return null\n\n  // \u5F53\u524D\u65AD\u70B9\u662F\u89C6\u9891\u5219\u6E32\u67D3\u89C6\u9891\n  if (isCurrentMediaVideo(media, currentBreakpoint)) {\n    return <video src={currentMedia.url} className={className} autoPlay loop muted playsInline />\n  }\n\n  // \u56FE\u7247\uFF1A\u4F7F\u7528 Picture \u7EC4\u4EF6\u7684\u54CD\u5E94\u5F0F\u683C\u5F0F\n  const imageSource = getImageSource(media)\n\n  return (\n    <Picture\n      source={imageSource || currentMedia.url}\n      alt={getMediaAlt(media, alt)}\n      className={className}\n      imgClassName=\"size-full object-cover\"\n    />\n  )\n}\n\n/**\n * MediaSceneSwitcherV2 - \u591A\u573A\u666F\u5207\u6362\u7EC4\u4EF6\n *\n * @description \u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u573A\u666F\u7684\u5207\u6362\u7EC4\u4EF6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\uFF1A\n * - mobile/tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40\n * - laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40\n */\nconst DEFAULT_AUTOPLAY_DELAY = 3000\n\nconst MediaSceneSwitcherV2 = React.forwardRef<HTMLDivElement, MediaSceneSwitcherV2Props>(\n  ({ className, classNames = {}, data, onSceneChange, ...props }, ref) => {\n    const {\n      title,\n      subtitle,\n      items: scenes,\n      defaultActiveIndex = 0,\n      layout = 'left',\n      autoplay = true,\n      autoplayDelay = DEFAULT_AUTOPLAY_DELAY,\n    } = data\n    const [activeIndex, setActiveIndex] = React.useState(defaultActiveIndex)\n    const swiperRef = React.useRef<SwiperType | null>(null)\n    const intervalRef = React.useRef<number>(0)\n    const tabRefs = React.useRef<(HTMLDivElement | null)[]>([])\n\n    // \u5224\u65AD\u662F\u5426\u662F\u684C\u9762\u7AEF\n    const isLaptopOrLarger = useMediaQuery({ minWidth: 1025 })\n\n    // \u684C\u9762\u7AEF\u81EA\u52A8\u8F6E\u64AD\uFF08\u53EA\u5728 laptop+ \u751F\u6548\uFF0C\u624B\u673A\u7AEF\u7531 Swiper \u7684 onSlideChange \u540C\u6B65\uFF09\n    React.useEffect(() => {\n      if (!autoplay || scenes.length <= 1 || !isLaptopOrLarger) return\n\n      const startAutoplay = () => {\n        intervalRef.current = window.setInterval(() => {\n          setActiveIndex(prev => (prev + 1) % scenes.length)\n        }, autoplayDelay)\n      }\n\n      startAutoplay()\n\n      return () => {\n        if (intervalRef.current) {\n          window.clearInterval(intervalRef.current)\n        }\n      }\n    }, [autoplay, autoplayDelay, scenes.length, isLaptopOrLarger])\n\n    // \u5F53 activeIndex \u53D8\u5316\u65F6\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\uFF08\u4EC5\u5F53\u7236\u5BB9\u5668\u53EF\u6EDA\u52A8\u65F6\uFF09\n    React.useEffect(() => {\n      if (!isLaptopOrLarger || !tabRefs.current[activeIndex]) return\n\n      const tabElement = tabRefs.current[activeIndex]\n      const parentContainer = tabElement?.parentElement\n\n      // \u68C0\u67E5\u7236\u5BB9\u5668\u662F\u5426\u53EF\u6EDA\u52A8\n      if (!parentContainer || parentContainer.scrollHeight <= parentContainer.clientHeight) return\n\n      // \u4F7F\u7528 requestAnimationFrame \u907F\u514D\u963B\u585E\u4E3B\u7EBF\u7A0B\n      const rafId = requestAnimationFrame(() => {\n        const containerRect = parentContainer.getBoundingClientRect()\n        const tabRect = tabElement.getBoundingClientRect()\n\n        // \u68C0\u67E5\u5143\u7D20\u662F\u5426\u5DF2\u5728\u53EF\u89C6\u533A\u57DF\u5185\n        const isVisible = tabRect.top >= containerRect.top && tabRect.bottom <= containerRect.bottom\n\n        // \u5982\u679C\u5DF2\u7ECF\u53EF\u89C1\uFF0C\u4E0D\u9700\u8981\u6EDA\u52A8\n        if (isVisible) return\n\n        // \u8BA1\u7B97\u6EDA\u52A8\u8DDD\u79BB\uFF0C\u8BA9 tab \u5C3D\u91CF\u5C45\u4E2D\u663E\u793A\n        const scrollOffset = tabRect.top - containerRect.top - parentContainer.clientHeight / 2 + tabRect.height / 2\n\n        parentContainer.scrollTo({\n          top: parentContainer.scrollTop + scrollOffset,\n          behavior: 'smooth',\n        })\n      })\n\n      return () => cancelAnimationFrame(rafId)\n    }, [activeIndex, isLaptopOrLarger])\n\n    const handleSceneClick = React.useCallback(\n      (index: number) => {\n        setActiveIndex(index)\n        onSceneChange?.(index, scenes[index])\n        // \u540C\u6B65 swiper \u4F4D\u7F6E\n        swiperRef.current?.slideTo(index)\n\n        // \u91CD\u7F6E\u81EA\u52A8\u8F6E\u64AD\u8BA1\u65F6\u5668\n        if (autoplay && scenes.length > 1) {\n          if (intervalRef.current) {\n            window.clearInterval(intervalRef.current)\n          }\n          intervalRef.current = window.setInterval(() => {\n            setActiveIndex(prev => (prev + 1) % scenes.length)\n          }, autoplayDelay)\n        }\n      },\n      [scenes, onSceneChange, autoplay, autoplayDelay]\n    )\n\n    const handleSlideChange = React.useCallback(\n      (swiper: SwiperType) => {\n        // \u4F7F\u7528 realIndex \u4EE5\u6B63\u786E\u5904\u7406 loop \u6A21\u5F0F\n        const index = swiper.realIndex\n        setActiveIndex(index)\n        onSceneChange?.(index, scenes[index])\n      },\n      [scenes, onSceneChange]\n    )\n\n    const activeScene = scenes[activeIndex]\n\n    const isMediaTop = layout === 'top'\n\n    return (\n      <div\n        ref={ref}\n        className={cn('scene-switcher-root', 'text-info-primary w-full', className, classNames.root, {\n          'aiui-dark': data.theme === 'dark',\n        })}\n        {...props}\n      >\n        {/* \u6807\u9898\u533A\u57DF */}\n        {(title || subtitle) && (\n          <div className={cn('scene-switcher-header mb-6', classNames.header)}>\n            {title && (\n              <Heading as=\"h2\" size={4} html={title} className={cn('scene-switcher-title', classNames.title)} />\n            )}\n            {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n          </div>\n        )}\n        {/* Mobile/Tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40 */}\n        <div className={cn('scene-switcher-swiper', 'laptop:hidden !overflow-visible', classNames.swiper)}>\n          <Swiper\n            modules={[FreeMode, Mousewheel, Autoplay]}\n            onSwiper={swiper => {\n              swiperRef.current = swiper\n            }}\n            className=\"!overflow-visible\"\n            onSlideChange={handleSlideChange}\n            slidesPerView=\"auto\"\n            spaceBetween={12}\n            freeMode={true}\n            mousewheel={{ forceToAxis: true }}\n            initialSlide={defaultActiveIndex}\n            loop={autoplay && scenes.length > 1}\n            autoplay={autoplay && scenes.length > 1 ? { delay: autoplayDelay, disableOnInteraction: false } : false}\n            breakpoints={{\n              768: { spaceBetween: 16 },\n            }}\n          >\n            {scenes.map((scene, index) => (\n              <SwiperSlide key={index} className=\"h-[462px] !w-[296px]\">\n                <div\n                  className={cn('scene-switcher-slide', 'flex cursor-pointer flex-col', classNames.slide)}\n                  onClick={() => handleSceneClick(index)}\n                >\n                  {/* \u5A92\u4F53 */}\n                  <div\n                    className={cn(\n                      'scene-switcher-slide-media',\n                      'rounded-box relative aspect-[296/320] w-full overflow-hidden',\n                      classNames.slideMedia\n                    )}\n                  >\n                    <MediaRenderer\n                      media={scene.media}\n                      alt={scene.title}\n                      className=\"rounded-t-box size-full overflow-hidden object-cover\"\n                    />\n                  </div>\n                  {/* \u6587\u5B57\u5185\u5BB9 */}\n                  <div\n                    className={cn(\n                      'scene-switcher-slide-content',\n                      ' mt-6  border-t pt-4',\n                      activeIndex === index ? 'border-info-primary border-t-4' : 'border-lines-primary',\n                      classNames.slideContent\n                    )}\n                  >\n                    <Heading\n                      className={cn(\n                        'scene-switcher-tab-title ',\n                        activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                        scene.title\n                      )}\n                      size={3}\n                      as={'h3'}\n                      html={scene.title}\n                    />\n                    {scene.description && (\n                      <Text\n                        className={cn(\n                          'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2  text-[14px]',\n                          activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n                        )}\n                        html={scene.description}\n                      />\n                    )}\n                  </div>\n                </div>\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n\n        {/* Laptop+: media-top \u5E03\u5C40 (\u4E0A\u56FE\u4E0B\u6587) */}\n        {isMediaTop && (\n          <div\n            className={cn(\n              'scene-switcher-container',\n              'laptop:flex laptop:flex-col hidden',\n              'laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]',\n              classNames.container\n            )}\n          >\n            {/* \u5A92\u4F53\u533A\u57DF - \u663E\u793A\u5F53\u524D\u9009\u4E2D */}\n            <div\n              className={cn(\n                'scene-switcher-media-wrapper',\n                'rounded-box flex-1 overflow-hidden',\n                classNames.mediaWrapper\n              )}\n            >\n              {activeScene && (\n                <MediaRenderer\n                  media={activeScene.media}\n                  alt={activeScene.title}\n                  className={cn('scene-switcher-media', 'rounded-box size-full object-cover', classNames.media)}\n                />\n              )}\n            </div>\n\n            {/* Tab \u5217\u8868 - \u6A2A\u5411\u6392\u5217 */}\n            <div\n              className={cn(\n                'scene-switcher-tab-list',\n                'border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t',\n                classNames.tabList\n              )}\n            >\n              {scenes.map((scene, index) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  className={cn(\n                    'scene-switcher-tab-item',\n                    'desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors',\n                    activeIndex === index\n                      ? 'border-info-primary border-t-4'\n                      : 'hover:border-lines-primary border-transparent',\n                    classNames.tabItem\n                  )}\n                  onClick={() => handleSceneClick(index)}\n                  role=\"button\"\n                  aria-selected={activeIndex === index}\n                >\n                  <Heading\n                    className={cn(\n                      'scene-switcher-tab-title line-clamp-2',\n                      activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                      scene.title\n                    )}\n                    size={3}\n                    as={'h3'}\n                    html={scene.title}\n                  />\n                  {scene.description && (\n                    <Text\n                      className={cn(\n                        'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n                        activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n                      )}\n                      html={scene.description}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n\n        {/* Laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40 */}\n        {!isMediaTop && (\n          <div\n            className={cn(\n              'scene-switcher-container',\n              'laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden',\n              'laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]',\n              layout === 'right' && 'flex-row-reverse',\n              classNames.container\n            )}\n          >\n            {/* Tab \u5217\u8868 - \u5916\u5C42\u5C45\u4E2D */}\n            <div\n              className={cn(\n                'scene-switcher-tab-list',\n                'laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center',\n                classNames.tabList\n              )}\n            >\n              {/* \u5185\u5C42\u6EDA\u52A8 */}\n              <div className=\"flex max-h-full w-full flex-col overflow-y-auto\">\n                {scenes.map((scene, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"border-lines-primary h-8 shrink-0 border-l-4\" />}\n                    <div\n                      ref={el => {\n                        tabRefs.current[index] = el\n                      }}\n                      className={cn(\n                        'scene-switcher-tab-item',\n                        'shrink-0 cursor-pointer border-l-4 pl-5',\n                        activeIndex === index\n                          ? 'border-info-primary border-l-[6px]'\n                          : 'border-lines-primary hover:border-info-tertiary',\n                        classNames.tabItem\n                      )}\n                      onClick={() => handleSceneClick(index)}\n                      role=\"button\"\n                      aria-selected={activeIndex === index}\n                    >\n                      <Heading\n                        className={cn(\n                          'scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2',\n                          activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                          scene.title\n                        )}\n                        size={3}\n                        as={'h3'}\n                        html={scene.title}\n                      />\n                      {scene.description && (\n                        <Text\n                          className={cn(\n                            'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n                            activeIndex === index ? 'text-info-primary' : 'text-info-tertiary hidden'\n                          )}\n                          html={scene.description}\n                        />\n                      )}\n                    </div>\n                  </React.Fragment>\n                ))}\n              </div>\n            </div>\n\n            {/* \u5A92\u4F53\u533A\u57DF */}\n            <div\n              className={cn(\n                'scene-switcher-media-wrapper',\n                'rounded-box flex-1 overflow-hidden',\n                classNames.mediaWrapper\n              )}\n            >\n              {activeScene && (\n                <MediaRenderer\n                  media={activeScene.media}\n                  alt={activeScene.title}\n                  className={cn(\n                    'scene-switcher-media',\n                    'rounded-box size-full h-full overflow-visible object-cover',\n                    classNames.media\n                  )}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nMediaSceneSwitcherV2.displayName = 'MediaSceneSwitcherV2'\nexport default withLayout(MediaSceneSwitcherV2)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "Swiper", "SwiperSlide", "FreeMode", "Mousewheel", "Autoplay", "useMediaQuery", "cn", "Picture", "Heading", "Text", "withLayout", "BREAKPOINTS", "isCurrentMediaVideo", "media", "currentBreakpoint", "getImageSource", "key", "width", "getMediaAlt", "fallback", "MediaRenderer", "alt", "className", "isLgDesktop", "isDesktop", "isLaptop", "isTablet", "currentMedia", "imageSource", "DEFAULT_AUTOPLAY_DELAY", "MediaSceneSwitcherV2", "classNames", "data", "onSceneChange", "props", "ref", "title", "subtitle", "scenes", "defaultActiveIndex", "layout", "autoplay", "autoplayDelay", "activeIndex", "setActiveIndex", "swiperRef", "intervalRef", "tabRefs", "isLaptopOrLarger", "prev", "tabElement", "parentContainer", "rafId", "containerRect", "tabRect", "scrollOffset", "handleSceneClick", "index", "handleSlideChange", "swiper", "activeScene", "isMediaTop", "scene", "el", "MediaSceneSwitcherV2_default"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Media from '../Media/index.js'\n\nexport type MediaSceneSwitcherV2SemanticName =\n  | 'root'\n  | 'header'\n  | 'title'\n  | 'subtitle'\n  | 'container'\n  | 'tabList'\n  | 'tabItem'\n  | 'tabTitle'\n  | 'tabDescription'\n  | 'mediaWrapper'\n  | 'media'\n  | 'swiper'\n  | 'slide'\n  | 'slideMedia'\n  | 'slideContent'\n\n/**\n * \u573A\u666F\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Item {\n  /** \u573A\u666F\u6807\u9898 */\n  title: string\n  /** \u573A\u666F\u63CF\u8FF0 */\n  description?: string\n  /** \u573A\u666F\u5A92\u4F53\uFF08\u56FE\u7247/\u89C6\u9891\uFF09 */\n  media: {\n    mobile?: MediaType\n    tablet?: MediaType\n    laptop?: MediaType\n    desktop?: MediaType\n    lgDesktop?: MediaType\n  }\n}\n\n/**\n * \u5E03\u5C40\u6A21\u5F0F\n * - left: \u5DE6\u6587\u53F3\u56FE\uFF08laptop+ \u9ED8\u8BA4\uFF09\n * - right: \u5DE6\u56FE\u53F3\u6587\n * - top: \u4E0A\u56FE\u4E0B\u6587\uFF08swiper \u5361\u7247\u6A21\u5F0F\uFF09\n */\nexport type MediaSceneSwitcherV2Layout = 'left' | 'right' | 'top'\n\n/**\n * MediaSceneSwitcherV2 \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Data {\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** \u526F\u6807\u9898 */\n  subtitle?: string\n  /** \u573A\u666F\u5217\u8868 */\n  items: MediaSceneSwitcherV2Item[]\n  /** \u9ED8\u8BA4\u9009\u4E2D\u7684\u573A\u666F\u7D22\u5F15 */\n  defaultActiveIndex?: number\n  /** \u5E03\u5C40\u6A21\u5F0F\uFF0C\u9ED8\u8BA4 text-left */\n  layout?: MediaSceneSwitcherV2Layout\n  /** \u662F\u5426\u5F00\u542F\u81EA\u52A8\u8F6E\u64AD\uFF0C\u9ED8\u8BA4 true */\n  autoplay?: boolean\n  /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C\u9ED8\u8BA4 3000 */\n  autoplayDelay?: number\n}\n\nexport interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: MediaSceneSwitcherV2Data\n  /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n  classNames?: Partial<Record<MediaSceneSwitcherV2SemanticName, string>>\n  /** \u573A\u666F\u5207\u6362\u56DE\u8C03 */\n  onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void\n}\n\nconst toMediaProps = (media: MediaSceneSwitcherV2Item['media']) => ({\n  pcImage: media.lgDesktop,\n  desktopImage: media.desktop,\n  laptopImage: media.laptop,\n  padImage: media.tablet,\n  mobileImage: media.mobile,\n})\n\n/**\n * MediaSceneSwitcherV2 - \u591A\u573A\u666F\u5207\u6362\u7EC4\u4EF6\n *\n * @description \u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u573A\u666F\u7684\u5207\u6362\u7EC4\u4EF6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\uFF1A\n * - mobile/tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40\n * - laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40\n */\nconst DEFAULT_AUTOPLAY_DELAY = 3000\n\nconst MediaSceneSwitcherV2 = React.forwardRef<HTMLDivElement, MediaSceneSwitcherV2Props>(\n  ({ className, classNames = {}, data, onSceneChange, ...props }, ref) => {\n    const {\n      title,\n      subtitle,\n      items: scenes,\n      defaultActiveIndex = 0,\n      layout = 'left',\n      autoplay = true,\n      autoplayDelay = DEFAULT_AUTOPLAY_DELAY,\n    } = data\n    const [activeIndex, setActiveIndex] = React.useState(defaultActiveIndex)\n    const swiperRef = React.useRef<SwiperType | null>(null)\n    const intervalRef = React.useRef<number>(0)\n    const tabRefs = React.useRef<(HTMLDivElement | null)[]>([])\n\n    // \u5224\u65AD\u662F\u5426\u662F\u684C\u9762\u7AEF\n    const isLaptopOrLarger = useMediaQuery({ minWidth: 1025 })\n\n    // \u684C\u9762\u7AEF\u81EA\u52A8\u8F6E\u64AD\uFF08\u53EA\u5728 laptop+ \u751F\u6548\uFF0C\u624B\u673A\u7AEF\u7531 Swiper \u7684 onSlideChange \u540C\u6B65\uFF09\n    React.useEffect(() => {\n      if (!autoplay || scenes.length <= 1 || !isLaptopOrLarger) return\n\n      const startAutoplay = () => {\n        intervalRef.current = window.setInterval(() => {\n          setActiveIndex(prev => (prev + 1) % scenes.length)\n        }, autoplayDelay)\n      }\n\n      startAutoplay()\n\n      return () => {\n        if (intervalRef.current) {\n          window.clearInterval(intervalRef.current)\n        }\n      }\n    }, [autoplay, autoplayDelay, scenes.length, isLaptopOrLarger])\n\n    // \u5F53 activeIndex \u53D8\u5316\u65F6\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\uFF08\u4EC5\u5F53\u7236\u5BB9\u5668\u53EF\u6EDA\u52A8\u65F6\uFF09\n    React.useEffect(() => {\n      if (!isLaptopOrLarger || !tabRefs.current[activeIndex]) return\n\n      const tabElement = tabRefs.current[activeIndex]\n      const parentContainer = tabElement?.parentElement\n\n      // \u68C0\u67E5\u7236\u5BB9\u5668\u662F\u5426\u53EF\u6EDA\u52A8\n      if (!parentContainer || parentContainer.scrollHeight <= parentContainer.clientHeight) return\n\n      // \u4F7F\u7528 requestAnimationFrame \u907F\u514D\u963B\u585E\u4E3B\u7EBF\u7A0B\n      const rafId = requestAnimationFrame(() => {\n        const containerRect = parentContainer.getBoundingClientRect()\n        const tabRect = tabElement.getBoundingClientRect()\n\n        // \u68C0\u67E5\u5143\u7D20\u662F\u5426\u5DF2\u5728\u53EF\u89C6\u533A\u57DF\u5185\n        const isVisible = tabRect.top >= containerRect.top && tabRect.bottom <= containerRect.bottom\n\n        // \u5982\u679C\u5DF2\u7ECF\u53EF\u89C1\uFF0C\u4E0D\u9700\u8981\u6EDA\u52A8\n        if (isVisible) return\n\n        // \u8BA1\u7B97\u6EDA\u52A8\u8DDD\u79BB\uFF0C\u8BA9 tab \u5C3D\u91CF\u5C45\u4E2D\u663E\u793A\n        const scrollOffset = tabRect.top - containerRect.top - parentContainer.clientHeight / 2 + tabRect.height / 2\n\n        parentContainer.scrollTo({\n          top: parentContainer.scrollTop + scrollOffset,\n          behavior: 'smooth',\n        })\n      })\n\n      return () => cancelAnimationFrame(rafId)\n    }, [activeIndex, isLaptopOrLarger])\n\n    const handleSceneClick = React.useCallback(\n      (index: number) => {\n        setActiveIndex(index)\n        onSceneChange?.(index, scenes[index])\n        // \u540C\u6B65 swiper \u4F4D\u7F6E\n        swiperRef.current?.slideTo(index)\n\n        // \u91CD\u7F6E\u81EA\u52A8\u8F6E\u64AD\u8BA1\u65F6\u5668\n        if (autoplay && scenes.length > 1) {\n          if (intervalRef.current) {\n            window.clearInterval(intervalRef.current)\n          }\n          intervalRef.current = window.setInterval(() => {\n            setActiveIndex(prev => (prev + 1) % scenes.length)\n          }, autoplayDelay)\n        }\n      },\n      [scenes, onSceneChange, autoplay, autoplayDelay]\n    )\n\n    const handleSlideChange = React.useCallback(\n      (swiper: SwiperType) => {\n        // \u4F7F\u7528 realIndex \u4EE5\u6B63\u786E\u5904\u7406 loop \u6A21\u5F0F\n        const index = swiper.realIndex\n        setActiveIndex(index)\n        onSceneChange?.(index, scenes[index])\n      },\n      [scenes, onSceneChange]\n    )\n\n    const activeScene = scenes[activeIndex]\n\n    const isMediaTop = layout === 'top'\n\n    return (\n      <div\n        ref={ref}\n        className={cn('scene-switcher-root', 'text-info-primary w-full', className, classNames.root, {\n          'aiui-dark': data.theme === 'dark',\n        })}\n        {...props}\n      >\n        {/* \u6807\u9898\u533A\u57DF */}\n        {(title || subtitle) && (\n          <div className={cn('scene-switcher-header mb-6', classNames.header)}>\n            {title && (\n              <Heading as=\"h2\" size={4} html={title} className={cn('scene-switcher-title', classNames.title)} />\n            )}\n            {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n          </div>\n        )}\n        {/* Mobile/Tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40 */}\n        <div className={cn('scene-switcher-swiper', 'laptop:hidden !overflow-visible', classNames.swiper)}>\n          <Swiper\n            modules={[FreeMode, Mousewheel, Autoplay]}\n            onSwiper={swiper => {\n              swiperRef.current = swiper\n            }}\n            className=\"!overflow-visible\"\n            onSlideChange={handleSlideChange}\n            slidesPerView=\"auto\"\n            spaceBetween={12}\n            freeMode={true}\n            mousewheel={{ forceToAxis: true }}\n            initialSlide={defaultActiveIndex}\n            loop={autoplay && scenes.length > 1}\n            autoplay={autoplay && scenes.length > 1 ? { delay: autoplayDelay, disableOnInteraction: false } : false}\n            breakpoints={{\n              768: { spaceBetween: 16 },\n            }}\n          >\n            {scenes.map((scene, index) => (\n              <SwiperSlide key={index} className=\"h-[462px] !w-[296px]\">\n                <div\n                  className={cn('scene-switcher-slide', 'flex cursor-pointer flex-col', classNames.slide)}\n                  onClick={() => handleSceneClick(index)}\n                >\n                  {/* \u5A92\u4F53 */}\n                  <div\n                    className={cn(\n                      'scene-switcher-slide-media',\n                      'rounded-box relative aspect-[296/320] w-full overflow-hidden',\n                      classNames.slideMedia\n                    )}\n                  >\n                    <Media\n                      {...toMediaProps(scene.media)}\n                      className=\"rounded-t-box size-full overflow-hidden object-cover\"\n                    />\n                  </div>\n                  {/* \u6587\u5B57\u5185\u5BB9 */}\n                  <div\n                    className={cn(\n                      'scene-switcher-slide-content',\n                      ' mt-6  border-t pt-4',\n                      activeIndex === index ? 'border-info-primary border-t-4' : 'border-lines-primary',\n                      classNames.slideContent\n                    )}\n                  >\n                    <Heading\n                      className={cn(\n                        'scene-switcher-tab-title ',\n                        activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                        scene.title\n                      )}\n                      size={3}\n                      as={'h3'}\n                      html={scene.title}\n                    />\n                    {scene.description && (\n                      <Text\n                        className={cn(\n                          'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2  text-[14px]',\n                          activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n                        )}\n                        html={scene.description}\n                      />\n                    )}\n                  </div>\n                </div>\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n\n        {/* Laptop+: media-top \u5E03\u5C40 (\u4E0A\u56FE\u4E0B\u6587) */}\n        {isMediaTop && (\n          <div\n            className={cn(\n              'scene-switcher-container',\n              'laptop:flex laptop:flex-col hidden',\n              'laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]',\n              classNames.container\n            )}\n          >\n            {/* \u5A92\u4F53\u533A\u57DF - \u663E\u793A\u5F53\u524D\u9009\u4E2D */}\n            <div\n              className={cn(\n                'scene-switcher-media-wrapper',\n                'rounded-box flex-1 overflow-hidden',\n                classNames.mediaWrapper\n              )}\n            >\n              {activeScene && (\n                <Media\n                  {...toMediaProps(activeScene.media)}\n                  className={cn('scene-switcher-media', 'rounded-box size-full object-cover', classNames.media)}\n                />\n              )}\n            </div>\n\n            {/* Tab \u5217\u8868 - \u6A2A\u5411\u6392\u5217 */}\n            <div\n              className={cn(\n                'scene-switcher-tab-list',\n                'border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t',\n                classNames.tabList\n              )}\n            >\n              {scenes.map((scene, index) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  className={cn(\n                    'scene-switcher-tab-item',\n                    'desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors',\n                    activeIndex === index\n                      ? 'border-info-primary border-t-4'\n                      : 'hover:border-lines-primary border-transparent',\n                    classNames.tabItem\n                  )}\n                  onClick={() => handleSceneClick(index)}\n                  role=\"button\"\n                  aria-selected={activeIndex === index}\n                >\n                  <Heading\n                    className={cn(\n                      'scene-switcher-tab-title line-clamp-2',\n                      activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                      scene.title\n                    )}\n                    size={3}\n                    as={'h3'}\n                    html={scene.title}\n                  />\n                  {scene.description && (\n                    <Text\n                      className={cn(\n                        'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n                        activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n                      )}\n                      html={scene.description}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n\n        {/* Laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40 */}\n        {!isMediaTop && (\n          <div\n            className={cn(\n              'scene-switcher-container',\n              'laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden',\n              'laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]',\n              layout === 'right' && 'flex-row-reverse',\n              classNames.container\n            )}\n          >\n            {/* Tab \u5217\u8868 - \u5916\u5C42\u5C45\u4E2D */}\n            <div\n              className={cn(\n                'scene-switcher-tab-list',\n                'laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center',\n                classNames.tabList\n              )}\n            >\n              {/* \u5185\u5C42\u6EDA\u52A8 */}\n              <div className=\"flex max-h-full w-full flex-col overflow-y-auto\">\n                {scenes.map((scene, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"border-lines-primary h-8 shrink-0 border-l-4\" />}\n                    <div\n                      ref={el => {\n                        tabRefs.current[index] = el\n                      }}\n                      className={cn(\n                        'scene-switcher-tab-item',\n                        'shrink-0 cursor-pointer border-l-4 pl-5',\n                        activeIndex === index\n                          ? 'border-info-primary border-l-[6px]'\n                          : 'border-lines-primary hover:border-info-tertiary',\n                        classNames.tabItem\n                      )}\n                      onClick={() => handleSceneClick(index)}\n                      role=\"button\"\n                      aria-selected={activeIndex === index}\n                    >\n                      <Heading\n                        className={cn(\n                          'scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2',\n                          activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                          scene.title\n                        )}\n                        size={3}\n                        as={'h3'}\n                        html={scene.title}\n                      />\n                      {scene.description && (\n                        <Text\n                          className={cn(\n                            'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n                            activeIndex === index ? 'text-info-primary' : 'text-info-tertiary hidden'\n                          )}\n                          html={scene.description}\n                        />\n                      )}\n                    </div>\n                  </React.Fragment>\n                ))}\n              </div>\n            </div>\n\n            {/* \u5A92\u4F53\u533A\u57DF */}\n            <div\n              className={cn(\n                'scene-switcher-media-wrapper',\n                'rounded-box flex-1 overflow-hidden',\n                classNames.mediaWrapper\n              )}\n            >\n              {activeScene && (\n                <Media\n                  {...toMediaProps(activeScene.media)}\n                  className={cn(\n                    'scene-switcher-media',\n                    'rounded-box size-full h-full overflow-visible object-cover',\n                    classNames.media\n                  )}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nMediaSceneSwitcherV2.displayName = 'MediaSceneSwitcherV2'\nexport default withLayout(MediaSceneSwitcherV2)\n"],
+  "mappings": "aA2NU,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAzNV,UAAYC,MAAW,QACvB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,YAAAC,EAAU,cAAAC,EAAY,YAAAC,MAAgB,iBAE/C,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,MAAAC,MAAU,yBAEnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAW,oBA4ElB,MAAMC,EAAgBC,IAA8C,CAClE,QAASA,EAAM,UACf,aAAcA,EAAM,QACpB,YAAaA,EAAM,OACnB,SAAUA,EAAM,OAChB,YAAaA,EAAM,MACrB,GASMC,EAAyB,IAEzBC,EAAuBf,EAAM,WACjC,CAAC,CAAE,UAAAgB,EAAW,WAAAC,EAAa,CAAC,EAAG,KAAAC,EAAM,cAAAC,EAAe,GAAGC,CAAM,EAAGC,IAAQ,CACtE,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,MAAOC,EACP,mBAAAC,EAAqB,EACrB,OAAAC,EAAS,OACT,SAAAC,EAAW,GACX,cAAAC,EAAgBd,CAClB,EAAII,EACE,CAACW,EAAaC,CAAc,EAAI9B,EAAM,SAASyB,CAAkB,EACjEM,EAAY/B,EAAM,OAA0B,IAAI,EAChDgC,EAAchC,EAAM,OAAe,CAAC,EACpCiC,EAAUjC,EAAM,OAAkC,CAAC,CAAC,EAGpDkC,EAAmB5B,EAAc,CAAE,SAAU,IAAK,CAAC,EAGzDN,EAAM,UAAU,IACV,CAAC2B,GAAYH,EAAO,QAAU,GAAK,CAACU,EAAkB,SAEpC,IAAM,CAC1BF,EAAY,QAAU,OAAO,YAAY,IAAM,CAC7CF,EAAeK,IAASA,EAAO,GAAKX,EAAO,MAAM,CACnD,EAAGI,CAAa,CAClB,GAEc,EAEP,IAAM,CACPI,EAAY,SACd,OAAO,cAAcA,EAAY,OAAO,CAE5C,GACC,CAACL,EAAUC,EAAeJ,EAAO,OAAQU,CAAgB,CAAC,EAG7DlC,EAAM,UAAU,IAAM,CACpB,GAAI,CAACkC,GAAoB,CAACD,EAAQ,QAAQJ,CAAW,EAAG,OAExD,MAAMO,EAAaH,EAAQ,QAAQJ,CAAW,EACxCQ,EAAkBD,GAAY,cAGpC,GAAI,CAACC,GAAmBA,EAAgB,cAAgBA,EAAgB,aAAc,OAGtF,MAAMC,EAAQ,sBAAsB,IAAM,CACxC,MAAMC,EAAgBF,EAAgB,sBAAsB,EACtDG,EAAUJ,EAAW,sBAAsB,EAMjD,GAHkBI,EAAQ,KAAOD,EAAc,KAAOC,EAAQ,QAAUD,EAAc,OAGvE,OAGf,MAAME,EAAeD,EAAQ,IAAMD,EAAc,IAAMF,EAAgB,aAAe,EAAIG,EAAQ,OAAS,EAE3GH,EAAgB,SAAS,CACvB,IAAKA,EAAgB,UAAYI,EACjC,SAAU,QACZ,CAAC,CACH,CAAC,EAED,MAAO,IAAM,qBAAqBH,CAAK,CACzC,EAAG,CAACT,EAAaK,CAAgB,CAAC,EAElC,MAAMQ,EAAmB1C,EAAM,YAC5B2C,GAAkB,CACjBb,EAAea,CAAK,EACpBxB,IAAgBwB,EAAOnB,EAAOmB,CAAK,CAAC,EAEpCZ,EAAU,SAAS,QAAQY,CAAK,EAG5BhB,GAAYH,EAAO,OAAS,IAC1BQ,EAAY,SACd,OAAO,cAAcA,EAAY,OAAO,EAE1CA,EAAY,QAAU,OAAO,YAAY,IAAM,CAC7CF,EAAeK,IAASA,EAAO,GAAKX,EAAO,MAAM,CACnD,EAAGI,CAAa,EAEpB,EACA,CAACJ,EAAQL,EAAeQ,EAAUC,CAAa,CACjD,EAEMgB,EAAoB5C,EAAM,YAC7B6C,GAAuB,CAEtB,MAAMF,EAAQE,EAAO,UACrBf,EAAea,CAAK,EACpBxB,IAAgBwB,EAAOnB,EAAOmB,CAAK,CAAC,CACtC,EACA,CAACnB,EAAQL,CAAa,CACxB,EAEM2B,EAActB,EAAOK,CAAW,EAEhCkB,EAAarB,IAAW,MAE9B,OACE3B,EAAC,OACC,IAAKsB,EACL,UAAWd,EAAG,sBAAuB,2BAA4BS,EAAWC,EAAW,KAAM,CAC3F,YAAaC,EAAK,QAAU,MAC9B,CAAC,EACA,GAAGE,EAGF,WAAAE,GAASC,IACTxB,EAAC,OAAI,UAAWQ,EAAG,6BAA8BU,EAAW,MAAM,EAC/D,UAAAK,GACCxB,EAACU,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAMc,EAAO,UAAWf,EAAG,uBAAwBU,EAAW,KAAK,EAAG,EAEjGM,GAAYzB,EAACW,EAAA,CAAK,GAAG,IAAI,KAAM,EAAG,UAAWF,EAAG,GAAIU,GAAY,QAAQ,EAAG,KAAMM,EAAU,GAC9F,EAGFzB,EAAC,OAAI,UAAWS,EAAG,wBAAyB,kCAAmCU,EAAW,MAAM,EAC9F,SAAAnB,EAACG,EAAA,CACC,QAAS,CAACE,EAAUC,EAAYC,CAAQ,EACxC,SAAUwC,GAAU,CAClBd,EAAU,QAAUc,CACtB,EACA,UAAU,oBACV,cAAeD,EACf,cAAc,OACd,aAAc,GACd,SAAU,GACV,WAAY,CAAE,YAAa,EAAK,EAChC,aAAcnB,EACd,KAAME,GAAYH,EAAO,OAAS,EAClC,SAAUG,GAAYH,EAAO,OAAS,EAAI,CAAE,MAAOI,EAAe,qBAAsB,EAAM,EAAI,GAClG,YAAa,CACX,IAAK,CAAE,aAAc,EAAG,CAC1B,EAEC,SAAAJ,EAAO,IAAI,CAACwB,EAAOL,IAClB7C,EAACI,EAAA,CAAwB,UAAU,uBACjC,SAAAH,EAAC,OACC,UAAWQ,EAAG,uBAAwB,+BAAgCU,EAAW,KAAK,EACtF,QAAS,IAAMyB,EAAiBC,CAAK,EAGrC,UAAA7C,EAAC,OACC,UAAWS,EACT,6BACA,+DACAU,EAAW,UACb,EAEA,SAAAnB,EAACa,EAAA,CACE,GAAGC,EAAaoC,EAAM,KAAK,EAC5B,UAAU,uDACZ,EACF,EAEAjD,EAAC,OACC,UAAWQ,EACT,+BACA,uBACAsB,IAAgBc,EAAQ,iCAAmC,uBAC3D1B,EAAW,YACb,EAEA,UAAAnB,EAACU,EAAA,CACC,UAAWD,EACT,4BACAsB,IAAgBc,EAAQ,oBAAsB,qBAC9CK,EAAM,KACR,EACA,KAAM,EACN,GAAI,KACJ,KAAMA,EAAM,MACd,EACCA,EAAM,aACLlD,EAACW,EAAA,CACC,UAAWF,EACT,uEACAsB,IAAgBc,EAAQ,oBAAsB,oBAChD,EACA,KAAMK,EAAM,YACd,GAEJ,GACF,GA/CgBL,CAgDlB,CACD,EACH,EACF,EAGCI,GACChD,EAAC,OACC,UAAWQ,EACT,2BACA,qCACA,wFACAU,EAAW,SACb,EAGA,UAAAnB,EAAC,OACC,UAAWS,EACT,+BACA,qCACAU,EAAW,YACb,EAEC,SAAA6B,GACChD,EAACa,EAAA,CACE,GAAGC,EAAakC,EAAY,KAAK,EAClC,UAAWvC,EAAG,uBAAwB,qCAAsCU,EAAW,KAAK,EAC9F,EAEJ,EAGAnB,EAAC,OACC,UAAWS,EACT,0BACA,iFACAU,EAAW,OACb,EAEC,SAAAO,EAAO,IAAI,CAACwB,EAAOL,IAClB5C,EAAC,OAEC,IAAKkD,GAAM,CACThB,EAAQ,QAAQU,CAAK,EAAIM,CAC3B,EACA,UAAW1C,EACT,0BACA,8EACAsB,IAAgBc,EACZ,iCACA,gDACJ1B,EAAW,OACb,EACA,QAAS,IAAMyB,EAAiBC,CAAK,EACrC,KAAK,SACL,gBAAed,IAAgBc,EAE/B,UAAA7C,EAACU,EAAA,CACC,UAAWD,EACT,wCACAsB,IAAgBc,EAAQ,oBAAsB,qBAC9CK,EAAM,KACR,EACA,KAAM,EACN,GAAI,KACJ,KAAMA,EAAM,MACd,EACCA,EAAM,aACLlD,EAACW,EAAA,CACC,UAAWF,EACT,sEACAsB,IAAgBc,EAAQ,oBAAsB,oBAChD,EACA,KAAMK,EAAM,YACd,IAjCGL,CAmCP,CACD,EACH,GACF,EAID,CAACI,GACAhD,EAAC,OACC,UAAWQ,EACT,2BACA,kEACA,0DACAmB,IAAW,SAAW,mBACtBT,EAAW,SACb,EAGA,UAAAnB,EAAC,OACC,UAAWS,EACT,0BACA,4EACAU,EAAW,OACb,EAGA,SAAAnB,EAAC,OAAI,UAAU,kDACZ,SAAA0B,EAAO,IAAI,CAACwB,EAAOL,IAClB5C,EAACC,EAAM,SAAN,CACE,UAAA2C,EAAQ,GAAK7C,EAAC,OAAI,UAAU,+CAA+C,EAC5EC,EAAC,OACC,IAAKkD,GAAM,CACThB,EAAQ,QAAQU,CAAK,EAAIM,CAC3B,EACA,UAAW1C,EACT,0BACA,0CACAsB,IAAgBc,EACZ,qCACA,kDACJ1B,EAAW,OACb,EACA,QAAS,IAAMyB,EAAiBC,CAAK,EACrC,KAAK,SACL,gBAAed,IAAgBc,EAE/B,UAAA7C,EAACU,EAAA,CACC,UAAWD,EACT,6DACAsB,IAAgBc,EAAQ,oBAAsB,qBAC9CK,EAAM,KACR,EACA,KAAM,EACN,GAAI,KACJ,KAAMA,EAAM,MACd,EACCA,EAAM,aACLlD,EAACW,EAAA,CACC,UAAWF,EACT,sEACAsB,IAAgBc,EAAQ,oBAAsB,2BAChD,EACA,KAAMK,EAAM,YACd,GAEJ,IArCmBL,CAsCrB,CACD,EACH,EACF,EAGA7C,EAAC,OACC,UAAWS,EACT,+BACA,qCACAU,EAAW,YACb,EAEC,SAAA6B,GACChD,EAACa,EAAA,CACE,GAAGC,EAAakC,EAAY,KAAK,EAClC,UAAWvC,EACT,uBACA,6DACAU,EAAW,KACb,EACF,EAEJ,GACF,GAEJ,CAEJ,CACF,EAEAF,EAAqB,YAAc,uBACnC,IAAOmC,GAAQxC,EAAWK,CAAoB",
+  "names": ["jsx", "jsxs", "React", "Swiper", "SwiperSlide", "FreeMode", "Mousewheel", "Autoplay", "useMediaQuery", "cn", "Heading", "Text", "withLayout", "Media", "toMediaProps", "media", "DEFAULT_AUTOPLAY_DELAY", "MediaSceneSwitcherV2", "className", "classNames", "data", "onSceneChange", "props", "ref", "title", "subtitle", "scenes", "defaultActiveIndex", "layout", "autoplay", "autoplayDelay", "activeIndex", "setActiveIndex", "swiperRef", "intervalRef", "tabRefs", "isLaptopOrLarger", "prev", "tabElement", "parentContainer", "rafId", "containerRect", "tabRect", "scrollOffset", "handleSceneClick", "index", "handleSlideChange", "swiper", "activeScene", "isMediaTop", "scene", "el", "MediaSceneSwitcherV2_default"]
 }

package/dist/esm/biz-components/SceneShelfV2/index.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as ce,jsx as t,jsxs as d}from"react/jsx-runtime";import*as a from"react";import{cn as o,getLocalizedPath as $}from"../../helpers/index.js";import{Heading as R,Text as Q,Badge as q,Button as A,Picture as O}from"../../components/index.js";import J from"../Media/index.js";import{Swiper as X,SwiperSlide as Y}from"swiper/react";import{Mousewheel as Z}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import{withLayout as ee}from"../../shared/Styles.js";import{useGridRowCount as te}from"../../hooks/useGridRowCount.js";import{useExposure as ie}from"../../hooks/useExposure.js";import{useViewItemList as oe}from"../../hooks/useViewItemList.js";import{trackUrlRef as ae}from"../../shared/trackUrlRef.js";import{useAiuiContext as G}from"../AiuiProvider/index.js";import{gaTrack as E}from"../../shared/track.js";const ne="shelf",re="scene_shelf_v2",se=()=>t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),le=()=>d("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[t("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),t("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),H=a.memo(({product:e,isShowTag:p=!0,onImageClick:l,onLearnMore:g,onShopNow:w,onAddToCart:S,secondaryButtonText:v,secondaryButtonFun:y,primaryButtonText:x,primaryButtonFun:P,classNames:r,className:n,theme:T,index:s})=>{const{locale:V="us",trackingData:N}=G(),[B,L]=a.useState(!1),[_,M]=a.useState(!1),m=N?.pageGroup,h=a.useCallback(async(c,k)=>{if(!c)return;const C=k==="primary"?L:M;C(!0);try{switch(c){case"buyNow":await w?.(e);break;case"addCart":await S?.(e);break;case"learnMore":await g?.(e?.href??"");break;default:break}}finally{C(!1)}},[g,w,S,e]),z=a.useCallback(()=>h(P,"primary"),[h,P]),I=a.useCallback(()=>h(y,"secondary"),[h,y]),u=a.useCallback(c=>{!e.href&&l&&c.preventDefault(),l?.(e),E({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_2_Products",page_group:m,items:[{item_id:e.sku,item_name:e.custom_name||e.title,item_variant:e.variantId,price:e.currentPrice,index:s}]})},[s,l,m,e]);return d("div",{className:o("scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4",n,r?.productCard,{"bg-container-secondary-0":T==="dark"}),children:[e.href?t("a",{href:$(ae(e.href,m+"_"+ne+"_"+re),V),onClick:u,className:o("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80",r?.productCardImage),"aria-label":`View ${e.title}`,children:t(O,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}):t("div",{className:o("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ",l&&"cursor-pointer transition-opacity hover:opacity-80",r?.productCardImage),onClick:l?u:void 0,role:l?"button":void 0,tabIndex:l?0:void 0,"aria-label":l?`View ${e.title}`:void 0,children:t(O,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}),d("div",{className:"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4",children:[d("div",{className:"flex flex-col gap-2",children:[t("div",{className:o("scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1",r?.productCardTags),children:p&&e?.tags?.map((c,k)=>t(q,{variant:c.variant??"outline",size:"sm",className:"",children:c.label},k))}),t(R,{as:"h3",size:2,className:o("scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 tablet:text-[20px] line-clamp-3 pr-[16%] text-[16px]",r?.productCardTitle),children:e.custom_name||e.title}),(e.custom_description||e.description)&&t(Q,{as:"p",size:1,className:o("scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1",r?.productCardDescription),children:e.custom_description||e.description})]}),d("div",{className:"flex flex-col gap-2",children:[d("div",{className:o("scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1",r?.productCardPriceWrapper),children:[t(R,{as:"h6",size:2,className:o("scene-shelf-v2-product-card-current-price text-info-primary",r?.productCardCurrentPrice),children:e.currentPrice}),e.originalPrice&&t(R,{as:"h6",size:2,className:o("scene-shelf-v2-product-card-original-price text-info-tertiary line-through",r?.productCardOriginalPrice),children:e.originalPrice})]}),(v||x)&&d("div",{className:o("scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2",r?.productCardButtons),children:[v&&t(A,{variant:"secondary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{I(),E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:m||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:v,SKU:e.sku||"",position:s}})},disabled:e.soldOut&&y!=="learnMore",loading:_,children:v}),x&&t(A,{variant:"primary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{z(),E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:m||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:x,SKU:e.sku||"",position:s}})},disabled:e.soldOut&&P!=="learnMore",loading:B,children:x})]})]})]})]})});H.displayName="SceneShelfV2.ProductCard";const U=a.forwardRef(({className:e,classNames:p={},data:l,onPlayClick:g,onImageClick:w,onLearnMore:S,onShopNow:v,onAddToCart:y,...x},P)=>{const{theme:r="light",sceneImage:n,productsTitle:T,products:s,secondaryButtonText:V,secondaryButtonFun:N,primaryButtonText:B,primaryButtonFun:L,viewMoreLimit:_=2,copy:M}=l,m=a.useRef(null),h=a.useRef(null),z=a.useRef(null),[I,u]=a.useState(!1),[c,k]=a.useState(!1),{trackingData:C}=G();ie(h,{componentType:"image",componentName:"scene_shelf_banner"}),oe(z,{componentType:"video",componentName:"scene_shelf_banner",itemListName:"Scene_Shelf_2_Products",items:s.map((i,f)=>({item_id:i.sku??"",item_name:i.title,item_variant:i.variantId??"",price:i.currentPrice,index:f})),tabName:""});const D=te({rows:_??0,mobileCols:2}),F=a.useMemo(()=>[n?.pc,n?.desktop,n?.laptop,n?.pad,n?.mobile].some(i=>i?.mimeType==="video/mp4"),[n]),W=a.useCallback(()=>{const i=m.current;i?i.paused?(i.play(),u(!0),g?.(!0)):(i.pause(),u(!1),g?.(!1)):g?.(!0),E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:C?.pageGroup,component_type:"video",component_name:"scene_shelf_banner",position:1,creative_id:n?.pc?.id}})},[g,n?.pc?.id,C?.pageGroup]);return a.useEffect(()=>{const i=m.current;if(!i||!F)return;const f=new IntersectionObserver(b=>{b.forEach(j=>{j.isIntersecting?i.play().catch(K=>{console.warn("Video autoplay failed:",K)}):i.pause()})},{threshold:.5});return f.observe(i),()=>{f.disconnect()}},[]),d("div",{...x,ref:P,className:o("scene-shelf-v2-root w-full overflow-hidden",{"aiui-dark":r==="dark"},e,p?.root),children:[d("div",{className:o("scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden",p?.media),ref:h,children:[t(J,{pcImage:n?.pc,desktopImage:n?.desktop,laptopImage:n?.laptop,padImage:n?.pad,mobileImage:n?.mobile,className:"size-full",videoClassName:"absolute inset-0 size-full object-cover",videoRef:m,onVideoPlay:()=>u(!0),onVideoPause:()=>u(!1),onVideoEnded:()=>u(!1)}),t("div",{"aria-hidden":"true",className:o("scene-shelf-v2-media-overlay pointer-events-none absolute inset-0",p?.mediaOverlay)}),F&&t("div",{className:"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6",children:t("button",{type:"button","aria-label":I?"Pause video":"Play video",onClick:W,className:o("scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",p?.mediaPlayButton),children:I?t(le,{}):t(se,{})})})]}),d("div",{ref:z,className:o("scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3",p?.products),children:[T&&t(R,{as:"h2",size:3,className:o("scene-shelf-v2-products-title text-info-primary",p?.productsTitle),html:T}),t("div",{className:"tablet:hidden grid grid-cols-2 gap-3",children:(()=>{const i=_!==void 0&&_>0&&s.length>D,f=i&&!c?s.slice(0,D):s;return d(ce,{children:[f.map((b,j)=>t(H,{isShowTag:l.isShowTag??!0,product:b,onImageClick:w,onLearnMore:S,onShopNow:v,onAddToCart:y,secondaryButtonText:V,secondaryButtonFun:N,primaryButtonText:B,primaryButtonFun:L,classNames:p,theme:r,index:j},b.productKey)),i&&t("div",{className:"col-span-2 mt-6 flex justify-center",children:d("button",{type:"button",onClick:()=>k(b=>!b),className:"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors","aria-expanded":c,children:[c?M?.viewLessLabel??"View Less":M?.viewMoreLabel??"View More",t("svg",{className:o("size-4 transition-transform",c&&"rotate-180"),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})})()}),t("div",{className:"tablet:block hidden",children:t("div",{className:"relative",children:t(X,{slidesPerView:"auto",observer:!0,observeParents:!0,modules:[Z],mousewheel:{enabled:!0,forceToAxis:!0,sensitivity:1},className:"!overflow-visible",breakpoints:{768:{spaceBetween:16,slidesPerView:s.length>3?2.3:2},1024:{spaceBetween:16,slidesPerView:s.length>3?2.8:3},1440:{spaceBetween:16,slidesPerView:s.length>4?3.8:4},1920:{spaceBetween:16,slidesPerView:s.length>4?3.8:4}},children:s.map((i,f)=>t(Y,{className:o("!h-auto ",p.productCardSlideWrapper),children:t(H,{product:i,isShowTag:l.isShowTag??!0,onImageClick:w,onLearnMore:S,onShopNow:v,onAddToCart:y,secondaryButtonText:V,secondaryButtonFun:N,primaryButtonText:B,primaryButtonFun:L,classNames:p,theme:r,index:f})},i.productKey))})})})]})]})});U.displayName="SceneShelfV2";var _e=ee(U);export{H as SceneShelfV2ProductCard,_e as default};
+"use client";import{Fragment as ce,jsx as t,jsxs as d}from"react/jsx-runtime";import*as a from"react";import{cn as o,getLocalizedPath as $}from"../../helpers/index.js";import{Heading as R,Text as Q,Badge as q,Button as A,Picture as O}from"../../components/index.js";import J from"../Media/index.js";import{Swiper as X,SwiperSlide as Y}from"swiper/react";import{Mousewheel as Z}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import{withLayout as ee}from"../../shared/Styles.js";import{useGridRowCount as te}from"../../hooks/useGridRowCount.js";import{useExposure as ie}from"../../hooks/useExposure.js";import{useViewItemList as oe}from"../../hooks/useViewItemList.js";import{trackUrlRef as ae}from"../../shared/trackUrlRef.js";import{useAiuiContext as G}from"../AiuiProvider/index.js";import{gaTrack as E}from"../../shared/track.js";const ne="shelf",re="scene_shelf_v2",se=()=>t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),le=()=>d("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[t("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),t("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),H=a.memo(({product:e,isShowTag:p=!0,onImageClick:l,onLearnMore:g,onShopNow:w,onAddToCart:S,secondaryButtonText:v,secondaryButtonFun:y,primaryButtonText:x,primaryButtonFun:P,classNames:r,className:n,theme:T,index:s})=>{const{locale:V="us",trackingData:N}=G(),[B,L]=a.useState(!1),[_,M]=a.useState(!1),m=N?.pageGroup,h=a.useCallback(async(c,k)=>{if(!c)return;const C=k==="primary"?L:M;C(!0);try{switch(c){case"buyNow":await w?.(e);break;case"addCart":await S?.(e);break;case"learnMore":await g?.(e?.href??"");break;default:break}}finally{C(!1)}},[g,w,S,e]),z=a.useCallback(()=>h(P,"primary"),[h,P]),I=a.useCallback(()=>h(y,"secondary"),[h,y]),u=a.useCallback(c=>{!e.href&&l&&c.preventDefault(),l?.(e),E({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_2_Products",page_group:m,items:[{item_id:e.sku,item_name:e.custom_name||e.title,item_variant:e.variantId,price:e.currentPrice,index:s}]})},[s,l,m,e]);return d("div",{className:o("scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4",n,r?.productCard,{"bg-container-secondary-0":T==="dark"}),children:[e.href?t("a",{href:$(ae(e.href,m+"_"+ne+"_"+re),V),onClick:u,className:o("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80",r?.productCardImage),"aria-label":`View ${e.title}`,children:t(O,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}):t("div",{className:o("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ",l&&"cursor-pointer transition-opacity hover:opacity-80",r?.productCardImage),onClick:l?u:void 0,role:l?"button":void 0,tabIndex:l?0:void 0,"aria-label":l?`View ${e.title}`:void 0,children:t(O,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}),d("div",{className:"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4",children:[d("div",{className:"flex flex-col gap-2",children:[t("div",{className:o("scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1",r?.productCardTags),children:p&&e?.tags?.map((c,k)=>t(q,{variant:c.variant??"outline",size:"sm",className:"",children:c.label},k))}),t(R,{as:"h3",size:2,className:o("scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]",r?.productCardTitle),children:e.custom_name||e.title}),(e.custom_description||e.description)&&t(Q,{as:"p",size:1,className:o("scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1",r?.productCardDescription),children:e.custom_description||e.description})]}),d("div",{className:"flex flex-col gap-2",children:[d("div",{className:o("scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1",r?.productCardPriceWrapper),children:[t(R,{as:"h6",size:2,className:o("scene-shelf-v2-product-card-current-price text-info-primary",r?.productCardCurrentPrice),children:e.currentPrice}),e.originalPrice&&t(R,{as:"h6",size:2,className:o("scene-shelf-v2-product-card-original-price text-info-tertiary line-through",r?.productCardOriginalPrice),children:e.originalPrice})]}),(v||x)&&d("div",{className:o("scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2",r?.productCardButtons),children:[v&&t(A,{variant:"secondary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{I(),E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:m||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:v,SKU:e.sku||"",position:s}})},disabled:e.soldOut&&y!=="learnMore",loading:_,children:v}),x&&t(A,{variant:"primary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{z(),E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:m||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:x,SKU:e.sku||"",position:s}})},disabled:e.soldOut&&P!=="learnMore",loading:B,children:x})]})]})]})]})});H.displayName="SceneShelfV2.ProductCard";const U=a.forwardRef(({className:e,classNames:p={},data:l,onPlayClick:g,onImageClick:w,onLearnMore:S,onShopNow:v,onAddToCart:y,...x},P)=>{const{theme:r="light",sceneImage:n,productsTitle:T,products:s,secondaryButtonText:V,secondaryButtonFun:N,primaryButtonText:B,primaryButtonFun:L,viewMoreLimit:_=2,copy:M}=l,m=a.useRef(null),h=a.useRef(null),z=a.useRef(null),[I,u]=a.useState(!1),[c,k]=a.useState(!1),{trackingData:C}=G();ie(h,{componentType:"image",componentName:"scene_shelf_banner"}),oe(z,{componentType:"video",componentName:"scene_shelf_banner",itemListName:"Scene_Shelf_2_Products",items:s.map((i,f)=>({item_id:i.sku??"",item_name:i.title,item_variant:i.variantId??"",price:i.currentPrice,index:f})),tabName:""});const D=te({rows:_??0,mobileCols:2}),F=a.useMemo(()=>[n?.pc,n?.desktop,n?.laptop,n?.pad,n?.mobile].some(i=>i?.mimeType==="video/mp4"),[n]),W=a.useCallback(()=>{const i=m.current;i?i.paused?(i.play(),u(!0),g?.(!0)):(i.pause(),u(!1),g?.(!1)):g?.(!0),E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:C?.pageGroup,component_type:"video",component_name:"scene_shelf_banner",position:1,creative_id:n?.pc?.id}})},[g,n?.pc?.id,C?.pageGroup]);return a.useEffect(()=>{const i=m.current;if(!i||!F)return;const f=new IntersectionObserver(b=>{b.forEach(j=>{j.isIntersecting?i.play().catch(K=>{console.warn("Video autoplay failed:",K)}):i.pause()})},{threshold:.5});return f.observe(i),()=>{f.disconnect()}},[]),d("div",{...x,ref:P,className:o("scene-shelf-v2-root w-full overflow-hidden",{"aiui-dark":r==="dark"},e,p?.root),children:[d("div",{className:o("scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden",p?.media),ref:h,children:[t(J,{pcImage:n?.pc,desktopImage:n?.desktop,laptopImage:n?.laptop,padImage:n?.pad,mobileImage:n?.mobile,className:"size-full",videoClassName:"absolute inset-0 size-full object-cover",videoRef:m,onVideoPlay:()=>u(!0),onVideoPause:()=>u(!1),onVideoEnded:()=>u(!1)}),t("div",{"aria-hidden":"true",className:o("scene-shelf-v2-media-overlay pointer-events-none absolute inset-0",p?.mediaOverlay)}),F&&t("div",{className:"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6",children:t("button",{type:"button","aria-label":I?"Pause video":"Play video",onClick:W,className:o("scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",p?.mediaPlayButton),children:I?t(le,{}):t(se,{})})})]}),d("div",{ref:z,className:o("scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3",p?.products),children:[T&&t(R,{as:"h2",size:3,className:o("scene-shelf-v2-products-title text-info-primary",p?.productsTitle),html:T}),t("div",{className:"tablet:hidden grid grid-cols-2 gap-3",children:(()=>{const i=_!==void 0&&_>0&&s.length>D,f=i&&!c?s.slice(0,D):s;return d(ce,{children:[f.map((b,j)=>t(H,{isShowTag:l.isShowTag??!0,product:b,onImageClick:w,onLearnMore:S,onShopNow:v,onAddToCart:y,secondaryButtonText:V,secondaryButtonFun:N,primaryButtonText:B,primaryButtonFun:L,classNames:p,theme:r,index:j},b.productKey)),i&&t("div",{className:"col-span-2 mt-6 flex justify-center",children:d("button",{type:"button",onClick:()=>k(b=>!b),className:"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors","aria-expanded":c,children:[c?M?.viewLessLabel??"View Less":M?.viewMoreLabel??"View More",t("svg",{className:o("size-4 transition-transform",c&&"rotate-180"),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})})()}),t("div",{className:"tablet:block hidden",children:t("div",{className:"relative",children:t(X,{slidesPerView:"auto",observer:!0,observeParents:!0,modules:[Z],mousewheel:{enabled:!0,forceToAxis:!0,sensitivity:1},className:"!overflow-visible",breakpoints:{768:{spaceBetween:16,slidesPerView:s.length>3?2.3:2},1024:{spaceBetween:16,slidesPerView:s.length>3?2.8:3},1440:{spaceBetween:16,slidesPerView:s.length>4?3.8:4},1920:{spaceBetween:16,slidesPerView:s.length>4?3.8:4}},children:s.map((i,f)=>t(Y,{className:o("!h-auto ",p.productCardSlideWrapper),children:t(H,{product:i,isShowTag:l.isShowTag??!0,onImageClick:w,onLearnMore:S,onShopNow:v,onAddToCart:y,secondaryButtonText:V,secondaryButtonFun:N,primaryButtonText:B,primaryButtonFun:L,classNames:p,theme:r,index:f})},i.productKey))})})})]})]})});U.displayName="SceneShelfV2";var _e=ee(U);export{H as SceneShelfV2ProductCard,_e as default};
 //# sourceMappingURL=index.js.map