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

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