@anker-in/headless-ui 1.0.9-temp-1 → 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.
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerBase/types.d.ts +1 -0
- package/dist/cjs/biz-components/MediaPlayerBase/types.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/types.js.map +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/cjs/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerBase/types.d.ts +1 -0
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
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
|
|
@@ -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,
|
|
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": "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,YAAAC,GAAa,MAAAC,EAAO,IAAAC,EAAK,MAAAC,EAAO,eAAAC,EAAgB,GAAGC,EAAK,CAChH,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,OAAO7B,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,EAAO,WAAYP,CAAe,CAAC,EACzGqC,EACJ,OAAO7B,GAAe,SAClBA,EACAA,MAAc,wBAAqB,CAAE,KAAMA,EAAY,WAAYR,CAAe,CAAC,KAEzF,aAAU,IAAM,CACVmC,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,cAAAjC,GACA,cAAAD,GACA,eAAgBuC,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,EACAV,CACF,EAEA,mBAAC,OAAI,IAAK6B,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,EAED5B,MACC,OAAC,EAAAkD,QAAA,CACC,QAAQ,OACR,aAAW,MAAG,4DAA4D,EAC1E,QAAS,IAAM,CACbhC,EAAW,EAAI,EAYfrB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,KAEF,QAAC,OAAI,MAAOU,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,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,EAAAiD,QAAA,CACC,SAAUhC,EACV,OAAQd,GAAK,KAAO,GACpB,IAAKF,IAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OACC,IAAKkB,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,GAAWhB,MACV,OAAC,cAAW,QAASgB,EAAS,UAAWhB,EAAW,aAAc,IAAMiB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA,IAAO7C,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", "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
|
}
|
|
@@ -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,
|
|
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
|
|
@@ -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
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var ae=Object.create;var
|
|
1
|
+
"use strict";"use client";var ae=Object.create;var y=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var ne=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,le=Object.prototype.hasOwnProperty;var ce=(s,t)=>{for(var r in t)y(s,r,{get:t[r],enumerable:!0})},T=(s,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of ne(t))!le.call(s,o)&&o!==r&&y(s,o,{get:()=>t[o],enumerable:!(n=oe(t,o))||n.enumerable});return s};var i=(s,t,r)=>(r=s!=null?ae(ie(s)):{},T(t||!s||!s.__esModule?y(r,"default",{value:s,enumerable:!0}):r,s)),de=s=>T(y({},"__esModule",{value:!0}),s);var fe={};ce(fe,{default:()=>ue});module.exports=de(fe);var e=require("react/jsx-runtime"),a=i(require("react")),L=require("es-toolkit"),P=require("react-intersection-observer"),p=require("../../helpers/utils.js"),C=require("../../shared/Styles.js"),$=i(require("../Slogan/index.js")),B=require("../VideoModal/YouTubePlayer.js"),c=require("../../components/gird.js"),Y=require("../../components/container.js"),q=i(require("../BrandEquity/index.js")),F=i(require("../MemberEquity/index.js")),j=i(require("../Spacer/index.js")),G=i(require("gsap")),x=require("@payloadcms/richtext-lexical/html"),N=require("react-responsive"),I=i(require("../../helpers/ScrollLoadVideo.js"));const z=({defaultConverters:s})=>({...s,text:t=>{const{node:r}=t;return r.$&&r.$.color?`<span class="lexical-${r.$.color}">${r.text}</span>`:r.text}}),h=({children:s,spaceY:t,className:r})=>{const n=(0,N.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(Y.Container,{spaceY:t,className:(0,p.cn)("!bg-transparent",r),children:(0,e.jsxs)(c.Grid,{children:[!n&&(0,e.jsx)(c.GridItem,{span:1}),(0,e.jsx)(c.GridItem,{span:n?12:10,children:s}),!n&&(0,e.jsx)(c.GridItem,{span:1})]})})},pe=a.default.forwardRef(({children:s,id:t,components:r})=>{const n=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:n,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:s}),(0,e.jsx)(e.Fragment,{children:r?.map(o=>{switch(o.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(h,{spaceY:"none",children:(0,e.jsx)(q.default,{data:o,style:o?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(h,{spaceY:"none",children:(0,e.jsx)(F.default,{data:o,className:"w-full",style:o?.style})})});case"ipc-spacer":return(0,e.jsx)(j.default,{data:o,style:o?.style,className:"!bg-transparent"});default:return null}})})]})}),me=(0,a.forwardRef)(({className:s="",id:t,data:{title:r,videoTitle:n,mobVideo:o,mobImg:m,img:u,isYouTube:V,youtubePcId:k,youtubeMobileId:Q,video:v,theme:M,shape:O,components:W}})=>{const R=(0,a.useRef)(null),b=(0,a.useRef)(null),{ref:_,inView:f}=(0,P.useInView)(),[ye,A]=(0,a.useState)(0),[H,J]=(0,a.useState)(!1),[K,U]=(0,a.useState)(!1),X=(0,a.useRef)(null),Z=typeof r=="string"?r:r&&(0,x.convertLexicalToHTML)({data:r,converters:z});typeof n=="string"||n&&(0,x.convertLexicalToHTML)({data:n,converters:z});const[D,ee]=(0,a.useState)(0),[l,te]=(0,a.useState)(!1),E=(0,N.useMediaQuery)({query:"(max-width: 768px)"});(0,a.useEffect)(()=>{te(E)},[E]);const w=(0,L.debounce)(()=>{if(b.current){const g=b.current.getBoundingClientRect(),d=l?window.screen.height:window.innerHeight,re=window.scrollY||window.pageYOffset,se=g.bottom+re,S=document.documentElement.scrollHeight-se;ee(S>d?d:S),A(d)}},2e3);return(0,a.useEffect)(()=>{f&&!H&&(R.current?.play(),J(!0))},[f,H]),(0,a.useEffect)(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),(0,a.useEffect)(()=>{function g(){const d=l?window.screen.height:window.innerHeight;G.default.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${d*1.8}px bottom`,scrub:.2}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}f&&g()},[f]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,className:(0,p.cn)("relative z-20 h-screen w-full",s,{"aiui-dark":M==="dark","rounded-box":O==="rounded"}),ref:X,children:(0,e.jsx)("div",{ref:_,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:(0,e.jsx)(h,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)($.default,{className:"sticky-title",data:{title:Z||"",theme:M}})})})}),(0,e.jsxs)("div",{ref:b,style:{marginBottom:`-${D}px`},className:(0,p.cn)(t,"relative mt-[-200vh]"),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,p.cn)("media-cover","relative h-screen w-full"),children:[V?(0,e.jsx)(B.YouTubePlayer,{youTubeId:l&&Q||k}):v?.url&&(0,e.jsx)(I.default,{videoRef:R,poster:l&&m?.url?m?.url:u?.url,src:l&&o?.url?o?.url:v?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{U(!0)}}),u?.url&&(!v?.url||K)&&(0,e.jsx)("img",{src:l&&m?.url?m?.url:u?.url,alt:u?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(pe,{components:W}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});var ue=(0,C.withLayout)(me);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\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 SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n ({\n className = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : 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 setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\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 const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.2,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\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 SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n ({\n className = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : 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 setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\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 const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.2,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2\"\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div ref={boxRef} style={{ marginBottom: `-${btb}px` }} className={cn(id, 'relative mt-[-200vh]')}>\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {isYouTube ? (\n <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n ) : (\n video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{ backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)' }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_react_intersection_observer", "import_utils", "import_Styles", "import_Slogan", "import_YouTubePlayer", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "import_ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "React", "id", "components", "mediaPlayerStickyRef", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "gsap", "Slogan", "ScrollLoadVideo"]
|
|
7
7
|
}
|