@anker-in/headless-ui 1.1.9-temp-112709 → 1.1.9-temp-112710
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/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- 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/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var Ee=Object.create;var P=Object.defineProperty;var he=Object.getOwnPropertyDescriptor;var He=Object.getOwnPropertyNames;var _e=Object.getPrototypeOf,we=Object.prototype.hasOwnProperty;var Ie=(o,l)=>{for(var r in l)P(o,r,{get:l[r],enumerable:!0})},se=(o,l,r,u)=>{if(l&&typeof l=="object"||typeof l=="function")for(let n of He(l))!we.call(o,n)&&n!==r&&P(o,n,{get:()=>l[n],enumerable:!(u=he(l,n))||u.enumerable});return o};var ae=(o,l,r)=>(r=o!=null?Ee(_e(o)):{},se(l||!o||!o.__esModule?P(r,"default",{value:o,enumerable:!0}):r,o)),Ne=o=>se(P({},"__esModule",{value:!0}),o);var Me={};Ie(Me,{default:()=>ke});module.exports=Ne(Me);var e=require("react/jsx-runtime"),t=require("react"),p=require("../../helpers/utils.js"),de=require("../../shared/Styles.js"),Y=ae(require("../../components/button.js")),J=require("../VideoModal/index.js"),K=require("@payloadcms/richtext-lexical/html"),ue=require("react-intersection-observer"),pe=require("../../hooks/useExposure.js"),w=ae(require("../../helpers/ScrollLoadVideo.js")),V=require("gsap"),me=require("gsap/dist/SplitText"),Q=require("gsap/dist/ScrollTrigger");const Re="media_player_base",Se="video",a={TEXT_START_OFFSET:"10%",TEXT_ANIMATION_MULTIPLIER:1.5,TEXT_ANIMATION_OFFSET:80,VIDEO_HEIGHT_BASE:102,OVERLAP_FACTOR:.5,VIDEO_PROGRESS_THRESHOLD:.9,HEIGHT_CHANGE_THRESHOLD:5},ie=({defaultConverters:o})=>({...o,text:l=>{const{node:r}=l;return r.$&&r.$.color?`<span class="lexical-${r.$.color}">${r.text}</span>`:r.text}}),ce=(0,t.forwardRef)(({className:o="",id:l,onBtnClick:r,data:{title:u,videoTitle:n,btnText:I,youtubeId:N,video:R,mobileVideo:W,theme:z,img:S,shape:B,titleAnimation:m,...fe}},Te)=>{const{sticky:D}=fe,[k,Z]=(0,t.useState)(!1),[ee,ge]=(0,t.useState)(0),[ve,xe]=(0,t.useState)(0),[M,be]=(0,t.useState)(0),[L,$]=(0,t.useState)(!1),f=(0,t.useRef)(null),G=(0,t.useRef)(null),s=(0,t.useRef)(null),X=(0,t.useRef)(null),j=(0,t.useRef)(null),q=(0,t.useRef)(null),te=(0,t.useRef)(null),oe=(0,t.useRef)(null),{ref:re,inView:i}=(0,ue.useInView)();(0,t.useImperativeHandle)(Te,()=>s.current);const T=typeof u=="string"?u:u&&(0,K.convertLexicalToHTML)({data:u,converters:ie}),y=typeof n=="string"?n:n&&(0,K.convertLexicalToHTML)({data:n,converters:ie});(0,t.useEffect)(()=>{i?(f.current?.play(),Z(!0)):(f.current?.pause(),Z(!1))},[i]),(0,t.useEffect)(()=>{if(!s.current||!D)return;const c=()=>{if(!s.current)return;const C=s.current.getBoundingClientRect(),v=window.innerHeight,x=window.scrollY||window.pageYOffset,E=C.bottom+x,h=document.documentElement.scrollHeight-E,H=v-C.bottom;console.log("inViewRefToBottom",H,"123",v,"22",h);const b=h>H?H:h,ne=s.current.clientHeight+v;ge(_=>Math.abs(b-_)>a.HEIGHT_CHANGE_THRESHOLD?b:_),xe(_=>Math.abs(ne-_)>a.HEIGHT_CHANGE_THRESHOLD?ne:_)};c();const O=new ResizeObserver(()=>{requestAnimationFrame(()=>{c()})});O.observe(s.current);const g=()=>{requestAnimationFrame(()=>{c()})};let d;const A=()=>{d||(d=setTimeout(()=>{g(),d=null},100))};return window.addEventListener("scroll",A,{passive:!0}),()=>{O.disconnect(),window.removeEventListener("scroll",A),d&&clearTimeout(d)}},[D]),(0,t.useEffect)(()=>{if(!i||!m||m!=="fade-in"||!X.current)return;const c=X.current,O=c.clientHeight||80;q.current=new me.SplitText(c,{type:"words",wordsClass:"word"});const g=q.current.words,d=g.length,A=1/d,C=g.map((v,x)=>{const E=x/d*(1-a.OVERLAP_FACTOR),F=A*(1+a.OVERLAP_FACTOR);return{start:E,width:F}});return V.gsap.set(g,{opacity:0}),te.current=Q.ScrollTrigger.create({trigger:s.current,start:`top center-=${a.TEXT_START_OFFSET}`,end:`top+=${O*a.TEXT_ANIMATION_MULTIPLIER+a.TEXT_ANIMATION_OFFSET}px center-=${a.TEXT_START_OFFSET}`,scrub:!0,onUpdate:v=>{const x=v.progress;g.forEach((E,F)=>{const{start:h,width:H}=C[F];let b=(x-h)/H;b=Math.max(0,Math.min(b,1)),V.gsap.set(E,{opacity:b})}),G.current&&V.gsap.set(G.current,{opacity:x})}}),()=>{q.current?.revert(),te.current?.kill()}},[m,i]),(0,t.useEffect)(()=>{if(!(!i||!s.current))return oe.current=Q.ScrollTrigger.create({trigger:s.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:c=>{be(c.progress)}}),()=>{oe.current?.kill()}},[i]),(0,pe.useExposure)(j,{componentType:Se,componentName:Re,componentTitle:y});const ye=(0,t.useMemo)(()=>i&&M>0&&M<a.VIDEO_PROGRESS_THRESHOLD?3:i?2:1,[M,i]),le=(0,t.useCallback)(()=>{$(!0),r?.()},[r]),U="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return D?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{ref:s,className:(0,p.cn)("relative z-10",U,{"aiui-dark":z==="dark","rounded-box":B==="rounded"},o),children:(0,e.jsx)("div",{ref:re,children:!m&&(0,e.jsxs)("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!k&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),y&&k&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),I&&(0,e.jsx)(Y.default,{variant:"link",className:(0,p.cn)("member-equity-button-secondary "),onClick:le,children:I})]})})}),(0,e.jsxs)("div",{style:{marginBottom:`-${ee}px`,marginTop:`-${ve}px`,zIndex:ye},className:"relative",children:[(0,e.jsx)("div",{className:"sticky top-0",children:(0,e.jsxs)("div",{id:l,className:(0,p.cn)("relative h-screen w-full overflow-hidden",{"aiui-dark":z==="dark","rounded-box":B==="rounded"}),children:[m==="fade-in"&&T&&(0,e.jsx)("div",{ref:X,className:"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),(0,e.jsxs)("div",{className:"media-cover absolute left-0 top-0 size-full",style:{height:`${a.VIDEO_HEIGHT_BASE-M*100}vh`},children:[(0,e.jsx)(w.default,{videoRef:f,poster:S?.url||"",src:R?.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)(w.default,{videoRef:f,poster:S?.url||"",src:W?.url||R?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)("div",{ref:G,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),(0,e.jsx)("div",{className:(0,p.cn)("relative box-content block",U),style:{height:`${ee}px`},ref:j})]}),L&&N&&(0,e.jsx)(J.VideoModal,{visible:L,youTubeId:N,onCloseModal:()=>$(!1)})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{id:l,className:(0,p.cn)("relative overflow-hidden",U,{"aiui-dark":z==="dark","rounded-box":B==="rounded"},o),children:[(0,e.jsxs)("div",{ref:re,children:[!m&&(0,e.jsxs)("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!k&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),y&&k&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),I&&(0,e.jsx)(Y.default,{variant:"link",className:(0,p.cn)("member-equity-button-secondary"),onClick:le,children:I})]}),(0,e.jsx)(w.default,{videoRef:f,poster:S?.url||"",src:R?.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)(w.default,{videoRef:f,poster:S?.url||"",src:W?.url||R?.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 bottom-0 left-0 h-px w-full"})]}),L&&N&&(0,e.jsx)(J.VideoModal,{visible:L,youTubeId:N,onCloseModal:()=>$(!1)})]})});ce.displayName="MediaPlayerBase";var ke=(0,de.withLayout)(ce);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\ninterface ScrollTriggerInstance {\n progress: number\n kill: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n // \u89C6\u9891\u64AD\u653E\u63A7\u5236\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n useEffect(() => {\n if (!titleRef.current || !sticky) return\n\n // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n const calculateLayout = () => {\n if (!titleRef.current) return\n\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n\n const newBtb = distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom\n const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n // \u4F7F\u7528\u9608\u503C\u68C0\u6D4B,\u907F\u514D\u9891\u7E41\u66F4\u65B0\n setbtb(prevBtb => {\n return Math.abs(newBtb - prevBtb) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD ? newBtb : prevBtb\n })\n\n setTitleHeight(prevHeight => {\n return Math.abs(newTitleHeight - prevHeight) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD\n ? newTitleHeight\n : prevHeight\n })\n }\n\n // \u521D\u59CB\u8BA1\u7B97\n calculateLayout()\n\n // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n const resizeObserver = new ResizeObserver(() => {\n // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n requestAnimationFrame(() => {\n calculateLayout()\n })\n })\n\n resizeObserver.observe(titleRef.current)\n\n // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n const handleScroll = () => {\n requestAnimationFrame(() => {\n calculateLayout()\n })\n }\n\n // \u4F7F\u7528\u8282\u6D41\u7684\u6EDA\u52A8\u76D1\u542C\n let scrollTimeout: NodeJS.Timeout\n const throttledScroll = () => {\n if (!scrollTimeout) {\n scrollTimeout = setTimeout(() => {\n handleScroll()\n scrollTimeout = null as any\n }, 100)\n }\n }\n\n window.addEventListener('scroll', throttledScroll, { passive: true })\n\n return () => {\n resizeObserver.disconnect()\n window.removeEventListener('scroll', throttledScroll)\n if (scrollTimeout) clearTimeout(scrollTimeout)\n }\n }, [sticky])\n\n // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n useEffect(() => {\n if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n const titleElement = titleFadeInRef.current\n const height = titleElement.clientHeight || 80\n\n // \u5206\u8BCD\n splitTextInstance.current = new SplitText(titleElement, {\n type: 'words',\n wordsClass: 'word',\n })\n\n const words = splitTextInstance.current.words\n const total = words.length\n const interval = 1 / total\n\n // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n const wordAnimations = words.map((_, i) => {\n const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n return { start, width }\n })\n\n // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n gsap.set(words, { opacity: 0 })\n\n // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n words.forEach((word, i) => {\n const { start, width } = wordAnimations[i]\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n\n // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n if (bgRef.current) {\n gsap.set(bgRef.current, { opacity: progress })\n }\n },\n }) as ScrollTriggerInstance\n\n return () => {\n splitTextInstance.current?.revert()\n scrollTriggerRef.current?.kill()\n }\n }, [titleAnimation, inView])\n\n // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n useEffect(() => {\n if (!inView || !titleRef.current) return\n\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: self => {\n setVideoHeightProgress(self.progress)\n },\n }) as ScrollTriggerInstance\n\n return () => {\n heightTriggerRef.current?.kill()\n }\n }, [inView])\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n </div>\n\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\">\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div\n className=\"media-cover absolute left-0 top-0 size-full\"\n style={{\n height: `${ANIMATION_CONFIG.VIDEO_HEIGHT_BASE - videoHeightProgress * 100}vh`,\n }}\n >\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
-
"mappings": "ulBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,
|
|
6
|
-
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "calculateLayout", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "newBtb", "newTitleHeight", "prevBtb", "prevHeight", "resizeObserver", "handleScroll", "scrollTimeout", "throttledScroll", "titleElement", "height", "words", "total", "interval", "wordAnimations", "_", "i", "start", "width", "self", "progress", "word", "opacity", "zIndexVideo", "handleBtnClick", "aspect", "Button", "ScrollLoadVideo"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\ninterface ScrollTriggerInstance {\n progress: number\n kill: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n // \u89C6\u9891\u64AD\u653E\u63A7\u5236\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n useEffect(() => {\n if (!titleRef.current || !sticky) return\n\n // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n const calculateLayout = () => {\n if (!titleRef.current) return\n\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n\n const inViewRefToBottom = screenHeight - rect.bottom\n console.log('inViewRefToBottom', inViewRefToBottom, '123', screenHeight, '22', distanceToPageBottom)\n const newBtb = distanceToPageBottom > inViewRefToBottom ? inViewRefToBottom : distanceToPageBottom\n const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n // \u4F7F\u7528\u9608\u503C\u68C0\u6D4B,\u907F\u514D\u9891\u7E41\u66F4\u65B0\n setbtb(prevBtb => {\n return Math.abs(newBtb - prevBtb) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD ? newBtb : prevBtb\n })\n\n setTitleHeight(prevHeight => {\n return Math.abs(newTitleHeight - prevHeight) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD\n ? newTitleHeight\n : prevHeight\n })\n }\n\n // \u521D\u59CB\u8BA1\u7B97\n calculateLayout()\n\n // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n const resizeObserver = new ResizeObserver(() => {\n // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n requestAnimationFrame(() => {\n calculateLayout()\n })\n })\n\n resizeObserver.observe(titleRef.current)\n\n // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n const handleScroll = () => {\n requestAnimationFrame(() => {\n calculateLayout()\n })\n }\n\n // \u4F7F\u7528\u8282\u6D41\u7684\u6EDA\u52A8\u76D1\u542C\n let scrollTimeout: NodeJS.Timeout\n const throttledScroll = () => {\n if (!scrollTimeout) {\n scrollTimeout = setTimeout(() => {\n handleScroll()\n scrollTimeout = null as any\n }, 100)\n }\n }\n\n window.addEventListener('scroll', throttledScroll, { passive: true })\n\n return () => {\n resizeObserver.disconnect()\n window.removeEventListener('scroll', throttledScroll)\n if (scrollTimeout) clearTimeout(scrollTimeout)\n }\n }, [sticky])\n\n // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n useEffect(() => {\n if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n const titleElement = titleFadeInRef.current\n const height = titleElement.clientHeight || 80\n\n // \u5206\u8BCD\n splitTextInstance.current = new SplitText(titleElement, {\n type: 'words',\n wordsClass: 'word',\n })\n\n const words = splitTextInstance.current.words\n const total = words.length\n const interval = 1 / total\n\n // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n const wordAnimations = words.map((_, i) => {\n const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n return { start, width }\n })\n\n // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n gsap.set(words, { opacity: 0 })\n\n // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n words.forEach((word, i) => {\n const { start, width } = wordAnimations[i]\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n\n // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n if (bgRef.current) {\n gsap.set(bgRef.current, { opacity: progress })\n }\n },\n }) as ScrollTriggerInstance\n\n return () => {\n splitTextInstance.current?.revert()\n scrollTriggerRef.current?.kill()\n }\n }, [titleAnimation, inView])\n\n // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n useEffect(() => {\n if (!inView || !titleRef.current) return\n\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: self => {\n setVideoHeightProgress(self.progress)\n },\n }) as ScrollTriggerInstance\n\n return () => {\n heightTriggerRef.current?.kill()\n }\n }, [inView])\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n </div>\n\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\">\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div\n className=\"media-cover absolute left-0 top-0 size-full\"\n style={{\n height: `${ANIMATION_CONFIG.VIDEO_HEIGHT_BASE - videoHeightProgress * 100}vh`,\n }}\n >\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "ulBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IA4QQ,IAAAI,EAAA,6BA3QRC,EAAmG,iBACnGC,EAAmB,kCACnBC,GAA2B,kCAC3BC,EAAmB,0CACnBC,EAA2B,kCAC3BC,EAAqC,6CAErCC,GAA0B,uCAE1BC,GAA4B,sCAC5BC,EAA4B,gDAC5BC,EAAqB,gBACrBC,GAA0B,+BAC1BC,EAA8B,mCAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAGhBC,EAAmB,CACvB,kBAAmB,MACnB,0BAA2B,IAC3B,sBAAuB,GACvB,kBAAmB,IACnB,eAAgB,GAChB,yBAA0B,GAC1B,wBAAyB,CAC3B,EAEMC,GAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAOMC,MAAkB,cACtB,CACE,CACE,UAAAC,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,YAAAC,EAAa,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,GAAKC,EAAM,KAAI,YAAS,CAAC,EAC1B,CAACC,GAAaC,EAAc,KAAI,YAAS,CAAC,EAC1C,CAACC,EAAqBC,EAAsB,KAAI,YAAS,CAAC,EAC1D,CAACC,EAASC,CAAU,KAAI,YAAkB,EAAK,EAE/CC,KAAW,UAAyB,IAAI,EACxCC,KAAQ,UAAuB,IAAI,EACnCC,KAAW,UAAuB,IAAI,EACtCC,KAAiB,UAAuB,IAAI,EAC5CC,KAAW,UAAuB,IAAI,EACtCC,KAAoB,UAAyB,IAAI,EACjDC,MAAmB,UAAqC,IAAI,EAC5DC,MAAmB,UAAqC,IAAI,EAC5D,CAAE,IAAKC,GAAW,OAAAC,CAAO,KAAI,cAAU,KAE7C,uBAAoBrB,GAAK,IAAMc,EAAS,OAAyB,EAEjE,MAAMQ,EACJ,OAAOjC,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,EAAO,WAAYR,EAAe,CAAC,EACzG0C,EACJ,OAAOjC,GAAe,SAClBA,EACAA,MAAc,wBAAqB,CAAE,KAAMA,EAAY,WAAYT,EAAe,CAAC,KAGzF,aAAU,IAAM,CACVwC,GACFT,EAAS,SAAS,KAAK,EACvBT,EAAa,EAAI,IAEjBS,EAAS,SAAS,MAAM,EACxBT,EAAa,EAAK,EAEtB,EAAG,CAACkB,CAAM,CAAC,KAGX,aAAU,IAAM,CACd,GAAI,CAACP,EAAS,SAAW,CAACb,EAAQ,OAGlC,MAAMuB,EAAkB,IAAM,CAC5B,GAAI,CAACV,EAAS,QAAS,OAEvB,MAAMW,EAAOX,EAAS,QAAQ,sBAAsB,EAC9CY,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAEpCE,EAAoBJ,EAAeD,EAAK,OAC9C,QAAQ,IAAI,oBAAqBK,EAAmB,MAAOJ,EAAc,KAAMG,CAAoB,EACnG,MAAME,EAASF,EAAuBC,EAAoBA,EAAoBD,EACxEG,GAAiBlB,EAAS,QAAQ,aAAeY,EAGvDrB,GAAO4B,GACE,KAAK,IAAIF,EAASE,CAAO,EAAIrD,EAAiB,wBAA0BmD,EAASE,CACzF,EAED1B,GAAe2B,GACN,KAAK,IAAIF,GAAiBE,CAAU,EAAItD,EAAiB,wBAC5DoD,GACAE,CACL,CACH,EAGAV,EAAgB,EAGhB,MAAMW,EAAiB,IAAI,eAAe,IAAM,CAE9C,sBAAsB,IAAM,CAC1BX,EAAgB,CAClB,CAAC,CACH,CAAC,EAEDW,EAAe,QAAQrB,EAAS,OAAO,EAGvC,MAAMsB,EAAe,IAAM,CACzB,sBAAsB,IAAM,CAC1BZ,EAAgB,CAClB,CAAC,CACH,EAGA,IAAIa,EACJ,MAAMC,EAAkB,IAAM,CACvBD,IACHA,EAAgB,WAAW,IAAM,CAC/BD,EAAa,EACbC,EAAgB,IAClB,EAAG,GAAG,EAEV,EAEA,cAAO,iBAAiB,SAAUC,EAAiB,CAAE,QAAS,EAAK,CAAC,EAE7D,IAAM,CACXH,EAAe,WAAW,EAC1B,OAAO,oBAAoB,SAAUG,CAAe,EAChDD,GAAe,aAAaA,CAAa,CAC/C,CACF,EAAG,CAACpC,CAAM,CAAC,KAGX,aAAU,IAAM,CACd,GAAI,CAACoB,GAAU,CAACvB,GAAkBA,IAAmB,WAAa,CAACiB,EAAe,QAAS,OAE3F,MAAMwB,EAAexB,EAAe,QAC9ByB,EAASD,EAAa,cAAgB,GAG5CtB,EAAkB,QAAU,IAAI,aAAUsB,EAAc,CACtD,KAAM,QACN,WAAY,MACd,CAAC,EAED,MAAME,EAAQxB,EAAkB,QAAQ,MAClCyB,EAAQD,EAAM,OACdE,EAAW,EAAID,EAGfE,EAAiBH,EAAM,IAAI,CAACI,EAAGC,IAAM,CACzC,MAAMC,EAASD,EAAIJ,GAAU,EAAI9D,EAAiB,gBAC5CoE,EAAQL,GAAY,EAAI/D,EAAiB,gBAC/C,MAAO,CAAE,MAAAmE,EAAO,MAAAC,CAAM,CACxB,CAAC,EAGD,cAAK,IAAIP,EAAO,CAAE,QAAS,CAAE,CAAC,EAG9BvB,GAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASJ,EAAS,QAClB,MAAO,eAAelC,EAAiB,iBAAiB,GACxD,IAAK,QAAQ4D,EAAS5D,EAAiB,0BAA4BA,EAAiB,qBAAqB,cAAcA,EAAiB,iBAAiB,GACzJ,MAAO,GACP,SAAUqE,GAAQ,CAChB,MAAMC,EAAWD,EAAK,SAGtBR,EAAM,QAAQ,CAACU,EAAML,IAAM,CACzB,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIJ,EAAeE,CAAC,EACzC,IAAIM,GAAWF,EAAWH,GAASC,EACnCI,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAID,EAAM,CAAE,QAAAC,CAAQ,CAAC,CAC5B,CAAC,EAGGvC,EAAM,SACR,OAAK,IAAIA,EAAM,QAAS,CAAE,QAASqC,CAAS,CAAC,CAEjD,CACF,CAAC,EAEM,IAAM,CACXjC,EAAkB,SAAS,OAAO,EAClCC,GAAiB,SAAS,KAAK,CACjC,CACF,EAAG,CAACpB,EAAgBuB,CAAM,CAAC,KAG3B,aAAU,IAAM,CACd,GAAI,GAACA,GAAU,CAACP,EAAS,SAEzB,OAAAK,GAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASL,EAAS,QAClB,MAAO,gBACP,IAAK,aACL,MAAO,GACP,SAAUmC,GAAQ,CAChBxC,GAAuBwC,EAAK,QAAQ,CACtC,CACF,CAAC,EAEM,IAAM,CACX9B,GAAiB,SAAS,KAAK,CACjC,CACF,EAAG,CAACE,CAAM,CAAC,KAGX,gBAAYL,EAAU,CACpB,cAAArC,GACA,cAAAD,GACA,eAAgB6C,CAClB,CAAC,EAGD,MAAM8B,MAAc,WAAQ,IACtBhC,GAAUb,EAAsB,GAAKA,EAAsB5B,EAAiB,yBAAiC,EAC7GyC,EAAe,EACZ,EACN,CAACb,EAAqBa,CAAM,CAAC,EAG1BiC,MAAiB,eAAY,IAAM,CACvC3C,EAAW,EAAI,EACfvB,IAAa,CACf,EAAG,CAACA,CAAU,CAAC,EAETmE,EACJ,6NAGF,OAAKtD,KAiFH,oBACE,oBAAC,OACC,IAAKa,EACL,aAAW,MACT,gBACAyC,EACA,CACE,YAAa5D,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,mBAAC,OAAI,IAAKkC,GACP,UAACtB,MACA,QAAC,OAAI,UAAU,2HACZ,UAAAwB,GAAc,CAACpB,MACd,OAAC,OACC,UAAU,qFACV,wBAAyB,CAAE,OAAQoB,CAAW,EAChD,EAEDC,GAAmBrB,MAClB,OAAC,OACC,UAAU,qFACV,wBAAyB,CAAE,OAAQqB,CAAgB,EACrD,EAEDhC,MACC,OAAC,EAAAiE,QAAA,CAAO,QAAQ,OAAO,aAAW,MAAG,iCAAiC,EAAG,QAASF,GAC/E,SAAA/D,EACH,GAEJ,EAEJ,EACF,KACA,QAAC,OACC,MAAO,CACL,aAAc,IAAIa,EAAG,KACrB,UAAW,IAAIE,EAAW,KAC1B,OAAQ+C,EACV,EACA,UAAU,WAEV,oBAAC,OAAI,UAAU,eACb,oBAAC,OACC,GAAIlE,EACJ,aAAW,MAAG,2CAA4C,CACxD,YAAaQ,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAAawB,MAC/B,OAAC,OACC,IAAKP,EACL,UAAU,6JACV,wBAAyB,CAAE,OAAQO,CAAW,EAChD,KAEF,QAAC,OACC,UAAU,8CACV,MAAO,CACL,OAAQ,GAAG1C,EAAiB,kBAAoB4B,EAAsB,GAAG,IAC3E,EAEA,oBAAC,EAAAiD,QAAA,CACC,SAAU7C,EACV,OAAQhB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,EAAAgE,QAAA,CACC,SAAU7C,EACV,OAAQhB,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OACC,IAAKoB,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,KACA,OAAC,OAAI,aAAW,MAAG,6BAA8B0C,CAAM,EAAG,MAAO,CAAE,OAAQ,GAAGnD,EAAG,IAAK,EAAG,IAAKY,EAAU,GAC1G,EACCN,GAAWlB,MACV,OAAC,cAAW,QAASkB,EAAS,UAAWlB,EAAW,aAAc,IAAMmB,EAAW,EAAK,EAAG,GAE/F,KA1LE,oBACE,qBAAC,OACC,GAAIxB,EACJ,aAAW,MACT,2BACAoE,EACA,CACE,YAAa5D,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,qBAAC,OAAI,IAAKkC,GAEP,WAACtB,MACA,QAAC,OAAI,UAAU,2HACZ,UAAAwB,GAAc,CAACpB,MACd,OAAC,OACC,UAAU,oFACV,wBAAyB,CAAE,OAAQoB,CAAW,EAChD,EAEDC,GAAmBrB,MAClB,OAAC,OACC,UAAU,oFACV,wBAAyB,CAAE,OAAQqB,CAAgB,EACrD,EAEDhC,MACC,OAAC,EAAAiE,QAAA,CAAO,QAAQ,OAAO,aAAW,MAAG,gCAAgC,EAAG,QAASF,GAC9E,SAAA/D,EACH,GAEJ,KAIF,OAAC,EAAAkE,QAAA,CACC,SAAU7C,EACV,OAAQhB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,EAAAgE,QAAA,CACC,SAAU7C,EACV,OAAQhB,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,GACF,KAGA,OAAC,OAAI,IAAKuB,EAAU,UAAU,uCAAuC,GACvE,EAECN,GAAWlB,MACV,OAAC,cAAW,QAASkB,EAAS,UAAWlB,EAAW,aAAc,IAAMmB,EAAW,EAAK,EAAG,GAE/F,CAmHN,CACF,EAEA1B,GAAgB,YAAc,kBAE9B,IAAOtB,MAAQ,eAAWsB,EAAe",
|
|
6
|
+
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "calculateLayout", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "inViewRefToBottom", "newBtb", "newTitleHeight", "prevBtb", "prevHeight", "resizeObserver", "handleScroll", "scrollTimeout", "throttledScroll", "titleElement", "height", "words", "total", "interval", "wordAnimations", "_", "i", "start", "width", "self", "progress", "word", "opacity", "zIndexVideo", "handleBtnClick", "aspect", "Button", "ScrollLoadVideo"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var oe=Object.create;var v=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var le=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var de=(r,s)=>{for(var t in s)v(r,t,{get:s[t],enumerable:!0})},S=(r,s,t,o)=>{if(s&&typeof s=="object"||typeof s=="function")for(let n of ie(s))!ce.call(r,n)&&n!==t&&v(r,n,{get:()=>s[n],enumerable:!(o=ne(s,n))||o.enumerable});return r};var l=(r,s,t)=>(t=r!=null?oe(le(r)):{},S(s||!r||!r.__esModule?v(t,"default",{value:r,enumerable:!0}):t,r)),pe=r=>S(v({},"__esModule",{value:!0}),r);var ye={};de(ye,{default:()=>fe});module.exports=pe(ye);var e=require("react/jsx-runtime"),a=l(require("react")),L=require("es-toolkit"),P=require("react-intersection-observer"),u=require("../../helpers/utils.js"),$=require("../../shared/Styles.js"),B=l(require("../Slogan/index.js")),Y=require("../VideoModal/YouTubePlayer.js"),d=require("../../components/gird.js"),q=require("../../components/container.js"),F=l(require("../BrandEquity/index.js")),I=l(require("../MemberEquity/index.js")),j=l(require("../Spacer/index.js")),G=l(require("gsap")),N=require("@payloadcms/richtext-lexical/html"),k=require("react-responsive"),V=l(require("../../helpers/ScrollLoadVideo.js"));const T=({defaultConverters:r})=>({...r,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),x=({children:r,spaceY:s,className:t})=>{const o=(0,k.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(q.Container,{spaceY:s,className:(0,u.cn)("!bg-transparent",t),children:(0,e.jsxs)(d.Grid,{children:[!o&&(0,e.jsx)(d.GridItem,{span:1}),(0,e.jsx)(d.GridItem,{span:o?12:10,children:r}),!o&&(0,e.jsx)(d.GridItem,{span:1})]})})},me=a.default.forwardRef(({children:r,id:s,components:t},o)=>{const n=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:n,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:r}),(0,e.jsx)(e.Fragment,{children:t?.map(i=>{switch(i.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(x,{spaceY:"none",children:(0,e.jsx)(F.default,{data:i,style:i?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(x,{spaceY:"none",children:(0,e.jsx)(I.default,{data:i,className:"w-full",style:i?.style})})});case"ipc-spacer":return(0,e.jsx)(j.default,{data:i,style:i?.style,className:"!bg-transparent"});default:return null}})})]})}),ue=(0,a.forwardRef)(({className:r="",wrapperClassName:s="",id:t,data:{title:o,videoTitle:n,mobVideo:i,mobImg:f,img:y,isYouTube:Q,youtubePcId:M,youtubeMobileId:O,video:b,theme:R,shape:W,components:_}},ve)=>{const H=(0,a.useRef)(null),w=(0,a.useRef)(null),{ref:A,inView:p}=(0,P.useInView)(),[be,J]=(0,a.useState)(0),[z,K]=(0,a.useState)(!1),[U,X]=(0,a.useState)(!1),Z=(0,a.useRef)(null),D=typeof o=="string"?o:o&&(0,N.convertLexicalToHTML)({data:o,converters:T});typeof n=="string"||n&&(0,N.convertLexicalToHTML)({data:n,converters:T});const[ee,te]=(0,a.useState)(0),[c,re]=(0,a.useState)(!1),C=(0,k.useMediaQuery)({query:"(max-width: 768px)"});(0,a.useEffect)(()=>{re(C)},[C]);const g=(0,L.debounce)(()=>{if(w.current){const h=w.current.getBoundingClientRect(),m=c?window.screen.height:window.innerHeight,ae=window.scrollY||window.pageYOffset,se=h.bottom+ae,E=document.documentElement.scrollHeight-se;te(E>m?m:E),J(m)}},2e3);return(0,a.useEffect)(()=>{p&&!z&&(H.current?.play(),K(!0))},[p,z]),(0,a.useEffect)(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]),(0,a.useEffect)(()=>{function h(){const m=c?window.screen.height:window.innerHeight;G.default.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${m*1.8}px bottom`,scrub:.5}}).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},"<")}p&&h()},[p]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,className:(0,u.cn)("relative z-20 h-screen w-full",r,{"aiui-dark":R==="dark","rounded-box":W==="rounded"}),ref:Z,children:(0,e.jsx)("div",{ref:A,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 antialiased",style:{willChange:"transform",contain:"paint"},children:(0,e.jsx)(x,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(B.default,{className:"sticky-title antialiased",data:{title:D||"",theme:R}})})})}),(0,e.jsxs)("div",{ref:w,style:{marginBottom:`-${ee}px`,zIndex:p?2:1},className:(0,u.cn)(t,"relative mt-[-200vh]",s),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,u.cn)("media-cover","relative h-screen w-full"),children:[Q?(0,e.jsx)(Y.YouTubePlayer,{youTubeId:c&&O||M}):b?.url&&(0,e.jsx)(V.default,{videoRef:H,poster:c&&f?.url?f?.url:y?.url,src:c&&i?.url?i?.url:b?.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:()=>{X(!0)}}),y?.url&&(!b?.url||U)&&(0,e.jsx)("img",{src:c&&f?.url?f?.url:y?.url,alt:y?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]",loading:"lazy"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(me,{components:_}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});var fe=(0,$.withLayout)(ue);
|
|
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, useCallback } 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 | null\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }, ref) => {\n return (\n <div 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 {\n className = '',\n wrapperClassName = '',\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 ref\n ) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const inViewElementRef = useRef<HTMLDivElement | null>(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 combinedInViewRef = useCallback(\n (node: HTMLDivElement | null) => {\n inViewRef(node)\n if (node) {\n inViewElementRef.current = node\n }\n },\n [inViewRef]\n )\n\n const debouncedHandleResize = debounce(() => {\n if (inViewElementRef.current && boxRef.current) {\n const inViewRect = inViewElementRef.current.getBoundingClientRect()\n const boxRect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const pageHeight = document.documentElement.scrollHeight\n\n // \u8BA1\u7B97 inViewRef \u5230\u5E95\u90E8\u7684\u8DDD\u79BB\n const inViewBottomToPageTop = inViewRect.bottom + scrollTop\n const distanceToPageBottom = pageHeight - inViewBottomToPageTop\n\n // \u51CF\u53BB\u7236\u76D2\u5B50 boxRef \u4E00\u534A\u7684\u9AD8\u5EA6\n const parentHalfHeight = boxRect.height / 2\n const calculatedBtb = distanceToPageBottom - parentHalfHeight\n console.log('distanceToPageBottom', calculatedBtb, distanceToPageBottom)\n setbtb(distanceToPageBottom > calculatedBtb ? calculatedBtb : 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.5,\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={combinedInViewRef}\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 antialiased\"\n style={{ willChange: 'transform', contain: 'paint' }}\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n >\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 loading=\"lazy\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{\n backdropFilter: 'blur(0px)',\n WebkitBackdropFilter: 'blur(0px)',\n willChange: 'backdrop-filter',\n }}\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": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IA+CM,IAAAI,EAAA,6BA9CNC,
|
|
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", "ref", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "
|
|
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 }, ref) => {\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 {\n className = '',\n wrapperClassName = '',\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 ref\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.5,\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 antialiased\"\n style={{ willChange: 'transform', contain: 'paint' }}\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n >\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 loading=\"lazy\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{\n backdropFilter: 'blur(0px)',\n WebkitBackdropFilter: 'blur(0px)',\n willChange: 'backdrop-filter',\n }}\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
|
+
"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", "ref", "mediaPlayerStickyRef", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "wrapperClassName", "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
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as de,jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as h,useRef as i,useMemo as xe,useEffect as V,forwardRef as be,useImperativeHandle as ye,useCallback as Ee}from"react";import{cn as g}from"../../helpers/utils.js";import{withLayout as he}from"../../shared/Styles.js";import le from"../../components/button.js";import{VideoModal as ne}from"../VideoModal/index.js";import{convertLexicalToHTML as se}from"@payloadcms/richtext-lexical/html";import{useInView as He}from"react-intersection-observer";import{useExposure as _e}from"../../hooks/useExposure.js";import z from"../../helpers/ScrollLoadVideo.js";import{gsap as J}from"gsap";import{SplitText as we}from"gsap/dist/SplitText";import{ScrollTrigger as ae}from"gsap/dist/ScrollTrigger";const Ie="media_player_base",Ne="video",o={TEXT_START_OFFSET:"10%",TEXT_ANIMATION_MULTIPLIER:1.5,TEXT_ANIMATION_OFFSET:80,VIDEO_HEIGHT_BASE:102,OVERLAP_FACTOR:.5,VIDEO_PROGRESS_THRESHOLD:.9,HEIGHT_CHANGE_THRESHOLD:5},ie=({defaultConverters:H})=>({...H,text:_=>{const{node:n}=_;return n.$&&n.$.color?`<span class="lexical-${n.$.color}">${n.text}</span>`:n.text}}),ce=be(({className:H="",id:_,onBtnClick:n,data:{title:w,videoTitle:I,btnText:N,youtubeId:R,video:S,mobileVideo:K,theme:B,img:k,shape:D,titleAnimation:c,...ue}},pe)=>{const{sticky:$}=ue,[M,Q]=h(!1),[W,me]=h(0),[fe,Te]=h(0),[L,ge]=h(0),[O,G]=h(!1),d=i(null),X=i(null),t=i(null),j=i(null),q=i(null),U=i(null),Z=i(null),ee=i(null),{ref:te,inView:r}=He();ye(pe,()=>t.current);const u=typeof w=="string"?w:w&&se({data:w,converters:ie}),v=typeof I=="string"?I:I&&se({data:I,converters:ie});V(()=>{r?(d.current?.play(),Q(!0)):(d.current?.pause(),Q(!1))},[r]),V(()=>{if(!t.current||!$)return;const s=()=>{if(!t.current)return;const F=t.current.getBoundingClientRect(),m=window.innerHeight,f=window.scrollY||window.pageYOffset,x=F.bottom+f,b=document.documentElement.scrollHeight-x,y=m-F.bottom;console.log("inViewRefToBottom",y,"123",m,"22",b);const T=b>y?y:b,re=t.current.clientHeight+m;me(E=>Math.abs(T-E)>o.HEIGHT_CHANGE_THRESHOLD?T:E),Te(E=>Math.abs(re-E)>o.HEIGHT_CHANGE_THRESHOLD?re:E)};s();const A=new ResizeObserver(()=>{requestAnimationFrame(()=>{s()})});A.observe(t.current);const p=()=>{requestAnimationFrame(()=>{s()})};let a;const C=()=>{a||(a=setTimeout(()=>{p(),a=null},100))};return window.addEventListener("scroll",C,{passive:!0}),()=>{A.disconnect(),window.removeEventListener("scroll",C),a&&clearTimeout(a)}},[$]),V(()=>{if(!r||!c||c!=="fade-in"||!j.current)return;const s=j.current,A=s.clientHeight||80;U.current=new we(s,{type:"words",wordsClass:"word"});const p=U.current.words,a=p.length,C=1/a,F=p.map((m,f)=>{const x=f/a*(1-o.OVERLAP_FACTOR),P=C*(1+o.OVERLAP_FACTOR);return{start:x,width:P}});return J.set(p,{opacity:0}),Z.current=ae.create({trigger:t.current,start:`top center-=${o.TEXT_START_OFFSET}`,end:`top+=${A*o.TEXT_ANIMATION_MULTIPLIER+o.TEXT_ANIMATION_OFFSET}px center-=${o.TEXT_START_OFFSET}`,scrub:!0,onUpdate:m=>{const f=m.progress;p.forEach((x,P)=>{const{start:b,width:y}=F[P];let T=(f-b)/y;T=Math.max(0,Math.min(T,1)),J.set(x,{opacity:T})}),X.current&&J.set(X.current,{opacity:f})}}),()=>{U.current?.revert(),Z.current?.kill()}},[c,r]),V(()=>{if(!(!r||!t.current))return ee.current=ae.create({trigger:t.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:s=>{ge(s.progress)}}),()=>{ee.current?.kill()}},[r]),_e(q,{componentType:Ne,componentName:Ie,componentTitle:v});const ve=xe(()=>r&&L>0&&L<o.VIDEO_PROGRESS_THRESHOLD?3:r?2:1,[L,r]),oe=Ee(()=>{G(!0),n?.()},[n]),Y="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 $?l(de,{children:[e("div",{ref:t,className:g("relative z-10",Y,{"aiui-dark":B==="dark","rounded-box":D==="rounded"},H),children:e("div",{ref:te,children:!c&&l("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[u&&!M&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:u}}),v&&M&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),N&&e(le,{variant:"link",className:g("member-equity-button-secondary "),onClick:oe,children:N})]})})}),l("div",{style:{marginBottom:`-${W}px`,marginTop:`-${fe}px`,zIndex:ve},className:"relative",children:[e("div",{className:"sticky top-0",children:l("div",{id:_,className:g("relative h-screen w-full overflow-hidden",{"aiui-dark":B==="dark","rounded-box":D==="rounded"}),children:[c==="fade-in"&&u&&e("div",{ref:j,className:"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:u}}),l("div",{className:"media-cover absolute left-0 top-0 size-full",style:{height:`${o.VIDEO_HEIGHT_BASE-L*100}vh`},children:[e(z,{videoRef:d,poster:k?.url||"",src:S?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(z,{videoRef:d,poster:k?.url||"",src:K?.url||S?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:X,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:g("relative box-content block",Y),style:{height:`${W}px`},ref:q})]}),O&&R&&e(ne,{visible:O,youTubeId:R,onCloseModal:()=>G(!1)})]}):l(de,{children:[l("div",{id:_,className:g("relative overflow-hidden",Y,{"aiui-dark":B==="dark","rounded-box":D==="rounded"},H),children:[l("div",{ref:te,children:[!c&&l("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[u&&!M&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:u}}),v&&M&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),N&&e(le,{variant:"link",className:g("member-equity-button-secondary"),onClick:oe,children:N})]}),e(z,{videoRef:d,poster:k?.url||"",src:S?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(z,{videoRef:d,poster:k?.url||"",src:K?.url||S?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0})]}),e("div",{ref:q,className:"absolute bottom-0 left-0 h-px w-full"})]}),O&&R&&e(ne,{visible:O,youTubeId:R,onCloseModal:()=>G(!1)})]})});ce.displayName="MediaPlayerBase";var Be=he(ce);export{Be as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\ninterface ScrollTriggerInstance {\n progress: number\n kill: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n // \u89C6\u9891\u64AD\u653E\u63A7\u5236\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n useEffect(() => {\n if (!titleRef.current || !sticky) return\n\n // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n const calculateLayout = () => {\n if (!titleRef.current) return\n\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n\n const newBtb = distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom\n const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n // \u4F7F\u7528\u9608\u503C\u68C0\u6D4B,\u907F\u514D\u9891\u7E41\u66F4\u65B0\n setbtb(prevBtb => {\n return Math.abs(newBtb - prevBtb) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD ? newBtb : prevBtb\n })\n\n setTitleHeight(prevHeight => {\n return Math.abs(newTitleHeight - prevHeight) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD\n ? newTitleHeight\n : prevHeight\n })\n }\n\n // \u521D\u59CB\u8BA1\u7B97\n calculateLayout()\n\n // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n const resizeObserver = new ResizeObserver(() => {\n // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n requestAnimationFrame(() => {\n calculateLayout()\n })\n })\n\n resizeObserver.observe(titleRef.current)\n\n // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n const handleScroll = () => {\n requestAnimationFrame(() => {\n calculateLayout()\n })\n }\n\n // \u4F7F\u7528\u8282\u6D41\u7684\u6EDA\u52A8\u76D1\u542C\n let scrollTimeout: NodeJS.Timeout\n const throttledScroll = () => {\n if (!scrollTimeout) {\n scrollTimeout = setTimeout(() => {\n handleScroll()\n scrollTimeout = null as any\n }, 100)\n }\n }\n\n window.addEventListener('scroll', throttledScroll, { passive: true })\n\n return () => {\n resizeObserver.disconnect()\n window.removeEventListener('scroll', throttledScroll)\n if (scrollTimeout) clearTimeout(scrollTimeout)\n }\n }, [sticky])\n\n // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n useEffect(() => {\n if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n const titleElement = titleFadeInRef.current\n const height = titleElement.clientHeight || 80\n\n // \u5206\u8BCD\n splitTextInstance.current = new SplitText(titleElement, {\n type: 'words',\n wordsClass: 'word',\n })\n\n const words = splitTextInstance.current.words\n const total = words.length\n const interval = 1 / total\n\n // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n const wordAnimations = words.map((_, i) => {\n const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n return { start, width }\n })\n\n // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n gsap.set(words, { opacity: 0 })\n\n // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n words.forEach((word, i) => {\n const { start, width } = wordAnimations[i]\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n\n // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n if (bgRef.current) {\n gsap.set(bgRef.current, { opacity: progress })\n }\n },\n }) as ScrollTriggerInstance\n\n return () => {\n splitTextInstance.current?.revert()\n scrollTriggerRef.current?.kill()\n }\n }, [titleAnimation, inView])\n\n // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n useEffect(() => {\n if (!inView || !titleRef.current) return\n\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: self => {\n setVideoHeightProgress(self.progress)\n },\n }) as ScrollTriggerInstance\n\n return () => {\n heightTriggerRef.current?.kill()\n }\n }, [inView])\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n </div>\n\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\">\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div\n className=\"media-cover absolute left-0 top-0 size-full\"\n style={{\n height: `${ANIMATION_CONFIG.VIDEO_HEIGHT_BASE - videoHeightProgress * 100}vh`,\n }}\n >\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "useCallback", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "calculateLayout", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "newBtb", "newTitleHeight", "prevBtb", "prevHeight", "resizeObserver", "handleScroll", "scrollTimeout", "throttledScroll", "titleElement", "height", "words", "total", "interval", "wordAnimations", "_", "i", "start", "width", "self", "progress", "word", "opacity", "zIndexVideo", "handleBtnClick", "aspect", "MediaPlayerBase_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\ninterface ScrollTriggerInstance {\n progress: number\n kill: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n // \u89C6\u9891\u64AD\u653E\u63A7\u5236\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n useEffect(() => {\n if (!titleRef.current || !sticky) return\n\n // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n const calculateLayout = () => {\n if (!titleRef.current) return\n\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n\n const inViewRefToBottom = screenHeight - rect.bottom\n console.log('inViewRefToBottom', inViewRefToBottom, '123', screenHeight, '22', distanceToPageBottom)\n const newBtb = distanceToPageBottom > inViewRefToBottom ? inViewRefToBottom : distanceToPageBottom\n const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n // \u4F7F\u7528\u9608\u503C\u68C0\u6D4B,\u907F\u514D\u9891\u7E41\u66F4\u65B0\n setbtb(prevBtb => {\n return Math.abs(newBtb - prevBtb) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD ? newBtb : prevBtb\n })\n\n setTitleHeight(prevHeight => {\n return Math.abs(newTitleHeight - prevHeight) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD\n ? newTitleHeight\n : prevHeight\n })\n }\n\n // \u521D\u59CB\u8BA1\u7B97\n calculateLayout()\n\n // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n const resizeObserver = new ResizeObserver(() => {\n // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n requestAnimationFrame(() => {\n calculateLayout()\n })\n })\n\n resizeObserver.observe(titleRef.current)\n\n // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n const handleScroll = () => {\n requestAnimationFrame(() => {\n calculateLayout()\n })\n }\n\n // \u4F7F\u7528\u8282\u6D41\u7684\u6EDA\u52A8\u76D1\u542C\n let scrollTimeout: NodeJS.Timeout\n const throttledScroll = () => {\n if (!scrollTimeout) {\n scrollTimeout = setTimeout(() => {\n handleScroll()\n scrollTimeout = null as any\n }, 100)\n }\n }\n\n window.addEventListener('scroll', throttledScroll, { passive: true })\n\n return () => {\n resizeObserver.disconnect()\n window.removeEventListener('scroll', throttledScroll)\n if (scrollTimeout) clearTimeout(scrollTimeout)\n }\n }, [sticky])\n\n // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n useEffect(() => {\n if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n const titleElement = titleFadeInRef.current\n const height = titleElement.clientHeight || 80\n\n // \u5206\u8BCD\n splitTextInstance.current = new SplitText(titleElement, {\n type: 'words',\n wordsClass: 'word',\n })\n\n const words = splitTextInstance.current.words\n const total = words.length\n const interval = 1 / total\n\n // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n const wordAnimations = words.map((_, i) => {\n const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n return { start, width }\n })\n\n // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n gsap.set(words, { opacity: 0 })\n\n // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n words.forEach((word, i) => {\n const { start, width } = wordAnimations[i]\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n\n // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n if (bgRef.current) {\n gsap.set(bgRef.current, { opacity: progress })\n }\n },\n }) as ScrollTriggerInstance\n\n return () => {\n splitTextInstance.current?.revert()\n scrollTriggerRef.current?.kill()\n }\n }, [titleAnimation, inView])\n\n // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n useEffect(() => {\n if (!inView || !titleRef.current) return\n\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: self => {\n setVideoHeightProgress(self.progress)\n },\n }) as ScrollTriggerInstance\n\n return () => {\n heightTriggerRef.current?.kill()\n }\n }, [inView])\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n </div>\n\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\">\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div\n className=\"media-cover absolute left-0 top-0 size-full\"\n style={{\n height: `${ANIMATION_CONFIG.VIDEO_HEIGHT_BASE - videoHeightProgress * 100}vh`,\n }}\n >\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "useCallback", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "calculateLayout", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "inViewRefToBottom", "newBtb", "newTitleHeight", "prevBtb", "prevHeight", "resizeObserver", "handleScroll", "scrollTimeout", "throttledScroll", "titleElement", "height", "words", "total", "interval", "wordAnimations", "_", "i", "start", "width", "self", "progress", "word", "opacity", "zIndexVideo", "handleBtnClick", "aspect", "MediaPlayerBase_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as k,jsx as e,jsxs as p}from"react/jsx-runtime";import K,{useState as d,useRef as f,useEffect as y,forwardRef as U}from"react";import{debounce as X}from"es-toolkit";import{useInView as Z}from"react-intersection-observer";import{cn as v}from"../../helpers/utils.js";import{withLayout as D}from"../../shared/Styles.js";import ee from"../Slogan/index.js";import{YouTubePlayer as te}from"../VideoModal/YouTubePlayer.js";import{Grid as re,GridItem as x}from"../../components/gird.js";import{Container as ae}from"../../components/container.js";import se from"../BrandEquity/index.js";import oe from"../MemberEquity/index.js";import ne from"../Spacer/index.js";import ie from"gsap";import{convertLexicalToHTML as S}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as T}from"react-responsive";import le from"../../helpers/ScrollLoadVideo.js";const L=({defaultConverters:s})=>({...s,text:o=>{const{node:t}=o;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),N=({children:s,spaceY:o,className:t})=>{const a=T({query:"(max-width: 768px)"});return e(ae,{spaceY:o,className:v("!bg-transparent",t),children:p(re,{children:[!a&&e(x,{span:1}),e(x,{span:a?12:10,children:s}),!a&&e(x,{span:1})]})})},ce=K.forwardRef(({children:s,id:o,components:t},a)=>{const n=f(null);return p("div",{ref:n,className:"relative z-10",children:[e(k,{children:s}),e(k,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(N,{spaceY:"none",children:e(se,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(N,{spaceY:"none",children:e(oe,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(ne,{data:r,style:r?.style,className:"!bg-transparent"});default:return null}})})]})}),de=U(({className:s="",wrapperClassName:o="",id:t,data:{title:a,videoTitle:n,mobVideo:r,mobImg:m,img:u,isYouTube:P,youtubePcId:M,youtubeMobileId:$,video:b,theme:R,shape:B,components:Y}},pe)=>{const H=f(null),w=f(null),{ref:q,inView:l}=Z(),[me,F]=d(0),[z,I]=d(!1),[j,G]=d(!1),V=f(null),Q=typeof a=="string"?a:a&&S({data:a,converters:L});typeof n=="string"||n&&S({data:n,converters:L});const[O,W]=d(0),[i,_]=d(!1),C=T({query:"(max-width: 768px)"});y(()=>{_(C)},[C]);const g=X(()=>{if(w.current){const h=w.current.getBoundingClientRect(),c=i?window.screen.height:window.innerHeight,A=window.scrollY||window.pageYOffset,J=h.bottom+A,E=document.documentElement.scrollHeight-J;W(E>c?c:E),F(c)}},2e3);return y(()=>{l&&!z&&(H.current?.play(),I(!0))},[l,z]),y(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]),y(()=>{function h(){const c=i?window.screen.height:window.innerHeight;ie.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${c*1.8}px bottom`,scrub:.5}}).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},"<")}l&&h()},[l]),p(k,{children:[e("div",{id:t,className:v("relative z-20 h-screen w-full",s,{"aiui-dark":R==="dark","rounded-box":B==="rounded"}),ref:V,children:e("div",{ref:q,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 antialiased",style:{willChange:"transform",contain:"paint"},children:e(N,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(ee,{className:"sticky-title antialiased",data:{title:Q||"",theme:R}})})})}),p("div",{ref:w,style:{marginBottom:`-${O}px`,zIndex:l?2:1},className:v(t,"relative mt-[-200vh]",o),children:[e("div",{className:"sticky top-0 ",children:p("div",{className:v("media-cover","relative h-screen w-full"),children:[P?e(te,{youTubeId:i&&$||M}):b?.url&&e(le,{videoRef:H,poster:i&&m?.url?m?.url:u?.url,src:i&&r?.url?r?.url:b?.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:()=>{G(!0)}}),u?.url&&(!b?.url||j)&&e("img",{src:i&&m?.url?m?.url:u?.url,alt:u?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]",loading:"lazy"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(ce,{components:Y}),e("div",{className:"relative h-screen w-full"})]})]})});var Se=D(de);export{Se as default};
|
|
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, useCallback } 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 | null\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }, ref) => {\n return (\n <div 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 {\n className = '',\n wrapperClassName = '',\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 ref\n ) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const inViewElementRef = useRef<HTMLDivElement | null>(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 combinedInViewRef = useCallback(\n (node: HTMLDivElement | null) => {\n inViewRef(node)\n if (node) {\n inViewElementRef.current = node\n }\n },\n [inViewRef]\n )\n\n const debouncedHandleResize = debounce(() => {\n if (inViewElementRef.current && boxRef.current) {\n const inViewRect = inViewElementRef.current.getBoundingClientRect()\n const boxRect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const pageHeight = document.documentElement.scrollHeight\n\n // \u8BA1\u7B97 inViewRef \u5230\u5E95\u90E8\u7684\u8DDD\u79BB\n const inViewBottomToPageTop = inViewRect.bottom + scrollTop\n const distanceToPageBottom = pageHeight - inViewBottomToPageTop\n\n // \u51CF\u53BB\u7236\u76D2\u5B50 boxRef \u4E00\u534A\u7684\u9AD8\u5EA6\n const parentHalfHeight = boxRect.height / 2\n const calculatedBtb = distanceToPageBottom - parentHalfHeight\n console.log('distanceToPageBottom', calculatedBtb, distanceToPageBottom)\n setbtb(distanceToPageBottom > calculatedBtb ? calculatedBtb : 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.5,\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={combinedInViewRef}\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 antialiased\"\n style={{ willChange: 'transform', contain: 'paint' }}\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n >\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 loading=\"lazy\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{\n backdropFilter: 'blur(0px)',\n WebkitBackdropFilter: 'blur(0px)',\n willChange: 'backdrop-filter',\n }}\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": "aA+CM,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "
|
|
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 }, ref) => {\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 {\n className = '',\n wrapperClassName = '',\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 ref\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.5,\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 antialiased\"\n style={{ willChange: 'transform', contain: 'paint' }}\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n >\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 loading=\"lazy\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{\n backdropFilter: 'blur(0px)',\n WebkitBackdropFilter: 'blur(0px)',\n willChange: 'backdrop-filter',\n }}\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
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "wrapperClassName", "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", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|