@anker-in/headless-ui 1.0.9-temp-2 → 1.0.9-temp-3

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 (9) 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/cjs/biz-components/MediaPlayerBase/types.d.ts +1 -0
  4. package/dist/cjs/biz-components/MediaPlayerBase/types.js +1 -1
  5. package/dist/cjs/biz-components/MediaPlayerBase/types.js.map +1 -1
  6. package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
  7. package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
  8. package/dist/esm/biz-components/MediaPlayerBase/types.d.ts +1 -0
  9. package/package.json +1 -1
package/dist/cjs/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var pe=Object.create;var h=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var ve=(r,n)=>{for(var o in n)h(r,o,{get:n[o],enumerable:!0})},Y=(r,n,o,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of ue(n))!ge.call(r,s)&&s!==o&&h(r,s,{get:()=>n[s],enumerable:!(a=me(n,s))||a.enumerable});return r};var j=(r,n,o)=>(o=r!=null?pe(fe(r)):{},Y(n||!r||!r.__esModule?h(o,"default",{value:r,enumerable:!0}):o,r)),xe=r=>Y(h({},"__esModule",{value:!0}),r);var He={};ve(He,{default:()=>we});module.exports=xe(He);var e=require("react/jsx-runtime"),t=require("react"),O=require("lodash"),u=require("../../helpers/utils.js"),U=require("../../shared/Styles.js"),G=j(require("../../components/button.js")),J=require("../VideoModal/index.js"),E=require("@payloadcms/richtext-lexical/html"),K=require("react-intersection-observer"),Q=require("../../hooks/useExposure.js"),W=j(require("../../helpers/ScrollLoadVideo.js")),b=require("gsap"),X=require("gsap/dist/SplitText"),R=require("gsap/dist/ScrollTrigger");const ye="media_player_base",he="video",q=({defaultConverters:r})=>({...r,text:n=>{const{node:o}=n;return o.$&&o.$.color?`<span class="lexical-${o.$.color}">${o.text}</span>`:o.text}}),be=(0,t.forwardRef)(({className:r="",onBtnClick:n,data:{title:o,videoTitle:a,btnText:s,youtubeId:z,video:Z,theme:I,img:A,shape:_,titleAnimation:f,...ee}},te)=>{const{sticky:c}=ee,[P,$]=(0,t.useState)(!1),[B,oe]=(0,t.useState)(0),[re,ne]=(0,t.useState)(0),[S,C]=(0,t.useState)(!1),w=(0,t.useRef)(null),V=(0,t.useRef)(null),i=(0,t.useRef)(null),g=(0,t.useRef)(null),D=(0,t.useRef)(null),v=(0,t.useRef)(null),{ref:se,inView:x}=(0,K.useInView)();(0,t.useImperativeHandle)(te,()=>i.current);const y=typeof o=="string"?o:o&&(0,E.convertLexicalToHTML)({data:o,converters:q}),H=typeof a=="string"?a:a&&(0,E.convertLexicalToHTML)({data:a,converters:q});(0,t.useEffect)(()=>{x?(w.current?.play(),$(!0)):(w.current?.pause(),$(!1))},[x]);const T=(0,O.debounce)(()=>{if(i.current){const d=i.current.getBoundingClientRect(),l=window.innerHeight,p=window.scrollY||window.pageYOffset,M=d.bottom+p,m=document.documentElement.scrollHeight-M;oe(m>l?l:m)}if(i.current){const d=i.current.clientHeight,l=window.innerHeight;ne(d+l)}},600);(0,t.useEffect)(()=>(T(),window.addEventListener("resize",T),()=>{window.removeEventListener("resize",T)}),[]),(0,t.useEffect)(()=>{function d(){if(!g.current||f!=="fade-in")return;const l=g.current?.clientHeight||80;v.current=new X.SplitText(g.current,{type:"words",wordsClass:"word"});const p=v.current.words;b.gsap.set(p,{opacity:0}),R.ScrollTrigger.create({trigger:i.current,start:"top center-=10%",end:`top+=${l*1.5+80}px center-=10%`,scrub:!0,onUpdate:M=>{const L=M.progress,m=p.length,le=1/m,F=.5;p.forEach((ae,ie)=>{const ce=ie/m*(1-F),de=le*(1+F);let N=(L-ce)/de;N=Math.max(0,Math.min(N,1)),b.gsap.set(ae,{opacity:N})}),b.gsap.set(V.current,{opacity:L})}})}return x&&d(),()=>{v.current&&v.current.revert(),R.ScrollTrigger.getAll().forEach(l=>l.kill())}},[f,x]),(0,Q.useExposure)(D,{componentType:he,componentName:ye,componentTitle:H});const 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(0,e.jsxs)(e.Fragment,{children:[c&&(0,e.jsx)("div",{ref:i,className:(0,u.cn)("relative z-10 ",k,{"aiui-dark":I==="dark","rounded-box":_==="rounded"},r),children:(0,e.jsx)("div",{ref:se,children:!f&&(0,e.jsxs)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[y&&!P&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),H&&P&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),s&&(0,e.jsx)(G.default,{variant:"link",className:(0,u.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{C(!0),n&&n?.()},children:s})]})})}),(0,e.jsxs)("div",{style:c?{marginBottom:`-${B}px`,marginTop:`-${re}px`}:{},className:"relative",children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,u.cn)("relative overflow-hidden",c?"h-screen w-full":k,{"aiui-dark":I==="dark","rounded-box":_==="rounded"}),children:[f==="fade-in"&&y&&(0,e.jsx)("div",{ref:g,className:"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),(0,e.jsxs)("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,e.jsx)(W.default,{videoRef:w,poster:A?.url||"",src:Z?.url,className:"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,u.cn)(c&&"relative box-content block",k),style:c?{height:`${B}px`}:{},ref:D})]}),S&&z&&(0,e.jsx)(J.VideoModal,{visible:S,youTubeId:z,onCloseModal:()=>C(!1)})]})});var we=(0,U.withLayout)(be);
1
+ "use strict";"use client";var ue=Object.create;var h=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var ge=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var xe=(n,r)=>{for(var o in r)h(n,o,{get:r[o],enumerable:!0})},O=(n,r,o,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of fe(r))!ve.call(n,s)&&s!==o&&h(n,s,{get:()=>r[s],enumerable:!(a=me(r,s))||a.enumerable});return n};var U=(n,r,o)=>(o=n!=null?ue(ge(n)):{},O(r||!n||!n.__esModule?h(o,"default",{value:n,enumerable:!0}):o,n)),ye=n=>O(h({},"__esModule",{value:!0}),n);var Te={};xe(Te,{default:()=>He});module.exports=ye(Te);var e=require("react/jsx-runtime"),t=require("react"),J=require("lodash"),m=require("../../helpers/utils.js"),K=require("../../shared/Styles.js"),Q=U(require("../../components/button.js")),W=require("../VideoModal/index.js"),E=require("@payloadcms/richtext-lexical/html"),X=require("react-intersection-observer"),Z=require("../../hooks/useExposure.js"),R=U(require("../../helpers/ScrollLoadVideo.js")),w=require("gsap"),A=require("gsap/dist/SplitText"),z=require("gsap/dist/ScrollTrigger");const be="media_player_base",he="video",G=({defaultConverters:n})=>({...n,text:r=>{const{node:o}=r;return o.$&&o.$.color?`<span class="lexical-${o.$.color}">${o.text}</span>`:o.text}}),we=(0,t.forwardRef)(({className:n="",onBtnClick:r,data:{title:o,videoTitle:a,btnText:s,youtubeId:I,video:_,mobileVideo:ee,theme:P,img:$,shape:B,titleAnimation:f,...te}},oe)=>{const{sticky:c}=te,[C,S]=(0,t.useState)(!1),[V,ne]=(0,t.useState)(0),[re,se]=(0,t.useState)(0),[D,F]=(0,t.useState)(!1),g=(0,t.useRef)(null),j=(0,t.useRef)(null),i=(0,t.useRef)(null),v=(0,t.useRef)(null),Y=(0,t.useRef)(null),x=(0,t.useRef)(null),{ref:le,inView:y}=(0,X.useInView)();(0,t.useImperativeHandle)(oe,()=>i.current);const b=typeof o=="string"?o:o&&(0,E.convertLexicalToHTML)({data:o,converters:G}),H=typeof a=="string"?a:a&&(0,E.convertLexicalToHTML)({data:a,converters:G});(0,t.useEffect)(()=>{y?(g.current?.play(),S(!0)):(g.current?.pause(),S(!1))},[y]);const T=(0,J.debounce)(()=>{if(i.current){const d=i.current.getBoundingClientRect(),l=window.innerHeight,p=window.scrollY||window.pageYOffset,M=d.bottom+p,u=document.documentElement.scrollHeight-M;ne(u>l?l:u)}if(i.current){const d=i.current.clientHeight,l=window.innerHeight;se(d+l)}},600);(0,t.useEffect)(()=>(T(),window.addEventListener("resize",T),()=>{window.removeEventListener("resize",T)}),[]),(0,t.useEffect)(()=>{function d(){if(!v.current||f!=="fade-in")return;const l=v.current?.clientHeight||80;x.current=new A.SplitText(v.current,{type:"words",wordsClass:"word"});const p=x.current.words;w.gsap.set(p,{opacity:0}),z.ScrollTrigger.create({trigger:i.current,start:"top center-=10%",end:`top+=${l*1.5+80}px center-=10%`,scrub:!0,onUpdate:M=>{const L=M.progress,u=p.length,ae=1/u,q=.5;p.forEach((ie,ce)=>{const de=ce/u*(1-q),pe=ae*(1+q);let N=(L-de)/pe;N=Math.max(0,Math.min(N,1)),w.gsap.set(ie,{opacity:N})}),w.gsap.set(j.current,{opacity:L})}})}return y&&d(),()=>{x.current&&x.current.revert(),z.ScrollTrigger.getAll().forEach(l=>l.kill())}},[f,y]),(0,Z.useExposure)(Y,{componentType:he,componentName:be,componentTitle:H});const 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(0,e.jsxs)(e.Fragment,{children:[c&&(0,e.jsx)("div",{ref:i,className:(0,m.cn)("relative z-10 ",k,{"aiui-dark":P==="dark","rounded-box":B==="rounded"},n),children:(0,e.jsx)("div",{ref:le,children:!f&&(0,e.jsxs)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[b&&!C&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),H&&C&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),s&&(0,e.jsx)(Q.default,{variant:"link",className:(0,m.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{F(!0),r&&r?.()},children:s})]})})}),(0,e.jsxs)("div",{style:c?{marginBottom:`-${V}px`,marginTop:`-${re}px`}:{},className:"relative",children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,m.cn)("relative overflow-hidden",c?"h-screen w-full":k,{"aiui-dark":P==="dark","rounded-box":B==="rounded"}),children:[f==="fade-in"&&b&&(0,e.jsx)("div",{ref:v,className:"lg-desktop:text-[64px] text-btn-primary-foreground 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}}),(0,e.jsxs)("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,e.jsx)(R.default,{videoRef:g,poster:$?.url||"",src:_?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)(R.default,{videoRef:g,poster:$?.url||"",src:ee?.url||_?.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:j,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,m.cn)(c&&"relative box-content block",k),style:c?{height:`${V}px`}:{},ref:Y})]}),D&&I&&(0,e.jsx)(W.VideoModal,{visible:D,youTubeId:I,onCloseModal:()=>F(!1)})]})});var He=(0,K.withLayout)(we);
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, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, 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 [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n 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 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-btn-primary-foreground 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-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground 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 left-0 top-0 h-screen w-screen\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"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\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
5
- "mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAqJM,IAAAI,EAAA,6BApJNC,EAA6E,iBAC7EC,EAAyB,kBACzBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAmB,yCACnBC,EAA2B,kCAC3BC,EAAqC,6CAGrCC,EAA0B,uCAE1BC,EAA4B,sCAC5BC,EAA4B,+CAC5BC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAEhBC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,MAAkB,cACtB,CACE,CACE,UAAAC,EAAY,GACZ,WAAAC,EACA,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,MAAAC,EAAO,IAAAC,EAAK,MAAAC,EAAO,eAAAC,EAAgB,GAAGC,EAAK,CACnG,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIF,GACb,CAACG,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1C,CAACC,EAAKC,EAAM,KAAI,YAAS,CAAC,EAC1B,CAACC,GAAaC,EAAc,KAAI,YAAS,CAAC,EAC1C,CAACC,EAASC,CAAU,KAAI,YAAkB,EAAK,EAE/CC,KAAW,UAAyB,IAAI,EACxCC,KAAQ,UAAyB,IAAI,EACrCC,KAAW,UAAuB,IAAI,EACtCC,KAAiB,UAAuB,IAAI,EAC5CC,KAAW,UAAuB,IAAI,EACtCC,KAAoB,UAAyB,IAAI,EACjD,CAAE,IAAKC,GAAW,OAAAC,CAAO,KAAI,aAAU,KAE7C,uBAAoBjB,GAAK,IAAMY,EAAS,OAAyB,EAEjE,MAAMM,EACJ,OAAO5B,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,EAAO,WAAYP,CAAe,CAAC,EACzGoC,EACJ,OAAO5B,GAAe,SAClBA,EACAA,MAAc,wBAAqB,CAAE,KAAMA,EAAY,WAAYR,CAAe,CAAC,KAEzF,aAAU,IAAM,CACVkC,GACFP,EAAS,SAAS,KAAK,EACvBP,EAAa,EAAI,IAEjBO,EAAS,SAAS,MAAM,EACxBP,EAAa,EAAK,EAEtB,EAAG,CAACc,CAAM,CAAC,EAEX,MAAMG,KAAwB,YAAS,IAAM,CAC3C,GAAIR,EAAS,QAAS,CACpB,MAAMS,EAAOT,EAAS,QAAQ,sBAAsB,EAC9CU,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CnB,GAAOoB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIb,EAAS,QAAS,CACpB,MAAMN,EAAcM,EAAS,QAAQ,aAC/BU,EAAe,OAAO,YAC5Bf,GAAeD,EAAcgB,CAAY,CAC3C,CACF,EAAG,GAAG,KAEN,aAAU,KACRF,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,KAEL,aAAU,IAAM,CACd,SAASM,GAAa,CACpB,GAAI,CAACb,EAAe,SAAWf,IAAmB,UAAW,OAC7D,MAAM6B,EAASd,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAI,YAAUF,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMe,EAAQb,EAAkB,QAAQ,MACxC,OAAK,IAAIa,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAAShB,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQe,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,GAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,GAAU,EAAIE,GAC3BI,GAAQL,IAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACD,OAAK,IAAI3B,EAAM,QAAS,CAAE,QAASmB,CAAS,CAAC,CAC/C,CACF,CAAC,CACH,CAEA,OAAIb,GAAQS,EAAW,EAEhB,IAAM,CACXX,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,gBAAc,OAAO,EAAE,QAASwB,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAACzC,EAAgBmB,CAAM,CAAC,KAE3B,eAAYH,EAAU,CACpB,cAAAhC,GACA,cAAAD,GACA,eAAgBsC,CAClB,CAAC,EAED,MAAMqB,EACJ,6NACF,SACE,oBACG,UAAAvC,MACC,OAAC,OACC,IAAKW,EACL,aAAW,MACT,iBACA4B,EACA,CACE,YAAa7C,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAT,CACF,EAEA,mBAAC,OAAI,IAAK4B,GACP,UAAClB,MACA,QAAC,OAAI,UAAU,yGACZ,UAAAoB,GAAc,CAAChB,MACd,OAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQgB,CAAW,EAChD,EAEDC,GAAmBjB,MAClB,OAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQiB,CAAgB,EACrD,EAED3B,MACC,OAAC,EAAAiD,QAAA,CACC,QAAQ,OACR,aAAW,MAAG,4DAA4D,EAC1E,QAAS,IAAM,CACbhC,EAAW,EAAI,EAYfpB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,KAEF,QAAC,OAAI,MAAOS,EAAS,CAAE,aAAc,IAAIG,CAAG,KAAM,UAAW,IAAIE,EAAW,IAAK,EAAI,CAAC,EAAG,UAAU,WACjG,oBAAC,OAAI,UAAU,gBACb,oBAAC,OACC,aAAW,MAAG,2BAA4BL,EAAS,kBAAoBuC,EAAQ,CAC7E,YAAa7C,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAAaoB,MAC/B,OAAC,OACC,IAAKL,EACL,UAAU,wLACV,wBAAyB,CAAE,OAAQK,CAAW,EAChD,KAEF,QAAC,OAAI,UAAU,6CACb,oBAAC,EAAAwB,QAAA,CACC,SAAUhC,EACV,OAAQd,GAAK,KAAO,GACpB,IAAKF,GAAO,IACZ,UAAU,YACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OACC,IAAKiB,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,KACA,OAAC,OACC,aAAW,MAAGV,GAAU,6BAA8BuC,CAAM,EAC5D,MAAOvC,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKU,EACP,GACF,EACCN,GAAWf,MACV,OAAC,cAAW,QAASe,EAAS,UAAWf,EAAW,aAAc,IAAMgB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA,IAAO5C,MAAQ,cAAWsB,EAAe",
6
- "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "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", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "aspect", "Button", "ScrollLoadVideo"]
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n 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 [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n 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 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-btn-primary-foreground 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-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground 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 left-0 top-0 h-screen w-screen\">\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\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\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_lodash", "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", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "aspect", "Button", "ScrollLoadVideo"]
7
7
  }
package/dist/cjs/biz-components/MediaPlayerBase/types.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps {
10
10
  img?: Img;
11
11
  isYouTube?: boolean;
12
12
  video?: Video;
13
+ mobileVideo?: Video;
13
14
  youtubeId?: string;
14
15
  titleAnimation?: 'fade-in';
15
16
  };
package/dist/cjs/biz-components/MediaPlayerBase/types.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var r=(o,e,m,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of p(e))!a.call(o,t)&&t!==m&&n(o,t,{get:()=>e[t],enumerable:!(i=s(e,t))||i.enumerable});return o};var d=o=>r(n({},"__esModule",{value:!0}),o);var g={};module.exports=d(g);
1
+ "use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var r=(o,e,m,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of p(e))!a.call(o,i)&&i!==m&&n(o,i,{get:()=>e[i],enumerable:!(t=s(e,i))||t.enumerable});return o};var d=o=>r(n({},"__esModule",{value:!0}),o);var l={};module.exports=d(l);
2
2
  //# sourceMappingURL=types.js.map
package/dist/cjs/biz-components/MediaPlayerBase/types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/types.ts"],
4
- "sourcesContent": ["import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js'\n\nexport interface MediaPlayerBaseProps extends ComponentCommonProps {\n data: {\n sticky?: boolean\n shape?: Shape\n theme?: Theme\n title?: string\n videoTitle?: string\n btnText?: string\n img?: Img\n isYouTube?: boolean\n video?: Video\n youtubeId?: string\n titleAnimation?: 'fade-in'\n }\n onBtnClick?: () => void\n}\n"],
4
+ "sourcesContent": ["import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js'\n\nexport interface MediaPlayerBaseProps extends ComponentCommonProps {\n data: {\n sticky?: boolean\n shape?: Shape\n theme?: Theme\n title?: string\n videoTitle?: string\n btnText?: string\n img?: Img\n isYouTube?: boolean\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n titleAnimation?: 'fade-in'\n }\n onBtnClick?: () => void\n}\n"],
5
5
  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
6
6
  "names": ["types_exports", "__toCommonJS"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as ve,jsx as e,jsxs as c}from"react/jsx-runtime";import{useState as x,useRef as n,useEffect as N,forwardRef as re,useImperativeHandle as ne}from"react";import{debounce as se}from"lodash";import{cn as y}from"../../helpers/utils.js";import{withLayout as le}from"../../shared/Styles.js";import ae from"../../components/button.js";import{VideoModal as ie}from"../VideoModal/index.js";import{convertLexicalToHTML as Y}from"@payloadcms/richtext-lexical/html";import{useInView as ce}from"react-intersection-observer";import{useExposure as de}from"../../hooks/useExposure.js";import pe from"../../helpers/ScrollLoadVideo.js";import{gsap as E}from"gsap";import{SplitText as me}from"gsap/dist/SplitText";import{ScrollTrigger as j}from"gsap/dist/ScrollTrigger";const ue="media_player_base",fe="video",q=({defaultConverters:h})=>({...h,text:d=>{const{node:t}=d;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),ge=re(({className:h="",onBtnClick:d,data:{title:t,videoTitle:p,btnText:R,youtubeId:z,video:O,theme:I,img:U,shape:_,titleAnimation:m,...G}},J)=>{const{sticky:s}=G,[P,$]=x(!1),[B,K]=x(0),[Q,W]=x(0),[S,C]=x(!1),b=n(null),V=n(null),r=n(null),u=n(null),D=n(null),f=n(null),{ref:X,inView:g}=ce();ne(J,()=>r.current);const v=typeof t=="string"?t:t&&Y({data:t,converters:q}),w=typeof p=="string"?p:p&&Y({data:p,converters:q});N(()=>{g?(b.current?.play(),$(!0)):(b.current?.pause(),$(!1))},[g]);const H=se(()=>{if(r.current){const l=r.current.getBoundingClientRect(),o=window.innerHeight,a=window.scrollY||window.pageYOffset,k=l.bottom+a,i=document.documentElement.scrollHeight-k;K(i>o?o:i)}if(r.current){const l=r.current.clientHeight,o=window.innerHeight;W(l+o)}},600);N(()=>(H(),window.addEventListener("resize",H),()=>{window.removeEventListener("resize",H)}),[]),N(()=>{function l(){if(!u.current||m!=="fade-in")return;const o=u.current?.clientHeight||80;f.current=new me(u.current,{type:"words",wordsClass:"word"});const a=f.current.words;E.set(a,{opacity:0}),j.create({trigger:r.current,start:"top center-=10%",end:`top+=${o*1.5+80}px center-=10%`,scrub:!0,onUpdate:k=>{const M=k.progress,i=a.length,Z=1/i,F=.5;a.forEach((A,ee)=>{const te=ee/i*(1-F),oe=Z*(1+F);let L=(M-te)/oe;L=Math.max(0,Math.min(L,1)),E.set(A,{opacity:L})}),E.set(V.current,{opacity:M})}})}return g&&l(),()=>{f.current&&f.current.revert(),j.getAll().forEach(o=>o.kill())}},[m,g]),de(D,{componentType:fe,componentName:ue,componentTitle:w});const T="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return c(ve,{children:[s&&e("div",{ref:r,className:y("relative z-10 ",T,{"aiui-dark":I==="dark","rounded-box":_==="rounded"},h),children:e("div",{ref:X,children:!m&&c("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[v&&!P&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),w&&P&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:w}}),R&&e(ae,{variant:"link",className:y("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{C(!0),d&&d?.()},children:R})]})})}),c("div",{style:s?{marginBottom:`-${B}px`,marginTop:`-${Q}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:c("div",{className:y("relative overflow-hidden",s?"h-screen w-full":T,{"aiui-dark":I==="dark","rounded-box":_==="rounded"}),children:[m==="fade-in"&&v&&e("div",{ref:u,className:"lg-desktop:text-[64px] text-btn-primary-foreground 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:v}}),c("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[e(pe,{videoRef:b,poster:U?.url||"",src:O?.url,className:"size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:V,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:y(s&&"relative box-content block",T),style:s?{height:`${B}px`}:{},ref:D})]}),S&&z&&e(ie,{visible:S,youTubeId:z,onCloseModal:()=>C(!1)})]})});var ze=le(ge);export{ze as default};
