@anker-in/headless-ui 1.1.99 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
  2. package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
  3. package/dist/cjs/biz-components/SceneShelfV2/index.js +1 -1
  4. package/dist/cjs/biz-components/SceneShelfV2/index.js.map +2 -2
  5. package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
  6. package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
  7. package/dist/esm/biz-components/SceneShelfV2/index.js +1 -1
  8. package/dist/esm/biz-components/SceneShelfV2/index.js.map +2 -2
  9. package/package.json +1 -1
  10. package/style.css +0 -3
package/dist/cjs/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var Me=Object.create;var R=Object.defineProperty;var Le=Object.getOwnPropertyDescriptor;var Re=Object.getOwnPropertyNames;var Ie=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var Pe=(o,s)=>{for(var l in s)R(o,l,{get:s[l],enumerable:!0})},ae=(o,s,l,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let n of Re(s))!Ee.call(o,n)&&n!==l&&R(o,n,{get:()=>s[n],enumerable:!(d=Le(s,n))||d.enumerable});return o};var re=(o,s,l)=>(l=o!=null?Me(Ie(o)):{},ae(s||!o||!o.__esModule?R(l,"default",{value:o,enumerable:!0}):l,o)),Se=o=>ae(R({},"__esModule",{value:!0}),o);var Ce={};Pe(Ce,{default:()=>Be});module.exports=Se(Ce);var e=require("react/jsx-runtime"),t=require("react"),ce=require("lodash"),r=require("../../helpers/utils.js"),pe=require("../../shared/Styles.js"),q=re(require("../../components/button.js")),w=require("../../components/index.js"),de=require("../VideoModal/index.js"),U=require("@payloadcms/richtext-lexical/html"),ue=require("react-intersection-observer"),me=require("../../hooks/useExposure.js"),h=re(require("../../helpers/ScrollLoadVideo.js")),f=require("gsap"),Y=require("gsap/dist/SplitText"),I=require("gsap/dist/ScrollTrigger");const _e="media_player_base",$e="video";f.gsap.registerPlugin(I.ScrollTrigger,Y.SplitText);const ne=({defaultConverters:o})=>({...o,text:s=>{const{node:l}=s;return l.$&&l.$.color?`<span class="lexical-${l.$.color}">${l.text}</span>`:l.text}}),ie=(0,t.forwardRef)(({className:o="",id:s,onBtnClick:l,data:{title:d,videoTitle:n,btnText:k,youtubeId:O,video:N,mobileVideo:G,theme:E,img:H,shape:P,titleAnimation:T="fade-in",variant:fe,headline:J,paragraphs:S,metrics:_,...ge},...$},xe)=>{const{sticky:p}=ge,[K,Q]=(0,t.useState)(!1),[W,ve]=(0,t.useState)(0),[ye,be]=(0,t.useState)(0),[z,he]=(0,t.useState)(0),[X,B]=(0,t.useState)(!1),g=(0,t.useRef)(null),Z=(0,t.useRef)(null),c=(0,t.useRef)(null),M=(0,t.useRef)(null),A=(0,t.useRef)(null),L=(0,t.useRef)(null),v=(0,t.useRef)(null),C=(0,t.useRef)(null),V=(0,t.useRef)(null),{ref:ee,inView:u}=(0,ue.useInView)();(0,t.useImperativeHandle)(xe,()=>c.current);const y=typeof d=="string"?d:d&&(0,U.convertLexicalToHTML)({data:d,converters:ne}),te=typeof n=="string"?n:n&&(0,U.convertLexicalToHTML)({data:n,converters:ne});(0,t.useEffect)(()=>{u?(g.current?.play(),Q(!0)):(g.current?.pause(),Q(!1))},[u]);const j=(0,ce.debounce)(()=>{if(c.current){const a=c.current.getBoundingClientRect(),i=window.innerHeight,b=window.scrollY||window.pageYOffset,m=a.bottom+b,x=document.documentElement.scrollHeight-m;ve(x>i?i:x)}if(c.current){const a=c.current.clientHeight,i=window.innerHeight;be(a+i)}},600);(0,t.useEffect)(()=>(j(),window.addEventListener("resize",j),()=>{window.removeEventListener("resize",j)}),[]),(0,t.useEffect)(()=>{function a(){if(!M.current||T!=="fade-in")return;const b=M.current?.clientHeight||80;L.current=new Y.SplitText(M.current,{type:"words",wordsClass:"word"});const m=L.current.words;f.gsap.set(m,{opacity:0}),v.current&&f.gsap.set(v.current,{opacity:0}),C.current=I.ScrollTrigger.create({trigger:c.current,start:"top center-=10%",end:`top+=${b*1.5+80}px center-=10%`,scrub:!0,onUpdate:oe=>{const x=oe.progress,le=m.length,ke=1/le,se=.5;m.forEach((Ne,He)=>{const Te=He/le*(1-se),ze=ke*(1+se);let F=(x-Te)/ze;F=Math.max(0,Math.min(F,1)),f.gsap.set(Ne,{opacity:F})}),f.gsap.set(Z.current,{opacity:x}),v.current&&f.gsap.set(v.current,{opacity:x>=.6?1:0})}})}function i(){V.current=I.ScrollTrigger.create({trigger:c.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:b=>{const m=b.progress;he(m)}})}return u&&(a(),i()),()=>{L.current&&L.current.revert(),C.current&&C.current.kill(),V.current&&V.current.kill()}},[T,u]),(0,me.useExposure)(A,{componentType:$e,componentName:_e,componentTitle:y});const we=(0,t.useMemo)(()=>u&&z>0&&z<.9?3:u?2:1,[z,u]);if(fe==="text-layout")return(0,e.jsxs)("div",{...$,ref:c,className:(0,r.cn)("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":E==="dark","rounded-box":P==="rounded"},o),children:[(0,e.jsx)("div",{ref:ee,className:"pointer-events-none absolute inset-0"}),(0,e.jsxs)("div",{className:"absolute inset-0 z-0",children:[(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:N?.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}),(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:G?.url||N?.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}),(0,e.jsx)("div",{className:"absolute inset-0 bg-black/30"})]}),(0,e.jsxs)("div",{className:(0,r.cn)("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:[(0,e.jsx)("div",{className:"laptop:w-1/2 w-full shrink-0",children:J&&(0,e.jsx)(w.Heading,{as:"h2",size:5,className:"text-info-primary",children:J})}),(0,e.jsxs)("div",{className:(0,r.cn)("laptop:w-1/2 flex w-full flex-col justify-start","tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6"),children:[S&&S.length>0&&(0,e.jsx)("div",{className:"tablet:gap-4 flex flex-col gap-3",children:S.map((a,i)=>(0,e.jsx)(w.Text,{as:"p",size:3,className:"text-info-primary lg-desktop:text-[18px] opacity-90",children:typeof a=="string"?a:a.text},i))}),_&&_.length>0&&(0,e.jsx)("div",{className:(0,r.cn)("tablet:grid-cols-3 grid grid-cols-2","tablet:gap-6 desktop:gap-8 gap-4"),children:_.map((a,i)=>(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)("span",{className:"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]",children:a.value}),(0,e.jsx)(w.Text,{as:"span",size:2,className:"text-info-primary opacity-80",children:a.label})]},i))})]})]})]});const D="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(0,e.jsxs)(e.Fragment,{children:[p&&(0,e.jsx)("div",{...$,ref:c,className:(0,r.cn)("pointer-events-none relative z-10",D,{"aiui-dark":E==="dark","rounded-box":P==="rounded"},o),children:(0,e.jsx)("div",{ref:ee,children:!T&&(0,e.jsxs)("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:[y&&!K&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),te&&K&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:te}}),k&&(0,e.jsx)(q.default,{variant:"link",className:(0,r.cn)("member-equity-button-secondary text-info-primary"),onClick:()=>{B(!0),l&&l?.()},children:k})]})})}),(0,e.jsxs)("div",{...p?{}:$,style:p?{marginBottom:`-${W}px`,marginTop:`-${ye}px`,zIndex:we}:{zIndex:5},className:(0,r.cn)("relative",o),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{id:s,className:(0,r.cn)("relative overflow-hidden",p?"h-screen w-full":D,{"aiui-dark":E==="dark","rounded-box":P==="rounded"}),children:[T==="fade-in"&&(0,e.jsxs)("div",{className:(0,r.cn)("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",p?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[y&&(0,e.jsx)("div",{ref:M,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),k&&(0,e.jsx)(q.default,{ref:v,variant:"link",className:(0,r.cn)("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{B(!0),l&&l?.()},children:k})]}),(0,e.jsxs)("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-z*100}vh`},children:[(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:N?.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}),(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:G?.url||N?.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}),(0,e.jsx)("div",{ref:Z,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),p&&(0,e.jsx)("div",{className:(0,r.cn)(p&&"pointer-events-none relative box-content block",D),style:p?{height:`${W}px`}:{},ref:A})]}),X&&O&&(0,e.jsx)(de.VideoModal,{visible:X,youTubeId:O,onCloseModal:()=>B(!1)})]})});ie.displayName="MediaPlayerBase";var Be=(0,pe.withLayout)(ie);
1
+ "use strict";"use client";var Me=Object.create;var R=Object.defineProperty;var Le=Object.getOwnPropertyDescriptor;var Re=Object.getOwnPropertyNames;var Ie=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var Pe=(o,s)=>{for(var l in s)R(o,l,{get:s[l],enumerable:!0})},ae=(o,s,l,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let n of Re(s))!Ee.call(o,n)&&n!==l&&R(o,n,{get:()=>s[n],enumerable:!(d=Le(s,n))||d.enumerable});return o};var re=(o,s,l)=>(l=o!=null?Me(Ie(o)):{},ae(s||!o||!o.__esModule?R(l,"default",{value:o,enumerable:!0}):l,o)),Se=o=>ae(R({},"__esModule",{value:!0}),o);var Ce={};Pe(Ce,{default:()=>Be});module.exports=Se(Ce);var e=require("react/jsx-runtime"),t=require("react"),ce=require("lodash"),r=require("../../helpers/utils.js"),pe=require("../../shared/Styles.js"),q=re(require("../../components/button.js")),w=require("../../components/index.js"),de=require("../VideoModal/index.js"),U=require("@payloadcms/richtext-lexical/html"),ue=require("react-intersection-observer"),me=require("../../hooks/useExposure.js"),h=re(require("../../helpers/ScrollLoadVideo.js")),f=require("gsap"),Y=require("gsap/dist/SplitText"),I=require("gsap/dist/ScrollTrigger");const _e="media_player_base",$e="video";f.gsap.registerPlugin(I.ScrollTrigger,Y.SplitText);const ne=({defaultConverters:o})=>({...o,text:s=>{const{node:l}=s;return l.$&&l.$.color?`<span class="lexical-${l.$.color}">${l.text}</span>`:l.text}}),ie=(0,t.forwardRef)(({className:o="",id:s,onBtnClick:l,data:{title:d,videoTitle:n,btnText:k,youtubeId:O,video:N,mobileVideo:G,theme:E,img:H,shape:P,titleAnimation:T="fade-in",variant:fe,headline:J,paragraphs:S,metrics:_,...ge},...$},xe)=>{const{sticky:p}=ge,[K,Q]=(0,t.useState)(!1),[W,ve]=(0,t.useState)(0),[ye,be]=(0,t.useState)(0),[z,he]=(0,t.useState)(0),[X,B]=(0,t.useState)(!1),g=(0,t.useRef)(null),Z=(0,t.useRef)(null),c=(0,t.useRef)(null),M=(0,t.useRef)(null),A=(0,t.useRef)(null),L=(0,t.useRef)(null),v=(0,t.useRef)(null),C=(0,t.useRef)(null),V=(0,t.useRef)(null),{ref:ee,inView:u}=(0,ue.useInView)();(0,t.useImperativeHandle)(xe,()=>c.current);const y=typeof d=="string"?d:d&&(0,U.convertLexicalToHTML)({data:d,converters:ne}),te=typeof n=="string"?n:n&&(0,U.convertLexicalToHTML)({data:n,converters:ne});(0,t.useEffect)(()=>{u?(g.current?.play(),Q(!0)):(g.current?.pause(),Q(!1))},[u]);const j=(0,ce.debounce)(()=>{if(c.current){const a=c.current.getBoundingClientRect(),i=window.innerHeight,b=window.scrollY||window.pageYOffset,m=a.bottom+b,x=document.documentElement.scrollHeight-m;ve(x>i?i:x)}if(c.current){const a=c.current.clientHeight,i=window.innerHeight;be(a+i)}},600);(0,t.useEffect)(()=>(j(),window.addEventListener("resize",j),()=>{window.removeEventListener("resize",j)}),[]),(0,t.useEffect)(()=>{function a(){if(!M.current||T!=="fade-in")return;const b=M.current?.clientHeight||80;L.current=new Y.SplitText(M.current,{type:"words",wordsClass:"word"});const m=L.current.words;f.gsap.set(m,{opacity:0}),v.current&&f.gsap.set(v.current,{opacity:0}),C.current=I.ScrollTrigger.create({trigger:c.current,start:"top center-=10%",end:`top+=${b*1.5+80}px center-=10%`,scrub:!0,onUpdate:oe=>{const x=oe.progress,le=m.length,ke=1/le,se=.5;m.forEach((Ne,He)=>{const Te=He/le*(1-se),ze=ke*(1+se);let F=(x-Te)/ze;F=Math.max(0,Math.min(F,1)),f.gsap.set(Ne,{opacity:F})}),f.gsap.set(Z.current,{opacity:x}),v.current&&f.gsap.set(v.current,{opacity:x>=.6?1:0})}})}function i(){V.current=I.ScrollTrigger.create({trigger:c.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:b=>{const m=b.progress;he(m)}})}return u&&(a(),i()),()=>{L.current&&L.current.revert(),C.current&&C.current.kill(),V.current&&V.current.kill()}},[T,u]),(0,me.useExposure)(A,{componentType:$e,componentName:_e,componentTitle:y});const we=(0,t.useMemo)(()=>u&&z>0&&z<.9?3:u?2:1,[z,u]);if(fe==="text-layout")return(0,e.jsxs)("div",{...$,ref:c,className:(0,r.cn)("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":E==="dark","rounded-box":P==="rounded"},o),children:[(0,e.jsx)("div",{ref:ee,className:"pointer-events-none absolute inset-0"}),(0,e.jsxs)("div",{className:"absolute inset-0 z-0",children:[(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:N?.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}),(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:G?.url||N?.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}),(0,e.jsx)("div",{className:"absolute inset-0 bg-black/30"})]}),(0,e.jsxs)("div",{className:(0,r.cn)("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:[(0,e.jsx)("div",{className:"laptop:w-1/2 w-full shrink-0",children:J&&(0,e.jsx)(w.Heading,{as:"h2",size:5,className:"text-info-primary",children:J})}),(0,e.jsxs)("div",{className:(0,r.cn)("laptop:w-1/2 flex w-full flex-col justify-start","tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6"),children:[S&&S.length>0&&(0,e.jsx)("div",{className:"tablet:gap-4 flex flex-col gap-3",children:S.map((a,i)=>(0,e.jsx)(w.Text,{as:"p",size:3,className:"text-info-primary lg-desktop:text-[18px] opacity-90",children:typeof a=="string"?a:a.text},i))}),_&&_.length>0&&(0,e.jsx)("div",{className:(0,r.cn)("tablet:grid-cols-3 grid grid-cols-2","tablet:gap-6 desktop:gap-8 gap-4"),children:_.map((a,i)=>(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)("span",{className:"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]",children:a.value}),(0,e.jsx)(w.Text,{as:"span",size:2,className:"text-info-primary opacity-80",children:a.label})]},i))})]})]})]});const D="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(0,e.jsxs)(e.Fragment,{children:[p&&(0,e.jsx)("div",{...$,ref:c,className:(0,r.cn)("pointer-events-none relative z-10",D,{"aiui-dark":E==="dark","rounded-box":P==="rounded"},o),children:(0,e.jsx)("div",{ref:ee,children:!T&&(0,e.jsxs)("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:[y&&!K&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),te&&K&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:te}}),k&&(0,e.jsx)(q.default,{variant:"link",className:(0,r.cn)("member-equity-button-secondary text-info-primary"),onClick:()=>{B(!0),l&&l?.()},children:k})]})})}),(0,e.jsxs)("div",{...p?{}:$,style:p?{marginBottom:`-${W}px`,marginTop:`-${ye}px`,zIndex:we}:{zIndex:5},className:(0,r.cn)("relative",o),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{id:s,className:(0,r.cn)("relative overflow-hidden",p?"h-screen w-full":D,{"aiui-dark":E==="dark","rounded-box":P==="rounded"}),children:[T==="fade-in"&&(0,e.jsxs)("div",{className:(0,r.cn)("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",p?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[y&&(0,e.jsx)("div",{ref:M,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),k&&(0,e.jsx)(q.default,{ref:v,variant:"link",className:(0,r.cn)("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{B(!0),l&&l?.()},children:k})]}),(0,e.jsxs)("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-z*100}vh`},children:[(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:N?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:G?.url||N?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)("div",{ref:Z,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),p&&(0,e.jsx)("div",{className:(0,r.cn)(p&&"pointer-events-none relative box-content block",D),style:p?{height:`${W}px`}:{},ref:A})]}),X&&O&&(0,e.jsx)(de.VideoModal,{visible:X,youTubeId:O,onCloseModal:()=>B(!1)})]})});ie.displayName="MediaPlayerBase";var Be=(0,pe.withLayout)(ie);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/MediaPlayerBase/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
4
- "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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "ulBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IA0NU,IAAAI,EAAA,6BAzNVC,EAAsF,iBACtFC,GAAyB,kBACzBC,EAAmB,kCACnBC,GAA2B,kCAC3BC,EAAmB,0CACnBC,EAA8B,qCAC9BC,GAA2B,kCAC3BC,EAAqC,6CAGrCC,GAA0B,uCAE1BC,GAA4B,sCAC5BC,EAA4B,gDAC5BC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAGtB,OAAK,eAAe,gBAAe,WAAS,EAE5C,MAAMC,GAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,MAAkB,cACtB,CACE,CACE,UAAAC,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CACJ,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,IAAAC,EACA,MAAAC,EACA,eAAAC,EAAiB,UACjB,QAAAC,GACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,GAAGC,EACL,EACA,GAAGC,CACL,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIH,GACb,CAACI,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1C,CAACC,EAAKC,EAAM,KAAI,YAAS,CAAC,EAC1B,CAACC,GAAaC,EAAc,KAAI,YAAS,CAAC,EAC1C,CAACC,EAAqBC,EAAsB,KAAI,YAAS,CAAC,EAC1D,CAACC,EAASC,CAAU,KAAI,YAAkB,EAAK,EAE/CC,KAAW,UAAyB,IAAI,EACxCC,KAAQ,UAAyB,IAAI,EACrCC,KAAW,UAAuB,IAAI,EACtCC,KAAiB,UAAuB,IAAI,EAC5CC,KAAW,UAAuB,IAAI,EACtCC,KAAoB,UAAyB,IAAI,EACjDC,KAAe,UAA0B,IAAI,EAC7CC,KAAmB,UAA6B,IAAI,EACpDC,KAAmB,UAA6B,IAAI,EACpD,CAAE,IAAKC,GAAW,OAAAC,CAAO,KAAI,cAAU,KAE7C,uBAAoBtB,GAAK,IAAMc,EAAS,OAAyB,EAEjE,MAAMS,EACJ,OAAOvC,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,EAAO,WAAYR,EAAe,CAAC,EACzGgD,GACJ,OAAOvC,GAAe,SAClBA,EACAA,MAAc,wBAAqB,CAAE,KAAMA,EAAY,WAAYT,EAAe,CAAC,KAEzF,aAAU,IAAM,CACV8C,GACFV,EAAS,SAAS,KAAK,EACvBT,EAAa,EAAI,IAEjBS,EAAS,SAAS,MAAM,EACxBT,EAAa,EAAK,EAEtB,EAAG,CAACmB,CAAM,CAAC,EAEX,MAAMG,KAAwB,aAAS,IAAM,CAC3C,GAAIX,EAAS,QAAS,CACpB,MAAMY,EAAOZ,EAAS,QAAQ,sBAAsB,EAC9Ca,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CxB,GAAOyB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIhB,EAAS,QAAS,CACpB,MAAMR,EAAcQ,EAAS,QAAQ,aAC/Ba,EAAe,OAAO,YAC5BpB,GAAeD,EAAcqB,CAAY,CAC3C,CACF,EAAG,GAAG,KAEN,aAAU,KACRF,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,KAEL,aAAU,IAAM,CACd,SAASM,GAAa,CACpB,GAAI,CAAChB,EAAe,SAAWtB,IAAmB,UAAW,OAC7D,MAAMuC,EAASjB,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAI,YAAUF,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMkB,EAAQhB,EAAkB,QAAQ,MACxC,OAAK,IAAIgB,EAAO,CAAE,QAAS,CAAE,CAAC,EAC1Bf,EAAa,SAAS,OAAK,IAAIA,EAAa,QAAS,CAAE,QAAS,CAAE,CAAC,EACvEC,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASL,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQkB,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,IAAc,CACvB,MAAMC,EAAWD,GAAK,SAChBE,GAAQH,EAAM,OACdI,GAAW,EAAID,GACfE,GAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,IAAU,EAAIE,IAC3BI,GAAQL,IAAY,EAAIC,IAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACD,OAAK,IAAI9B,EAAM,QAAS,CAAE,QAASsB,CAAS,CAAC,EACzCjB,EAAa,SACf,OAAK,IAAIA,EAAa,QAAS,CAAE,QAASiB,GAAY,GAAM,EAAI,CAAE,CAAC,CAEvE,CACF,CAAC,CACH,CAEA,SAASS,GAAwB,CAC/BxB,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASN,EAAS,QAClB,MAAO,gBACP,IAAK,aAEL,MAAO,GACP,SAAWoB,GAAc,CACvB,MAAMC,EAAWD,EAAK,SACtBzB,GAAuB0B,CAAQ,CACjC,CACF,CAAC,CACH,CAEA,OAAIb,IACFS,EAAW,EACXa,EAAsB,GAGjB,IAAM,CACX3B,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DE,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAAC3B,EAAgB6B,CAAM,CAAC,KAE3B,gBAAYN,EAAU,CACpB,cAAAzC,GACA,cAAAD,GACA,eAAgBiD,CAClB,CAAC,EAED,MAAMsB,MAAc,WAAQ,IACtBvB,GAAUd,EAAsB,GAAKA,EAAsB,GAAY,EACvEc,EAAe,EACZ,EACN,CAACd,EAAqBc,CAAM,CAAC,EAEhC,GAAI5B,KAAY,cACd,SACE,QAAC,OACE,GAAGK,EACJ,IAAKe,EACL,aAAW,MACT,oDACA,4EACA,8FACA,uDACA,CACE,YAAaxB,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,oBAAC,OAAI,IAAKwC,GAAW,UAAU,uCAAuC,KAGtE,QAAC,OAAI,UAAU,uBACb,oBAAC,EAAAyB,QAAA,CACC,SAAUlC,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,yBACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,EAAA0D,QAAA,CACC,SAAUlC,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,yBACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OAAI,UAAU,+BAA+B,GAChD,KAIA,QAAC,OACC,aAAW,MACT,4DACA,mBACA,2BACA,6CACA,+BACA,kBACF,EAIA,oBAAC,OAAI,UAAU,+BACZ,SAAAO,MACC,OAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAU,oBACjC,SAAAA,EACH,EAEJ,KAIA,QAAC,OACC,aAAW,MACT,kDACA,iDACF,EAGC,UAAAC,GAAcA,EAAW,OAAS,MACjC,OAAC,OAAI,UAAU,mCACZ,SAAAA,EAAW,IAAI,CAACmD,EAAG,OAClB,OAAC,QAAa,GAAG,IAAI,KAAM,EAAG,UAAU,sDACrC,gBAAOA,GAAM,SAAWA,EAAIA,EAAE,MADtB,CAEX,CACD,EACH,EAIDlD,GAAWA,EAAQ,OAAS,MAC3B,OAAC,OAAI,aAAW,MAAG,sCAAuC,kCAAkC,EACzF,SAAAA,EAAQ,IAAI,CAACmD,EAAG,OACf,QAAC,OAAY,UAAU,sBAErB,oBAAC,QAAK,UAAU,oIACb,SAAAA,EAAE,MACL,KAEA,OAAC,QAAK,GAAG,OAAO,KAAM,EAAG,UAAU,+BAChC,SAAAA,EAAE,MACL,IARQ,CASV,CACD,EACH,GAEJ,GACF,GACF,EAIJ,MAAMC,EACJ,6NACF,SACE,oBACG,UAAAhD,MACC,OAAC,OACE,GAAGF,EACJ,IAAKe,EACL,aAAW,MACT,oCACAmC,EACA,CACE,YAAa3D,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,mBAAC,OAAI,IAAKwC,GACP,UAAC5B,MACA,QAAC,OAAI,UAAU,yGACZ,UAAA8B,GAAc,CAACrB,MACd,OAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQqB,CAAW,EAChD,EAEDC,IAAmBtB,MAClB,OAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQsB,EAAgB,EACrD,EAEDtC,MACC,OAAC,EAAAgE,QAAA,CACC,QAAQ,OACR,aAAW,MAAG,kDAAkD,EAChE,QAAS,IAAM,CACbvC,EAAW,EAAI,EAYf5B,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,KAEF,QAAC,OACE,GAAKe,EAAgB,CAAC,EAARF,EACf,MACEE,EACI,CACE,aAAc,IAAIG,CAAG,KACrB,UAAW,IAAIE,EAAW,KAC1B,OAAQuC,EACV,EACA,CAAE,OAAQ,CAAE,EAElB,aAAW,MAAG,WAAYhE,CAAS,EAEnC,oBAAC,OAAI,UAAU,gBACb,oBAAC,OACC,GAAIC,EACJ,aAAW,MAAG,2BAA4BmB,EAAS,kBAAoBgD,EAAQ,CAC7E,YAAa3D,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,cAClB,QAAC,OACC,aAAW,MACT,wFACAQ,EAAS,qDAAuD,cAClE,EAEC,UAAAsB,MACC,OAAC,OACC,IAAKR,EACL,UAAU,kHACV,wBAAyB,CAAE,OAAQQ,CAAW,EAChD,EAEDrC,MACC,OAAC,EAAAgE,QAAA,CACC,IAAKhC,EACL,QAAQ,OACR,aAAW,MAAG,2EAA2E,EACzF,QAAS,IAAM,CACbP,EAAW,EAAI,EACf5B,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EACH,GAEJ,KAEF,QAAC,OACC,UAAU,6DACV,MAAO,CAAE,OAAQ,GAAG,IAAMsB,EAAsB,GAAG,IAAK,EAExD,oBAAC,EAAAsC,QAAA,CACC,SAAUlC,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,EAAA0D,QAAA,CACC,SAAUlC,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OACC,IAAKyB,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,EACCZ,MACC,OAAC,OACC,aAAW,MAAGA,GAAU,iDAAkDgD,CAAM,EAChF,MAAOhD,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKY,EACP,GAEJ,EACCN,GAAWvB,MACV,OAAC,eAAW,QAASuB,EAAS,UAAWvB,EAAW,aAAc,IAAMwB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA/B,GAAgB,YAAc,kBAE9B,IAAOvB,MAAQ,eAAWuB,EAAe",
6
6
  "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_components", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_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", "ScrollLoadVideo", "p", "m", "aspect", "Button"]
7
7
  }
package/dist/cjs/biz-components/SceneShelfV2/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var te=Object.create;var H=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var re=(e,i)=>{for(var a in i)H(e,a,{get:i[a],enumerable:!0})},G=(e,i,a,u)=>{if(i&&typeof i=="object"||typeof i=="function")for(let m of oe(i))!ne.call(e,m)&&m!==a&&H(e,m,{get:()=>i[m],enumerable:!(u=ie(i,m))||u.enumerable});return e};var U=(e,i,a)=>(a=e!=null?te(ae(e)):{},G(i||!e||!e.__esModule?H(a,"default",{value:e,enumerable:!0}):a,e)),se=e=>G(H({},"__esModule",{value:!0}),e);var ue={};re(ue,{SceneShelfV2ProductCard:()=>V,default:()=>me});module.exports=se(ue);var t=require("react/jsx-runtime"),r=U(require("react")),n=require("../../helpers/index.js"),l=require("../../components/index.js"),K=U(require("../Media/index.js")),j=require("swiper/react"),$=require("swiper/modules"),ge=require("swiper/css"),ve=require("swiper/css/navigation"),Q=require("../../shared/Styles.js"),q=require("../../hooks/useGridRowCount.js"),J=require("../../hooks/useExposure.js"),X=require("../../hooks/useViewItemList.js"),Y=require("../../shared/trackUrlRef.js"),F=require("../AiuiProvider/index.js"),T=require("../../shared/track.js");const le="shelf",ce="scene_shelf_v2",de=()=>(0,t.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:(0,t.jsx)("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),pe=()=>(0,t.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,t.jsx)("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),(0,t.jsx)("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),V=r.memo(({product:e,isShowTag:i=!0,onImageClick:a,onLearnMore:u,onShopNow:m,onAddToCart:S,secondaryButtonText:h,secondaryButtonFun:x,primaryButtonText:b,primaryButtonFun:P,classNames:c,className:s,theme:N,index:d})=>{const{locale:B="us",trackingData:L}=(0,F.useAiuiContext)(),[M,z]=r.useState(!1),[_,I]=r.useState(!1),f=L?.pageGroup,y=r.useCallback(async(p,k)=>{if(!p)return;const C=k==="primary"?z:I;C(!0);try{switch(p){case"buyNow":await m?.(e);break;case"addCart":await S?.(e);break;case"learnMore":await u?.(e?.href??"");break;default:break}}finally{C(!1)}},[u,m,S,e]),R=r.useCallback(()=>y(P,"primary"),[y,P]),E=r.useCallback(()=>y(x,"secondary"),[y,x]),g=r.useCallback(p=>{!e.href&&a&&p.preventDefault(),a?.(e),(0,T.gaTrack)({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_2_Products",page_group:f,items:[{item_id:e.sku,item_name:e.custom_name||e.title,item_variant:e.variantId,price:e.currentPrice,index:d}]})},[d,a,f,e]);return(0,t.jsxs)("div",{className:(0,n.cn)("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",s,c?.productCard,{"bg-container-secondary-0":N==="dark"}),children:[e.href?(0,t.jsx)("a",{href:(0,n.getLocalizedPath)((0,Y.trackUrlRef)(e.href,f+"_"+le+"_"+ce),B),onClick:g,className:(0,n.cn)("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",c?.productCardImage),"aria-label":`View ${e.title}`,children:(0,t.jsx)(l.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}):(0,t.jsx)("div",{className:(0,n.cn)("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 ",a&&"cursor-pointer transition-opacity hover:opacity-80",c?.productCardImage),onClick:a?g:void 0,role:a?"button":void 0,tabIndex:a?0:void 0,"aria-label":a?`View ${e.title}`:void 0,children:(0,t.jsx)(l.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}),(0,t.jsxs)("div",{className:"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4",children:[(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsx)("div",{className:(0,n.cn)("scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1",c?.productCardTags),children:i&&e?.tags?.map((p,k)=>(0,t.jsx)(l.Badge,{variant:p.variant??"outline",size:"sm",className:"",children:p.label},k))}),(0,t.jsx)(l.Heading,{as:"h3",size:2,className:(0,n.cn)("scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 tablet:text-[20px] line-clamp-3 pr-[16%] text-[16px]",c?.productCardTitle),children:e.custom_name||e.title}),(e.custom_description||e.description)&&(0,t.jsx)(l.Text,{as:"p",size:1,className:(0,n.cn)("scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1",c?.productCardDescription),children:e.custom_description||e.description})]}),(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsxs)("div",{className:(0,n.cn)("scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1",c?.productCardPriceWrapper),children:[(0,t.jsx)(l.Heading,{as:"h6",size:2,className:(0,n.cn)("scene-shelf-v2-product-card-current-price text-info-primary",c?.productCardCurrentPrice),children:e.currentPrice}),e.originalPrice&&(0,t.jsx)(l.Heading,{as:"h6",size:2,className:(0,n.cn)("scene-shelf-v2-product-card-original-price text-info-tertiary line-through",c?.productCardOriginalPrice),children:e.originalPrice})]}),(h||b)&&(0,t.jsxs)("div",{className:(0,n.cn)("scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2",c?.productCardButtons),children:[h&&(0,t.jsx)(l.Button,{variant:"secondary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{E(),(0,T.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:h,SKU:e.sku||"",position:d}})},disabled:e.soldOut&&x!=="learnMore",loading:_,children:h}),b&&(0,t.jsx)(l.Button,{variant:"primary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{R(),(0,T.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:b,SKU:e.sku||"",position:d}})},disabled:e.soldOut&&P!=="learnMore",loading:M,children:b})]})]})]})]})});V.displayName="SceneShelfV2.ProductCard";const W=r.forwardRef(({className:e,classNames:i={},data:a,onPlayClick:u,onImageClick:m,onLearnMore:S,onShopNow:h,onAddToCart:x,...b},P)=>{const{theme:c="light",sceneImage:s,productsTitle:N,products:d,secondaryButtonText:B,secondaryButtonFun:L,primaryButtonText:M,primaryButtonFun:z,viewMoreLimit:_=2,copy:I}=a,f=r.useRef(null),y=r.useRef(null),R=r.useRef(null),[E,g]=r.useState(!1),[p,k]=r.useState(!1),{trackingData:C}=(0,F.useAiuiContext)();(0,J.useExposure)(y,{componentType:"image",componentName:"scene_shelf_banner"}),(0,X.useViewItemList)(R,{componentType:"video",componentName:"scene_shelf_banner",itemListName:"Scene_Shelf_2_Products",items:d.map((o,v)=>({item_id:o.sku??"",item_name:o.title,item_variant:o.variantId??"",price:o.currentPrice,index:v})),tabName:""});const A=(0,q.useGridRowCount)({rows:_??0,mobileCols:2}),O=r.useMemo(()=>[s?.pc,s?.desktop,s?.laptop,s?.pad,s?.mobile].some(o=>o?.mimeType==="video/mp4"),[s]),Z=r.useCallback(()=>{const o=f.current;o?o.paused?(o.play(),g(!0),u?.(!0)):(o.pause(),g(!1),u?.(!1)):u?.(!0),(0,T.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:C?.pageGroup,component_type:"video",component_name:"scene_shelf_banner",position:1,creative_id:s?.pc?.id}})},[u,s?.pc?.id,C?.pageGroup]);return r.useEffect(()=>{const o=f.current;if(!o||!O)return;const v=new IntersectionObserver(w=>{w.forEach(D=>{D.isIntersecting?o.play().catch(ee=>{console.warn("Video autoplay failed:",ee)}):o.pause()})},{threshold:.5});return v.observe(o),()=>{v.disconnect()}},[]),(0,t.jsxs)("div",{...b,ref:P,className:(0,n.cn)("scene-shelf-v2-root w-full overflow-hidden",{"aiui-dark":c==="dark"},e,i?.root),children:[(0,t.jsxs)("div",{className:(0,n.cn)("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",i?.media),ref:y,children:[(0,t.jsx)(K.default,{pcImage:s?.pc,desktopImage:s?.desktop,laptopImage:s?.laptop,padImage:s?.pad,mobileImage:s?.mobile,className:"size-full",videoClassName:"absolute inset-0 size-full object-cover",videoRef:f,onVideoPlay:()=>g(!0),onVideoPause:()=>g(!1),onVideoEnded:()=>g(!1)}),(0,t.jsx)("div",{"aria-hidden":"true",className:(0,n.cn)("scene-shelf-v2-media-overlay pointer-events-none absolute inset-0",i?.mediaOverlay)}),O&&(0,t.jsx)("div",{className:"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6",children:(0,t.jsx)("button",{type:"button","aria-label":E?"Pause video":"Play video",onClick:Z,className:(0,n.cn)("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",i?.mediaPlayButton),children:E?(0,t.jsx)(pe,{}):(0,t.jsx)(de,{})})})]}),(0,t.jsxs)("div",{ref:R,className:(0,n.cn)("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",i?.products),children:[N&&(0,t.jsx)(l.Heading,{as:"h2",size:3,className:(0,n.cn)("scene-shelf-v2-products-title text-info-primary",i?.productsTitle),html:N}),(0,t.jsx)("div",{className:"tablet:hidden grid grid-cols-2 gap-3",children:(()=>{const o=_!==void 0&&_>0&&d.length>A,v=o&&!p?d.slice(0,A):d;return(0,t.jsxs)(t.Fragment,{children:[v.map((w,D)=>(0,t.jsx)(V,{isShowTag:a.isShowTag??!0,product:w,onImageClick:m,onLearnMore:S,onShopNow:h,onAddToCart:x,secondaryButtonText:B,secondaryButtonFun:L,primaryButtonText:M,primaryButtonFun:z,classNames:i,theme:c,index:D},w.productKey)),o&&(0,t.jsx)("div",{className:"col-span-2 mt-6 flex justify-center",children:(0,t.jsxs)("button",{type:"button",onClick:()=>k(w=>!w),className:"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors","aria-expanded":p,children:[p?I?.viewLessLabel??"View Less":I?.viewMoreLabel??"View More",(0,t.jsx)("svg",{className:(0,n.cn)("size-4 transition-transform",p&&"rotate-180"),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})})()}),(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)("div",{className:"relative",children:(0,t.jsx)(j.Swiper,{slidesPerView:"auto",observer:!0,observeParents:!0,modules:[$.Mousewheel],mousewheel:{enabled:!0,forceToAxis:!0,sensitivity:1},className:"!overflow-visible",breakpoints:{768:{spaceBetween:16,slidesPerView:d.length>3?2.3:2},1024:{spaceBetween:16,slidesPerView:d.length>3?2.8:3},1440:{spaceBetween:16,slidesPerView:d.length>4?3.8:4},1920:{spaceBetween:16,slidesPerView:d.length>4?3.8:4}},children:d.map((o,v)=>(0,t.jsx)(j.SwiperSlide,{className:(0,n.cn)("!h-auto ",i.productCardSlideWrapper),children:(0,t.jsx)(V,{product:o,isShowTag:a.isShowTag??!0,onImageClick:m,onLearnMore:S,onShopNow:h,onAddToCart:x,secondaryButtonText:B,secondaryButtonFun:L,primaryButtonText:M,primaryButtonFun:z,classNames:i,theme:c,index:v})},o.productKey))})})})]})]})});W.displayName="SceneShelfV2";var me=(0,Q.withLayout)(W);
1
+ "use strict";"use client";var te=Object.create;var H=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var re=(e,i)=>{for(var a in i)H(e,a,{get:i[a],enumerable:!0})},G=(e,i,a,u)=>{if(i&&typeof i=="object"||typeof i=="function")for(let m of oe(i))!ne.call(e,m)&&m!==a&&H(e,m,{get:()=>i[m],enumerable:!(u=ie(i,m))||u.enumerable});return e};var U=(e,i,a)=>(a=e!=null?te(ae(e)):{},G(i||!e||!e.__esModule?H(a,"default",{value:e,enumerable:!0}):a,e)),se=e=>G(H({},"__esModule",{value:!0}),e);var ue={};re(ue,{SceneShelfV2ProductCard:()=>V,default:()=>me});module.exports=se(ue);var t=require("react/jsx-runtime"),r=U(require("react")),n=require("../../helpers/index.js"),l=require("../../components/index.js"),K=U(require("../Media/index.js")),j=require("swiper/react"),$=require("swiper/modules"),ge=require("swiper/css"),ve=require("swiper/css/navigation"),Q=require("../../shared/Styles.js"),q=require("../../hooks/useGridRowCount.js"),J=require("../../hooks/useExposure.js"),X=require("../../hooks/useViewItemList.js"),Y=require("../../shared/trackUrlRef.js"),F=require("../AiuiProvider/index.js"),T=require("../../shared/track.js");const le="shelf",ce="scene_shelf_v2",de=()=>(0,t.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:(0,t.jsx)("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),pe=()=>(0,t.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,t.jsx)("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),(0,t.jsx)("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),V=r.memo(({product:e,isShowTag:i=!0,onImageClick:a,onLearnMore:u,onShopNow:m,onAddToCart:S,secondaryButtonText:h,secondaryButtonFun:x,primaryButtonText:b,primaryButtonFun:P,classNames:c,className:s,theme:N,index:d})=>{const{locale:B="us",trackingData:L}=(0,F.useAiuiContext)(),[M,z]=r.useState(!1),[_,I]=r.useState(!1),f=L?.pageGroup,y=r.useCallback(async(p,k)=>{if(!p)return;const C=k==="primary"?z:I;C(!0);try{switch(p){case"buyNow":await m?.(e);break;case"addCart":await S?.(e);break;case"learnMore":await u?.(e?.href??"");break;default:break}}finally{C(!1)}},[u,m,S,e]),R=r.useCallback(()=>y(P,"primary"),[y,P]),E=r.useCallback(()=>y(x,"secondary"),[y,x]),g=r.useCallback(p=>{!e.href&&a&&p.preventDefault(),a?.(e),(0,T.gaTrack)({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_2_Products",page_group:f,items:[{item_id:e.sku,item_name:e.custom_name||e.title,item_variant:e.variantId,price:e.currentPrice,index:d}]})},[d,a,f,e]);return(0,t.jsxs)("div",{className:(0,n.cn)("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",s,c?.productCard,{"bg-container-secondary-0":N==="dark"}),children:[e.href?(0,t.jsx)("a",{href:(0,n.getLocalizedPath)((0,Y.trackUrlRef)(e.href,f+"_"+le+"_"+ce),B),onClick:g,className:(0,n.cn)("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",c?.productCardImage),"aria-label":`View ${e.title}`,children:(0,t.jsx)(l.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}):(0,t.jsx)("div",{className:(0,n.cn)("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 ",a&&"cursor-pointer transition-opacity hover:opacity-80",c?.productCardImage),onClick:a?g:void 0,role:a?"button":void 0,tabIndex:a?0:void 0,"aria-label":a?`View ${e.title}`:void 0,children:(0,t.jsx)(l.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}),(0,t.jsxs)("div",{className:"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4",children:[(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsx)("div",{className:(0,n.cn)("scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1",c?.productCardTags),children:i&&e?.tags?.map((p,k)=>(0,t.jsx)(l.Badge,{variant:p.variant??"outline",size:"sm",className:"",children:p.label},k))}),(0,t.jsx)(l.Heading,{as:"h3",size:2,className:(0,n.cn)("scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]",c?.productCardTitle),children:e.custom_name||e.title}),(e.custom_description||e.description)&&(0,t.jsx)(l.Text,{as:"p",size:1,className:(0,n.cn)("scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1",c?.productCardDescription),children:e.custom_description||e.description})]}),(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsxs)("div",{className:(0,n.cn)("scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1",c?.productCardPriceWrapper),children:[(0,t.jsx)(l.Heading,{as:"h6",size:2,className:(0,n.cn)("scene-shelf-v2-product-card-current-price text-info-primary",c?.productCardCurrentPrice),children:e.currentPrice}),e.originalPrice&&(0,t.jsx)(l.Heading,{as:"h6",size:2,className:(0,n.cn)("scene-shelf-v2-product-card-original-price text-info-tertiary line-through",c?.productCardOriginalPrice),children:e.originalPrice})]}),(h||b)&&(0,t.jsxs)("div",{className:(0,n.cn)("scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2",c?.productCardButtons),children:[h&&(0,t.jsx)(l.Button,{variant:"secondary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{E(),(0,T.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:h,SKU:e.sku||"",position:d}})},disabled:e.soldOut&&x!=="learnMore",loading:_,children:h}),b&&(0,t.jsx)(l.Button,{variant:"primary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{R(),(0,T.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:b,SKU:e.sku||"",position:d}})},disabled:e.soldOut&&P!=="learnMore",loading:M,children:b})]})]})]})]})});V.displayName="SceneShelfV2.ProductCard";const W=r.forwardRef(({className:e,classNames:i={},data:a,onPlayClick:u,onImageClick:m,onLearnMore:S,onShopNow:h,onAddToCart:x,...b},P)=>{const{theme:c="light",sceneImage:s,productsTitle:N,products:d,secondaryButtonText:B,secondaryButtonFun:L,primaryButtonText:M,primaryButtonFun:z,viewMoreLimit:_=2,copy:I}=a,f=r.useRef(null),y=r.useRef(null),R=r.useRef(null),[E,g]=r.useState(!1),[p,k]=r.useState(!1),{trackingData:C}=(0,F.useAiuiContext)();(0,J.useExposure)(y,{componentType:"image",componentName:"scene_shelf_banner"}),(0,X.useViewItemList)(R,{componentType:"video",componentName:"scene_shelf_banner",itemListName:"Scene_Shelf_2_Products",items:d.map((o,v)=>({item_id:o.sku??"",item_name:o.title,item_variant:o.variantId??"",price:o.currentPrice,index:v})),tabName:""});const A=(0,q.useGridRowCount)({rows:_??0,mobileCols:2}),O=r.useMemo(()=>[s?.pc,s?.desktop,s?.laptop,s?.pad,s?.mobile].some(o=>o?.mimeType==="video/mp4"),[s]),Z=r.useCallback(()=>{const o=f.current;o?o.paused?(o.play(),g(!0),u?.(!0)):(o.pause(),g(!1),u?.(!1)):u?.(!0),(0,T.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:C?.pageGroup,component_type:"video",component_name:"scene_shelf_banner",position:1,creative_id:s?.pc?.id}})},[u,s?.pc?.id,C?.pageGroup]);return r.useEffect(()=>{const o=f.current;if(!o||!O)return;const v=new IntersectionObserver(w=>{w.forEach(D=>{D.isIntersecting?o.play().catch(ee=>{console.warn("Video autoplay failed:",ee)}):o.pause()})},{threshold:.5});return v.observe(o),()=>{v.disconnect()}},[]),(0,t.jsxs)("div",{...b,ref:P,className:(0,n.cn)("scene-shelf-v2-root w-full overflow-hidden",{"aiui-dark":c==="dark"},e,i?.root),children:[(0,t.jsxs)("div",{className:(0,n.cn)("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",i?.media),ref:y,children:[(0,t.jsx)(K.default,{pcImage:s?.pc,desktopImage:s?.desktop,laptopImage:s?.laptop,padImage:s?.pad,mobileImage:s?.mobile,className:"size-full",videoClassName:"absolute inset-0 size-full object-cover",videoRef:f,onVideoPlay:()=>g(!0),onVideoPause:()=>g(!1),onVideoEnded:()=>g(!1)}),(0,t.jsx)("div",{"aria-hidden":"true",className:(0,n.cn)("scene-shelf-v2-media-overlay pointer-events-none absolute inset-0",i?.mediaOverlay)}),O&&(0,t.jsx)("div",{className:"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6",children:(0,t.jsx)("button",{type:"button","aria-label":E?"Pause video":"Play video",onClick:Z,className:(0,n.cn)("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",i?.mediaPlayButton),children:E?(0,t.jsx)(pe,{}):(0,t.jsx)(de,{})})})]}),(0,t.jsxs)("div",{ref:R,className:(0,n.cn)("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",i?.products),children:[N&&(0,t.jsx)(l.Heading,{as:"h2",size:3,className:(0,n.cn)("scene-shelf-v2-products-title text-info-primary",i?.productsTitle),html:N}),(0,t.jsx)("div",{className:"tablet:hidden grid grid-cols-2 gap-3",children:(()=>{const o=_!==void 0&&_>0&&d.length>A,v=o&&!p?d.slice(0,A):d;return(0,t.jsxs)(t.Fragment,{children:[v.map((w,D)=>(0,t.jsx)(V,{isShowTag:a.isShowTag??!0,product:w,onImageClick:m,onLearnMore:S,onShopNow:h,onAddToCart:x,secondaryButtonText:B,secondaryButtonFun:L,primaryButtonText:M,primaryButtonFun:z,classNames:i,theme:c,index:D},w.productKey)),o&&(0,t.jsx)("div",{className:"col-span-2 mt-6 flex justify-center",children:(0,t.jsxs)("button",{type:"button",onClick:()=>k(w=>!w),className:"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors","aria-expanded":p,children:[p?I?.viewLessLabel??"View Less":I?.viewMoreLabel??"View More",(0,t.jsx)("svg",{className:(0,n.cn)("size-4 transition-transform",p&&"rotate-180"),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})})()}),(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)("div",{className:"relative",children:(0,t.jsx)(j.Swiper,{slidesPerView:"auto",observer:!0,observeParents:!0,modules:[$.Mousewheel],mousewheel:{enabled:!0,forceToAxis:!0,sensitivity:1},className:"!overflow-visible",breakpoints:{768:{spaceBetween:16,slidesPerView:d.length>3?2.3:2},1024:{spaceBetween:16,slidesPerView:d.length>3?2.8:3},1440:{spaceBetween:16,slidesPerView:d.length>4?3.8:4},1920:{spaceBetween:16,slidesPerView:d.length>4?3.8:4}},children:d.map((o,v)=>(0,t.jsx)(j.SwiperSlide,{className:(0,n.cn)("!h-auto ",i.productCardSlideWrapper),children:(0,t.jsx)(V,{product:o,isShowTag:a.isShowTag??!0,onImageClick:m,onLearnMore:S,onShopNow:h,onAddToCart:x,secondaryButtonText:B,secondaryButtonFun:L,primaryButtonText:M,primaryButtonFun:z,classNames:i,theme:c,index:v})},o.productKey))})})})]})]})});W.displayName="SceneShelfV2";var me=(0,Q.withLayout)(W);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/SceneShelfV2/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/SceneShelfV2/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Heading, Text, Badge, Button, Picture } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ResponsiveMedia, Theme } from '../../types/props.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useGridRowCount } from '../../hooks/useGridRowCount.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useViewItemList } from '../../hooks/useViewItemList.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'shelf'\nconst componentName = 'scene_shelf_v2'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Types\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * \u6309\u94AE\u529F\u80FD\u7C7B\u578B\n */\nexport type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore'\n\nexport type SceneShelfV2SemanticName =\n | 'root'\n | 'media'\n | 'mediaOverlay'\n | 'mediaQuote'\n | 'mediaPlayButton'\n | 'products'\n | 'productsTitle'\n | 'productGrid'\n | 'productCardSlideWrapper'\n | 'productCard'\n | 'productCardImage'\n | 'productCardTags'\n | 'productCardTitle'\n | 'productCardDescription'\n | 'productCardPriceWrapper'\n | 'productCardCurrentPrice'\n | 'productCardOriginalPrice'\n | 'productCardButtons'\n\nexport interface SceneShelfV2Tag {\n label: string\n variant?: 'outline' | 'fill'\n}\n\nexport interface SceneShelfV2Product {\n /** \u4EA7\u54C1\u552F\u4E00\u6807\u8BC6 */\n productKey: string\n /** \u4EA7\u54C1\u4E3B\u6807\u9898 */\n title: string\n /** \u4EA7\u54C1\u63CF\u8FF0 */\n description?: string\n /** \u4EA7\u54C1\u56FE\u7247 */\n imageUrl: string\n imageAlt: string\n /**\n * \u4EA7\u54C1\u94FE\u63A5 URL\u3002\n */\n href?: string\n /** \u5F53\u524D\u4EF7\u683C\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$1,999.00\"\uFF09 */\n currentPrice: string\n /** \u539F\u4EF7\uFF08\u663E\u793A\u5220\u9664\u7EBF\uFF09 */\n originalPrice?: string\n /** \u6807\u7B7E\u5217\u8868 */\n tags?: SceneShelfV2Tag[]\n /** \u662F\u5426\u552E\u7F44 */\n soldOut?: boolean\n /**\n * sku\n */\n sku?: string\n /**\n * \u53D8\u4F53id\n */\n variantId?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n custom_name?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n custom_description?: string\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface SceneShelfV2CopyConfig {\n /** \u67E5\u770B\u66F4\u591A\u6807\u7B7E */\n viewMoreLabel?: string\n /** \u6536\u8D77\u6807\u7B7E */\n viewLessLabel?: string\n}\n\nexport interface SceneShelfV2Data {\n theme?: 'light' | 'dark'\n isShowTag?: boolean\n sceneImage: ResponsiveMedia\n /** \u4EA7\u54C1\u533A\u6807\u9898\uFF08\u53EF\u9009\uFF09 */\n productsTitle?: string\n /** \u4EA7\u54C1\u5217\u8868 */\n products: SceneShelfV2Product[]\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n secondaryButtonFun?: ButtonFunctionType\n /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n primaryButtonFun?: ButtonFunctionType\n /** \u67E5\u770B\u66F4\u591A\u9650\u5236\u6570\uFF08\u624B\u673A\u7AEF\u8D85\u8FC7\u4E24\u884C\u65F6\u663E\u793AviewMore\u6309\u94AE\uFF09 */\n viewMoreLimit?: number\n /** \u6587\u6848\u914D\u7F6E */\n copy?: SceneShelfV2CopyConfig\n}\n\nexport interface SceneShelfV2Props extends React.HTMLAttributes<HTMLDivElement> {\n data: SceneShelfV2Data\n /**\n * \u70B9\u51FB\u64AD\u653E/\u6682\u505C\u6309\u94AE\u56DE\u8C03\u3002\n * \u5F53\u5A92\u4F53\u533A\u4E3A\u89C6\u9891\u65F6\uFF0C\u7EC4\u4EF6\u5185\u90E8\u4F1A\u81EA\u52A8\u63A7\u5236\u64AD\u653E/\u6682\u505C,\u6B64\u56DE\u8C03\u4ECD\u4F1A\u89E6\u53D1\u3002\n */\n onPlayClick?: (isPlaying: boolean) => void\n /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n onImageClick?: (product: SceneShelfV2Product) => void\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onLearnMore?: (link: string) => void | Promise<void>\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Product Card\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface ProductCardInnerProps {\n product: SceneShelfV2Product\n isShowTag: boolean\n onImageClick?: (product: SceneShelfV2Product) => void\n onLearnMore?: (link: string) => void | Promise<void>\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n secondaryButtonText?: string\n secondaryButtonFun?: ButtonFunctionType\n primaryButtonText?: string\n primaryButtonFun?: ButtonFunctionType\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n className?: string\n theme?: Theme\n index?: number\n}\n\nconst ProductCardInner = React.memo(\n ({\n product,\n isShowTag = true,\n onImageClick,\n onLearnMore,\n onShopNow,\n onAddToCart,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n classNames,\n className,\n theme,\n index,\n }: ProductCardInnerProps) => {\n const { locale = 'us', trackingData } = useAiuiContext()\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n const pageGroup = trackingData?.pageGroup\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = React.useCallback(\n async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(product)\n break\n case 'addCart':\n await onAddToCart?.(product)\n break\n case 'learnMore':\n await onLearnMore?.(product?.href ?? '')\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n },\n [onLearnMore, onShopNow, onAddToCart, product]\n )\n\n const handlePrimary = React.useCallback(\n () => handleButtonClick(primaryButtonFun, 'primary'),\n [handleButtonClick, primaryButtonFun]\n )\n const handleSecondary = React.useCallback(\n () => handleButtonClick(secondaryButtonFun, 'secondary'),\n [handleButtonClick, secondaryButtonFun]\n )\n\n const handleImageClick = React.useCallback(\n (e: React.MouseEvent) => {\n // \u5982\u679C\u6CA1\u6709\u63D0\u4F9B href \u4E14\u6709\u70B9\u51FB\u56DE\u8C03\uFF0C\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (!product.href && onImageClick) {\n e.preventDefault()\n }\n onImageClick?.(product)\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n item_list_name: 'Scene_Shelf_2_Products',\n page_group: pageGroup,\n items: [\n {\n item_id: product.sku,\n item_name: product.custom_name || product.title,\n item_variant: product.variantId,\n price: product.currentPrice,\n index: index,\n },\n ],\n })\n },\n [index, onImageClick, pageGroup, product]\n )\n\n return (\n <div\n className={cn(\n '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 className,\n classNames?.productCard,\n {\n 'bg-container-secondary-0': theme === 'dark',\n }\n )}\n >\n {/* \u4EA7\u54C1\u56FE\u7247 */}\n {product.href ? (\n <a\n href={getLocalizedPath(\n trackUrlRef(product.href, pageGroup + '_' + componentType + '_' + componentName),\n locale\n )}\n onClick={handleImageClick}\n className={cn(\n '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',\n classNames?.productCardImage\n )}\n aria-label={`View ${product.title}`}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </a>\n ) : (\n <div\n className={cn(\n '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 ',\n onImageClick && 'cursor-pointer transition-opacity hover:opacity-80',\n classNames?.productCardImage\n )}\n onClick={onImageClick ? handleImageClick : undefined}\n role={onImageClick ? 'button' : undefined}\n tabIndex={onImageClick ? 0 : undefined}\n aria-label={onImageClick ? `View ${product.title}` : undefined}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </div>\n )}\n\n {/* \u4EA7\u54C1\u4FE1\u606F */}\n <div className=\"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4\">\n {/* \u6807\u7B7E + \u6807\u9898 + \u526F\u6807\u9898 */}\n <div className=\"flex flex-col gap-2\">\n <div\n className={cn(\n 'scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1',\n classNames?.productCardTags\n )}\n >\n {isShowTag &&\n product?.tags?.map((tag, idx) => (\n <Badge key={idx} variant={tag.variant ?? 'outline'} size=\"sm\" className=\"\">\n {tag.label}\n </Badge>\n ))}\n </div>\n\n <Heading\n as=\"h3\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 tablet:text-[20px] line-clamp-3 pr-[16%] text-[16px]',\n classNames?.productCardTitle\n )}\n >\n {product.custom_name || product.title}\n </Heading>\n\n {(product.custom_description || product.description) && (\n <Text\n as=\"p\"\n size={1}\n className={cn(\n 'scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1',\n classNames?.productCardDescription\n )}\n >\n {product.custom_description || product.description}\n </Text>\n )}\n </div>\n\n {/* \u4EF7\u683C + \u6309\u94AE */}\n <div className=\"flex flex-col gap-2\">\n {/* \u4EF7\u683C */}\n <div\n className={cn(\n 'scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1',\n classNames?.productCardPriceWrapper\n )}\n >\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-current-price text-info-primary',\n classNames?.productCardCurrentPrice\n )}\n >\n {product.currentPrice}\n </Heading>\n {product.originalPrice && (\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-original-price text-info-tertiary line-through',\n classNames?.productCardOriginalPrice\n )}\n >\n {product.originalPrice}\n </Heading>\n )}\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n {(secondaryButtonText || primaryButtonText) && (\n <div\n className={cn(\n 'scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2',\n classNames?.productCardButtons\n )}\n >\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n onClick={() => {\n handleSecondary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: secondaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n loading={secondaryLoading}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n onClick={() => {\n handlePrimary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: primaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n loading={primaryLoading}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n)\n\nProductCardInner.displayName = 'SceneShelfV2.ProductCard'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Main Component\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst SceneShelfV2 = React.forwardRef<HTMLDivElement, SceneShelfV2Props>(\n (\n { className, classNames = {}, data, onPlayClick, onImageClick, onLearnMore, onShopNow, onAddToCart, ...props },\n ref\n ) => {\n const {\n theme = 'light',\n sceneImage,\n productsTitle,\n products,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n viewMoreLimit = 2,\n copy,\n } = data\n const videoRef = React.useRef<HTMLVideoElement>(null)\n const mediaRef = React.useRef<HTMLDivElement>(null)\n const productWrapperRef = React.useRef<HTMLDivElement>(null)\n const [isPlaying, setIsPlaying] = React.useState(false)\n const [isExpanded, setIsExpanded] = React.useState(false)\n const { trackingData } = useAiuiContext()\n\n useExposure(mediaRef, {\n componentType: 'image',\n componentName: 'scene_shelf_banner',\n })\n\n useViewItemList(productWrapperRef, {\n componentType: 'video',\n componentName: 'scene_shelf_banner',\n itemListName: 'Scene_Shelf_2_Products',\n items: products.map((item, index) => ({\n item_id: item.sku ?? '',\n item_name: item.title,\n item_variant: item.variantId ?? '',\n price: item.currentPrice,\n index: index,\n })),\n tabName: '',\n })\n\n const visibleLimit = useGridRowCount({\n rows: viewMoreLimit ?? 0,\n mobileCols: 2,\n })\n\n const hasVideo = React.useMemo(\n () =>\n [sceneImage?.pc, sceneImage?.desktop, sceneImage?.laptop, sceneImage?.pad, sceneImage?.mobile].some(\n media => media?.mimeType === 'video/mp4'\n ),\n [sceneImage]\n )\n\n const handlePlayButtonClick = React.useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n onPlayClick?.(true)\n } else {\n video.pause()\n setIsPlaying(false)\n onPlayClick?.(false)\n }\n } else {\n onPlayClick?.(true)\n }\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: trackingData?.pageGroup,\n component_type: 'video',\n component_name: 'scene_shelf_banner',\n position: 1,\n creative_id: sceneImage?.pc?.id,\n },\n })\n }, [onPlayClick, sceneImage?.pc?.id, trackingData?.pageGroup])\n\n // \u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\n React.useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // \u8FDB\u5165\u89C6\u7A97\uFF0C\u81EA\u52A8\u64AD\u653E\n video.play().catch(error => {\n // \u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\uFF08\u6D4F\u89C8\u5668\u7B56\u7565\u53EF\u80FD\u963B\u6B62\u81EA\u52A8\u64AD\u653E\uFF09\n console.warn('Video autoplay failed:', error)\n })\n } else {\n // \u79BB\u5F00\u89C6\u7A97\uFF0C\u6682\u505C\u64AD\u653E\n video.pause()\n }\n })\n },\n {\n threshold: 0.5, // \u5F53\u89C6\u9891 50% \u53EF\u89C1\u65F6\u89E6\u53D1\n }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [])\n\n return (\n <div\n {...props}\n ref={ref}\n className={cn(\n 'scene-shelf-v2-root w-full overflow-hidden',\n { 'aiui-dark': theme === 'dark' },\n className,\n classNames?.root\n )}\n >\n {/* \u2500\u2500 \u5A92\u4F53\u533A \u2500\u2500 */}\n <div\n className={cn(\n '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',\n classNames?.media\n )}\n ref={mediaRef}\n >\n <Media\n pcImage={sceneImage?.pc}\n desktopImage={sceneImage?.desktop}\n laptopImage={sceneImage?.laptop}\n padImage={sceneImage?.pad}\n mobileImage={sceneImage?.mobile}\n className=\"size-full\"\n videoClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n {/* \u6E10\u53D8\u906E\u7F69 */}\n <div\n aria-hidden=\"true\"\n className={cn(\n 'scene-shelf-v2-media-overlay pointer-events-none absolute inset-0',\n classNames?.mediaOverlay\n )}\n />\n\n {/* \u5F15\u8A00 + \u64AD\u653E/\u6682\u505C\u6309\u94AE */}\n {hasVideo && (\n <div className=\"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n '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',\n classNames?.mediaPlayButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n </div>\n\n {/* \u2500\u2500 \u4EA7\u54C1\u533A \u2500\u2500 */}\n <div\n ref={productWrapperRef}\n className={cn(\n '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',\n classNames?.products\n )}\n >\n {productsTitle && (\n <Heading\n as=\"h2\"\n size={3}\n className={cn('scene-shelf-v2-products-title text-info-primary', classNames?.productsTitle)}\n html={productsTitle}\n />\n )}\n\n {/* Mobile\uFF1A2\u5217\u5E73\u94FA */}\n <div className=\"tablet:hidden grid grid-cols-2 gap-3\">\n {(() => {\n const shouldShowViewMore =\n viewMoreLimit !== undefined && viewMoreLimit > 0 && products.length > visibleLimit\n const displayedProducts = shouldShowViewMore && !isExpanded ? products.slice(0, visibleLimit) : products\n\n return (\n <>\n {displayedProducts.map((product, index) => (\n <ProductCardInner\n key={product.productKey}\n isShowTag={data.isShowTag ?? true}\n product={product}\n onImageClick={onImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n ))}\n {shouldShowViewMore && (\n <div className=\"col-span-2 mt-6 flex justify-center\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded(prev => !prev)}\n className=\"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors\"\n aria-expanded={isExpanded}\n >\n {isExpanded ? (copy?.viewLessLabel ?? 'View Less') : (copy?.viewMoreLabel ?? 'View More')}\n <svg\n className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n </svg>\n </button>\n </div>\n )}\n </>\n )\n })()}\n </div>\n\n {/* Tablet\uFF1ASwiper \u6A2A\u6ED1 */}\n <div className=\"tablet:block hidden\">\n <div className=\"relative\">\n <Swiper\n slidesPerView=\"auto\"\n observer\n observeParents\n modules={[Mousewheel]}\n mousewheel={{\n enabled: true,\n forceToAxis: true,\n sensitivity: 1,\n }}\n className=\"!overflow-visible\"\n breakpoints={{\n 768: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.8 : 3,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n 1920: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n }}\n >\n {products.map((product, index) => (\n <SwiperSlide key={product.productKey} className={cn('!h-auto ', classNames.productCardSlideWrapper)}>\n <ProductCardInner\n product={product}\n isShowTag={data.isShowTag ?? true}\n onImageClick={onImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </div>\n </div>\n )\n }\n)\n\nSceneShelfV2.displayName = 'SceneShelfV2'\nexport default withLayout(SceneShelfV2)\nexport { ProductCardInner as SceneShelfV2ProductCard }\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Heading, Text, Badge, Button, Picture } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ResponsiveMedia, Theme } from '../../types/props.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useGridRowCount } from '../../hooks/useGridRowCount.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useViewItemList } from '../../hooks/useViewItemList.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'shelf'\nconst componentName = 'scene_shelf_v2'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Types\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * \u6309\u94AE\u529F\u80FD\u7C7B\u578B\n */\nexport type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore'\n\nexport type SceneShelfV2SemanticName =\n | 'root'\n | 'media'\n | 'mediaOverlay'\n | 'mediaQuote'\n | 'mediaPlayButton'\n | 'products'\n | 'productsTitle'\n | 'productGrid'\n | 'productCardSlideWrapper'\n | 'productCard'\n | 'productCardImage'\n | 'productCardTags'\n | 'productCardTitle'\n | 'productCardDescription'\n | 'productCardPriceWrapper'\n | 'productCardCurrentPrice'\n | 'productCardOriginalPrice'\n | 'productCardButtons'\n\nexport interface SceneShelfV2Tag {\n label: string\n variant?: 'outline' | 'fill'\n}\n\nexport interface SceneShelfV2Product {\n /** \u4EA7\u54C1\u552F\u4E00\u6807\u8BC6 */\n productKey: string\n /** \u4EA7\u54C1\u4E3B\u6807\u9898 */\n title: string\n /** \u4EA7\u54C1\u63CF\u8FF0 */\n description?: string\n /** \u4EA7\u54C1\u56FE\u7247 */\n imageUrl: string\n imageAlt: string\n /**\n * \u4EA7\u54C1\u94FE\u63A5 URL\u3002\n */\n href?: string\n /** \u5F53\u524D\u4EF7\u683C\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$1,999.00\"\uFF09 */\n currentPrice: string\n /** \u539F\u4EF7\uFF08\u663E\u793A\u5220\u9664\u7EBF\uFF09 */\n originalPrice?: string\n /** \u6807\u7B7E\u5217\u8868 */\n tags?: SceneShelfV2Tag[]\n /** \u662F\u5426\u552E\u7F44 */\n soldOut?: boolean\n /**\n * sku\n */\n sku?: string\n /**\n * \u53D8\u4F53id\n */\n variantId?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n custom_name?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n custom_description?: string\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface SceneShelfV2CopyConfig {\n /** \u67E5\u770B\u66F4\u591A\u6807\u7B7E */\n viewMoreLabel?: string\n /** \u6536\u8D77\u6807\u7B7E */\n viewLessLabel?: string\n}\n\nexport interface SceneShelfV2Data {\n theme?: 'light' | 'dark'\n isShowTag?: boolean\n sceneImage: ResponsiveMedia\n /** \u4EA7\u54C1\u533A\u6807\u9898\uFF08\u53EF\u9009\uFF09 */\n productsTitle?: string\n /** \u4EA7\u54C1\u5217\u8868 */\n products: SceneShelfV2Product[]\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n secondaryButtonFun?: ButtonFunctionType\n /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n primaryButtonFun?: ButtonFunctionType\n /** \u67E5\u770B\u66F4\u591A\u9650\u5236\u6570\uFF08\u624B\u673A\u7AEF\u8D85\u8FC7\u4E24\u884C\u65F6\u663E\u793AviewMore\u6309\u94AE\uFF09 */\n viewMoreLimit?: number\n /** \u6587\u6848\u914D\u7F6E */\n copy?: SceneShelfV2CopyConfig\n}\n\nexport interface SceneShelfV2Props extends React.HTMLAttributes<HTMLDivElement> {\n data: SceneShelfV2Data\n /**\n * \u70B9\u51FB\u64AD\u653E/\u6682\u505C\u6309\u94AE\u56DE\u8C03\u3002\n * \u5F53\u5A92\u4F53\u533A\u4E3A\u89C6\u9891\u65F6\uFF0C\u7EC4\u4EF6\u5185\u90E8\u4F1A\u81EA\u52A8\u63A7\u5236\u64AD\u653E/\u6682\u505C,\u6B64\u56DE\u8C03\u4ECD\u4F1A\u89E6\u53D1\u3002\n */\n onPlayClick?: (isPlaying: boolean) => void\n /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n onImageClick?: (product: SceneShelfV2Product) => void\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onLearnMore?: (link: string) => void | Promise<void>\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Product Card\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface ProductCardInnerProps {\n product: SceneShelfV2Product\n isShowTag: boolean\n onImageClick?: (product: SceneShelfV2Product) => void\n onLearnMore?: (link: string) => void | Promise<void>\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n secondaryButtonText?: string\n secondaryButtonFun?: ButtonFunctionType\n primaryButtonText?: string\n primaryButtonFun?: ButtonFunctionType\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n className?: string\n theme?: Theme\n index?: number\n}\n\nconst ProductCardInner = React.memo(\n ({\n product,\n isShowTag = true,\n onImageClick,\n onLearnMore,\n onShopNow,\n onAddToCart,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n classNames,\n className,\n theme,\n index,\n }: ProductCardInnerProps) => {\n const { locale = 'us', trackingData } = useAiuiContext()\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n const pageGroup = trackingData?.pageGroup\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = React.useCallback(\n async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(product)\n break\n case 'addCart':\n await onAddToCart?.(product)\n break\n case 'learnMore':\n await onLearnMore?.(product?.href ?? '')\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n },\n [onLearnMore, onShopNow, onAddToCart, product]\n )\n\n const handlePrimary = React.useCallback(\n () => handleButtonClick(primaryButtonFun, 'primary'),\n [handleButtonClick, primaryButtonFun]\n )\n const handleSecondary = React.useCallback(\n () => handleButtonClick(secondaryButtonFun, 'secondary'),\n [handleButtonClick, secondaryButtonFun]\n )\n\n const handleImageClick = React.useCallback(\n (e: React.MouseEvent) => {\n // \u5982\u679C\u6CA1\u6709\u63D0\u4F9B href \u4E14\u6709\u70B9\u51FB\u56DE\u8C03\uFF0C\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (!product.href && onImageClick) {\n e.preventDefault()\n }\n onImageClick?.(product)\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n item_list_name: 'Scene_Shelf_2_Products',\n page_group: pageGroup,\n items: [\n {\n item_id: product.sku,\n item_name: product.custom_name || product.title,\n item_variant: product.variantId,\n price: product.currentPrice,\n index: index,\n },\n ],\n })\n },\n [index, onImageClick, pageGroup, product]\n )\n\n return (\n <div\n className={cn(\n '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 className,\n classNames?.productCard,\n {\n 'bg-container-secondary-0': theme === 'dark',\n }\n )}\n >\n {/* \u4EA7\u54C1\u56FE\u7247 */}\n {product.href ? (\n <a\n href={getLocalizedPath(\n trackUrlRef(product.href, pageGroup + '_' + componentType + '_' + componentName),\n locale\n )}\n onClick={handleImageClick}\n className={cn(\n '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',\n classNames?.productCardImage\n )}\n aria-label={`View ${product.title}`}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </a>\n ) : (\n <div\n className={cn(\n '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 ',\n onImageClick && 'cursor-pointer transition-opacity hover:opacity-80',\n classNames?.productCardImage\n )}\n onClick={onImageClick ? handleImageClick : undefined}\n role={onImageClick ? 'button' : undefined}\n tabIndex={onImageClick ? 0 : undefined}\n aria-label={onImageClick ? `View ${product.title}` : undefined}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </div>\n )}\n\n {/* \u4EA7\u54C1\u4FE1\u606F */}\n <div className=\"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4\">\n {/* \u6807\u7B7E + \u6807\u9898 + \u526F\u6807\u9898 */}\n <div className=\"flex flex-col gap-2\">\n <div\n className={cn(\n 'scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1',\n classNames?.productCardTags\n )}\n >\n {isShowTag &&\n product?.tags?.map((tag, idx) => (\n <Badge key={idx} variant={tag.variant ?? 'outline'} size=\"sm\" className=\"\">\n {tag.label}\n </Badge>\n ))}\n </div>\n\n <Heading\n as=\"h3\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]',\n classNames?.productCardTitle\n )}\n >\n {product.custom_name || product.title}\n </Heading>\n\n {(product.custom_description || product.description) && (\n <Text\n as=\"p\"\n size={1}\n className={cn(\n 'scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1',\n classNames?.productCardDescription\n )}\n >\n {product.custom_description || product.description}\n </Text>\n )}\n </div>\n\n {/* \u4EF7\u683C + \u6309\u94AE */}\n <div className=\"flex flex-col gap-2\">\n {/* \u4EF7\u683C */}\n <div\n className={cn(\n 'scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1',\n classNames?.productCardPriceWrapper\n )}\n >\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-current-price text-info-primary',\n classNames?.productCardCurrentPrice\n )}\n >\n {product.currentPrice}\n </Heading>\n {product.originalPrice && (\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-original-price text-info-tertiary line-through',\n classNames?.productCardOriginalPrice\n )}\n >\n {product.originalPrice}\n </Heading>\n )}\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n {(secondaryButtonText || primaryButtonText) && (\n <div\n className={cn(\n 'scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2',\n classNames?.productCardButtons\n )}\n >\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n onClick={() => {\n handleSecondary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: secondaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n loading={secondaryLoading}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n onClick={() => {\n handlePrimary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: primaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n loading={primaryLoading}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n)\n\nProductCardInner.displayName = 'SceneShelfV2.ProductCard'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Main Component\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst SceneShelfV2 = React.forwardRef<HTMLDivElement, SceneShelfV2Props>(\n (\n { className, classNames = {}, data, onPlayClick, onImageClick, onLearnMore, onShopNow, onAddToCart, ...props },\n ref\n ) => {\n const {\n theme = 'light',\n sceneImage,\n productsTitle,\n products,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n viewMoreLimit = 2,\n copy,\n } = data\n const videoRef = React.useRef<HTMLVideoElement>(null)\n const mediaRef = React.useRef<HTMLDivElement>(null)\n const productWrapperRef = React.useRef<HTMLDivElement>(null)\n const [isPlaying, setIsPlaying] = React.useState(false)\n const [isExpanded, setIsExpanded] = React.useState(false)\n const { trackingData } = useAiuiContext()\n\n useExposure(mediaRef, {\n componentType: 'image',\n componentName: 'scene_shelf_banner',\n })\n\n useViewItemList(productWrapperRef, {\n componentType: 'video',\n componentName: 'scene_shelf_banner',\n itemListName: 'Scene_Shelf_2_Products',\n items: products.map((item, index) => ({\n item_id: item.sku ?? '',\n item_name: item.title,\n item_variant: item.variantId ?? '',\n price: item.currentPrice,\n index: index,\n })),\n tabName: '',\n })\n\n const visibleLimit = useGridRowCount({\n rows: viewMoreLimit ?? 0,\n mobileCols: 2,\n })\n\n const hasVideo = React.useMemo(\n () =>\n [sceneImage?.pc, sceneImage?.desktop, sceneImage?.laptop, sceneImage?.pad, sceneImage?.mobile].some(\n media => media?.mimeType === 'video/mp4'\n ),\n [sceneImage]\n )\n\n const handlePlayButtonClick = React.useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n onPlayClick?.(true)\n } else {\n video.pause()\n setIsPlaying(false)\n onPlayClick?.(false)\n }\n } else {\n onPlayClick?.(true)\n }\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: trackingData?.pageGroup,\n component_type: 'video',\n component_name: 'scene_shelf_banner',\n position: 1,\n creative_id: sceneImage?.pc?.id,\n },\n })\n }, [onPlayClick, sceneImage?.pc?.id, trackingData?.pageGroup])\n\n // \u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\n React.useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // \u8FDB\u5165\u89C6\u7A97\uFF0C\u81EA\u52A8\u64AD\u653E\n video.play().catch(error => {\n // \u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\uFF08\u6D4F\u89C8\u5668\u7B56\u7565\u53EF\u80FD\u963B\u6B62\u81EA\u52A8\u64AD\u653E\uFF09\n console.warn('Video autoplay failed:', error)\n })\n } else {\n // \u79BB\u5F00\u89C6\u7A97\uFF0C\u6682\u505C\u64AD\u653E\n video.pause()\n }\n })\n },\n {\n threshold: 0.5, // \u5F53\u89C6\u9891 50% \u53EF\u89C1\u65F6\u89E6\u53D1\n }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [])\n\n return (\n <div\n {...props}\n ref={ref}\n className={cn(\n 'scene-shelf-v2-root w-full overflow-hidden',\n { 'aiui-dark': theme === 'dark' },\n className,\n classNames?.root\n )}\n >\n {/* \u2500\u2500 \u5A92\u4F53\u533A \u2500\u2500 */}\n <div\n className={cn(\n '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',\n classNames?.media\n )}\n ref={mediaRef}\n >\n <Media\n pcImage={sceneImage?.pc}\n desktopImage={sceneImage?.desktop}\n laptopImage={sceneImage?.laptop}\n padImage={sceneImage?.pad}\n mobileImage={sceneImage?.mobile}\n className=\"size-full\"\n videoClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n {/* \u6E10\u53D8\u906E\u7F69 */}\n <div\n aria-hidden=\"true\"\n className={cn(\n 'scene-shelf-v2-media-overlay pointer-events-none absolute inset-0',\n classNames?.mediaOverlay\n )}\n />\n\n {/* \u5F15\u8A00 + \u64AD\u653E/\u6682\u505C\u6309\u94AE */}\n {hasVideo && (\n <div className=\"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n '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',\n classNames?.mediaPlayButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n </div>\n\n {/* \u2500\u2500 \u4EA7\u54C1\u533A \u2500\u2500 */}\n <div\n ref={productWrapperRef}\n className={cn(\n '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',\n classNames?.products\n )}\n >\n {productsTitle && (\n <Heading\n as=\"h2\"\n size={3}\n className={cn('scene-shelf-v2-products-title text-info-primary', classNames?.productsTitle)}\n html={productsTitle}\n />\n )}\n\n {/* Mobile\uFF1A2\u5217\u5E73\u94FA */}\n <div className=\"tablet:hidden grid grid-cols-2 gap-3\">\n {(() => {\n const shouldShowViewMore =\n viewMoreLimit !== undefined && viewMoreLimit > 0 && products.length > visibleLimit\n const displayedProducts = shouldShowViewMore && !isExpanded ? products.slice(0, visibleLimit) : products\n\n return (\n <>\n {displayedProducts.map((product, index) => (\n <ProductCardInner\n key={product.productKey}\n isShowTag={data.isShowTag ?? true}\n product={product}\n onImageClick={onImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n ))}\n {shouldShowViewMore && (\n <div className=\"col-span-2 mt-6 flex justify-center\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded(prev => !prev)}\n className=\"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors\"\n aria-expanded={isExpanded}\n >\n {isExpanded ? (copy?.viewLessLabel ?? 'View Less') : (copy?.viewMoreLabel ?? 'View More')}\n <svg\n className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n </svg>\n </button>\n </div>\n )}\n </>\n )\n })()}\n </div>\n\n {/* Tablet\uFF1ASwiper \u6A2A\u6ED1 */}\n <div className=\"tablet:block hidden\">\n <div className=\"relative\">\n <Swiper\n slidesPerView=\"auto\"\n observer\n observeParents\n modules={[Mousewheel]}\n mousewheel={{\n enabled: true,\n forceToAxis: true,\n sensitivity: 1,\n }}\n className=\"!overflow-visible\"\n breakpoints={{\n 768: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.8 : 3,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n 1920: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n }}\n >\n {products.map((product, index) => (\n <SwiperSlide key={product.productKey} className={cn('!h-auto ', classNames.productCardSlideWrapper)}>\n <ProductCardInner\n product={product}\n isShowTag={data.isShowTag ?? true}\n onImageClick={onImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </div>\n </div>\n )\n }\n)\n\nSceneShelfV2.displayName = 'SceneShelfV2'\nexport default withLayout(SceneShelfV2)\nexport { ProductCardInner as SceneShelfV2ProductCard }\n"],
5
+ "mappings": "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",
6
6
  "names": ["SceneShelfV2_exports", "__export", "ProductCardInner", "SceneShelfV2_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_Media", "import_react", "import_modules", "import_css", "import_navigation", "import_Styles", "import_useGridRowCount", "import_useExposure", "import_useViewItemList", "import_trackUrlRef", "import_AiuiProvider", "import_track", "componentType", "componentName", "PlayIcon", "PauseIcon", "product", "isShowTag", "onImageClick", "onLearnMore", "onShopNow", "onAddToCart", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "classNames", "className", "theme", "index", "locale", "trackingData", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "pageGroup", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "handlePrimary", "handleSecondary", "handleImageClick", "e", "tag", "idx", "SceneShelfV2", "data", "onPlayClick", "props", "ref", "sceneImage", "productsTitle", "products", "viewMoreLimit", "copy", "videoRef", "mediaRef", "productWrapperRef", "isPlaying", "setIsPlaying", "isExpanded", "setIsExpanded", "item", "visibleLimit", "hasVideo", "media", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "Media", "shouldShowViewMore", "displayedProducts", "prev"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "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};
1
+ "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};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/MediaPlayerBase/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
4
- "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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "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"]
7
7
  }
package/dist/esm/biz-components/SceneShelfV2/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "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};
1
+ "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};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/SceneShelfV2/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/SceneShelfV2/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Heading, Text, Badge, Button, Picture } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ResponsiveMedia, Theme } from '../../types/props.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useGridRowCount } from '../../hooks/useGridRowCount.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useViewItemList } from '../../hooks/useViewItemList.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'shelf'\nconst componentName = 'scene_shelf_v2'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Types\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * \u6309\u94AE\u529F\u80FD\u7C7B\u578B\n */\nexport type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore'\n\nexport type SceneShelfV2SemanticName =\n | 'root'\n | 'media'\n | 'mediaOverlay'\n | 'mediaQuote'\n | 'mediaPlayButton'\n | 'products'\n | 'productsTitle'\n | 'productGrid'\n | 'productCardSlideWrapper'\n | 'productCard'\n | 'productCardImage'\n | 'productCardTags'\n | 'productCardTitle'\n | 'productCardDescription'\n | 'productCardPriceWrapper'\n | 'productCardCurrentPrice'\n | 'productCardOriginalPrice'\n | 'productCardButtons'\n\nexport interface SceneShelfV2Tag {\n label: string\n variant?: 'outline' | 'fill'\n}\n\nexport interface SceneShelfV2Product {\n /** \u4EA7\u54C1\u552F\u4E00\u6807\u8BC6 */\n productKey: string\n /** \u4EA7\u54C1\u4E3B\u6807\u9898 */\n title: string\n /** \u4EA7\u54C1\u63CF\u8FF0 */\n description?: string\n /** \u4EA7\u54C1\u56FE\u7247 */\n imageUrl: string\n imageAlt: string\n /**\n * \u4EA7\u54C1\u94FE\u63A5 URL\u3002\n */\n href?: string\n /** \u5F53\u524D\u4EF7\u683C\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$1,999.00\"\uFF09 */\n currentPrice: string\n /** \u539F\u4EF7\uFF08\u663E\u793A\u5220\u9664\u7EBF\uFF09 */\n originalPrice?: string\n /** \u6807\u7B7E\u5217\u8868 */\n tags?: SceneShelfV2Tag[]\n /** \u662F\u5426\u552E\u7F44 */\n soldOut?: boolean\n /**\n * sku\n */\n sku?: string\n /**\n * \u53D8\u4F53id\n */\n variantId?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n custom_name?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n custom_description?: string\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface SceneShelfV2CopyConfig {\n /** \u67E5\u770B\u66F4\u591A\u6807\u7B7E */\n viewMoreLabel?: string\n /** \u6536\u8D77\u6807\u7B7E */\n viewLessLabel?: string\n}\n\nexport interface SceneShelfV2Data {\n theme?: 'light' | 'dark'\n isShowTag?: boolean\n sceneImage: ResponsiveMedia\n /** \u4EA7\u54C1\u533A\u6807\u9898\uFF08\u53EF\u9009\uFF09 */\n productsTitle?: string\n /** \u4EA7\u54C1\u5217\u8868 */\n products: SceneShelfV2Product[]\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n secondaryButtonFun?: ButtonFunctionType\n /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n primaryButtonFun?: ButtonFunctionType\n /** \u67E5\u770B\u66F4\u591A\u9650\u5236\u6570\uFF08\u624B\u673A\u7AEF\u8D85\u8FC7\u4E24\u884C\u65F6\u663E\u793AviewMore\u6309\u94AE\uFF09 */\n viewMoreLimit?: number\n /** \u6587\u6848\u914D\u7F6E */\n copy?: SceneShelfV2CopyConfig\n}\n\nexport interface SceneShelfV2Props extends React.HTMLAttributes<HTMLDivElement> {\n data: SceneShelfV2Data\n /**\n * \u70B9\u51FB\u64AD\u653E/\u6682\u505C\u6309\u94AE\u56DE\u8C03\u3002\n * \u5F53\u5A92\u4F53\u533A\u4E3A\u89C6\u9891\u65F6\uFF0C\u7EC4\u4EF6\u5185\u90E8\u4F1A\u81EA\u52A8\u63A7\u5236\u64AD\u653E/\u6682\u505C,\u6B64\u56DE\u8C03\u4ECD\u4F1A\u89E6\u53D1\u3002\n */\n onPlayClick?: (isPlaying: boolean) => void\n /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n onImageClick?: (product: SceneShelfV2Product) => void\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onLearnMore?: (link: string) => void | Promise<void>\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Product Card\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface ProductCardInnerProps {\n product: SceneShelfV2Product\n isShowTag: boolean\n onImageClick?: (product: SceneShelfV2Product) => void\n onLearnMore?: (link: string) => void | Promise<void>\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n secondaryButtonText?: string\n secondaryButtonFun?: ButtonFunctionType\n primaryButtonText?: string\n primaryButtonFun?: ButtonFunctionType\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n className?: string\n theme?: Theme\n index?: number\n}\n\nconst ProductCardInner = React.memo(\n ({\n product,\n isShowTag = true,\n onImageClick,\n onLearnMore,\n onShopNow,\n onAddToCart,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n classNames,\n className,\n theme,\n index,\n }: ProductCardInnerProps) => {\n const { locale = 'us', trackingData } = useAiuiContext()\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n const pageGroup = trackingData?.pageGroup\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = React.useCallback(\n async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(product)\n break\n case 'addCart':\n await onAddToCart?.(product)\n break\n case 'learnMore':\n await onLearnMore?.(product?.href ?? '')\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n },\n [onLearnMore, onShopNow, onAddToCart, product]\n )\n\n const handlePrimary = React.useCallback(\n () => handleButtonClick(primaryButtonFun, 'primary'),\n [handleButtonClick, primaryButtonFun]\n )\n const handleSecondary = React.useCallback(\n () => handleButtonClick(secondaryButtonFun, 'secondary'),\n [handleButtonClick, secondaryButtonFun]\n )\n\n const handleImageClick = React.useCallback(\n (e: React.MouseEvent) => {\n // \u5982\u679C\u6CA1\u6709\u63D0\u4F9B href \u4E14\u6709\u70B9\u51FB\u56DE\u8C03\uFF0C\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (!product.href && onImageClick) {\n e.preventDefault()\n }\n onImageClick?.(product)\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n item_list_name: 'Scene_Shelf_2_Products',\n page_group: pageGroup,\n items: [\n {\n item_id: product.sku,\n item_name: product.custom_name || product.title,\n item_variant: product.variantId,\n price: product.currentPrice,\n index: index,\n },\n ],\n })\n },\n [index, onImageClick, pageGroup, product]\n )\n\n return (\n <div\n className={cn(\n '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 className,\n classNames?.productCard,\n {\n 'bg-container-secondary-0': theme === 'dark',\n }\n )}\n >\n {/* \u4EA7\u54C1\u56FE\u7247 */}\n {product.href ? (\n <a\n href={getLocalizedPath(\n trackUrlRef(product.href, pageGroup + '_' + componentType + '_' + componentName),\n locale\n )}\n onClick={handleImageClick}\n className={cn(\n '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',\n classNames?.productCardImage\n )}\n aria-label={`View ${product.title}`}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </a>\n ) : (\n <div\n className={cn(\n '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 ',\n onImageClick && 'cursor-pointer transition-opacity hover:opacity-80',\n classNames?.productCardImage\n )}\n onClick={onImageClick ? handleImageClick : undefined}\n role={onImageClick ? 'button' : undefined}\n tabIndex={onImageClick ? 0 : undefined}\n aria-label={onImageClick ? `View ${product.title}` : undefined}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </div>\n )}\n\n {/* \u4EA7\u54C1\u4FE1\u606F */}\n <div className=\"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4\">\n {/* \u6807\u7B7E + \u6807\u9898 + \u526F\u6807\u9898 */}\n <div className=\"flex flex-col gap-2\">\n <div\n className={cn(\n 'scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1',\n classNames?.productCardTags\n )}\n >\n {isShowTag &&\n product?.tags?.map((tag, idx) => (\n <Badge key={idx} variant={tag.variant ?? 'outline'} size=\"sm\" className=\"\">\n {tag.label}\n </Badge>\n ))}\n </div>\n\n <Heading\n as=\"h3\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 tablet:text-[20px] line-clamp-3 pr-[16%] text-[16px]',\n classNames?.productCardTitle\n )}\n >\n {product.custom_name || product.title}\n </Heading>\n\n {(product.custom_description || product.description) && (\n <Text\n as=\"p\"\n size={1}\n className={cn(\n 'scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1',\n classNames?.productCardDescription\n )}\n >\n {product.custom_description || product.description}\n </Text>\n )}\n </div>\n\n {/* \u4EF7\u683C + \u6309\u94AE */}\n <div className=\"flex flex-col gap-2\">\n {/* \u4EF7\u683C */}\n <div\n className={cn(\n 'scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1',\n classNames?.productCardPriceWrapper\n )}\n >\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-current-price text-info-primary',\n classNames?.productCardCurrentPrice\n )}\n >\n {product.currentPrice}\n </Heading>\n {product.originalPrice && (\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-original-price text-info-tertiary line-through',\n classNames?.productCardOriginalPrice\n )}\n >\n {product.originalPrice}\n </Heading>\n )}\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n {(secondaryButtonText || primaryButtonText) && (\n <div\n className={cn(\n 'scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2',\n classNames?.productCardButtons\n )}\n >\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n onClick={() => {\n handleSecondary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: secondaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n loading={secondaryLoading}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n onClick={() => {\n handlePrimary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: primaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n loading={primaryLoading}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n)\n\nProductCardInner.displayName = 'SceneShelfV2.ProductCard'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Main Component\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst SceneShelfV2 = React.forwardRef<HTMLDivElement, SceneShelfV2Props>(\n (\n { className, classNames = {}, data, onPlayClick, onImageClick, onLearnMore, onShopNow, onAddToCart, ...props },\n ref\n ) => {\n const {\n theme = 'light',\n sceneImage,\n productsTitle,\n products,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n viewMoreLimit = 2,\n copy,\n } = data\n const videoRef = React.useRef<HTMLVideoElement>(null)\n const mediaRef = React.useRef<HTMLDivElement>(null)\n const productWrapperRef = React.useRef<HTMLDivElement>(null)\n const [isPlaying, setIsPlaying] = React.useState(false)\n const [isExpanded, setIsExpanded] = React.useState(false)\n const { trackingData } = useAiuiContext()\n\n useExposure(mediaRef, {\n componentType: 'image',\n componentName: 'scene_shelf_banner',\n })\n\n useViewItemList(productWrapperRef, {\n componentType: 'video',\n componentName: 'scene_shelf_banner',\n itemListName: 'Scene_Shelf_2_Products',\n items: products.map((item, index) => ({\n item_id: item.sku ?? '',\n item_name: item.title,\n item_variant: item.variantId ?? '',\n price: item.currentPrice,\n index: index,\n })),\n tabName: '',\n })\n\n const visibleLimit = useGridRowCount({\n rows: viewMoreLimit ?? 0,\n mobileCols: 2,\n })\n\n const hasVideo = React.useMemo(\n () =>\n [sceneImage?.pc, sceneImage?.desktop, sceneImage?.laptop, sceneImage?.pad, sceneImage?.mobile].some(\n media => media?.mimeType === 'video/mp4'\n ),\n [sceneImage]\n )\n\n const handlePlayButtonClick = React.useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n onPlayClick?.(true)\n } else {\n video.pause()\n setIsPlaying(false)\n onPlayClick?.(false)\n }\n } else {\n onPlayClick?.(true)\n }\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: trackingData?.pageGroup,\n component_type: 'video',\n component_name: 'scene_shelf_banner',\n position: 1,\n creative_id: sceneImage?.pc?.id,\n },\n })\n }, [onPlayClick, sceneImage?.pc?.id, trackingData?.pageGroup])\n\n // \u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\n React.useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // \u8FDB\u5165\u89C6\u7A97\uFF0C\u81EA\u52A8\u64AD\u653E\n video.play().catch(error => {\n // \u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\uFF08\u6D4F\u89C8\u5668\u7B56\u7565\u53EF\u80FD\u963B\u6B62\u81EA\u52A8\u64AD\u653E\uFF09\n console.warn('Video autoplay failed:', error)\n })\n } else {\n // \u79BB\u5F00\u89C6\u7A97\uFF0C\u6682\u505C\u64AD\u653E\n video.pause()\n }\n })\n },\n {\n threshold: 0.5, // \u5F53\u89C6\u9891 50% \u53EF\u89C1\u65F6\u89E6\u53D1\n }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [])\n\n return (\n <div\n {...props}\n ref={ref}\n className={cn(\n 'scene-shelf-v2-root w-full overflow-hidden',\n { 'aiui-dark': theme === 'dark' },\n className,\n classNames?.root\n )}\n >\n {/* \u2500\u2500 \u5A92\u4F53\u533A \u2500\u2500 */}\n <div\n className={cn(\n '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',\n classNames?.media\n )}\n ref={mediaRef}\n >\n <Media\n pcImage={sceneImage?.pc}\n desktopImage={sceneImage?.desktop}\n laptopImage={sceneImage?.laptop}\n padImage={sceneImage?.pad}\n mobileImage={sceneImage?.mobile}\n className=\"size-full\"\n videoClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n {/* \u6E10\u53D8\u906E\u7F69 */}\n <div\n aria-hidden=\"true\"\n className={cn(\n 'scene-shelf-v2-media-overlay pointer-events-none absolute inset-0',\n classNames?.mediaOverlay\n )}\n />\n\n {/* \u5F15\u8A00 + \u64AD\u653E/\u6682\u505C\u6309\u94AE */}\n {hasVideo && (\n <div className=\"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n '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',\n classNames?.mediaPlayButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n </div>\n\n {/* \u2500\u2500 \u4EA7\u54C1\u533A \u2500\u2500 */}\n <div\n ref={productWrapperRef}\n className={cn(\n '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',\n classNames?.products\n )}\n >\n {productsTitle && (\n <Heading\n as=\"h2\"\n size={3}\n className={cn('scene-shelf-v2-products-title text-info-primary', classNames?.productsTitle)}\n html={productsTitle}\n />\n )}\n\n {/* Mobile\uFF1A2\u5217\u5E73\u94FA */}\n <div className=\"tablet:hidden grid grid-cols-2 gap-3\">\n {(() => {\n const shouldShowViewMore =\n viewMoreLimit !== undefined && viewMoreLimit > 0 && products.length > visibleLimit\n const displayedProducts = shouldShowViewMore && !isExpanded ? products.slice(0, visibleLimit) : products\n\n return (\n <>\n {displayedProducts.map((product, index) => (\n <ProductCardInner\n key={product.productKey}\n isShowTag={data.isShowTag ?? true}\n product={product}\n onImageClick={onImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n ))}\n {shouldShowViewMore && (\n <div className=\"col-span-2 mt-6 flex justify-center\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded(prev => !prev)}\n className=\"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors\"\n aria-expanded={isExpanded}\n >\n {isExpanded ? (copy?.viewLessLabel ?? 'View Less') : (copy?.viewMoreLabel ?? 'View More')}\n <svg\n className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n </svg>\n </button>\n </div>\n )}\n </>\n )\n })()}\n </div>\n\n {/* Tablet\uFF1ASwiper \u6A2A\u6ED1 */}\n <div className=\"tablet:block hidden\">\n <div className=\"relative\">\n <Swiper\n slidesPerView=\"auto\"\n observer\n observeParents\n modules={[Mousewheel]}\n mousewheel={{\n enabled: true,\n forceToAxis: true,\n sensitivity: 1,\n }}\n className=\"!overflow-visible\"\n breakpoints={{\n 768: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.8 : 3,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n 1920: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n }}\n >\n {products.map((product, index) => (\n <SwiperSlide key={product.productKey} className={cn('!h-auto ', classNames.productCardSlideWrapper)}>\n <ProductCardInner\n product={product}\n isShowTag={data.isShowTag ?? true}\n onImageClick={onImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </div>\n </div>\n )\n }\n)\n\nSceneShelfV2.displayName = 'SceneShelfV2'\nexport default withLayout(SceneShelfV2)\nexport { ProductCardInner as SceneShelfV2ProductCard }\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Heading, Text, Badge, Button, Picture } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ResponsiveMedia, Theme } from '../../types/props.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useGridRowCount } from '../../hooks/useGridRowCount.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useViewItemList } from '../../hooks/useViewItemList.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'shelf'\nconst componentName = 'scene_shelf_v2'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Types\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * \u6309\u94AE\u529F\u80FD\u7C7B\u578B\n */\nexport type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore'\n\nexport type SceneShelfV2SemanticName =\n | 'root'\n | 'media'\n | 'mediaOverlay'\n | 'mediaQuote'\n | 'mediaPlayButton'\n | 'products'\n | 'productsTitle'\n | 'productGrid'\n | 'productCardSlideWrapper'\n | 'productCard'\n | 'productCardImage'\n | 'productCardTags'\n | 'productCardTitle'\n | 'productCardDescription'\n | 'productCardPriceWrapper'\n | 'productCardCurrentPrice'\n | 'productCardOriginalPrice'\n | 'productCardButtons'\n\nexport interface SceneShelfV2Tag {\n label: string\n variant?: 'outline' | 'fill'\n}\n\nexport interface SceneShelfV2Product {\n /** \u4EA7\u54C1\u552F\u4E00\u6807\u8BC6 */\n productKey: string\n /** \u4EA7\u54C1\u4E3B\u6807\u9898 */\n title: string\n /** \u4EA7\u54C1\u63CF\u8FF0 */\n description?: string\n /** \u4EA7\u54C1\u56FE\u7247 */\n imageUrl: string\n imageAlt: string\n /**\n * \u4EA7\u54C1\u94FE\u63A5 URL\u3002\n */\n href?: string\n /** \u5F53\u524D\u4EF7\u683C\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$1,999.00\"\uFF09 */\n currentPrice: string\n /** \u539F\u4EF7\uFF08\u663E\u793A\u5220\u9664\u7EBF\uFF09 */\n originalPrice?: string\n /** \u6807\u7B7E\u5217\u8868 */\n tags?: SceneShelfV2Tag[]\n /** \u662F\u5426\u552E\u7F44 */\n soldOut?: boolean\n /**\n * sku\n */\n sku?: string\n /**\n * \u53D8\u4F53id\n */\n variantId?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n custom_name?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n custom_description?: string\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface SceneShelfV2CopyConfig {\n /** \u67E5\u770B\u66F4\u591A\u6807\u7B7E */\n viewMoreLabel?: string\n /** \u6536\u8D77\u6807\u7B7E */\n viewLessLabel?: string\n}\n\nexport interface SceneShelfV2Data {\n theme?: 'light' | 'dark'\n isShowTag?: boolean\n sceneImage: ResponsiveMedia\n /** \u4EA7\u54C1\u533A\u6807\u9898\uFF08\u53EF\u9009\uFF09 */\n productsTitle?: string\n /** \u4EA7\u54C1\u5217\u8868 */\n products: SceneShelfV2Product[]\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n secondaryButtonFun?: ButtonFunctionType\n /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n primaryButtonFun?: ButtonFunctionType\n /** \u67E5\u770B\u66F4\u591A\u9650\u5236\u6570\uFF08\u624B\u673A\u7AEF\u8D85\u8FC7\u4E24\u884C\u65F6\u663E\u793AviewMore\u6309\u94AE\uFF09 */\n viewMoreLimit?: number\n /** \u6587\u6848\u914D\u7F6E */\n copy?: SceneShelfV2CopyConfig\n}\n\nexport interface SceneShelfV2Props extends React.HTMLAttributes<HTMLDivElement> {\n data: SceneShelfV2Data\n /**\n * \u70B9\u51FB\u64AD\u653E/\u6682\u505C\u6309\u94AE\u56DE\u8C03\u3002\n * \u5F53\u5A92\u4F53\u533A\u4E3A\u89C6\u9891\u65F6\uFF0C\u7EC4\u4EF6\u5185\u90E8\u4F1A\u81EA\u52A8\u63A7\u5236\u64AD\u653E/\u6682\u505C,\u6B64\u56DE\u8C03\u4ECD\u4F1A\u89E6\u53D1\u3002\n */\n onPlayClick?: (isPlaying: boolean) => void\n /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n onImageClick?: (product: SceneShelfV2Product) => void\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onLearnMore?: (link: string) => void | Promise<void>\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Product Card\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface ProductCardInnerProps {\n product: SceneShelfV2Product\n isShowTag: boolean\n onImageClick?: (product: SceneShelfV2Product) => void\n onLearnMore?: (link: string) => void | Promise<void>\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n secondaryButtonText?: string\n secondaryButtonFun?: ButtonFunctionType\n primaryButtonText?: string\n primaryButtonFun?: ButtonFunctionType\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n className?: string\n theme?: Theme\n index?: number\n}\n\nconst ProductCardInner = React.memo(\n ({\n product,\n isShowTag = true,\n onImageClick,\n onLearnMore,\n onShopNow,\n onAddToCart,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n classNames,\n className,\n theme,\n index,\n }: ProductCardInnerProps) => {\n const { locale = 'us', trackingData } = useAiuiContext()\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n const pageGroup = trackingData?.pageGroup\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = React.useCallback(\n async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(product)\n break\n case 'addCart':\n await onAddToCart?.(product)\n break\n case 'learnMore':\n await onLearnMore?.(product?.href ?? '')\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n },\n [onLearnMore, onShopNow, onAddToCart, product]\n )\n\n const handlePrimary = React.useCallback(\n () => handleButtonClick(primaryButtonFun, 'primary'),\n [handleButtonClick, primaryButtonFun]\n )\n const handleSecondary = React.useCallback(\n () => handleButtonClick(secondaryButtonFun, 'secondary'),\n [handleButtonClick, secondaryButtonFun]\n )\n\n const handleImageClick = React.useCallback(\n (e: React.MouseEvent) => {\n // \u5982\u679C\u6CA1\u6709\u63D0\u4F9B href \u4E14\u6709\u70B9\u51FB\u56DE\u8C03\uFF0C\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n if (!product.href && onImageClick) {\n e.preventDefault()\n }\n onImageClick?.(product)\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n item_list_name: 'Scene_Shelf_2_Products',\n page_group: pageGroup,\n items: [\n {\n item_id: product.sku,\n item_name: product.custom_name || product.title,\n item_variant: product.variantId,\n price: product.currentPrice,\n index: index,\n },\n ],\n })\n },\n [index, onImageClick, pageGroup, product]\n )\n\n return (\n <div\n className={cn(\n '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 className,\n classNames?.productCard,\n {\n 'bg-container-secondary-0': theme === 'dark',\n }\n )}\n >\n {/* \u4EA7\u54C1\u56FE\u7247 */}\n {product.href ? (\n <a\n href={getLocalizedPath(\n trackUrlRef(product.href, pageGroup + '_' + componentType + '_' + componentName),\n locale\n )}\n onClick={handleImageClick}\n className={cn(\n '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',\n classNames?.productCardImage\n )}\n aria-label={`View ${product.title}`}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </a>\n ) : (\n <div\n className={cn(\n '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 ',\n onImageClick && 'cursor-pointer transition-opacity hover:opacity-80',\n classNames?.productCardImage\n )}\n onClick={onImageClick ? handleImageClick : undefined}\n role={onImageClick ? 'button' : undefined}\n tabIndex={onImageClick ? 0 : undefined}\n aria-label={onImageClick ? `View ${product.title}` : undefined}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </div>\n )}\n\n {/* \u4EA7\u54C1\u4FE1\u606F */}\n <div className=\"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4\">\n {/* \u6807\u7B7E + \u6807\u9898 + \u526F\u6807\u9898 */}\n <div className=\"flex flex-col gap-2\">\n <div\n className={cn(\n 'scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1',\n classNames?.productCardTags\n )}\n >\n {isShowTag &&\n product?.tags?.map((tag, idx) => (\n <Badge key={idx} variant={tag.variant ?? 'outline'} size=\"sm\" className=\"\">\n {tag.label}\n </Badge>\n ))}\n </div>\n\n <Heading\n as=\"h3\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]',\n classNames?.productCardTitle\n )}\n >\n {product.custom_name || product.title}\n </Heading>\n\n {(product.custom_description || product.description) && (\n <Text\n as=\"p\"\n size={1}\n className={cn(\n 'scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1',\n classNames?.productCardDescription\n )}\n >\n {product.custom_description || product.description}\n </Text>\n )}\n </div>\n\n {/* \u4EF7\u683C + \u6309\u94AE */}\n <div className=\"flex flex-col gap-2\">\n {/* \u4EF7\u683C */}\n <div\n className={cn(\n 'scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1',\n classNames?.productCardPriceWrapper\n )}\n >\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-current-price text-info-primary',\n classNames?.productCardCurrentPrice\n )}\n >\n {product.currentPrice}\n </Heading>\n {product.originalPrice && (\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-original-price text-info-tertiary line-through',\n classNames?.productCardOriginalPrice\n )}\n >\n {product.originalPrice}\n </Heading>\n )}\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n {(secondaryButtonText || primaryButtonText) && (\n <div\n className={cn(\n 'scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2',\n classNames?.productCardButtons\n )}\n >\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n onClick={() => {\n handleSecondary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: secondaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n loading={secondaryLoading}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n onClick={() => {\n handlePrimary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: primaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n loading={primaryLoading}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n)\n\nProductCardInner.displayName = 'SceneShelfV2.ProductCard'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Main Component\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst SceneShelfV2 = React.forwardRef<HTMLDivElement, SceneShelfV2Props>(\n (\n { className, classNames = {}, data, onPlayClick, onImageClick, onLearnMore, onShopNow, onAddToCart, ...props },\n ref\n ) => {\n const {\n theme = 'light',\n sceneImage,\n productsTitle,\n products,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n viewMoreLimit = 2,\n copy,\n } = data\n const videoRef = React.useRef<HTMLVideoElement>(null)\n const mediaRef = React.useRef<HTMLDivElement>(null)\n const productWrapperRef = React.useRef<HTMLDivElement>(null)\n const [isPlaying, setIsPlaying] = React.useState(false)\n const [isExpanded, setIsExpanded] = React.useState(false)\n const { trackingData } = useAiuiContext()\n\n useExposure(mediaRef, {\n componentType: 'image',\n componentName: 'scene_shelf_banner',\n })\n\n useViewItemList(productWrapperRef, {\n componentType: 'video',\n componentName: 'scene_shelf_banner',\n itemListName: 'Scene_Shelf_2_Products',\n items: products.map((item, index) => ({\n item_id: item.sku ?? '',\n item_name: item.title,\n item_variant: item.variantId ?? '',\n price: item.currentPrice,\n index: index,\n })),\n tabName: '',\n })\n\n const visibleLimit = useGridRowCount({\n rows: viewMoreLimit ?? 0,\n mobileCols: 2,\n })\n\n const hasVideo = React.useMemo(\n () =>\n [sceneImage?.pc, sceneImage?.desktop, sceneImage?.laptop, sceneImage?.pad, sceneImage?.mobile].some(\n media => media?.mimeType === 'video/mp4'\n ),\n [sceneImage]\n )\n\n const handlePlayButtonClick = React.useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n onPlayClick?.(true)\n } else {\n video.pause()\n setIsPlaying(false)\n onPlayClick?.(false)\n }\n } else {\n onPlayClick?.(true)\n }\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: trackingData?.pageGroup,\n component_type: 'video',\n component_name: 'scene_shelf_banner',\n position: 1,\n creative_id: sceneImage?.pc?.id,\n },\n })\n }, [onPlayClick, sceneImage?.pc?.id, trackingData?.pageGroup])\n\n // \u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\n React.useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // \u8FDB\u5165\u89C6\u7A97\uFF0C\u81EA\u52A8\u64AD\u653E\n video.play().catch(error => {\n // \u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\uFF08\u6D4F\u89C8\u5668\u7B56\u7565\u53EF\u80FD\u963B\u6B62\u81EA\u52A8\u64AD\u653E\uFF09\n console.warn('Video autoplay failed:', error)\n })\n } else {\n // \u79BB\u5F00\u89C6\u7A97\uFF0C\u6682\u505C\u64AD\u653E\n video.pause()\n }\n })\n },\n {\n threshold: 0.5, // \u5F53\u89C6\u9891 50% \u53EF\u89C1\u65F6\u89E6\u53D1\n }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [])\n\n return (\n <div\n {...props}\n ref={ref}\n className={cn(\n 'scene-shelf-v2-root w-full overflow-hidden',\n { 'aiui-dark': theme === 'dark' },\n className,\n classNames?.root\n )}\n >\n {/* \u2500\u2500 \u5A92\u4F53\u533A \u2500\u2500 */}\n <div\n className={cn(\n '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',\n classNames?.media\n )}\n ref={mediaRef}\n >\n <Media\n pcImage={sceneImage?.pc}\n desktopImage={sceneImage?.desktop}\n laptopImage={sceneImage?.laptop}\n padImage={sceneImage?.pad}\n mobileImage={sceneImage?.mobile}\n className=\"size-full\"\n videoClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n {/* \u6E10\u53D8\u906E\u7F69 */}\n <div\n aria-hidden=\"true\"\n className={cn(\n 'scene-shelf-v2-media-overlay pointer-events-none absolute inset-0',\n classNames?.mediaOverlay\n )}\n />\n\n {/* \u5F15\u8A00 + \u64AD\u653E/\u6682\u505C\u6309\u94AE */}\n {hasVideo && (\n <div className=\"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n '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',\n classNames?.mediaPlayButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n </div>\n\n {/* \u2500\u2500 \u4EA7\u54C1\u533A \u2500\u2500 */}\n <div\n ref={productWrapperRef}\n className={cn(\n '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',\n classNames?.products\n )}\n >\n {productsTitle && (\n <Heading\n as=\"h2\"\n size={3}\n className={cn('scene-shelf-v2-products-title text-info-primary', classNames?.productsTitle)}\n html={productsTitle}\n />\n )}\n\n {/* Mobile\uFF1A2\u5217\u5E73\u94FA */}\n <div className=\"tablet:hidden grid grid-cols-2 gap-3\">\n {(() => {\n const shouldShowViewMore =\n viewMoreLimit !== undefined && viewMoreLimit > 0 && products.length > visibleLimit\n const displayedProducts = shouldShowViewMore && !isExpanded ? products.slice(0, visibleLimit) : products\n\n return (\n <>\n {displayedProducts.map((product, index) => (\n <ProductCardInner\n key={product.productKey}\n isShowTag={data.isShowTag ?? true}\n product={product}\n onImageClick={onImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n ))}\n {shouldShowViewMore && (\n <div className=\"col-span-2 mt-6 flex justify-center\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded(prev => !prev)}\n className=\"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors\"\n aria-expanded={isExpanded}\n >\n {isExpanded ? (copy?.viewLessLabel ?? 'View Less') : (copy?.viewMoreLabel ?? 'View More')}\n <svg\n className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n </svg>\n </button>\n </div>\n )}\n </>\n )\n })()}\n </div>\n\n {/* Tablet\uFF1ASwiper \u6A2A\u6ED1 */}\n <div className=\"tablet:block hidden\">\n <div className=\"relative\">\n <Swiper\n slidesPerView=\"auto\"\n observer\n observeParents\n modules={[Mousewheel]}\n mousewheel={{\n enabled: true,\n forceToAxis: true,\n sensitivity: 1,\n }}\n className=\"!overflow-visible\"\n breakpoints={{\n 768: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.8 : 3,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n 1920: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n }}\n >\n {products.map((product, index) => (\n <SwiperSlide key={product.productKey} className={cn('!h-auto ', classNames.productCardSlideWrapper)}>\n <ProductCardInner\n product={product}\n isShowTag={data.isShowTag ?? true}\n onImageClick={onImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </div>\n </div>\n )\n }\n)\n\nSceneShelfV2.displayName = 'SceneShelfV2'\nexport default withLayout(SceneShelfV2)\nexport { ProductCardInner as SceneShelfV2ProductCard }\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "jsx", "jsxs", "React", "cn", "getLocalizedPath", "Heading", "Text", "Badge", "Button", "Picture", "Media", "Swiper", "SwiperSlide", "Mousewheel", "withLayout", "useGridRowCount", "useExposure", "useViewItemList", "trackUrlRef", "useAiuiContext", "gaTrack", "componentType", "componentName", "PlayIcon", "PauseIcon", "ProductCardInner", "product", "isShowTag", "onImageClick", "onLearnMore", "onShopNow", "onAddToCart", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "classNames", "className", "theme", "index", "locale", "trackingData", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "pageGroup", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "handlePrimary", "handleSecondary", "handleImageClick", "e", "tag", "idx", "SceneShelfV2", "data", "onPlayClick", "props", "ref", "sceneImage", "productsTitle", "products", "viewMoreLimit", "copy", "videoRef", "mediaRef", "productWrapperRef", "isPlaying", "setIsPlaying", "isExpanded", "setIsExpanded", "item", "visibleLimit", "hasVideo", "media", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "shouldShowViewMore", "displayedProducts", "prev", "SceneShelfV2_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.99",
3
+ "version": "1.2.0",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/style.css CHANGED
@@ -1651,9 +1651,6 @@ video {
1651
1651
  .min-h-\[610px\] {
1652
1652
  min-height: 610px;
1653
1653
  }
1654
- .min-h-screen {
1655
- min-height: 100vh;
1656
- }
1657
1654
  .\!w-1\/2 {
1658
1655
  width: 50% !important;
1659
1656
  }