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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
  2. package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
  3. package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
  4. package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
  5. package/package.json +1 -1
package/dist/cjs/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var he=Object.create;var O=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var Ee=Object.getOwnPropertyNames;var _e=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 Ee(l))!we.call(r,i)&&i!==n&&O(r,i,{get:()=>l[i],enumerable:!(p=Ne(l,i))||p.enumerable});return r};var ie=(r,l,n)=>(n=r!=null?he(_e(r)):{},ae(l||!r||!r.__esModule?O(n,"default",{value:r,enumerable:!0}):n,r)),Me=r=>ae(O({},"__esModule",{value:!0}),r);var Le={};He(Le,{default:()=>Se});module.exports=Me(Le);var e=require("react/jsx-runtime"),t=require("react"),v=require("../../helpers/utils.js"),de=require("../../shared/Styles.js"),J=ie(require("../../components/button.js")),K=require("../VideoModal/index.js"),Q=require("@payloadcms/richtext-lexical/html"),pe=require("react-intersection-observer"),me=require("../../hooks/useExposure.js"),_=ie(require("../../helpers/ScrollLoadVideo.js")),F=require("gsap"),fe=require("gsap/dist/SplitText"),W=require("gsap/dist/ScrollTrigger");const Re="media_player_base",ke="video",g={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},A={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:M,mobileVideo:Y,theme:P,img:R,shape:C,titleAnimation:T,...ge}},ve)=>{const{sticky:h}=ge,[k,Z]=(0,t.useState)(!1),[ee,te]=(0,t.useState)(0),[Te,re]=(0,t.useState)(0),[z,be]=(0,t.useState)(0),[S,D]=(0,t.useState)(!1),b=(0,t.useRef)(null),V=(0,t.useRef)(null),c=(0,t.useRef)(null),B=(0,t.useRef)(null),G=(0,t.useRef)(null),$=(0,t.useRef)(null),ne=(0,t.useRef)(null),le=(0,t.useRef)(null),L=(0,t.useRef)({btb:0,titleHeight:0}),X=(0,t.useRef)(!1),{ref:oe,inView:u}=(0,pe.useInView)();(0,t.useImperativeHandle)(ve,()=>c.current);const x=typeof p=="string"?p:p&&(0,Q.convertLexicalToHTML)({data:p,converters:ce}),N=typeof i=="string"?i:i&&(0,Q.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||!h)return;const s=()=>{if(!c.current)return;const d=c.current.getBoundingClientRect(),y=window.innerHeight,E=y-d.bottom,f=E>y?y:E,I=c.current.clientHeight+y;L.current.btb=f,L.current.titleHeight=I,X.current||(X.current=!0,te(f),re(I))};s();const m=new ResizeObserver(()=>{requestAnimationFrame(()=>{s()})});m.observe(c.current);let o=null;const a=()=>{o===null&&(o=requestAnimationFrame(()=>{s(),o=null}))};return window.addEventListener("scroll",a,{passive:!0}),()=>{m.disconnect(),window.removeEventListener("scroll",a),o!==null&&cancelAnimationFrame(o),X.current=!1}},[h]),(0,t.useEffect)(()=>{if(!h)return;let s;const m=()=>{te(o=>{const a=L.current.btb,d=a-o;return Math.abs(d)<=A.EPSILON?a:o+d*A.DAMPING}),re(o=>{const a=L.current.titleHeight,d=a-o;return Math.abs(d)<=A.EPSILON?a:o+d*A.DAMPING}),s=requestAnimationFrame(m)};return s=requestAnimationFrame(m),()=>{cancelAnimationFrame(s)}},[h]),(0,t.useEffect)(()=>{if(!u||!T||T!=="fade-in"||!B.current)return;const s=B.current,m=s.clientHeight||80;$.current=new fe.SplitText(s,{type:"words",wordsClass:"word"});const o=$.current.words,a=o.length,d=1/a,y=o.map((E,f)=>{const I=f/a*(1-g.OVERLAP_FACTOR),j=d*(1+g.OVERLAP_FACTOR);return{start:I,width:j}});return F.gsap.set(o,{opacity:0}),ne.current=W.ScrollTrigger.create({trigger:c.current,start:`top center-=${g.TEXT_START_OFFSET}`,end:`top+=${m*g.TEXT_ANIMATION_MULTIPLIER+g.TEXT_ANIMATION_OFFSET}px center-=${g.TEXT_START_OFFSET}`,scrub:!0,onUpdate:E=>{const f=E.progress;o.forEach((I,j)=>{const{start:ye,width:Ie}=y[j];let U=(f-ye)/Ie;U=Math.max(0,Math.min(U,1)),F.gsap.set(I,{opacity:U})}),V.current&&F.gsap.set(V.current,{opacity:f})}}),()=>{$.current?.revert(),ne.current?.kill()}},[T,u]),(0,t.useEffect)(()=>{if(!(!u||!c.current))return le.current=W.ScrollTrigger.create({trigger:c.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:s=>{be(s.progress)}}),()=>{le.current?.kill()}},[u]),(0,me.useExposure)(G,{componentType:ke,componentName:Re,componentTitle:N});const xe=(0,t.useMemo)(()=>u&&z>0&&z<g.VIDEO_PROGRESS_THRESHOLD?3:u?2:1,[z,u]),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 h?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{ref:c,className:(0,v.cn)("relative z-10",q,{"aiui-dark":P==="dark","rounded-box":C==="rounded"},r),children:(0,e.jsx)("div",{ref:oe,children:!T&&(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:[x&&!k&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),N&&k&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:N}}),w&&(0,e.jsx)(J.default,{variant:"link",className:(0,v.cn)("member-equity-button-secondary "),onClick:se,children:w})]})})}),(0,e.jsxs)("div",{style:{marginBottom:`-${ee}px`,marginTop:`-${Te}px`,zIndex:xe},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":P==="dark","rounded-box":C==="rounded"}),children:[T==="fade-in"&&x&&(0,e.jsx)("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:x}}),(0,e.jsxs)("div",{className:"media-cover absolute left-0 top-0 size-full",children:[(0,e.jsx)(_.default,{videoRef:b,poster:R?.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,e.jsx)(_.default,{videoRef:b,poster:R?.url||"",src:Y?.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,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:G})]}),S&&H&&(0,e.jsx)(K.VideoModal,{visible:S,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":P==="dark","rounded-box":C==="rounded"},r),children:[(0,e.jsxs)("div",{ref:oe,children:[!T&&(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:[x&&!k&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),N&&k&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:N}}),w&&(0,e.jsx)(J.default,{variant:"link",className:(0,v.cn)("member-equity-button-secondary"),onClick:se,children:w})]}),(0,e.jsx)(_.default,{videoRef:b,poster:R?.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,e.jsx)(_.default,{videoRef:b,poster:R?.url||"",src:Y?.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,e.jsx)("div",{ref:G,className:"absolute bottom-0 left-0 h-px w-full"})]}),S&&H&&(0,e.jsx)(K.VideoModal,{visible:S,youTubeId:H,onCloseModal:()=>D(!1)})]})});ue.displayName="MediaPlayerBase";var Se=(0,de.withLayout)(ue);
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);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/MediaPlayerBase/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} 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 // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n </div>\n\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\">\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover absolute left-0 top-0 size-full\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div className={cn('relative box-content block', aspect)} 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", "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", "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} 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"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as de,jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as h,useRef as o,useMemo as xe,useEffect as N,forwardRef as ye,useImperativeHandle as Ie,useCallback as he}from"react";import{cn as b}from"../../helpers/utils.js";import{withLayout as Ne}from"../../shared/Styles.js";import oe from"../../components/button.js";import{VideoModal as se}from"../VideoModal/index.js";import{convertLexicalToHTML as ae}from"@payloadcms/richtext-lexical/html";import{useInView as Ee}from"react-intersection-observer";import{useExposure as _e}from"../../hooks/useExposure.js";import F from"../../helpers/ScrollLoadVideo.js";import{gsap as K}from"gsap";import{SplitText as we}from"gsap/dist/SplitText";import{ScrollTrigger as ie}from"gsap/dist/ScrollTrigger";const He="media_player_base",Me="video",p={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},P={DAMPING:.18,EPSILON:.5},ce=({defaultConverters:E})=>({...E,text:_=>{const{node:c}=_;return c.$&&c.$.color?`<span class="lexical-${c.$.color}">${c.text}</span>`:c.text}}),ue=ye(({className:E="",id:_,onBtnClick:c,data:{title:w,videoTitle:H,btnText:M,youtubeId:R,video:k,mobileVideo:Q,theme:C,img:S,shape:z,titleAnimation:m,...pe}},me)=>{const{sticky:x}=pe,[L,W]=h(!1),[Y,Z]=h(0),[fe,ee]=h(0),[D,ge]=h(0),[O,V]=h(!1),f=o(null),B=o(null),l=o(null),G=o(null),$=o(null),X=o(null),te=o(null),re=o(null),A=o({btb:0,titleHeight:0}),q=o(!1),{ref:ne,inView:s}=Ee();Ie(me,()=>l.current);const g=typeof w=="string"?w:w&&ae({data:w,converters:ce}),y=typeof H=="string"?H:H&&ae({data:H,converters:ce});N(()=>{s?(f.current?.play(),W(!0)):(f.current?.pause(),W(!1))},[s]),N(()=>{if(!l.current||!x)return;const r=()=>{if(!l.current)return;const a=l.current.getBoundingClientRect(),v=window.innerHeight,I=v-a.bottom,d=I>v?v:I,T=l.current.clientHeight+v;A.current.btb=d,A.current.titleHeight=T,q.current||(q.current=!0,Z(d),ee(T))};r();const u=new ResizeObserver(()=>{requestAnimationFrame(()=>{r()})});u.observe(l.current);let t=null;const n=()=>{t===null&&(t=requestAnimationFrame(()=>{r(),t=null}))};return window.addEventListener("scroll",n,{passive:!0}),()=>{u.disconnect(),window.removeEventListener("scroll",n),t!==null&&cancelAnimationFrame(t),q.current=!1}},[x]),N(()=>{if(!x)return;let r;const u=()=>{Z(t=>{const n=A.current.btb,a=n-t;return Math.abs(a)<=P.EPSILON?n:t+a*P.DAMPING}),ee(t=>{const n=A.current.titleHeight,a=n-t;return Math.abs(a)<=P.EPSILON?n:t+a*P.DAMPING}),r=requestAnimationFrame(u)};return r=requestAnimationFrame(u),()=>{cancelAnimationFrame(r)}},[x]),N(()=>{if(!s||!m||m!=="fade-in"||!G.current)return;const r=G.current,u=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,d)=>{const T=d/n*(1-p.OVERLAP_FACTOR),U=a*(1+p.OVERLAP_FACTOR);return{start:T,width:U}});return K.set(t,{opacity:0}),te.current=ie.create({trigger:l.current,start:`top center-=${p.TEXT_START_OFFSET}`,end:`top+=${u*p.TEXT_ANIMATION_MULTIPLIER+p.TEXT_ANIMATION_OFFSET}px center-=${p.TEXT_START_OFFSET}`,scrub:!0,onUpdate:I=>{const d=I.progress;t.forEach((T,U)=>{const{start:Te,width:be}=v[U];let J=(d-Te)/be;J=Math.max(0,Math.min(J,1)),K.set(T,{opacity:J})}),B.current&&K.set(B.current,{opacity:d})}}),()=>{X.current?.revert(),te.current?.kill()}},[m,s]),N(()=>{if(!(!s||!l.current))return re.current=ie.create({trigger:l.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:r=>{ge(r.progress)}}),()=>{re.current?.kill()}},[s]),_e($,{componentType:Me,componentName:He,componentTitle:y});const ve=xe(()=>s&&D>0&&D<p.VIDEO_PROGRESS_THRESHOLD?3:s?2:1,[D,s]),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 x?i(de,{children:[e("div",{ref:l,className:b("relative z-10",j,{"aiui-dark":C==="dark","rounded-box":z==="rounded"},E),children:e("div",{ref:ne,children:!m&&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:[g&&!L&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:g}}),y&&L&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),M&&e(oe,{variant:"link",className:b("member-equity-button-secondary "),onClick:le,children:M})]})})}),i("div",{style:{marginBottom:`-${Y}px`,marginTop:`-${fe}px`,zIndex:ve},className:"relative",children:[e("div",{className:"sticky top-0",children:i("div",{id:_,className:b("relative h-screen w-full overflow-hidden",{"aiui-dark":C==="dark","rounded-box":z==="rounded"}),children:[m==="fade-in"&&g&&e("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:g}}),i("div",{className:"media-cover absolute left-0 top-0 size-full",children:[e(F,{videoRef:f,poster:S?.url||"",src:k?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(F,{videoRef:f,poster:S?.url||"",src:Q?.url||k?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:B,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:`${Y}px`},ref:$})]}),O&&R&&e(se,{visible:O,youTubeId:R,onCloseModal:()=>V(!1)})]}):i(de,{children:[i("div",{id:_,className:b("relative overflow-hidden",j,{"aiui-dark":C==="dark","rounded-box":z==="rounded"},E),children:[i("div",{ref:ne,children:[!m&&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:[g&&!L&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:g}}),y&&L&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),M&&e(oe,{variant:"link",className:b("member-equity-button-secondary"),onClick:le,children:M})]}),e(F,{videoRef:f,poster:S?.url||"",src:k?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(F,{videoRef:f,poster:S?.url||"",src:Q?.url||k?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0})]}),e("div",{ref:$,className:"absolute bottom-0 left-0 h-px w-full"})]}),O&&R&&e(se,{visible:O,youTubeId:R,onCloseModal:()=>V(!1)})]})});ue.displayName="MediaPlayerBase";var Be=Ne(ue);export{Be as default};
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};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/MediaPlayerBase/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} 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 // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n </div>\n\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\">\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover absolute left-0 top-0 size-full\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div className={cn('relative box-content block', aspect)} 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", "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", "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} 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"]
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-120102",
3
+ "version": "1.1.9-temp-120103",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",