@anker-in/headless-ui 1.1.9-temp-120103 → 1.1.9-temp-120105

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.
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var he=Object.create;var O=Object.defineProperty;var Ee=Object.getOwnPropertyDescriptor;var _e=Object.getOwnPropertyNames;var Re=Object.getPrototypeOf,we=Object.prototype.hasOwnProperty;var He=(r,l)=>{for(var n in l)O(r,n,{get:l[n],enumerable:!0})},ae=(r,l,n,p)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of _e(l))!we.call(r,i)&&i!==n&&O(r,i,{get:()=>l[i],enumerable:!(p=Ee(l,i))||p.enumerable});return r};var ie=(r,l,n)=>(n=r!=null?he(Re(r)):{},ae(l||!r||!r.__esModule?O(n,"default",{value:r,enumerable:!0}):n,r)),Le=r=>ae(O({},"__esModule",{value:!0}),r);var Oe={};He(Oe,{default:()=>Ae});module.exports=Le(Oe);var e=require("react/jsx-runtime"),t=require("react"),v=require("../../helpers/utils.js"),de=require("../../shared/Styles.js"),Y=ie(require("../../components/button.js")),J=require("../VideoModal/index.js"),K=require("@payloadcms/richtext-lexical/html"),pe=require("react-intersection-observer"),me=require("../../hooks/useExposure.js"),R=ie(require("../../helpers/ScrollLoadVideo.js")),P=require("gsap"),fe=require("gsap/dist/SplitText"),Q=require("gsap/dist/ScrollTrigger");const Me="media_player_base",Se="video",T={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},ke={TRANSLATE_RANGE:120},F={DAMPING:.18,EPSILON:.5},ce=({defaultConverters:r})=>({...r,text:l=>{const{node:n}=l;return n.$&&n.$.color?`<span class="lexical-${n.$.color}">${n.text}</span>`:n.text}}),ue=(0,t.forwardRef)(({className:r="",id:l,onBtnClick:n,data:{title:p,videoTitle:i,btnText:w,youtubeId:H,video:L,mobileVideo:W,theme:C,img:M,shape:z,titleAnimation:x,...ge}},Te)=>{const{sticky:m}=ge,[S,Z]=(0,t.useState)(!1),[ee,te]=(0,t.useState)(0),[ve,re]=(0,t.useState)(0),[h,xe]=(0,t.useState)(0),[k,D]=(0,t.useState)(!1),b=(0,t.useRef)(null),V=(0,t.useRef)(null),c=(0,t.useRef)(null),G=(0,t.useRef)(null),B=(0,t.useRef)(null),$=(0,t.useRef)(null),ne=(0,t.useRef)(null),le=(0,t.useRef)(null),A=(0,t.useRef)({btb:0,titleHeight:0}),X=(0,t.useRef)(!1),{ref:oe,inView:u}=(0,pe.useInView)();(0,t.useImperativeHandle)(Te,()=>c.current);const y=typeof p=="string"?p:p&&(0,K.convertLexicalToHTML)({data:p,converters:ce}),E=typeof i=="string"?i:i&&(0,K.convertLexicalToHTML)({data:i,converters:ce});(0,t.useEffect)(()=>{u?(b.current?.play(),Z(!0)):(b.current?.pause(),Z(!1))},[u]),(0,t.useEffect)(()=>{if(!c.current||!m)return;const s=()=>{if(!c.current)return;const d=c.current.getBoundingClientRect(),N=window.innerHeight,_=N-d.bottom,g=_>N?N:_,I=c.current.clientHeight+N;A.current.btb=g,A.current.titleHeight=I,X.current||(X.current=!0,te(g),re(I))};s();const f=new ResizeObserver(()=>{requestAnimationFrame(()=>{s()})});f.observe(c.current);let o=null;const a=()=>{o===null&&(o=requestAnimationFrame(()=>{s(),o=null}))};return window.addEventListener("scroll",a,{passive:!0}),()=>{f.disconnect(),window.removeEventListener("scroll",a),o!==null&&cancelAnimationFrame(o),X.current=!1}},[m]),(0,t.useEffect)(()=>{if(!m)return;let s;const f=()=>{te(o=>{const a=A.current.btb,d=a-o;return Math.abs(d)<=F.EPSILON?a:o+d*F.DAMPING}),re(o=>{const a=A.current.titleHeight,d=a-o;return Math.abs(d)<=F.EPSILON?a:o+d*F.DAMPING}),s=requestAnimationFrame(f)};return s=requestAnimationFrame(f),()=>{cancelAnimationFrame(s)}},[m]),(0,t.useEffect)(()=>{if(!u||!x||x!=="fade-in"||!G.current)return;const s=G.current,f=s.clientHeight||80;$.current=new fe.SplitText(s,{type:"words",wordsClass:"word"});const o=$.current.words,a=o.length,d=1/a,N=o.map((_,g)=>{const I=g/a*(1-T.OVERLAP_FACTOR),j=d*(1+T.OVERLAP_FACTOR);return{start:I,width:j}});return P.gsap.set(o,{opacity:0}),ne.current=Q.ScrollTrigger.create({trigger:c.current,start:`top center-=${T.TEXT_START_OFFSET}`,end:`top+=${f*T.TEXT_ANIMATION_MULTIPLIER+T.TEXT_ANIMATION_OFFSET}px center-=${T.TEXT_START_OFFSET}`,scrub:!0,onUpdate:_=>{const g=_.progress;o.forEach((I,j)=>{const{start:Ne,width:Ie}=N[j];let U=(g-Ne)/Ie;U=Math.max(0,Math.min(U,1)),P.gsap.set(I,{opacity:U})}),V.current&&P.gsap.set(V.current,{opacity:g})}}),()=>{$.current?.revert(),ne.current?.kill()}},[x,u]),(0,t.useEffect)(()=>{if(!(!u||!c.current))return le.current=Q.ScrollTrigger.create({trigger:c.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:s=>{xe(s.progress)}}),()=>{le.current?.kill()}},[u]),(0,me.useExposure)(B,{componentType:Se,componentName:Me,componentTitle:E});const be=(0,t.useMemo)(()=>u&&h>0&&h<T.VIDEO_PROGRESS_THRESHOLD?3:u?2:1,[h,u]),ye=(0,t.useMemo)(()=>m?(h-.5)*ke.TRANSLATE_RANGE:0,[h,m]),se=(0,t.useCallback)(()=>{D(!0),n?.()},[n]),q="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 m?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{ref:c,className:(0,v.cn)("relative z-10",q,{"aiui-dark":C==="dark","rounded-box":z==="rounded"},r),children:(0,e.jsx)("div",{ref:oe,children:!x&&(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:[y&&!S&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),E&&S&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:E}}),w&&(0,e.jsx)(Y.default,{variant:"link",className:(0,v.cn)("member-equity-button-secondary "),onClick:se,children:w})]})})}),(0,e.jsxs)("div",{style:{marginBottom:`-${ee}px`,marginTop:`-${ve}px`,zIndex:be},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":C==="dark","rounded-box":z==="rounded"}),children:[x==="fade-in"&&y&&(0,e.jsx)("div",{ref:G,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,e.jsxs)("div",{className:"media-cover absolute left-0 top-0 size-full",style:{transform:`translateY(${ye}px)`,willChange:"transform"},children:[(0,e.jsx)(R.default,{videoRef:b,poster:M?.url||"",src:L?.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)(R.default,{videoRef:b,poster:M?.url||"",src:W?.url||L?.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:V,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",q),style:{height:`${ee}px`},ref:B})]}),k&&H&&(0,e.jsx)(J.VideoModal,{visible:k,youTubeId:H,onCloseModal:()=>D(!1)})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{id:l,className:(0,v.cn)("relative overflow-hidden",q,{"aiui-dark":C==="dark","rounded-box":z==="rounded"},r),children:[(0,e.jsxs)("div",{ref:oe,children:[!x&&(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:[y&&!S&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),E&&S&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:E}}),w&&(0,e.jsx)(Y.default,{variant:"link",className:(0,v.cn)("member-equity-button-secondary"),onClick:se,children:w})]}),(0,e.jsx)(R.default,{videoRef:b,poster:M?.url||"",src:L?.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)(R.default,{videoRef:b,poster:M?.url||"",src:W?.url||L?.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:B,className:"absolute bottom-0 left-0 h-px w-full"})]}),k&&H&&(0,e.jsx)(J.VideoModal,{visible:k,youTubeId:H,onCloseModal:()=>D(!1)})]})});ue.displayName="MediaPlayerBase";var Ae=(0,de.withLayout)(ue);
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
@@ -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} as const\n\nconst PARALLAX_CONFIG = {\n TRANSLATE_RANGE: 120,\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 { 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 const videoParallaxOffset = useMemo(() => {\n if (!sticky) return 0\n return (videoHeightProgress - 0.5) * PARALLAX_CONFIG.TRANSLATE_RANGE\n }, [videoHeightProgress, 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 left-0 top-0 size-full\"\n style={{\n transform: `translateY(${videoParallaxOffset}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", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "layoutTargetsRef", "layoutInitializedRef", "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", "videoParallaxOffset", "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
  }
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as pe,jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as h,useRef as o,useMemo as oe,useEffect as E,forwardRef as Ne,useImperativeHandle as Ie,useCallback as he}from"react";import{cn as b}from"../../helpers/utils.js";import{withLayout as Ee}from"../../shared/Styles.js";import se from"../../components/button.js";import{VideoModal as ae}from"../VideoModal/index.js";import{convertLexicalToHTML as ie}from"@payloadcms/richtext-lexical/html";import{useInView as _e}from"react-intersection-observer";import{useExposure as Re}from"../../hooks/useExposure.js";import P from"../../helpers/ScrollLoadVideo.js";import{gsap as J}from"gsap";import{SplitText as we}from"gsap/dist/SplitText";import{ScrollTrigger as ce}from"gsap/dist/ScrollTrigger";const He="media_player_base",Le="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},Me={TRANSLATE_RANGE:120},C={DAMPING:.18,EPSILON:.5},ue=({defaultConverters:_})=>({..._,text:R=>{const{node:c}=R;return c.$&&c.$.color?`<span class="lexical-${c.$.color}">${c.text}</span>`:c.text}}),de=Ne(({className:_="",id:R,onBtnClick:c,data:{title:w,videoTitle:H,btnText:L,youtubeId:M,video:S,mobileVideo:K,theme:z,img:k,shape:D,titleAnimation:f,...me}},fe)=>{const{sticky:u}=me,[A,Q]=h(!1),[W,Z]=h(0),[ge,ee]=h(0),[y,Te]=h(0),[O,V]=h(!1),g=o(null),G=o(null),l=o(null),B=o(null),$=o(null),X=o(null),te=o(null),re=o(null),F=o({btb:0,titleHeight:0}),q=o(!1),{ref:ne,inView:s}=_e();Ie(fe,()=>l.current);const T=typeof w=="string"?w:w&&ie({data:w,converters:ue}),N=typeof H=="string"?H:H&&ie({data:H,converters:ue});E(()=>{s?(g.current?.play(),Q(!0)):(g.current?.pause(),Q(!1))},[s]),E(()=>{if(!l.current||!u)return;const r=()=>{if(!l.current)return;const a=l.current.getBoundingClientRect(),v=window.innerHeight,I=v-a.bottom,p=I>v?v:I,x=l.current.clientHeight+v;F.current.btb=p,F.current.titleHeight=x,q.current||(q.current=!0,Z(p),ee(x))};r();const d=new ResizeObserver(()=>{requestAnimationFrame(()=>{r()})});d.observe(l.current);let t=null;const n=()=>{t===null&&(t=requestAnimationFrame(()=>{r(),t=null}))};return window.addEventListener("scroll",n,{passive:!0}),()=>{d.disconnect(),window.removeEventListener("scroll",n),t!==null&&cancelAnimationFrame(t),q.current=!1}},[u]),E(()=>{if(!u)return;let r;const d=()=>{Z(t=>{const n=F.current.btb,a=n-t;return Math.abs(a)<=C.EPSILON?n:t+a*C.DAMPING}),ee(t=>{const n=F.current.titleHeight,a=n-t;return Math.abs(a)<=C.EPSILON?n:t+a*C.DAMPING}),r=requestAnimationFrame(d)};return r=requestAnimationFrame(d),()=>{cancelAnimationFrame(r)}},[u]),E(()=>{if(!s||!f||f!=="fade-in"||!B.current)return;const r=B.current,d=r.clientHeight||80;X.current=new we(r,{type:"words",wordsClass:"word"});const t=X.current.words,n=t.length,a=1/n,v=t.map((I,p)=>{const x=p/n*(1-m.OVERLAP_FACTOR),U=a*(1+m.OVERLAP_FACTOR);return{start:x,width:U}});return J.set(t,{opacity:0}),te.current=ce.create({trigger:l.current,start:`top center-=${m.TEXT_START_OFFSET}`,end:`top+=${d*m.TEXT_ANIMATION_MULTIPLIER+m.TEXT_ANIMATION_OFFSET}px center-=${m.TEXT_START_OFFSET}`,scrub:!0,onUpdate:I=>{const p=I.progress;t.forEach((x,U)=>{const{start:be,width:ye}=v[U];let Y=(p-be)/ye;Y=Math.max(0,Math.min(Y,1)),J.set(x,{opacity:Y})}),G.current&&J.set(G.current,{opacity:p})}}),()=>{X.current?.revert(),te.current?.kill()}},[f,s]),E(()=>{if(!(!s||!l.current))return re.current=ce.create({trigger:l.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:r=>{Te(r.progress)}}),()=>{re.current?.kill()}},[s]),Re($,{componentType:Le,componentName:He,componentTitle:N});const ve=oe(()=>s&&y>0&&y<m.VIDEO_PROGRESS_THRESHOLD?3:s?2:1,[y,s]),xe=oe(()=>u?(y-.5)*Me.TRANSLATE_RANGE:0,[y,u]),le=he(()=>{V(!0),c?.()},[c]),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 u?i(pe,{children:[e("div",{ref:l,className:b("relative z-10",j,{"aiui-dark":z==="dark","rounded-box":D==="rounded"},_),children:e("div",{ref:ne,children:!f&&i("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&&!A&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),N&&A&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:N}}),L&&e(se,{variant:"link",className:b("member-equity-button-secondary "),onClick:le,children:L})]})})}),i("div",{style:{marginBottom:`-${W}px`,marginTop:`-${ge}px`,zIndex:ve},className:"relative",children:[e("div",{className:"sticky top-0",children:i("div",{id:R,className:b("relative h-screen w-full overflow-hidden",{"aiui-dark":z==="dark","rounded-box":D==="rounded"}),children:[f==="fade-in"&&T&&e("div",{ref:B,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}}),i("div",{className:"media-cover absolute left-0 top-0 size-full",style:{transform:`translateY(${xe}px)`,willChange:"transform"},children:[e(P,{videoRef:g,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}),e(P,{videoRef:g,poster:k?.url||"",src:K?.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}),e("div",{ref:G,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:b("relative box-content block",j),style:{height:`${W}px`},ref:$})]}),O&&M&&e(ae,{visible:O,youTubeId:M,onCloseModal:()=>V(!1)})]}):i(pe,{children:[i("div",{id:R,className:b("relative overflow-hidden",j,{"aiui-dark":z==="dark","rounded-box":D==="rounded"},_),children:[i("div",{ref:ne,children:[!f&&i("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&&!A&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),N&&A&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:N}}),L&&e(se,{variant:"link",className:b("member-equity-button-secondary"),onClick:le,children:L})]}),e(P,{videoRef:g,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}),e(P,{videoRef:g,poster:k?.url||"",src:K?.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})]}),e("div",{ref:$,className:"absolute bottom-0 left-0 h-px w-full"})]}),O&&M&&e(ae,{visible:O,youTubeId:M,onCloseModal:()=>V(!1)})]})});de.displayName="MediaPlayerBase";var $e=Ee(de);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
@@ -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} as const\n\nconst PARALLAX_CONFIG = {\n TRANSLATE_RANGE: 120,\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 { 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 const videoParallaxOffset = useMemo(() => {\n if (!sticky) return 0\n return (videoHeightProgress - 0.5) * PARALLAX_CONFIG.TRANSLATE_RANGE\n }, [videoHeightProgress, 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 left-0 top-0 size-full\"\n style={{\n transform: `translateY(${videoParallaxOffset}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", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "layoutTargetsRef", "layoutInitializedRef", "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", "videoParallaxOffset", "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-temp-120103",
3
+ "version": "1.1.9-temp-120105",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",