1
+ "use client";import{Fragment as xe,jsx as e,jsxs as c}from"react/jsx-runtime";import{useState as y,useRef as r,useEffect as N,forwardRef as se,useImperativeHandle as le}from"react";import{debounce as ae}from"lodash";import{cn as b}from"../../helpers/utils.js";import{withLayout as ie}from"../../shared/Styles.js";import ce from"../../components/button.js";import{VideoModal as de}from"../VideoModal/index.js";import{convertLexicalToHTML as q}from"@payloadcms/richtext-lexical/html";import{useInView as pe}from"react-intersection-observer";import{useExposure as ue}from"../../hooks/useExposure.js";import O from"../../helpers/ScrollLoadVideo.js";import{gsap as E}from"gsap";import{SplitText as me}from"gsap/dist/SplitText";import{ScrollTrigger as U}from"gsap/dist/ScrollTrigger";const fe="media_player_base",ge="video",G=({defaultConverters:h})=>({...h,text:d=>{const{node:t}=d;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),ve=se(({className:h="",onBtnClick:d,data:{title:t,videoTitle:p,btnText:R,youtubeId:z,video:I,mobileVideo:J,theme:_,img:P,shape:$,titleAnimation:u,...K}},Q)=>{const{sticky:s}=K,[B,C]=y(!1),[S,W]=y(0),[X,Z]=y(0),[V,D]=y(!1),m=r(null),F=r(null),n=r(null),f=r(null),j=r(null),g=r(null),{ref:A,inView:v}=pe();le(Q,()=>n.current);const x=typeof t=="string"?t:t&&q({data:t,converters:G}),w=typeof p=="string"?p:p&&q({data:p,converters:G});N(()=>{v?(m.current?.play(),C(!0)):(m.current?.pause(),C(!1))},[v]);const H=ae(()=>{if(n.current){const l=n.current.getBoundingClientRect(),o=window.innerHeight,a=window.scrollY||window.pageYOffset,k=l.bottom+a,i=document.documentElement.scrollHeight-k;W(i>o?o:i)}if(n.current){const l=n.current.clientHeight,o=window.innerHeight;Z(l+o)}},600);N(()=>(H(),window.addEventListener("resize",H),()=>{window.removeEventListener("resize",H)}),[]),N(()=>{function l(){if(!f.current||u!=="fade-in")return;const o=f.current?.clientHeight||80;g.current=new me(f.current,{type:"words",wordsClass:"word"});const a=g.current.words;E.set(a,{opacity:0}),U.create({trigger:n.current,start:"top center-=10%",end:`top+=${o*1.5+80}px center-=10%`,scrub:!0,onUpdate:k=>{const M=k.progress,i=a.length,ee=1/i,Y=.5;a.forEach((te,oe)=>{const ne=oe/i*(1-Y),re=ee*(1+Y);let L=(M-ne)/re;L=Math.max(0,Math.min(L,1)),E.set(te,{opacity:L})}),E.set(F.current,{opacity:M})}})}return v&&l(),()=>{g.current&&g.current.revert(),U.getAll().forEach(o=>o.kill())}},[u,v]),ue(j,{componentType:ge,componentName:fe,componentTitle:w});const T="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return c(xe,{children:[s&&e("div",{ref:n,className:b("relative z-10 ",T,{"aiui-dark":_==="dark","rounded-box":$==="rounded"},h),children:e("div",{ref:A,children:!u&&c("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[x&&!B&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),w&&B&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:w}}),R&&e(ce,{variant:"link",className:b("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{D(!0),d&&d?.()},children:R})]})})}),c("div",{style:s?{marginBottom:`-${S}px`,marginTop:`-${X}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:c("div",{className:b("relative overflow-hidden",s?"h-screen w-full":T,{"aiui-dark":_==="dark","rounded-box":$==="rounded"}),children:[u==="fade-in"&&x&&e("div",{ref:f,className:"lg-desktop:text-[64px] text-btn-primary-foreground 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}}),c("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[e(O,{videoRef:m,poster:P?.url||"",src:I?.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(O,{videoRef:m,poster:P?.url||"",src:J?.url||I?.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:F,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:b(s&&"relative box-content block",T),style:s?{height:`${S}px`}:{},ref:j})]}),V&&z&&e(de,{visible:V,youTubeId:z,onCloseModal:()=>D(!1)})]})});var Ie=ie(ve);export{Ie 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, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, 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 [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n 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 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-btn-primary-foreground 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-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground 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 left-0 top-0 h-screen w-screen\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"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\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "aspect", "MediaPlayerBase_default"]
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n 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 [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n 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 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-btn-primary-foreground 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-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground 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 left-0 top-0 h-screen w-screen\">\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\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "aspect", "MediaPlayerBase_default"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerBase/types.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps {
10
10
  img?: Img;
11
11
  isYouTube?: boolean;
12
12
  video?: Video;
13
+ mobileVideo?: Video;
13
14
  youtubeId?: string;
14
15
  titleAnimation?: 'fade-in';
15
16
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.0.9-temp-2",
3
+ "version": "1.0.9-temp-3",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",