@anker-in/headless-ui 1.1.9-alpha.1764570351852 → 1.1.9-alpha.1764578612388

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 (5) hide show
  1. package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
  2. package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
  3. package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
  4. package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
  5. package/package.json +1 -1
package/dist/cjs/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var Ie=Object.create;var z=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var _e=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,Re=Object.prototype.hasOwnProperty;var Me=(r,l)=>{for(var n in l)z(r,n,{get:l[n],enumerable:!0})},ue=(r,l,n,f)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of _e(l))!Re.call(r,i)&&i!==n&&z(r,i,{get:()=>l[i],enumerable:!(f=Ne(l,i))||f.enumerable});return r};var de=(r,l,n)=>(n=r!=null?Ie(we(r)):{},ue(l||!r||!r.__esModule?z(n,"default",{value:r,enumerable:!0}):n,r)),Se=r=>ue(z({},"__esModule",{value:!0}),r);var Ae={};Me(Ae,{default:()=>Oe});module.exports=Se(Ae);var e=require("react/jsx-runtime"),t=require("react"),v=require("../../helpers/utils.js"),fe=require("../../shared/Styles.js"),Y=de(require("../../components/button.js")),Z=require("../VideoModal/index.js"),ee=require("@payloadcms/richtext-lexical/html"),Te=require("react-intersection-observer"),ge=require("../../hooks/useExposure.js"),M=de(require("../../helpers/ScrollLoadVideo.js")),D=require("gsap"),ve=require("gsap/dist/SplitText"),te=require("gsap/dist/ScrollTrigger");const Le="media_player_base",ke="video",m={TEXT_START_OFFSET:"10%",TEXT_ANIMATION_MULTIPLIER:1.5,TEXT_ANIMATION_OFFSET:80,VIDEO_HEIGHT_BASE:102,OVERLAP_FACTOR:.5,VIDEO_PROGRESS_THRESHOLD:.9,HEIGHT_CHANGE_THRESHOLD:5,BTB_TARGET_THRESHOLD:1},C={DAMPING:.18,EPSILON:.5},pe=({defaultConverters:r})=>({...r,text:l=>{const{node:n}=l;return n.$&&n.$.color?`<span class="lexical-${n.$.color}">${n.text}</span>`:n.text}}),me=(0,t.forwardRef)(({className:r="",id:l,onBtnClick:n,data:{title:f,videoTitle:i,btnText:S,youtubeId:L,video:k,mobileVideo:re,theme:B,img:O,shape:G,titleAnimation:b,...be}},xe)=>{const{sticky:I}=be,[A,ne]=(0,t.useState)(!1),[ye,le]=(0,t.useState)(0),[he,oe]=(0,t.useState)(0),[V,Ee]=(0,t.useState)(0),[F,$]=(0,t.useState)(!1),x=(0,t.useRef)(null),X=(0,t.useRef)(null),c=(0,t.useRef)(null),q=(0,t.useRef)(null),U=(0,t.useRef)(null),j=(0,t.useRef)(null),se=(0,t.useRef)(null),ae=(0,t.useRef)(null),y=(0,t.useRef)({btb:0,titleHeight:0}),N=(0,t.useRef)(!1),W=(0,t.useRef)(!1),h=(0,t.useRef)(null),{ref:ie,inView:d}=(0,Te.useInView)();(0,t.useImperativeHandle)(xe,()=>c.current);const E=typeof f=="string"?f:f&&(0,ee.convertLexicalToHTML)({data:f,converters:pe}),_=typeof i=="string"?i:i&&(0,ee.convertLexicalToHTML)({data:i,converters:pe});(0,t.useEffect)(()=>{d?(x.current?.play(),ne(!0)):(x.current?.pause(),ne(!1))},[d]),(0,t.useEffect)(()=>{if(!c.current||!I)return;const s=(K=!1)=>{if(!c.current)return;const P=c.current.getBoundingClientRect(),p=window.innerHeight,H=p-P.bottom,g=H>p?p:Math.max(0,H),w=c.current.clientHeight+p;if(W.current&&!K)return;const Q=Math.abs(g-y.current.btb)>m.BTB_TARGET_THRESHOLD,R=Math.abs(w-y.current.titleHeight)>m.HEIGHT_CHANGE_THRESHOLD;(Q||!N.current)&&(y.current.btb=g),(R||!N.current)&&(y.current.titleHeight=w),N.current||(N.current=!0,le(g),oe(w))};s();const T=new ResizeObserver(()=>{requestAnimationFrame(()=>{s()})});T.observe(c.current);let o=null;const a=()=>{o===null&&(o=requestAnimationFrame(()=>{s(),o=null}))};window.addEventListener("scroll",a,{passive:!0});const u=()=>{W.current=!0,h.current&&clearTimeout(h.current),h.current=setTimeout(()=>{W.current=!1,s(!0)},150)};return window.addEventListener("resize",u),()=>{T.disconnect(),window.removeEventListener("scroll",a),window.removeEventListener("resize",u),o!==null&&cancelAnimationFrame(o),h.current&&(clearTimeout(h.current),h.current=null),N.current=!1}},[I]),(0,t.useEffect)(()=>{if(!I)return;let s;const T=()=>{le(o=>{const a=y.current.btb,u=a-o;return Math.abs(u)<=C.EPSILON?a:o+u*C.DAMPING}),oe(o=>{const a=y.current.titleHeight,u=a-o;return Math.abs(u)<=C.EPSILON?a:o+u*C.DAMPING}),s=requestAnimationFrame(T)};return s=requestAnimationFrame(T),()=>{cancelAnimationFrame(s)}},[I]),(0,t.useEffect)(()=>{if(!d||!b||b!=="fade-in"||!q.current)return;const s=q.current,T=s.clientHeight||80;j.current=new ve.SplitText(s,{type:"words",wordsClass:"word"});const o=j.current.words,a=o.length,u=1/a,K=o.map((P,p)=>{const H=p/a*(1-m.OVERLAP_FACTOR),g=u*(1+m.OVERLAP_FACTOR);return{start:H,width:g}});return D.gsap.set(o,{opacity:0}),se.current=te.ScrollTrigger.create({trigger:c.current,start:`top center-=${m.TEXT_START_OFFSET}`,end:`top+=${T*m.TEXT_ANIMATION_MULTIPLIER+m.TEXT_ANIMATION_OFFSET}px center-=${m.TEXT_START_OFFSET}`,scrub:!0,onUpdate:P=>{const p=P.progress;o.forEach((H,g)=>{const{start:w,width:Q}=K[g];let R=(p-w)/Q;R=Math.max(0,Math.min(R,1)),D.gsap.set(H,{opacity:R})}),X.current&&D.gsap.set(X.current,{opacity:p})}}),()=>{j.current?.revert(),se.current?.kill()}},[b,d]),(0,t.useEffect)(()=>{if(!(!d||!c.current))return ae.current=te.ScrollTrigger.create({trigger:c.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:s=>{Ee(s.progress)}}),()=>{ae.current?.kill()}},[d]),(0,ge.useExposure)(U,{componentType:ke,componentName:Le,componentTitle:_});const He=(0,t.useMemo)(()=>d&&V>0&&V<m.VIDEO_PROGRESS_THRESHOLD?3:d?2:1,[V,d]),ce=(0,t.useCallback)(()=>{$(!0),n?.()},[n]),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 I?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{ref:c,className:(0,v.cn)("relative z-10",J,{"aiui-dark":B==="dark","rounded-box":G==="rounded"},r),children:(0,e.jsx)("div",{ref:ie,children:!b&&(0,e.jsxs)("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[E&&!A&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:E}}),_&&A&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:_}}),S&&(0,e.jsx)(Y.default,{variant:"link",className:(0,v.cn)("member-equity-button-secondary "),onClick:ce,children:S})]})})}),(0,e.jsxs)("div",{style:{marginBottom:`-${ye}px`,marginTop:`-${he}px`,zIndex:He},className:"relative",children:[(0,e.jsx)("div",{className:"sticky top-0",children:(0,e.jsxs)("div",{id:l,className:(0,v.cn)("relative h-screen w-full overflow-hidden",{"aiui-dark":B==="dark","rounded-box":G==="rounded"}),children:[b==="fade-in"&&E&&(0,e.jsx)("div",{ref:q,className:"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:E}}),(0,e.jsxs)("div",{className:"media-cover absolute left-0 top-0 size-full",children:[(0,e.jsx)(M.default,{videoRef:x,poster:O?.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}),(0,e.jsx)(M.default,{videoRef:x,poster:O?.url||"",src:re?.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}),(0,e.jsx)("div",{ref:X,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),(0,e.jsx)("div",{className:(0,v.cn)("relative box-content block",J),ref:U})]}),F&&L&&(0,e.jsx)(Z.VideoModal,{visible:F,youTubeId:L,onCloseModal:()=>$(!1)})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{id:l,className:(0,v.cn)("relative overflow-hidden",J,{"aiui-dark":B==="dark","rounded-box":G==="rounded"},r),children:[(0,e.jsxs)("div",{ref:ie,children:[!b&&(0,e.jsxs)("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[E&&!A&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:E}}),_&&A&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:_}}),S&&(0,e.jsx)(Y.default,{variant:"link",className:(0,v.cn)("member-equity-button-secondary"),onClick:ce,children:S})]}),(0,e.jsx)(M.default,{videoRef:x,poster:O?.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}),(0,e.jsx)(M.default,{videoRef:x,poster:O?.url||"",src:re?.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})]}),(0,e.jsx)("div",{ref:U,className:"absolute bottom-0 left-0 h-px w-full"})]}),F&&L&&(0,e.jsx)(Z.VideoModal,{visible:F,youTubeId:L,onCloseModal:()=>$(!1)})]})});me.displayName="MediaPlayerBase";var Oe=(0,fe.withLayout)(me);
1
+ "use strict";"use client";var Ae=Object.create;var P=Object.defineProperty;var we=Object.getOwnPropertyDescriptor;var He=Object.getOwnPropertyNames;var Me=Object.getPrototypeOf,Le=Object.prototype.hasOwnProperty;var Se=(r,o)=>{for(var l in o)P(r,l,{get:o[l],enumerable:!0})},ue=(r,o,l,f)=>{if(o&&typeof o=="object"||typeof o=="function")for(let u of He(o))!Le.call(r,u)&&u!==l&&P(r,u,{get:()=>o[u],enumerable:!(f=we(o,u))||f.enumerable});return r};var de=(r,o,l)=>(l=r!=null?Ae(Me(r)):{},ue(o||!r||!r.__esModule?P(l,"default",{value:r,enumerable:!0}):l,r)),ke=r=>ue(P({},"__esModule",{value:!0}),r);var Ce={};Se(Ce,{default:()=>Fe});module.exports=ke(Ce);var t=require("react/jsx-runtime"),e=require("react"),T=require("../../helpers/utils.js"),ge=require("../../shared/Styles.js"),J=de(require("../../components/button.js")),K=require("../VideoModal/index.js"),Q=require("@payloadcms/richtext-lexical/html"),xe=require("react-intersection-observer"),Te=require("../../hooks/useExposure.js"),A=de(require("../../helpers/ScrollLoadVideo.js")),F=require("gsap"),ve=require("gsap/dist/SplitText"),W=require("gsap/dist/ScrollTrigger");const Oe="media_player_base",Pe="video",x={TEXT_START_OFFSET:"10%",TEXT_ANIMATION_MULTIPLIER:1.5,TEXT_ANIMATION_OFFSET:80,VIDEO_HEIGHT_BASE:102,OVERLAP_FACTOR:.5,VIDEO_PROGRESS_THRESHOLD:.9,HEIGHT_CHANGE_THRESHOLD:5},pe={TRANSLATE_RANGE:120,PADDING:80},h={DAMPING:.18,EPSILON:.5},me=({defaultConverters:r})=>({...r,text:o=>{const{node:l}=o;return l.$&&l.$.color?`<span class="lexical-${l.$.color}">${l.text}</span>`:l.text}}),fe=(0,e.forwardRef)(({className:r="",id:o,onBtnClick:l,data:{title:f,videoTitle:u,btnText:w,youtubeId:H,video:M,mobileVideo:Z,theme:C,img:L,shape:D,titleAnimation:v,...be}},ye)=>{const{sticky:c}=be,[S,ee]=(0,e.useState)(!1),[te,re]=(0,e.useState)(0),[Ie,ne]=(0,e.useState)(0),[E,Ne]=(0,e.useState)(0),[k,G]=(0,e.useState)(!1),[he,le]=(0,e.useState)(0),b=(0,e.useRef)(null),V=(0,e.useRef)(null),d=(0,e.useRef)(null),z=(0,e.useRef)(null),$=(0,e.useRef)(null),B=(0,e.useRef)(null),oe=(0,e.useRef)(null),se=(0,e.useRef)(null),O=(0,e.useRef)({btb:0,titleHeight:0}),q=(0,e.useRef)(!1),X=(0,e.useRef)(0),{ref:ae,inView:m}=(0,xe.useInView)();(0,e.useImperativeHandle)(ye,()=>d.current);const y=typeof f=="string"?f:f&&(0,Q.convertLexicalToHTML)({data:f,converters:me}),_=typeof u=="string"?u:u&&(0,Q.convertLexicalToHTML)({data:u,converters:me});(0,e.useEffect)(()=>{m?(b.current?.play(),ee(!0)):(b.current?.pause(),ee(!1))},[m]),(0,e.useEffect)(()=>{if(!d.current||!c)return;const s=()=>{if(!d.current)return;const i=d.current.getBoundingClientRect(),I=window.innerHeight,R=I-i.bottom,g=R>I?I:R,N=d.current.clientHeight+I;O.current.btb=g,O.current.titleHeight=N,q.current||(q.current=!0,re(g),ne(N))};s();const p=new ResizeObserver(()=>{requestAnimationFrame(()=>{s()})});p.observe(d.current);let n=null;const a=()=>{n===null&&(n=requestAnimationFrame(()=>{s(),n=null}))};return window.addEventListener("scroll",a,{passive:!0}),()=>{p.disconnect(),window.removeEventListener("scroll",a),n!==null&&cancelAnimationFrame(n),q.current=!1}},[c]),(0,e.useEffect)(()=>{if(!c)return;let s;const p=()=>{re(n=>{const a=O.current.btb,i=a-n;return Math.abs(i)<=h.EPSILON?a:n+i*h.DAMPING}),ne(n=>{const a=O.current.titleHeight,i=a-n;return Math.abs(i)<=h.EPSILON?a:n+i*h.DAMPING}),s=requestAnimationFrame(p)};return s=requestAnimationFrame(p),()=>{cancelAnimationFrame(s)}},[c]),(0,e.useEffect)(()=>{if(!m||!v||v!=="fade-in"||!z.current)return;const s=z.current,p=s.clientHeight||80;B.current=new ve.SplitText(s,{type:"words",wordsClass:"word"});const n=B.current.words,a=n.length,i=1/a,I=n.map((R,g)=>{const N=g/a*(1-x.OVERLAP_FACTOR),U=i*(1+x.OVERLAP_FACTOR);return{start:N,width:U}});return F.gsap.set(n,{opacity:0}),oe.current=W.ScrollTrigger.create({trigger:d.current,start:`top center-=${x.TEXT_START_OFFSET}`,end:`top+=${p*x.TEXT_ANIMATION_MULTIPLIER+x.TEXT_ANIMATION_OFFSET}px center-=${x.TEXT_START_OFFSET}`,scrub:!0,onUpdate:R=>{const g=R.progress;n.forEach((N,U)=>{const{start:_e,width:Re}=I[U];let Y=(g-_e)/Re;Y=Math.max(0,Math.min(Y,1)),F.gsap.set(N,{opacity:Y})}),V.current&&F.gsap.set(V.current,{opacity:g})}}),()=>{B.current?.revert(),oe.current?.kill()}},[v,m]),(0,e.useEffect)(()=>{if(!(!m||!d.current))return se.current=W.ScrollTrigger.create({trigger:d.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:s=>{Ne(s.progress)}}),()=>{se.current?.kill()}},[m]),(0,Te.useExposure)($,{componentType:Pe,componentName:Oe,componentTitle:_});const Ee=(0,e.useMemo)(()=>m&&E>0&&E<x.VIDEO_PROGRESS_THRESHOLD?3:m?2:1,[E,m]);(0,e.useEffect)(()=>{if(!c){X.current=0,le(0);return}X.current=(E-.5)*pe.TRANSLATE_RANGE},[E,c]),(0,e.useEffect)(()=>{if(!c)return;let s;const p=()=>{le(n=>{const a=X.current,i=a-n;return Math.abs(i)<=h.EPSILON?a:n+i*h.DAMPING}),s=requestAnimationFrame(p)};return s=requestAnimationFrame(p),()=>{cancelAnimationFrame(s)}},[c]);const ie=(0,e.useMemo)(()=>c?pe.PADDING:0,[c]),ce=(0,e.useCallback)(()=>{G(!0),l?.()},[l]),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 c?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{ref:d,className:(0,T.cn)("relative z-10",j,{"aiui-dark":C==="dark","rounded-box":D==="rounded"},r),children:(0,t.jsx)("div",{ref:ae,children:!v&&(0,t.jsxs)("div",{className:"media-content text-info-primary 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&&!S&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),_&&S&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:_}}),w&&(0,t.jsx)(J.default,{variant:"link",className:(0,T.cn)("member-equity-button-secondary "),onClick:ce,children:w})]})})}),(0,t.jsxs)("div",{style:{marginBottom:`-${te}px`,marginTop:`-${Ie}px`,zIndex:Ee},className:"relative",children:[(0,t.jsx)("div",{className:"sticky top-0",children:(0,t.jsxs)("div",{id:o,className:(0,T.cn)("relative h-screen w-full overflow-hidden",{"aiui-dark":C==="dark","rounded-box":D==="rounded"}),children:[v==="fade-in"&&y&&(0,t.jsx)("div",{ref:z,className:"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),(0,t.jsxs)("div",{className:"media-cover absolute inset-x-0",style:{top:`-${ie}px`,bottom:`-${ie}px`,transform:`translateY(${he}px)`,willChange:"transform"},children:[(0,t.jsx)(A.default,{videoRef:b,poster:L?.url||"",src:M?.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,t.jsx)(A.default,{videoRef:b,poster:L?.url||"",src:Z?.url||M?.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,t.jsx)("div",{ref:V,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),(0,t.jsx)("div",{className:(0,T.cn)("relative box-content block",j),style:{height:`${te}px`},ref:$})]}),k&&H&&(0,t.jsx)(K.VideoModal,{visible:k,youTubeId:H,onCloseModal:()=>G(!1)})]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("div",{id:o,className:(0,T.cn)("relative overflow-hidden",j,{"aiui-dark":C==="dark","rounded-box":D==="rounded"},r),children:[(0,t.jsxs)("div",{ref:ae,children:[!v&&(0,t.jsxs)("div",{className:"media-content text-info-primary 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&&!S&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),_&&S&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:_}}),w&&(0,t.jsx)(J.default,{variant:"link",className:(0,T.cn)("member-equity-button-secondary"),onClick:ce,children:w})]}),(0,t.jsx)(A.default,{videoRef:b,poster:L?.url||"",src:M?.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,t.jsx)(A.default,{videoRef:b,poster:L?.url||"",src:Z?.url||M?.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,t.jsx)("div",{ref:$,className:"absolute bottom-0 left-0 h-px w-full"})]}),k&&H&&(0,t.jsx)(K.VideoModal,{visible:k,youTubeId:H,onCloseModal:()=>G(!1)})]})});fe.displayName="MediaPlayerBase";var Fe=(0,ge.withLayout)(fe);
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, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.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// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n BTB_TARGET_THRESHOLD: 1, // btb \u76EE\u6807\u66F4\u65B0\u9608\u503C(px)\n} as const\n\nconst SMOOTHING_CONFIG = {\n DAMPING: 0.18,\n EPSILON: 0.5,\n} as const\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\ninterface ScrollTriggerInstance {\n progress: number\n kill: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\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<HTMLDivElement>(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 scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const layoutTargetsRef = useRef({ btb: 0, titleHeight: 0 })\n const layoutInitializedRef = useRef(false)\n const isWindowResizingRef = useRef(false)\n const resizeTimeoutRef = useRef<NodeJS.Timeout | 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 // \u89C6\u9891\u64AD\u653E\u63A7\u5236\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 // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n useEffect(() => {\n if (!titleRef.current || !sticky) return\n\n // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n const calculateLayout = (forceUpdate = false) => {\n if (!titleRef.current) return\n\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\n const inViewRefToBottom = screenHeight - rect.bottom\n const newBtb = inViewRefToBottom > screenHeight ? screenHeight : Math.max(0, inViewRefToBottom)\n const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n if (isWindowResizingRef.current && !forceUpdate) {\n return\n }\n\n const shouldUpdateBtb = Math.abs(newBtb - layoutTargetsRef.current.btb) > ANIMATION_CONFIG.BTB_TARGET_THRESHOLD\n const shouldUpdateTitleHeight =\n Math.abs(newTitleHeight - layoutTargetsRef.current.titleHeight) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD\n\n if (shouldUpdateBtb || !layoutInitializedRef.current) {\n layoutTargetsRef.current.btb = newBtb\n }\n if (shouldUpdateTitleHeight || !layoutInitializedRef.current) {\n layoutTargetsRef.current.titleHeight = newTitleHeight\n }\n\n if (!layoutInitializedRef.current) {\n layoutInitializedRef.current = true\n setbtb(newBtb)\n setTitleHeight(newTitleHeight)\n }\n }\n\n // \u521D\u59CB\u8BA1\u7B97\n calculateLayout()\n\n // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n const resizeObserver = new ResizeObserver(() => {\n // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n requestAnimationFrame(() => {\n calculateLayout()\n })\n })\n\n resizeObserver.observe(titleRef.current)\n\n // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n let scrollFrame: number | null = null\n const handleScroll = () => {\n if (scrollFrame !== null) return\n scrollFrame = requestAnimationFrame(() => {\n calculateLayout()\n scrollFrame = null\n })\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n const handleWindowResize = () => {\n isWindowResizingRef.current = true\n if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current)\n resizeTimeoutRef.current = setTimeout(() => {\n isWindowResizingRef.current = false\n calculateLayout(true)\n }, 150)\n }\n\n window.addEventListener('resize', handleWindowResize)\n\n return () => {\n resizeObserver.disconnect()\n window.removeEventListener('scroll', handleScroll)\n window.removeEventListener('resize', handleWindowResize)\n if (scrollFrame !== null) {\n cancelAnimationFrame(scrollFrame)\n }\n if (resizeTimeoutRef.current) {\n clearTimeout(resizeTimeoutRef.current)\n resizeTimeoutRef.current = null\n }\n layoutInitializedRef.current = false\n }\n }, [sticky])\n\n useEffect(() => {\n if (!sticky) return\n\n let rafId: number\n const smoothAnimate = () => {\n setbtb(prev => {\n const target = layoutTargetsRef.current.btb\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n setTitleHeight(prev => {\n const target = layoutTargetsRef.current.titleHeight\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n rafId = requestAnimationFrame(smoothAnimate)\n }\n\n rafId = requestAnimationFrame(smoothAnimate)\n\n return () => {\n cancelAnimationFrame(rafId)\n }\n }, [sticky])\n\n // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n useEffect(() => {\n if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n const titleElement = titleFadeInRef.current\n const height = titleElement.clientHeight || 80\n\n // \u5206\u8BCD\n splitTextInstance.current = new SplitText(titleElement, {\n type: 'words',\n wordsClass: 'word',\n })\n\n const words = splitTextInstance.current.words\n const total = words.length\n const interval = 1 / total\n\n // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n const wordAnimations = words.map((_, i) => {\n const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n return { start, width }\n })\n\n // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n gsap.set(words, { opacity: 0 })\n\n // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n words.forEach((word, i) => {\n const { start, width } = wordAnimations[i]\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n\n // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n if (bgRef.current) {\n gsap.set(bgRef.current, { opacity: progress })\n }\n },\n }) as ScrollTriggerInstance\n\n return () => {\n splitTextInstance.current?.revert()\n scrollTriggerRef.current?.kill()\n }\n }, [titleAnimation, inView])\n\n // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n useEffect(() => {\n if (!inView || !titleRef.current) return\n\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: self => {\n setVideoHeightProgress(self.progress)\n },\n }) as ScrollTriggerInstance\n\n return () => {\n heightTriggerRef.current?.kill()\n }\n }, [inView])\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\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\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\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\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n '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 text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\">\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover absolute left-0 top-0 size-full\">\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 <div className={cn('relative box-content block', aspect)} ref={trackRef} />\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
- "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "SMOOTHING_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "layoutTargetsRef", "layoutInitializedRef", "isWindowResizingRef", "resizeTimeoutRef", "inViewRef", "inView", "title_html", "videoTitle_html", "calculateLayout", "forceUpdate", "rect", "screenHeight", "inViewRefToBottom", "newBtb", "newTitleHeight", "shouldUpdateBtb", "shouldUpdateTitleHeight", "resizeObserver", "scrollFrame", "handleScroll", "handleWindowResize", "rafId", "smoothAnimate", "prev", "target", "delta", "titleElement", "height", "words", "total", "interval", "wordAnimations", "_", "i", "start", "width", "self", "progress", "word", "opacity", "zIndexVideo", "handleBtnClick", "aspect", "Button", "ScrollLoadVideo"]
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.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// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\n\nconst PARALLAX_CONFIG = {\n TRANSLATE_RANGE: 120,\n PADDING: 80,\n} as const\n\nconst SMOOTHING_CONFIG = {\n DAMPING: 0.18,\n EPSILON: 0.5,\n} as const\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\ninterface ScrollTriggerInstance {\n progress: number\n kill: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\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 const [videoParallax, setVideoParallax] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLDivElement>(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 scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const layoutTargetsRef = useRef({ btb: 0, titleHeight: 0 })\n const layoutInitializedRef = useRef(false)\n const videoParallaxTargetRef = useRef(0)\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 // \u89C6\u9891\u64AD\u653E\u63A7\u5236\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 // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n useEffect(() => {\n if (!titleRef.current || !sticky) return\n\n // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n const calculateLayout = () => {\n if (!titleRef.current) return\n\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\n const inViewRefToBottom = screenHeight - rect.bottom\n const newBtb = inViewRefToBottom > screenHeight ? screenHeight : inViewRefToBottom\n const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n layoutTargetsRef.current.btb = newBtb\n layoutTargetsRef.current.titleHeight = newTitleHeight\n\n if (!layoutInitializedRef.current) {\n layoutInitializedRef.current = true\n setbtb(newBtb)\n setTitleHeight(newTitleHeight)\n }\n }\n\n // \u521D\u59CB\u8BA1\u7B97\n calculateLayout()\n\n // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n const resizeObserver = new ResizeObserver(() => {\n // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n requestAnimationFrame(() => {\n calculateLayout()\n })\n })\n\n resizeObserver.observe(titleRef.current)\n\n // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n let scrollFrame: number | null = null\n const handleScroll = () => {\n if (scrollFrame !== null) return\n scrollFrame = requestAnimationFrame(() => {\n calculateLayout()\n scrollFrame = null\n })\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n\n return () => {\n resizeObserver.disconnect()\n window.removeEventListener('scroll', handleScroll)\n if (scrollFrame !== null) {\n cancelAnimationFrame(scrollFrame)\n }\n layoutInitializedRef.current = false\n }\n }, [sticky])\n\n useEffect(() => {\n if (!sticky) return\n\n let rafId: number\n const smoothAnimate = () => {\n setbtb(prev => {\n const target = layoutTargetsRef.current.btb\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n setTitleHeight(prev => {\n const target = layoutTargetsRef.current.titleHeight\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n rafId = requestAnimationFrame(smoothAnimate)\n }\n\n rafId = requestAnimationFrame(smoothAnimate)\n\n return () => {\n cancelAnimationFrame(rafId)\n }\n }, [sticky])\n\n // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n useEffect(() => {\n if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n const titleElement = titleFadeInRef.current\n const height = titleElement.clientHeight || 80\n\n // \u5206\u8BCD\n splitTextInstance.current = new SplitText(titleElement, {\n type: 'words',\n wordsClass: 'word',\n })\n\n const words = splitTextInstance.current.words\n const total = words.length\n const interval = 1 / total\n\n // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n const wordAnimations = words.map((_, i) => {\n const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n return { start, width }\n })\n\n // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n gsap.set(words, { opacity: 0 })\n\n // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n words.forEach((word, i) => {\n const { start, width } = wordAnimations[i]\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n\n // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n if (bgRef.current) {\n gsap.set(bgRef.current, { opacity: progress })\n }\n },\n }) as ScrollTriggerInstance\n\n return () => {\n splitTextInstance.current?.revert()\n scrollTriggerRef.current?.kill()\n }\n }, [titleAnimation, inView])\n\n // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n useEffect(() => {\n if (!inView || !titleRef.current) return\n\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: self => {\n setVideoHeightProgress(self.progress)\n },\n }) as ScrollTriggerInstance\n\n return () => {\n heightTriggerRef.current?.kill()\n }\n }, [inView])\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n useEffect(() => {\n if (!sticky) {\n videoParallaxTargetRef.current = 0\n setVideoParallax(0)\n return\n }\n videoParallaxTargetRef.current = (videoHeightProgress - 0.5) * PARALLAX_CONFIG.TRANSLATE_RANGE\n }, [videoHeightProgress, sticky])\n\n useEffect(() => {\n if (!sticky) return\n\n let rafId: number\n const smoothParallax = () => {\n setVideoParallax(prev => {\n const target = videoParallaxTargetRef.current\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n rafId = requestAnimationFrame(smoothParallax)\n }\n\n rafId = requestAnimationFrame(smoothParallax)\n\n return () => {\n cancelAnimationFrame(rafId)\n }\n }, [sticky])\n\n const videoParallaxPadding = useMemo(() => {\n if (!sticky) return 0\n return PARALLAX_CONFIG.PADDING\n }, [sticky])\n\n // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\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\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\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\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n '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 text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\">\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div\n className=\"media-cover absolute inset-x-0\"\n style={{\n top: `-${videoParallaxPadding}px`,\n bottom: `-${videoParallaxPadding}px`,\n transform: `translateY(${videoParallax}px)`,\n willChange: 'transform',\n }}\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 <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\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
+ "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "PARALLAX_CONFIG", "SMOOTHING_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoParallax", "setVideoParallax", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "layoutTargetsRef", "layoutInitializedRef", "videoParallaxTargetRef", "inViewRef", "inView", "title_html", "videoTitle_html", "calculateLayout", "rect", "screenHeight", "inViewRefToBottom", "newBtb", "newTitleHeight", "resizeObserver", "scrollFrame", "handleScroll", "rafId", "smoothAnimate", "prev", "target", "delta", "titleElement", "height", "words", "total", "interval", "wordAnimations", "_", "i", "start", "width", "self", "progress", "word", "opacity", "zIndexVideo", "smoothParallax", "videoParallaxPadding", "handleBtnClick", "aspect", "Button", "ScrollLoadVideo"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as fe,jsx as e,jsxs as u}from"react/jsx-runtime";import{useState as _,useRef as n,useMemo as he,useEffect as w,forwardRef as Ee,useImperativeHandle as He,useCallback as Ie}from"react";import{cn as y}from"../../helpers/utils.js";import{withLayout as Ne}from"../../shared/Styles.js";import ie from"../../components/button.js";import{VideoModal as ce}from"../VideoModal/index.js";import{convertLexicalToHTML as ue}from"@payloadcms/richtext-lexical/html";import{useInView as _e}from"react-intersection-observer";import{useExposure as we}from"../../hooks/useExposure.js";import D from"../../helpers/ScrollLoadVideo.js";import{gsap as Z}from"gsap";import{SplitText as Re}from"gsap/dist/SplitText";import{ScrollTrigger as de}from"gsap/dist/ScrollTrigger";const Me="media_player_base",Se="video",c={TEXT_START_OFFSET:"10%",TEXT_ANIMATION_MULTIPLIER:1.5,TEXT_ANIMATION_OFFSET:80,VIDEO_HEIGHT_BASE:102,OVERLAP_FACTOR:.5,VIDEO_PROGRESS_THRESHOLD:.9,HEIGHT_CHANGE_THRESHOLD:5,BTB_TARGET_THRESHOLD:1},B={DAMPING:.18,EPSILON:.5},pe=({defaultConverters:R})=>({...R,text:M=>{const{node:d}=M;return d.$&&d.$.color?`<span class="lexical-${d.$.color}">${d.text}</span>`:d.text}}),me=Ee(({className:R="",id:M,onBtnClick:d,data:{title:S,videoTitle:L,btnText:k,youtubeId:O,video:A,mobileVideo:ee,theme:G,img:F,shape:V,titleAnimation:f,...Te}},ge)=>{const{sticky:h}=Te,[P,te]=_(!1),[ve,re]=_(0),[be,ne]=_(0),[$,xe]=_(0),[z,X]=_(!1),T=n(null),q=n(null),o=n(null),U=n(null),j=n(null),W=n(null),le=n(null),oe=n(null),g=n({btb:0,titleHeight:0}),E=n(!1),J=n(!1),v=n(null),{ref:se,inView:a}=_e();He(ge,()=>o.current);const b=typeof S=="string"?S:S&&ue({data:S,converters:pe}),H=typeof L=="string"?L:L&&ue({data:L,converters:pe});w(()=>{a?(T.current?.play(),te(!0)):(T.current?.pause(),te(!1))},[a]),w(()=>{if(!o.current||!h)return;const r=(Q=!1)=>{if(!o.current)return;const C=o.current.getBoundingClientRect(),i=window.innerHeight,x=i-C.bottom,m=x>i?i:Math.max(0,x),I=o.current.clientHeight+i;if(J.current&&!Q)return;const Y=Math.abs(m-g.current.btb)>c.BTB_TARGET_THRESHOLD,N=Math.abs(I-g.current.titleHeight)>c.HEIGHT_CHANGE_THRESHOLD;(Y||!E.current)&&(g.current.btb=m),(N||!E.current)&&(g.current.titleHeight=I),E.current||(E.current=!0,re(m),ne(I))};r();const p=new ResizeObserver(()=>{requestAnimationFrame(()=>{r()})});p.observe(o.current);let t=null;const l=()=>{t===null&&(t=requestAnimationFrame(()=>{r(),t=null}))};window.addEventListener("scroll",l,{passive:!0});const s=()=>{J.current=!0,v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{J.current=!1,r(!0)},150)};return window.addEventListener("resize",s),()=>{p.disconnect(),window.removeEventListener("scroll",l),window.removeEventListener("resize",s),t!==null&&cancelAnimationFrame(t),v.current&&(clearTimeout(v.current),v.current=null),E.current=!1}},[h]),w(()=>{if(!h)return;let r;const p=()=>{re(t=>{const l=g.current.btb,s=l-t;return Math.abs(s)<=B.EPSILON?l:t+s*B.DAMPING}),ne(t=>{const l=g.current.titleHeight,s=l-t;return Math.abs(s)<=B.EPSILON?l:t+s*B.DAMPING}),r=requestAnimationFrame(p)};return r=requestAnimationFrame(p),()=>{cancelAnimationFrame(r)}},[h]),w(()=>{if(!a||!f||f!=="fade-in"||!U.current)return;const r=U.current,p=r.clientHeight||80;W.current=new Re(r,{type:"words",wordsClass:"word"});const t=W.current.words,l=t.length,s=1/l,Q=t.map((C,i)=>{const x=i/l*(1-c.OVERLAP_FACTOR),m=s*(1+c.OVERLAP_FACTOR);return{start:x,width:m}});return Z.set(t,{opacity:0}),le.current=de.create({trigger:o.current,start:`top center-=${c.TEXT_START_OFFSET}`,end:`top+=${p*c.TEXT_ANIMATION_MULTIPLIER+c.TEXT_ANIMATION_OFFSET}px center-=${c.TEXT_START_OFFSET}`,scrub:!0,onUpdate:C=>{const i=C.progress;t.forEach((x,m)=>{const{start:I,width:Y}=Q[m];let N=(i-I)/Y;N=Math.max(0,Math.min(N,1)),Z.set(x,{opacity:N})}),q.current&&Z.set(q.current,{opacity:i})}}),()=>{W.current?.revert(),le.current?.kill()}},[f,a]),w(()=>{if(!(!a||!o.current))return oe.current=de.create({trigger:o.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:r=>{xe(r.progress)}}),()=>{oe.current?.kill()}},[a]),we(j,{componentType:Se,componentName:Me,componentTitle:H});const ye=he(()=>a&&$>0&&$<c.VIDEO_PROGRESS_THRESHOLD?3:a?2:1,[$,a]),ae=Ie(()=>{X(!0),d?.()},[d]),K="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 h?u(fe,{children:[e("div",{ref:o,className:y("relative z-10",K,{"aiui-dark":G==="dark","rounded-box":V==="rounded"},R),children:e("div",{ref:se,children:!f&&u("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[b&&!P&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),H&&P&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),k&&e(ie,{variant:"link",className:y("member-equity-button-secondary "),onClick:ae,children:k})]})})}),u("div",{style:{marginBottom:`-${ve}px`,marginTop:`-${be}px`,zIndex:ye},className:"relative",children:[e("div",{className:"sticky top-0",children:u("div",{id:M,className:y("relative h-screen w-full overflow-hidden",{"aiui-dark":G==="dark","rounded-box":V==="rounded"}),children:[f==="fade-in"&&b&&e("div",{ref:U,className:"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),u("div",{className:"media-cover absolute left-0 top-0 size-full",children:[e(D,{videoRef:T,poster:F?.url||"",src:A?.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(D,{videoRef:T,poster:F?.url||"",src:ee?.url||A?.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:q,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:y("relative box-content block",K),ref:j})]}),z&&O&&e(ce,{visible:z,youTubeId:O,onCloseModal:()=>X(!1)})]}):u(fe,{children:[u("div",{id:M,className:y("relative overflow-hidden",K,{"aiui-dark":G==="dark","rounded-box":V==="rounded"},R),children:[u("div",{ref:se,children:[!f&&u("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[b&&!P&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),H&&P&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),k&&e(ie,{variant:"link",className:y("member-equity-button-secondary"),onClick:ae,children:k})]}),e(D,{videoRef:T,poster:F?.url||"",src:A?.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(D,{videoRef:T,poster:F?.url||"",src:ee?.url||A?.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:j,className:"absolute bottom-0 left-0 h-px w-full"})]}),z&&O&&e(ce,{visible:z,youTubeId:O,onCloseModal:()=>X(!1)})]})});me.displayName="MediaPlayerBase";var $e=Ne(me);export{$e as default};
1
+ "use client";import{Fragment as xe,jsx as t,jsxs as u}from"react/jsx-runtime";import{useState as y,useRef as s,useMemo as ie,useEffect as m,forwardRef as _e,useImperativeHandle as Re,useCallback as Ae}from"react";import{cn as I}from"../../helpers/utils.js";import{withLayout as we}from"../../shared/Styles.js";import ce from"../../components/button.js";import{VideoModal as ue}from"../VideoModal/index.js";import{convertLexicalToHTML as de}from"@payloadcms/richtext-lexical/html";import{useInView as He}from"react-intersection-observer";import{useExposure as Me}from"../../hooks/useExposure.js";import C from"../../helpers/ScrollLoadVideo.js";import{gsap as K}from"gsap";import{SplitText as Le}from"gsap/dist/SplitText";import{ScrollTrigger as pe}from"gsap/dist/ScrollTrigger";const Se="media_player_base",ke="video",f={TEXT_START_OFFSET:"10%",TEXT_ANIMATION_MULTIPLIER:1.5,TEXT_ANIMATION_OFFSET:80,VIDEO_HEIGHT_BASE:102,OVERLAP_FACTOR:.5,VIDEO_PROGRESS_THRESHOLD:.9,HEIGHT_CHANGE_THRESHOLD:5},me={TRANSLATE_RANGE:120,PADDING:80},N={DAMPING:.18,EPSILON:.5},fe=({defaultConverters:R})=>({...R,text:A=>{const{node:d}=A;return d.$&&d.$.color?`<span class="lexical-${d.$.color}">${d.text}</span>`:d.text}}),ge=_e(({className:R="",id:A,onBtnClick:d,data:{title:w,videoTitle:H,btnText:M,youtubeId:L,video:S,mobileVideo:Q,theme:D,img:k,shape:G,titleAnimation:g,...Te}},ve)=>{const{sticky:o}=Te,[O,W]=y(!1),[Z,ee]=y(0),[be,te]=y(0),[h,ye]=y(0),[P,V]=y(!1),[Ie,re]=y(0),x=s(null),z=s(null),a=s(null),$=s(null),B=s(null),q=s(null),ne=s(null),le=s(null),F=s({btb:0,titleHeight:0}),X=s(!1),j=s(0),{ref:oe,inView:c}=He();Re(ve,()=>a.current);const T=typeof w=="string"?w:w&&de({data:w,converters:fe}),E=typeof H=="string"?H:H&&de({data:H,converters:fe});m(()=>{c?(x.current?.play(),W(!0)):(x.current?.pause(),W(!1))},[c]),m(()=>{if(!a.current||!o)return;const r=()=>{if(!a.current)return;const l=a.current.getBoundingClientRect(),v=window.innerHeight,_=v-l.bottom,p=_>v?v:_,b=a.current.clientHeight+v;F.current.btb=p,F.current.titleHeight=b,X.current||(X.current=!0,ee(p),te(b))};r();const i=new ResizeObserver(()=>{requestAnimationFrame(()=>{r()})});i.observe(a.current);let e=null;const n=()=>{e===null&&(e=requestAnimationFrame(()=>{r(),e=null}))};return window.addEventListener("scroll",n,{passive:!0}),()=>{i.disconnect(),window.removeEventListener("scroll",n),e!==null&&cancelAnimationFrame(e),X.current=!1}},[o]),m(()=>{if(!o)return;let r;const i=()=>{ee(e=>{const n=F.current.btb,l=n-e;return Math.abs(l)<=N.EPSILON?n:e+l*N.DAMPING}),te(e=>{const n=F.current.titleHeight,l=n-e;return Math.abs(l)<=N.EPSILON?n:e+l*N.DAMPING}),r=requestAnimationFrame(i)};return r=requestAnimationFrame(i),()=>{cancelAnimationFrame(r)}},[o]),m(()=>{if(!c||!g||g!=="fade-in"||!$.current)return;const r=$.current,i=r.clientHeight||80;q.current=new Le(r,{type:"words",wordsClass:"word"});const e=q.current.words,n=e.length,l=1/n,v=e.map((_,p)=>{const b=p/n*(1-f.OVERLAP_FACTOR),Y=l*(1+f.OVERLAP_FACTOR);return{start:b,width:Y}});return K.set(e,{opacity:0}),ne.current=pe.create({trigger:a.current,start:`top center-=${f.TEXT_START_OFFSET}`,end:`top+=${i*f.TEXT_ANIMATION_MULTIPLIER+f.TEXT_ANIMATION_OFFSET}px center-=${f.TEXT_START_OFFSET}`,scrub:!0,onUpdate:_=>{const p=_.progress;e.forEach((b,Y)=>{const{start:he,width:Ee}=v[Y];let J=(p-he)/Ee;J=Math.max(0,Math.min(J,1)),K.set(b,{opacity:J})}),z.current&&K.set(z.current,{opacity:p})}}),()=>{q.current?.revert(),ne.current?.kill()}},[g,c]),m(()=>{if(!(!c||!a.current))return le.current=pe.create({trigger:a.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:r=>{ye(r.progress)}}),()=>{le.current?.kill()}},[c]),Me(B,{componentType:ke,componentName:Se,componentTitle:E});const Ne=ie(()=>c&&h>0&&h<f.VIDEO_PROGRESS_THRESHOLD?3:c?2:1,[h,c]);m(()=>{if(!o){j.current=0,re(0);return}j.current=(h-.5)*me.TRANSLATE_RANGE},[h,o]),m(()=>{if(!o)return;let r;const i=()=>{re(e=>{const n=j.current,l=n-e;return Math.abs(l)<=N.EPSILON?n:e+l*N.DAMPING}),r=requestAnimationFrame(i)};return r=requestAnimationFrame(i),()=>{cancelAnimationFrame(r)}},[o]);const se=ie(()=>o?me.PADDING:0,[o]),ae=Ae(()=>{V(!0),d?.()},[d]),U="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 o?u(xe,{children:[t("div",{ref:a,className:I("relative z-10",U,{"aiui-dark":D==="dark","rounded-box":G==="rounded"},R),children:t("div",{ref:oe,children:!g&&u("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!O&&t("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),E&&O&&t("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:E}}),M&&t(ce,{variant:"link",className:I("member-equity-button-secondary "),onClick:ae,children:M})]})})}),u("div",{style:{marginBottom:`-${Z}px`,marginTop:`-${be}px`,zIndex:Ne},className:"relative",children:[t("div",{className:"sticky top-0",children:u("div",{id:A,className:I("relative h-screen w-full overflow-hidden",{"aiui-dark":D==="dark","rounded-box":G==="rounded"}),children:[g==="fade-in"&&T&&t("div",{ref:$,className:"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),u("div",{className:"media-cover absolute inset-x-0",style:{top:`-${se}px`,bottom:`-${se}px`,transform:`translateY(${Ie}px)`,willChange:"transform"},children:[t(C,{videoRef:x,poster:k?.url||"",src:S?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),t(C,{videoRef:x,poster:k?.url||"",src:Q?.url||S?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),t("div",{ref:z,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),t("div",{className:I("relative box-content block",U),style:{height:`${Z}px`},ref:B})]}),P&&L&&t(ue,{visible:P,youTubeId:L,onCloseModal:()=>V(!1)})]}):u(xe,{children:[u("div",{id:A,className:I("relative overflow-hidden",U,{"aiui-dark":D==="dark","rounded-box":G==="rounded"},R),children:[u("div",{ref:oe,children:[!g&&u("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!O&&t("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),E&&O&&t("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:E}}),M&&t(ce,{variant:"link",className:I("member-equity-button-secondary"),onClick:ae,children:M})]}),t(C,{videoRef:x,poster:k?.url||"",src:S?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),t(C,{videoRef:x,poster:k?.url||"",src:Q?.url||S?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0})]}),t("div",{ref:B,className:"absolute bottom-0 left-0 h-px w-full"})]}),P&&L&&t(ue,{visible:P,youTubeId:L,onCloseModal:()=>V(!1)})]})});ge.displayName="MediaPlayerBase";var je=we(ge);export{je 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, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.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// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n BTB_TARGET_THRESHOLD: 1, // btb \u76EE\u6807\u66F4\u65B0\u9608\u503C(px)\n} as const\n\nconst SMOOTHING_CONFIG = {\n DAMPING: 0.18,\n EPSILON: 0.5,\n} as const\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\ninterface ScrollTriggerInstance {\n progress: number\n kill: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\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<HTMLDivElement>(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 scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const layoutTargetsRef = useRef({ btb: 0, titleHeight: 0 })\n const layoutInitializedRef = useRef(false)\n const isWindowResizingRef = useRef(false)\n const resizeTimeoutRef = useRef<NodeJS.Timeout | 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 // \u89C6\u9891\u64AD\u653E\u63A7\u5236\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 // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n useEffect(() => {\n if (!titleRef.current || !sticky) return\n\n // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n const calculateLayout = (forceUpdate = false) => {\n if (!titleRef.current) return\n\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\n const inViewRefToBottom = screenHeight - rect.bottom\n const newBtb = inViewRefToBottom > screenHeight ? screenHeight : Math.max(0, inViewRefToBottom)\n const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n if (isWindowResizingRef.current && !forceUpdate) {\n return\n }\n\n const shouldUpdateBtb = Math.abs(newBtb - layoutTargetsRef.current.btb) > ANIMATION_CONFIG.BTB_TARGET_THRESHOLD\n const shouldUpdateTitleHeight =\n Math.abs(newTitleHeight - layoutTargetsRef.current.titleHeight) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD\n\n if (shouldUpdateBtb || !layoutInitializedRef.current) {\n layoutTargetsRef.current.btb = newBtb\n }\n if (shouldUpdateTitleHeight || !layoutInitializedRef.current) {\n layoutTargetsRef.current.titleHeight = newTitleHeight\n }\n\n if (!layoutInitializedRef.current) {\n layoutInitializedRef.current = true\n setbtb(newBtb)\n setTitleHeight(newTitleHeight)\n }\n }\n\n // \u521D\u59CB\u8BA1\u7B97\n calculateLayout()\n\n // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n const resizeObserver = new ResizeObserver(() => {\n // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n requestAnimationFrame(() => {\n calculateLayout()\n })\n })\n\n resizeObserver.observe(titleRef.current)\n\n // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n let scrollFrame: number | null = null\n const handleScroll = () => {\n if (scrollFrame !== null) return\n scrollFrame = requestAnimationFrame(() => {\n calculateLayout()\n scrollFrame = null\n })\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n const handleWindowResize = () => {\n isWindowResizingRef.current = true\n if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current)\n resizeTimeoutRef.current = setTimeout(() => {\n isWindowResizingRef.current = false\n calculateLayout(true)\n }, 150)\n }\n\n window.addEventListener('resize', handleWindowResize)\n\n return () => {\n resizeObserver.disconnect()\n window.removeEventListener('scroll', handleScroll)\n window.removeEventListener('resize', handleWindowResize)\n if (scrollFrame !== null) {\n cancelAnimationFrame(scrollFrame)\n }\n if (resizeTimeoutRef.current) {\n clearTimeout(resizeTimeoutRef.current)\n resizeTimeoutRef.current = null\n }\n layoutInitializedRef.current = false\n }\n }, [sticky])\n\n useEffect(() => {\n if (!sticky) return\n\n let rafId: number\n const smoothAnimate = () => {\n setbtb(prev => {\n const target = layoutTargetsRef.current.btb\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n setTitleHeight(prev => {\n const target = layoutTargetsRef.current.titleHeight\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n rafId = requestAnimationFrame(smoothAnimate)\n }\n\n rafId = requestAnimationFrame(smoothAnimate)\n\n return () => {\n cancelAnimationFrame(rafId)\n }\n }, [sticky])\n\n // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n useEffect(() => {\n if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n const titleElement = titleFadeInRef.current\n const height = titleElement.clientHeight || 80\n\n // \u5206\u8BCD\n splitTextInstance.current = new SplitText(titleElement, {\n type: 'words',\n wordsClass: 'word',\n })\n\n const words = splitTextInstance.current.words\n const total = words.length\n const interval = 1 / total\n\n // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n const wordAnimations = words.map((_, i) => {\n const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n return { start, width }\n })\n\n // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n gsap.set(words, { opacity: 0 })\n\n // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n words.forEach((word, i) => {\n const { start, width } = wordAnimations[i]\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n\n // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n if (bgRef.current) {\n gsap.set(bgRef.current, { opacity: progress })\n }\n },\n }) as ScrollTriggerInstance\n\n return () => {\n splitTextInstance.current?.revert()\n scrollTriggerRef.current?.kill()\n }\n }, [titleAnimation, inView])\n\n // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n useEffect(() => {\n if (!inView || !titleRef.current) return\n\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: self => {\n setVideoHeightProgress(self.progress)\n },\n }) as ScrollTriggerInstance\n\n return () => {\n heightTriggerRef.current?.kill()\n }\n }, [inView])\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\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\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\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\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n '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 text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\">\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover absolute left-0 top-0 size-full\">\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 <div className={cn('relative box-content block', aspect)} ref={trackRef} />\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": "aAsUQ,mBAAAA,GAkBY,OAAAC,EAFJ,QAAAC,MAhBR,oBArUR,OAAS,YAAAC,EAAU,UAAAC,EAAQ,WAAAC,GAAS,aAAAC,EAAW,cAAAC,GAAY,uBAAAC,GAAqB,eAAAC,OAAmB,QACnG,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAOC,OAAY,6BACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAS,wBAAAC,OAA4B,oCAErC,OAAS,aAAAC,OAAiB,8BAE1B,OAAS,eAAAC,OAAmB,6BAC5B,OAAOC,MAAqB,mCAC5B,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,OAAiB,sBAC1B,OAAS,iBAAAC,OAAqB,0BAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAGhBC,EAAmB,CACvB,kBAAmB,MACnB,0BAA2B,IAC3B,sBAAuB,GACvB,kBAAmB,IACnB,eAAgB,GAChB,yBAA0B,GAC1B,wBAAyB,EACzB,qBAAsB,CACxB,EAEMC,EAAmB,CACvB,QAAS,IACT,QAAS,EACX,EAEMC,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,GAOMC,GAAkBtB,GACtB,CACE,CACE,UAAAuB,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,YAAAC,GAAa,MAAAC,EAAO,IAAAC,EAAK,MAAAC,EAAO,eAAAC,EAAgB,GAAGC,EAAK,CAChH,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIF,GACb,CAACG,EAAWC,EAAY,EAAI5C,EAAS,EAAK,EAC1C,CAAC6C,GAAKC,EAAM,EAAI9C,EAAS,CAAC,EAC1B,CAAC+C,GAAaC,EAAc,EAAIhD,EAAS,CAAC,EAC1C,CAACiD,EAAqBC,EAAsB,EAAIlD,EAAS,CAAC,EAC1D,CAACmD,EAASC,CAAU,EAAIpD,EAAkB,EAAK,EAE/CqD,EAAWpD,EAAyB,IAAI,EACxCqD,EAAQrD,EAAuB,IAAI,EACnCsD,EAAWtD,EAAuB,IAAI,EACtCuD,EAAiBvD,EAAuB,IAAI,EAC5CwD,EAAWxD,EAAuB,IAAI,EACtCyD,EAAoBzD,EAAyB,IAAI,EACjD0D,GAAmB1D,EAAqC,IAAI,EAC5D2D,GAAmB3D,EAAqC,IAAI,EAC5D4D,EAAmB5D,EAAO,CAAE,IAAK,EAAG,YAAa,CAAE,CAAC,EACpD6D,EAAuB7D,EAAO,EAAK,EACnC8D,EAAsB9D,EAAO,EAAK,EAClC+D,EAAmB/D,EAA8B,IAAI,EACrD,CAAE,IAAKgE,GAAW,OAAAC,CAAO,EAAItD,GAAU,EAE7CP,GAAoBoC,GAAK,IAAMc,EAAS,OAAyB,EAEjE,MAAMY,EACJ,OAAOrC,GAAU,SAAWA,EAAQA,GAASnB,GAAqB,CAAE,KAAMmB,EAAO,WAAYR,EAAe,CAAC,EACzG8C,EACJ,OAAOrC,GAAe,SAClBA,EACAA,GAAcpB,GAAqB,CAAE,KAAMoB,EAAY,WAAYT,EAAe,CAAC,EAGzFnB,EAAU,IAAM,CACV+D,GACFb,EAAS,SAAS,KAAK,EACvBT,GAAa,EAAI,IAEjBS,EAAS,SAAS,MAAM,EACxBT,GAAa,EAAK,EAEtB,EAAG,CAACsB,CAAM,CAAC,EAGX/D,EAAU,IAAM,CACd,GAAI,CAACoD,EAAS,SAAW,CAACb,EAAQ,OAGlC,MAAM2B,EAAkB,CAACC,EAAc,KAAU,CAC/C,GAAI,CAACf,EAAS,QAAS,OAEvB,MAAMgB,EAAOhB,EAAS,QAAQ,sBAAsB,EAC9CiB,EAAe,OAAO,YAMtBC,EAAoBD,EAAeD,EAAK,OACxCG,EAASD,EAAoBD,EAAeA,EAAe,KAAK,IAAI,EAAGC,CAAiB,EACxFE,EAAiBpB,EAAS,QAAQ,aAAeiB,EAEvD,GAAIT,EAAoB,SAAW,CAACO,EAClC,OAGF,MAAMM,EAAkB,KAAK,IAAIF,EAASb,EAAiB,QAAQ,GAAG,EAAIzC,EAAiB,qBACrFyD,EACJ,KAAK,IAAIF,EAAiBd,EAAiB,QAAQ,WAAW,EAAIzC,EAAiB,yBAEjFwD,GAAmB,CAACd,EAAqB,WAC3CD,EAAiB,QAAQ,IAAMa,IAE7BG,GAA2B,CAACf,EAAqB,WACnDD,EAAiB,QAAQ,YAAcc,GAGpCb,EAAqB,UACxBA,EAAqB,QAAU,GAC/BhB,GAAO4B,CAAM,EACb1B,GAAe2B,CAAc,EAEjC,EAGAN,EAAgB,EAGhB,MAAMS,EAAiB,IAAI,eAAe,IAAM,CAE9C,sBAAsB,IAAM,CAC1BT,EAAgB,CAClB,CAAC,CACH,CAAC,EAEDS,EAAe,QAAQvB,EAAS,OAAO,EAGvC,IAAIwB,EAA6B,KACjC,MAAMC,EAAe,IAAM,CACrBD,IAAgB,OACpBA,EAAc,sBAAsB,IAAM,CACxCV,EAAgB,EAChBU,EAAc,IAChB,CAAC,EACH,EAEA,OAAO,iBAAiB,SAAUC,EAAc,CAAE,QAAS,EAAK,CAAC,EACjE,MAAMC,EAAqB,IAAM,CAC/BlB,EAAoB,QAAU,GAC1BC,EAAiB,SAAS,aAAaA,EAAiB,OAAO,EACnEA,EAAiB,QAAU,WAAW,IAAM,CAC1CD,EAAoB,QAAU,GAC9BM,EAAgB,EAAI,CACtB,EAAG,GAAG,CACR,EAEA,cAAO,iBAAiB,SAAUY,CAAkB,EAE7C,IAAM,CACXH,EAAe,WAAW,EAC1B,OAAO,oBAAoB,SAAUE,CAAY,EACjD,OAAO,oBAAoB,SAAUC,CAAkB,EACnDF,IAAgB,MAClB,qBAAqBA,CAAW,EAE9Bf,EAAiB,UACnB,aAAaA,EAAiB,OAAO,EACrCA,EAAiB,QAAU,MAE7BF,EAAqB,QAAU,EACjC,CACF,EAAG,CAACpB,CAAM,CAAC,EAEXvC,EAAU,IAAM,CACd,GAAI,CAACuC,EAAQ,OAEb,IAAIwC,EACJ,MAAMC,EAAgB,IAAM,CAC1BrC,GAAOsC,GAAQ,CACb,MAAMC,EAASxB,EAAiB,QAAQ,IAClCyB,EAAQD,EAASD,EACvB,OAAI,KAAK,IAAIE,CAAK,GAAKjE,EAAiB,QAAgBgE,EACjDD,EAAOE,EAAQjE,EAAiB,OACzC,CAAC,EAED2B,GAAeoC,GAAQ,CACrB,MAAMC,EAASxB,EAAiB,QAAQ,YAClCyB,EAAQD,EAASD,EACvB,OAAI,KAAK,IAAIE,CAAK,GAAKjE,EAAiB,QAAgBgE,EACjDD,EAAOE,EAAQjE,EAAiB,OACzC,CAAC,EAED6D,EAAQ,sBAAsBC,CAAa,CAC7C,EAEA,OAAAD,EAAQ,sBAAsBC,CAAa,EAEpC,IAAM,CACX,qBAAqBD,CAAK,CAC5B,CACF,EAAG,CAACxC,CAAM,CAAC,EAGXvC,EAAU,IAAM,CACd,GAAI,CAAC+D,GAAU,CAAC3B,GAAkBA,IAAmB,WAAa,CAACiB,EAAe,QAAS,OAE3F,MAAM+B,EAAe/B,EAAe,QAC9BgC,EAASD,EAAa,cAAgB,GAG5C7B,EAAkB,QAAU,IAAI1C,GAAUuE,EAAc,CACtD,KAAM,QACN,WAAY,MACd,CAAC,EAED,MAAME,EAAQ/B,EAAkB,QAAQ,MAClCgC,EAAQD,EAAM,OACdE,EAAW,EAAID,EAGfE,EAAiBH,EAAM,IAAI,CAACI,EAAG,IAAM,CACzC,MAAMC,EAAS,EAAIJ,GAAU,EAAItE,EAAiB,gBAC5C2E,EAAQJ,GAAY,EAAIvE,EAAiB,gBAC/C,MAAO,CAAE,MAAA0E,EAAO,MAAAC,CAAM,CACxB,CAAC,EAGD,OAAAhF,EAAK,IAAI0E,EAAO,CAAE,QAAS,CAAE,CAAC,EAG9B9B,GAAiB,QAAU1C,GAAc,OAAO,CAC9C,QAASsC,EAAS,QAClB,MAAO,eAAenC,EAAiB,iBAAiB,GACxD,IAAK,QAAQoE,EAASpE,EAAiB,0BAA4BA,EAAiB,qBAAqB,cAAcA,EAAiB,iBAAiB,GACzJ,MAAO,GACP,SAAU4E,GAAQ,CAChB,MAAMC,EAAWD,EAAK,SAGtBP,EAAM,QAAQ,CAACS,EAAMC,IAAM,CACzB,KAAM,CAAE,MAAAL,EAAO,MAAAC,CAAM,EAAIH,EAAeO,CAAC,EACzC,IAAIC,GAAWH,EAAWH,GAASC,EACnCK,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CrF,EAAK,IAAImF,EAAM,CAAE,QAAAE,CAAQ,CAAC,CAC5B,CAAC,EAGG9C,EAAM,SACRvC,EAAK,IAAIuC,EAAM,QAAS,CAAE,QAAS2C,CAAS,CAAC,CAEjD,CACF,CAAC,EAEM,IAAM,CACXvC,EAAkB,SAAS,OAAO,EAClCC,GAAiB,SAAS,KAAK,CACjC,CACF,EAAG,CAACpB,EAAgB2B,CAAM,CAAC,EAG3B/D,EAAU,IAAM,CACd,GAAI,GAAC+D,GAAU,CAACX,EAAS,SAEzB,OAAAK,GAAiB,QAAU3C,GAAc,OAAO,CAC9C,QAASsC,EAAS,QAClB,MAAO,gBACP,IAAK,aACL,MAAO,GACP,SAAUyC,GAAQ,CAChB9C,GAAuB8C,EAAK,QAAQ,CACtC,CACF,CAAC,EAEM,IAAM,CACXpC,GAAiB,SAAS,KAAK,CACjC,CACF,EAAG,CAACM,CAAM,CAAC,EAGXrD,GAAY4C,EAAU,CACpB,cAAAtC,GACA,cAAAD,GACA,eAAgBkD,CAClB,CAAC,EAGD,MAAMiC,GAAcnG,GAAQ,IACtBgE,GAAUjB,EAAsB,GAAKA,EAAsB7B,EAAiB,yBAAiC,EAC7G8C,EAAe,EACZ,EACN,CAACjB,EAAqBiB,CAAM,CAAC,EAG1BoC,GAAiBhG,GAAY,IAAM,CACvC8C,EAAW,EAAI,EACfvB,IAAa,CACf,EAAG,CAACA,CAAU,CAAC,EAET0E,EACJ,6NAGF,OAAK7D,EAiFH3C,EAAAF,GAAA,CACE,UAAAC,EAAC,OACC,IAAKyD,EACL,UAAWhD,EACT,gBACAgG,EACA,CACE,YAAanE,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,SAAA7B,EAAC,OAAI,IAAKmE,GACP,UAAC1B,GACAxC,EAAC,OAAI,UAAU,2HACZ,UAAAoE,GAAc,CAACxB,GACd7C,EAAC,OACC,UAAU,qFACV,wBAAyB,CAAE,OAAQqE,CAAW,EAChD,EAEDC,GAAmBzB,GAClB7C,EAAC,OACC,UAAU,qFACV,wBAAyB,CAAE,OAAQsE,CAAgB,EACrD,EAEDpC,GACClC,EAACW,GAAA,CAAO,QAAQ,OAAO,UAAWF,EAAG,iCAAiC,EAAG,QAAS+F,GAC/E,SAAAtE,EACH,GAEJ,EAEJ,EACF,EACAjC,EAAC,OACC,MAAO,CACL,aAAc,IAAI8C,EAAG,KACrB,UAAW,IAAIE,EAAW,KAC1B,OAAQsD,EACV,EACA,UAAU,WAEV,UAAAvG,EAAC,OAAI,UAAU,eACb,SAAAC,EAAC,OACC,GAAI6B,EACJ,UAAWrB,EAAG,2CAA4C,CACxD,YAAa6B,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAAa4B,GAC/BrE,EAAC,OACC,IAAK0D,EACL,UAAU,6JACV,wBAAyB,CAAE,OAAQW,CAAW,EAChD,EAEFpE,EAAC,OAAI,UAAU,8CACb,UAAAD,EAACgB,EAAA,CACC,SAAUuC,EACV,OAAQhB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACApC,EAACgB,EAAA,CACC,SAAUuC,EACV,OAAQhB,GAAK,KAAO,GACpB,IAAKF,IAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACApC,EAAC,OACC,IAAKwD,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,EACAxD,EAAC,OAAI,UAAWS,EAAG,6BAA8BgG,CAAM,EAAG,IAAK9C,EAAU,GAC3E,EACCN,GAAWlB,GACVnC,EAACY,GAAA,CAAW,QAASyC,EAAS,UAAWlB,EAAW,aAAc,IAAMmB,EAAW,EAAK,EAAG,GAE/F,EArLErD,EAAAF,GAAA,CACE,UAAAE,EAAC,OACC,GAAI6B,EACJ,UAAWrB,EACT,2BACAgG,EACA,CACE,YAAanE,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,UAAA5B,EAAC,OAAI,IAAKkE,GAEP,WAAC1B,GACAxC,EAAC,OAAI,UAAU,2HACZ,UAAAoE,GAAc,CAACxB,GACd7C,EAAC,OACC,UAAU,oFACV,wBAAyB,CAAE,OAAQqE,CAAW,EAChD,EAEDC,GAAmBzB,GAClB7C,EAAC,OACC,UAAU,oFACV,wBAAyB,CAAE,OAAQsE,CAAgB,EACrD,EAEDpC,GACClC,EAACW,GAAA,CAAO,QAAQ,OAAO,UAAWF,EAAG,gCAAgC,EAAG,QAAS+F,GAC9E,SAAAtE,EACH,GAEJ,EAIFlC,EAACgB,EAAA,CACC,SAAUuC,EACV,OAAQhB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACApC,EAACgB,EAAA,CACC,SAAUuC,EACV,OAAQhB,GAAK,KAAO,GACpB,IAAKF,IAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,GACF,EAGApC,EAAC,OAAI,IAAK2D,EAAU,UAAU,uCAAuC,GACvE,EAECN,GAAWlB,GACVnC,EAACY,GAAA,CAAW,QAASyC,EAAS,UAAWlB,EAAW,aAAc,IAAMmB,EAAW,EAAK,EAAG,GAE/F,CA8GN,CACF,EAEA1B,GAAgB,YAAc,kBAE9B,IAAO8E,GAAQhG,GAAWkB,EAAe",
6
- "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "useCallback", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "SMOOTHING_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "layoutTargetsRef", "layoutInitializedRef", "isWindowResizingRef", "resizeTimeoutRef", "inViewRef", "inView", "title_html", "videoTitle_html", "calculateLayout", "forceUpdate", "rect", "screenHeight", "inViewRefToBottom", "newBtb", "newTitleHeight", "shouldUpdateBtb", "shouldUpdateTitleHeight", "resizeObserver", "scrollFrame", "handleScroll", "handleWindowResize", "rafId", "smoothAnimate", "prev", "target", "delta", "titleElement", "height", "words", "total", "interval", "wordAnimations", "_", "start", "width", "self", "progress", "word", "i", "opacity", "zIndexVideo", "handleBtnClick", "aspect", "MediaPlayerBase_default"]
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.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// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\n\nconst PARALLAX_CONFIG = {\n TRANSLATE_RANGE: 120,\n PADDING: 80,\n} as const\n\nconst SMOOTHING_CONFIG = {\n DAMPING: 0.18,\n EPSILON: 0.5,\n} as const\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\ninterface ScrollTriggerInstance {\n progress: number\n kill: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\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 const [videoParallax, setVideoParallax] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLDivElement>(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 scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const layoutTargetsRef = useRef({ btb: 0, titleHeight: 0 })\n const layoutInitializedRef = useRef(false)\n const videoParallaxTargetRef = useRef(0)\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 // \u89C6\u9891\u64AD\u653E\u63A7\u5236\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 // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n useEffect(() => {\n if (!titleRef.current || !sticky) return\n\n // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n const calculateLayout = () => {\n if (!titleRef.current) return\n\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\n const inViewRefToBottom = screenHeight - rect.bottom\n const newBtb = inViewRefToBottom > screenHeight ? screenHeight : inViewRefToBottom\n const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n layoutTargetsRef.current.btb = newBtb\n layoutTargetsRef.current.titleHeight = newTitleHeight\n\n if (!layoutInitializedRef.current) {\n layoutInitializedRef.current = true\n setbtb(newBtb)\n setTitleHeight(newTitleHeight)\n }\n }\n\n // \u521D\u59CB\u8BA1\u7B97\n calculateLayout()\n\n // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n const resizeObserver = new ResizeObserver(() => {\n // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n requestAnimationFrame(() => {\n calculateLayout()\n })\n })\n\n resizeObserver.observe(titleRef.current)\n\n // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n let scrollFrame: number | null = null\n const handleScroll = () => {\n if (scrollFrame !== null) return\n scrollFrame = requestAnimationFrame(() => {\n calculateLayout()\n scrollFrame = null\n })\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n\n return () => {\n resizeObserver.disconnect()\n window.removeEventListener('scroll', handleScroll)\n if (scrollFrame !== null) {\n cancelAnimationFrame(scrollFrame)\n }\n layoutInitializedRef.current = false\n }\n }, [sticky])\n\n useEffect(() => {\n if (!sticky) return\n\n let rafId: number\n const smoothAnimate = () => {\n setbtb(prev => {\n const target = layoutTargetsRef.current.btb\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n setTitleHeight(prev => {\n const target = layoutTargetsRef.current.titleHeight\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n rafId = requestAnimationFrame(smoothAnimate)\n }\n\n rafId = requestAnimationFrame(smoothAnimate)\n\n return () => {\n cancelAnimationFrame(rafId)\n }\n }, [sticky])\n\n // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n useEffect(() => {\n if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n const titleElement = titleFadeInRef.current\n const height = titleElement.clientHeight || 80\n\n // \u5206\u8BCD\n splitTextInstance.current = new SplitText(titleElement, {\n type: 'words',\n wordsClass: 'word',\n })\n\n const words = splitTextInstance.current.words\n const total = words.length\n const interval = 1 / total\n\n // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n const wordAnimations = words.map((_, i) => {\n const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n return { start, width }\n })\n\n // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n gsap.set(words, { opacity: 0 })\n\n // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n words.forEach((word, i) => {\n const { start, width } = wordAnimations[i]\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n\n // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n if (bgRef.current) {\n gsap.set(bgRef.current, { opacity: progress })\n }\n },\n }) as ScrollTriggerInstance\n\n return () => {\n splitTextInstance.current?.revert()\n scrollTriggerRef.current?.kill()\n }\n }, [titleAnimation, inView])\n\n // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n useEffect(() => {\n if (!inView || !titleRef.current) return\n\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: self => {\n setVideoHeightProgress(self.progress)\n },\n }) as ScrollTriggerInstance\n\n return () => {\n heightTriggerRef.current?.kill()\n }\n }, [inView])\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n useEffect(() => {\n if (!sticky) {\n videoParallaxTargetRef.current = 0\n setVideoParallax(0)\n return\n }\n videoParallaxTargetRef.current = (videoHeightProgress - 0.5) * PARALLAX_CONFIG.TRANSLATE_RANGE\n }, [videoHeightProgress, sticky])\n\n useEffect(() => {\n if (!sticky) return\n\n let rafId: number\n const smoothParallax = () => {\n setVideoParallax(prev => {\n const target = videoParallaxTargetRef.current\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n rafId = requestAnimationFrame(smoothParallax)\n }\n\n rafId = requestAnimationFrame(smoothParallax)\n\n return () => {\n cancelAnimationFrame(rafId)\n }\n }, [sticky])\n\n const videoParallaxPadding = useMemo(() => {\n if (!sticky) return 0\n return PARALLAX_CONFIG.PADDING\n }, [sticky])\n\n // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\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\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\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\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n '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 text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\">\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div\n className=\"media-cover absolute inset-x-0\"\n style={{\n top: `-${videoParallaxPadding}px`,\n bottom: `-${videoParallaxPadding}px`,\n transform: `translateY(${videoParallax}px)`,\n willChange: 'transform',\n }}\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 <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\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
+ "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "useCallback", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "PARALLAX_CONFIG", "SMOOTHING_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoParallax", "setVideoParallax", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "layoutTargetsRef", "layoutInitializedRef", "videoParallaxTargetRef", "inViewRef", "inView", "title_html", "videoTitle_html", "calculateLayout", "rect", "screenHeight", "inViewRefToBottom", "newBtb", "newTitleHeight", "resizeObserver", "scrollFrame", "handleScroll", "rafId", "smoothAnimate", "prev", "target", "delta", "titleElement", "height", "words", "total", "interval", "wordAnimations", "i", "start", "width", "self", "progress", "word", "opacity", "zIndexVideo", "smoothParallax", "videoParallaxPadding", "handleBtnClick", "aspect", "MediaPlayerBase_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.9-alpha.1764570351852",
3
+ "version": "1.1.9-alpha.1764578612388",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",