@anker-in/headless-ui 1.1.17-alpha.1766373865742 → 1.1.17-alpha.1766375059301
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var me=Object.create;var w=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var ve=(r,
|
|
1
|
+
"use strict";"use client";var me=Object.create;var w=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var ve=(r,s)=>{for(var t in s)w(r,t,{get:s[t],enumerable:!0})},V=(r,s,t,o)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of ye(s))!ge.call(r,a)&&a!==t&&w(r,a,{get:()=>s[a],enumerable:!(o=fe(s,a))||o.enumerable});return r};var d=(r,s,t)=>(t=r!=null?me(be(r)):{},V(s||!r||!r.__esModule?w(t,"default",{value:r,enumerable:!0}):t,r)),we=r=>V(w({},"__esModule",{value:!0}),r);var ke={};ve(ke,{default:()=>he});module.exports=we(ke);var e=require("react/jsx-runtime"),l=d(require("react")),O=require("es-toolkit"),Q=require("react-intersection-observer"),b=require("../../helpers/utils.js"),W=require("../../shared/Styles.js"),A=d(require("../Slogan/index.js")),U=require("../VideoModal/YouTubePlayer.js"),k=require("../../components/grid.js"),_=require("../../components/container.js"),J=d(require("../BrandEquity/index.js")),K=d(require("../MemberEquity/index.js")),X=d(require("../Spacer/index.js")),h=d(require("gsap")),C=require("gsap/dist/ScrollTrigger"),E=require("@payloadcms/richtext-lexical/html"),Z=require("react-responsive"),D=d(require("../../helpers/ScrollLoadVideo.js"));typeof window<"u"&&h.default.registerPlugin(C.ScrollTrigger);const I=({defaultConverters:r})=>({...r,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),P=({children:r,spaceY:s,className:t})=>(0,e.jsx)(_.Container,{spaceY:s,className:(0,b.cn)("!bg-transparent",t),children:(0,e.jsx)(k.Grid,{children:(0,e.jsx)(k.GridItem,{span:12,children:r})})}),j=l.default.forwardRef(({children:r,id:s,components:t},o)=>{const a=(0,l.useRef)(null);return(0,e.jsxs)("div",{ref:a,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:r}),(0,e.jsx)(e.Fragment,{children:t?.map((n,i)=>{switch(n.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(P,{spaceY:"none",children:(0,e.jsx)(J.default,{data:n,style:n?.style})})},`${n.blockType}-${i}`);case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(P,{spaceY:"none",children:(0,e.jsx)(K.default,{data:n,className:"w-full",style:n?.style})})},`${n.blockType}-${i}`);case"ipc-spacer":return(0,e.jsx)(X.default,{data:n,style:n?.style,className:"!bg-transparent"},`${n.blockType}-${i}`);default:return null}})})]})});j.displayName="SubBox";const G=(0,l.forwardRef)(({className:r="",wrapperClassName:s="",id:t,data:{title:o,videoTitle:a,mobVideo:n,mobImg:i,img:g,isYouTube:ee,youtubePcId:H,youtubeMobileId:te,video:x,theme:z,shape:re,components:le}},xe)=>{const L=(0,l.useRef)(null),M=(0,l.useRef)(null),{ref:se,inView:f}=(0,Q.useInView)(),[B,ne]=(0,l.useState)(!1),[ae,oe]=(0,l.useState)(!1),ie=(0,l.useRef)(null),p=(0,l.useRef)(null),c=(0,l.useRef)(null),ce=typeof o=="string"?o:o&&(0,E.convertLexicalToHTML)({data:o,converters:I});typeof a=="string"||a&&(0,E.convertLexicalToHTML)({data:a,converters:I});const[ue,de]=(0,l.useState)(0),[u,pe]=(0,l.useState)(!1),N=(0,Z.useMediaQuery)({query:"(max-width: 768px)"}),q=(0,l.useRef)(u);return(0,l.useEffect)(()=>{pe(N),q.current=N},[N]),(0,l.useEffect)(()=>{const m=(0,O.debounce)(()=>{if(M.current){const R=M.current.getBoundingClientRect(),y=q.current?window.screen.height:window.innerHeight,v=window.scrollY||window.pageYOffset,S=R.bottom+v,$=document.documentElement.scrollHeight-S;de($>y?y:$)}},2e3);return m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m),m.cancel?.()}},[]),(0,l.useEffect)(()=>{f&&!B&&(L.current?.play(),ne(!0))},[f,B]),(0,l.useEffect)(()=>{if(p.current&&(p.current.kill(),p.current=null),c.current&&(c.current.kill(),c.current=null),!f||!t)return;const m=u?window.screen.height:window.innerHeight,R=document.querySelector(`#${t}`),y=document.querySelector(`#${t} .media-content`),v=document.querySelector(`.${t} .sticky-cover`);if(!(!R||!y||!v))return c.current=C.ScrollTrigger.create({trigger:`#${t}`,start:"top top",end:`top+=${m*1.8}px bottom`,scrub:.3,invalidateOnRefresh:!0,onUpdate:S=>{const T=S.progress;requestAnimationFrame(()=>{const Y=50+Math.min(1,T*2)*50;h.default.set(y,{top:`${Y}%`,transform:`translate(-50%, -${Y}%)`,force3D:!0});const F=Math.max(0,Math.min(1,(T-.5)*2))*8;h.default.set(v,{backdropFilter:`blur(${F}px)`,WebkitBackdropFilter:`blur(${F}px)`,force3D:!0})})}}),()=>{p.current&&(p.current.kill(),p.current=null),c.current&&(c.current.kill(),c.current=null)}},[f,t,u]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,className:(0,b.cn)("relative z-20 h-screen w-full overflow-hidden",r,{"aiui-dark":z==="dark","rounded-box":re==="rounded"}),ref:ie,children:(0,e.jsx)("div",{ref:se,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)(P,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(A.default,{className:"sticky-title antialiased",data:{title:ce||"",theme:z}})})})}),(0,e.jsxs)("div",{ref:M,style:{marginBottom:`-${ue}px`,zIndex:f?2:1},className:(0,b.cn)(t,"relative mt-[-200vh]",s),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,b.cn)("media-cover","relative h-screen w-full"),children:[ee?(0,e.jsx)(U.YouTubePlayer,{youTubeId:u&&te||H}):x?.url&&(0,e.jsx)(D.default,{videoRef:L,poster:u&&i?.url?i?.url:g?.url,src:u&&n?.url?n?.url:x?.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,autoplay:!1,onEnded:()=>{oe(!0)}}),g?.url&&(!x?.url||ae)&&(0,e.jsx)("img",{src:u&&i?.url?i?.url:g?.url,alt:g?.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)(j,{components:le}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});G.displayName="MediaPlayerSticky";var he=(0,W.withLayout)(G);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.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 { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nif (typeof window !== 'undefined') {\n gsap.registerPlugin(ScrollTrigger)\n}\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={12}>{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, index: number) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div key={`${componentData.blockType}-${index}`} 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\n key={`${componentData.blockType}-${index}`}\n className=\"tablet:min-h-0 relative z-20 min-h-[480px] w-full bg-transparent\"\n >\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 (\n <Spacer\n key={`${componentData.blockType}-${index}`}\n data={componentData}\n style={componentData?.style}\n className=\"!bg-transparent\"\n />\n )\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nSubBox.displayName = 'SubBox'\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 [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n const timelineRef = useRef<gsap.core.Timeline | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(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 const isMobileRef = useRef(isMobile)\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n isMobileRef.current = mediaQuery\n }, [mediaQuery])\n\n useEffect(() => {\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobileRef.current ? 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 }\n }, 2000)\n\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n debouncedHandleResize.cancel?.()\n }\n }, [])\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n // \u6E05\u7406\u4E4B\u524D\u7684\u5B9E\u4F8B\n if (timelineRef.current) {\n timelineRef.current.kill()\n timelineRef.current = null\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n scrollTriggerRef.current = null\n }\n\n if (!inView || !id) return\n\n const height = isMobile ? window.screen.height : window.innerHeight\n const triggerElement = document.querySelector(`#${id}`)\n const mediaContent = document.querySelector(`#${id} .media-content`)\n const stickyCover = document.querySelector(`.${id} .sticky-cover`)\n\n if (!triggerElement || !mediaContent || !stickyCover) return\n\n // \u521B\u5EFA ScrollTrigger \u5B9E\u4F8B\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.3, // \u964D\u4F4E scrub \u503C\u4EE5\u83B7\u5F97\u66F4\u6D41\u7545\u7684\u6EDA\u52A8\n invalidateOnRefresh: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u4F7F\u7528 requestAnimationFrame \u4F18\u5316\u6027\u80FD\n requestAnimationFrame(() => {\n // \u5A92\u4F53\u5185\u5BB9\u4F4D\u7F6E\u52A8\u753B\n const contentProgress = Math.min(1, progress * 2) // \u524D50%\u5B8C\u6210\u5185\u5BB9\u79FB\u52A8\n const topValue = 50 + contentProgress * 50 // \u4ECE 50% \u5230 100%\n gsap.set(mediaContent, {\n top: `${topValue}%`,\n transform: `translate(-50%, -${topValue}%)`,\n force3D: true, // \u542F\u7528\u786C\u4EF6\u52A0\u901F\n })\n\n // backdrop-filter \u52A8\u753B\uFF08\u4EC5\u5728\u9700\u8981\u65F6\u66F4\u65B0\uFF09\n const blurProgress = Math.max(0, Math.min(1, (progress - 0.5) * 2)) // \u540E50%\u5B8C\u6210\u6A21\u7CCA\n const blurValue = blurProgress * 8\n gsap.set(stickyCover, {\n backdropFilter: `blur(${blurValue}px)`,\n WebkitBackdropFilter: `blur(${blurValue}px)`,\n force3D: true,\n })\n })\n },\n })\n\n return () => {\n if (timelineRef.current) {\n timelineRef.current.kill()\n timelineRef.current = null\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n scrollTriggerRef.current = null\n }\n }\n }, [inView, id, isMobile])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full overflow-hidden', 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 autoplay={false}\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)\nMediaPlayerSticky.displayName = 'MediaPlayerSticky'\n\nexport default withLayout(MediaPlayerSticky)\n"],
|
|
5
|
-
"mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAsDQ,IAAAI,EAAA,6BArDRC,EAA+D,oBAC/DC,EAAyB,sBACzBC,EAA0B,uCAC1BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAmB,iCACnBC,EAA8B,0CAC9BC,EAA+B,oCAC/BC,EAA0B,yCAC1BC,EAAwB,sCACxBC,EAAyB,uCACzBC,EAAmB,iCACnBC,EAAiB,mBACjBC,EAA8B,mCAC9BC,EAAqC,6CAQrCC,EAA8B,4BAE9BC,EAA4B,+CARxB,OAAO,OAAW,KACpB,EAAAC,QAAK,eAAe,eAAa,EASnC,MAAMC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,EAAe,CAAC,CACpB,SAAAC,EACA,OAAAC,EACA,UAAAC,CACF,OAOI,OAAC,aAAU,OAAQD,EAAQ,aAAW,MAAG,kBAAmBC,CAAS,EACnE,mBAAC,QAEC,mBAAC,YAAS,KAAM,GAAK,SAAAF,EAAS,EAEhC,EACF,EAIEG,EAAS,EAAAC,QAAM,WASnB,CAAC,CAAE,SAAAJ,EAAU,GAAAK,EAAI,WAAAC,CAAW,EAAGC,IAAQ,CACvC,MAAMC,KAAuB,UAAuB,IAAI,EAExD,SACE,QAAC,OAAI,IAAKA,EAAsB,UAAU,gBACxC,gCAAG,SAAAR,EAAS,KACZ,mBACG,SAAAM,GAAY,IAAI,CAACG,EAAoBC,IAAkB,CACtD,OAAQD,EAAc,UAAW,CAC/B,IAAK,mBACH,SACE,OAAC,OAAgD,UAAU,+BACzD,mBAACV,EAAA,CAAa,OAAO,OACnB,mBAAC,EAAAY,QAAA,CAAY,KAAMF,EAAe,MAAOA,GAAe,MAAO,EACjE,GAHQ,GAAGA,EAAc,SAAS,IAAIC,CAAK,EAI7C,EAGJ,IAAK,oBACH,SACE,OAAC,
|
|
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/grid.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 { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nif (typeof window !== 'undefined') {\n gsap.registerPlugin(ScrollTrigger)\n}\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={12}>{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, index: number) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div key={`${componentData.blockType}-${index}`} 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 key={`${componentData.blockType}-${index}`} 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 (\n <Spacer\n key={`${componentData.blockType}-${index}`}\n data={componentData}\n style={componentData?.style}\n className=\"!bg-transparent\"\n />\n )\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nSubBox.displayName = 'SubBox'\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 [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n const timelineRef = useRef<gsap.core.Timeline | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(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 const isMobileRef = useRef(isMobile)\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n isMobileRef.current = mediaQuery\n }, [mediaQuery])\n\n useEffect(() => {\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobileRef.current ? 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 }\n }, 2000)\n\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n debouncedHandleResize.cancel?.()\n }\n }, [])\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n // \u6E05\u7406\u4E4B\u524D\u7684\u5B9E\u4F8B\n if (timelineRef.current) {\n timelineRef.current.kill()\n timelineRef.current = null\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n scrollTriggerRef.current = null\n }\n\n if (!inView || !id) return\n\n const height = isMobile ? window.screen.height : window.innerHeight\n const triggerElement = document.querySelector(`#${id}`)\n const mediaContent = document.querySelector(`#${id} .media-content`)\n const stickyCover = document.querySelector(`.${id} .sticky-cover`)\n\n if (!triggerElement || !mediaContent || !stickyCover) return\n\n // \u521B\u5EFA ScrollTrigger \u5B9E\u4F8B\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.3, // \u964D\u4F4E scrub \u503C\u4EE5\u83B7\u5F97\u66F4\u6D41\u7545\u7684\u6EDA\u52A8\n invalidateOnRefresh: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u4F7F\u7528 requestAnimationFrame \u4F18\u5316\u6027\u80FD\n requestAnimationFrame(() => {\n // \u5A92\u4F53\u5185\u5BB9\u4F4D\u7F6E\u52A8\u753B\n const contentProgress = Math.min(1, progress * 2) // \u524D50%\u5B8C\u6210\u5185\u5BB9\u79FB\u52A8\n const topValue = 50 + contentProgress * 50 // \u4ECE 50% \u5230 100%\n gsap.set(mediaContent, {\n top: `${topValue}%`,\n transform: `translate(-50%, -${topValue}%)`,\n force3D: true, // \u542F\u7528\u786C\u4EF6\u52A0\u901F\n })\n\n // backdrop-filter \u52A8\u753B\uFF08\u4EC5\u5728\u9700\u8981\u65F6\u66F4\u65B0\uFF09\n const blurProgress = Math.max(0, Math.min(1, (progress - 0.5) * 2)) // \u540E50%\u5B8C\u6210\u6A21\u7CCA\n const blurValue = blurProgress * 8\n gsap.set(stickyCover, {\n backdropFilter: `blur(${blurValue}px)`,\n WebkitBackdropFilter: `blur(${blurValue}px)`,\n force3D: true,\n })\n })\n },\n })\n\n return () => {\n if (timelineRef.current) {\n timelineRef.current.kill()\n timelineRef.current = null\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n scrollTriggerRef.current = null\n }\n }\n }, [inView, id, isMobile])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full overflow-hidden', 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 autoplay={false}\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)\nMediaPlayerSticky.displayName = 'MediaPlayerSticky'\n\nexport default withLayout(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_react_intersection_observer", "import_utils", "import_Styles", "import_Slogan", "import_YouTubePlayer", "import_grid", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_ScrollTrigger", "import_html", "import_react_responsive", "import_ScrollLoadVideo", "gsap", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "SubBox", "React", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "index", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "timelineRef", "scrollTriggerRef", "title_html", "btb", "setbtb", "isMobile", "setIsMobile", "mediaQuery", "isMobileRef", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "triggerElement", "mediaContent", "stickyCover", "self", "progress", "topValue", "blurValue", "Slogan", "ScrollLoadVideo"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as C,jsx as e,jsxs as h}from"react/jsx-runtime";import re,{useState as g,useRef as o,useEffect as v,forwardRef as le}from"react";import{debounce as
|
|
1
|
+
"use client";import{Fragment as C,jsx as e,jsxs as h}from"react/jsx-runtime";import re,{useState as g,useRef as o,useEffect as v,forwardRef as le}from"react";import{debounce as se}from"es-toolkit";import{useInView as ne}from"react-intersection-observer";import{cn as w}from"../../helpers/utils.js";import{withLayout as ae}from"../../shared/Styles.js";import oe from"../Slogan/index.js";import{YouTubePlayer as ie}from"../VideoModal/YouTubePlayer.js";import{Grid as ce,GridItem as ue}from"../../components/grid.js";import{Container as de}from"../../components/container.js";import pe from"../BrandEquity/index.js";import me from"../MemberEquity/index.js";import fe from"../Spacer/index.js";import $ from"gsap";import{ScrollTrigger as F}from"gsap/dist/ScrollTrigger";import{convertLexicalToHTML as V}from"@payloadcms/richtext-lexical/html";typeof window<"u"&&$.registerPlugin(F);import{useMediaQuery as ye}from"react-responsive";import be from"../../helpers/ScrollLoadVideo.js";const I=({defaultConverters:s})=>({...s,text:i=>{const{node:t}=i;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),P=({children:s,spaceY:i,className:t})=>e(de,{spaceY:i,className:w("!bg-transparent",t),children:e(ce,{children:e(ue,{span:12,children:s})})}),j=re.forwardRef(({children:s,id:i,components:t},p)=>{const c=o(null);return h("div",{ref:c,className:"relative z-10",children:[e(C,{children:s}),e(C,{children:t?.map((r,l)=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(P,{spaceY:"none",children:e(pe,{data:r,style:r?.style})})},`${r.blockType}-${l}`);case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(P,{spaceY:"none",children:e(me,{data:r,className:"w-full",style:r?.style})})},`${r.blockType}-${l}`);case"ipc-spacer":return e(fe,{data:r,style:r?.style,className:"!bg-transparent"},`${r.blockType}-${l}`);default:return null}})})]})});j.displayName="SubBox";const G=le(({className:s="",wrapperClassName:i="",id:t,data:{title:p,videoTitle:c,mobVideo:r,mobImg:l,img:y,isYouTube:O,youtubePcId:E,youtubeMobileId:Q,video:k,theme:H,shape:W,components:A}},ge)=>{const z=o(null),x=o(null),{ref:U,inView:m}=ne(),[L,_]=g(!1),[J,K]=g(!1),X=o(null),u=o(null),n=o(null),Z=typeof p=="string"?p:p&&V({data:p,converters:I});typeof c=="string"||c&&V({data:c,converters:I});const[D,ee]=g(0),[a,te]=g(!1),M=ye({query:"(max-width: 768px)"}),B=o(a);return v(()=>{te(M),B.current=M},[M]),v(()=>{const d=se(()=>{if(x.current){const N=x.current.getBoundingClientRect(),f=B.current?window.screen.height:window.innerHeight,b=window.scrollY||window.pageYOffset,R=N.bottom+b,T=document.documentElement.scrollHeight-R;ee(T>f?f:T)}},2e3);return d(),window.addEventListener("resize",d),()=>{window.removeEventListener("resize",d),d.cancel?.()}},[]),v(()=>{m&&!L&&(z.current?.play(),_(!0))},[m,L]),v(()=>{if(u.current&&(u.current.kill(),u.current=null),n.current&&(n.current.kill(),n.current=null),!m||!t)return;const d=a?window.screen.height:window.innerHeight,N=document.querySelector(`#${t}`),f=document.querySelector(`#${t} .media-content`),b=document.querySelector(`.${t} .sticky-cover`);if(!(!N||!f||!b))return n.current=F.create({trigger:`#${t}`,start:"top top",end:`top+=${d*1.8}px bottom`,scrub:.3,invalidateOnRefresh:!0,onUpdate:R=>{const S=R.progress;requestAnimationFrame(()=>{const q=50+Math.min(1,S*2)*50;$.set(f,{top:`${q}%`,transform:`translate(-50%, -${q}%)`,force3D:!0});const Y=Math.max(0,Math.min(1,(S-.5)*2))*8;$.set(b,{backdropFilter:`blur(${Y}px)`,WebkitBackdropFilter:`blur(${Y}px)`,force3D:!0})})}}),()=>{u.current&&(u.current.kill(),u.current=null),n.current&&(n.current.kill(),n.current=null)}},[m,t,a]),h(C,{children:[e("div",{id:t,className:w("relative z-20 h-screen w-full overflow-hidden",s,{"aiui-dark":H==="dark","rounded-box":W==="rounded"}),ref:X,children:e("div",{ref:U,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(P,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(oe,{className:"sticky-title antialiased",data:{title:Z||"",theme:H}})})})}),h("div",{ref:x,style:{marginBottom:`-${D}px`,zIndex:m?2:1},className:w(t,"relative mt-[-200vh]",i),children:[e("div",{className:"sticky top-0 ",children:h("div",{className:w("media-cover","relative h-screen w-full"),children:[O?e(ie,{youTubeId:a&&Q||E}):k?.url&&e(be,{videoRef:z,poster:a&&l?.url?l?.url:y?.url,src:a&&r?.url?r?.url:k?.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,autoplay:!1,onEnded:()=>{K(!0)}}),y?.url&&(!k?.url||J)&&e("img",{src:a&&l?.url?l?.url:y?.url,alt:y?.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(j,{components:A}),e("div",{className:"relative h-screen w-full"})]})]})});G.displayName="MediaPlayerSticky";var qe=ae(G);export{qe 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 } 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/grid.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 { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nif (typeof window !== 'undefined') {\n gsap.registerPlugin(ScrollTrigger)\n}\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={12}>{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, index: number) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div key={`${componentData.blockType}-${index}`} 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\n key={`${componentData.blockType}-${index}`}\n className=\"tablet:min-h-0 relative z-20 min-h-[480px] w-full bg-transparent\"\n >\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 (\n <Spacer\n key={`${componentData.blockType}-${index}`}\n data={componentData}\n style={componentData?.style}\n className=\"!bg-transparent\"\n />\n )\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nSubBox.displayName = 'SubBox'\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 [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n const timelineRef = useRef<gsap.core.Timeline | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(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 const isMobileRef = useRef(isMobile)\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n isMobileRef.current = mediaQuery\n }, [mediaQuery])\n\n useEffect(() => {\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobileRef.current ? 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 }\n }, 2000)\n\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n debouncedHandleResize.cancel?.()\n }\n }, [])\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n // \u6E05\u7406\u4E4B\u524D\u7684\u5B9E\u4F8B\n if (timelineRef.current) {\n timelineRef.current.kill()\n timelineRef.current = null\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n scrollTriggerRef.current = null\n }\n\n if (!inView || !id) return\n\n const height = isMobile ? window.screen.height : window.innerHeight\n const triggerElement = document.querySelector(`#${id}`)\n const mediaContent = document.querySelector(`#${id} .media-content`)\n const stickyCover = document.querySelector(`.${id} .sticky-cover`)\n\n if (!triggerElement || !mediaContent || !stickyCover) return\n\n // \u521B\u5EFA ScrollTrigger \u5B9E\u4F8B\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.3, // \u964D\u4F4E scrub \u503C\u4EE5\u83B7\u5F97\u66F4\u6D41\u7545\u7684\u6EDA\u52A8\n invalidateOnRefresh: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u4F7F\u7528 requestAnimationFrame \u4F18\u5316\u6027\u80FD\n requestAnimationFrame(() => {\n // \u5A92\u4F53\u5185\u5BB9\u4F4D\u7F6E\u52A8\u753B\n const contentProgress = Math.min(1, progress * 2) // \u524D50%\u5B8C\u6210\u5185\u5BB9\u79FB\u52A8\n const topValue = 50 + contentProgress * 50 // \u4ECE 50% \u5230 100%\n gsap.set(mediaContent, {\n top: `${topValue}%`,\n transform: `translate(-50%, -${topValue}%)`,\n force3D: true, // \u542F\u7528\u786C\u4EF6\u52A0\u901F\n })\n\n // backdrop-filter \u52A8\u753B\uFF08\u4EC5\u5728\u9700\u8981\u65F6\u66F4\u65B0\uFF09\n const blurProgress = Math.max(0, Math.min(1, (progress - 0.5) * 2)) // \u540E50%\u5B8C\u6210\u6A21\u7CCA\n const blurValue = blurProgress * 8\n gsap.set(stickyCover, {\n backdropFilter: `blur(${blurValue}px)`,\n WebkitBackdropFilter: `blur(${blurValue}px)`,\n force3D: true,\n })\n })\n },\n })\n\n return () => {\n if (timelineRef.current) {\n timelineRef.current.kill()\n timelineRef.current = null\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n scrollTriggerRef.current = null\n }\n }\n }, [inView, id, isMobile])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full overflow-hidden', 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 autoplay={false}\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)\nMediaPlayerSticky.displayName = 'MediaPlayerSticky'\n\nexport default withLayout(MediaPlayerSticky)\n"],
|
|
5
|
-
"mappings": "aAsDQ,OAqBF,YAAAA,EArBE,OAAAC,EAoBJ,QAAAC,MApBI,oBArDR,OAAOC,IAAS,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,OAAkB,QAC/D,OAAS,YAAAC,OAAgB,aACzB,OAAS,aAAAC,OAAiB,8BAC1B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAOC,OAAY,qBACnB,OAAS,iBAAAC,OAAqB,iCAC9B,OAAS,QAAAC,GAAM,YAAAC,OAAgB,2BAC/B,OAAS,aAAAC,OAAiB,gCAC1B,OAAOC,OAAiB,0BACxB,OAAOC,OAAkB,2BACzB,OAAOC,OAAY,qBACnB,OAAOC,MAAU,OACjB,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,wBAAAC,MAA4B,oCAEjC,OAAO,OAAW,KACpBF,EAAK,eAAeC,CAAa,EAKnC,OAAS,iBAAAE,OAAqB,mBAE9B,OAAOC,OAAqB,mCAE5B,MAAMC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,EAAe,CAAC,CACpB,SAAAC,EACA,OAAAC,EACA,UAAAC,CACF,IAOI/B,EAACe,GAAA,CAAU,OAAQe,EAAQ,UAAWrB,EAAG,kBAAmBsB,CAAS,EACnE,SAAA/B,EAACa,GAAA,CAEC,SAAAb,EAACc,GAAA,CAAS,KAAM,GAAK,SAAAe,EAAS,EAEhC,EACF,EAIEG,EAAS9B,GAAM,WASnB,CAAC,CAAE,SAAA2B,EAAU,GAAAI,EAAI,WAAAC,CAAW,EAAGC,IAAQ,CACvC,MAAMC,EAAuBhC,EAAuB,IAAI,EAExD,OACEH,EAAC,OAAI,IAAKmC,EAAsB,UAAU,gBACxC,UAAApC,EAAAD,EAAA,CAAG,SAAA8B,EAAS,EACZ7B,EAAAD,EAAA,CACG,SAAAmC,GAAY,IAAI,CAACG,EAAoBC,IAAkB,CACtD,OAAQD,EAAc,UAAW,CAC/B,IAAK,mBACH,OACErC,EAAC,OAAgD,UAAU,+BACzD,SAAAA,EAAC4B,EAAA,CAAa,OAAO,OACnB,SAAA5B,EAACgB,GAAA,CAAY,KAAMqB,EAAe,MAAOA,GAAe,MAAO,EACjE,GAHQ,GAAGA,EAAc,SAAS,IAAIC,CAAK,EAI7C,EAGJ,IAAK,oBACH,OACEtC,EAAC,
|
|
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/grid.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 { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nif (typeof window !== 'undefined') {\n gsap.registerPlugin(ScrollTrigger)\n}\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={12}>{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, index: number) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div key={`${componentData.blockType}-${index}`} 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 key={`${componentData.blockType}-${index}`} 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 (\n <Spacer\n key={`${componentData.blockType}-${index}`}\n data={componentData}\n style={componentData?.style}\n className=\"!bg-transparent\"\n />\n )\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nSubBox.displayName = 'SubBox'\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 [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n const timelineRef = useRef<gsap.core.Timeline | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(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 const isMobileRef = useRef(isMobile)\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n isMobileRef.current = mediaQuery\n }, [mediaQuery])\n\n useEffect(() => {\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobileRef.current ? 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 }\n }, 2000)\n\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n debouncedHandleResize.cancel?.()\n }\n }, [])\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n // \u6E05\u7406\u4E4B\u524D\u7684\u5B9E\u4F8B\n if (timelineRef.current) {\n timelineRef.current.kill()\n timelineRef.current = null\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n scrollTriggerRef.current = null\n }\n\n if (!inView || !id) return\n\n const height = isMobile ? window.screen.height : window.innerHeight\n const triggerElement = document.querySelector(`#${id}`)\n const mediaContent = document.querySelector(`#${id} .media-content`)\n const stickyCover = document.querySelector(`.${id} .sticky-cover`)\n\n if (!triggerElement || !mediaContent || !stickyCover) return\n\n // \u521B\u5EFA ScrollTrigger \u5B9E\u4F8B\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.3, // \u964D\u4F4E scrub \u503C\u4EE5\u83B7\u5F97\u66F4\u6D41\u7545\u7684\u6EDA\u52A8\n invalidateOnRefresh: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u4F7F\u7528 requestAnimationFrame \u4F18\u5316\u6027\u80FD\n requestAnimationFrame(() => {\n // \u5A92\u4F53\u5185\u5BB9\u4F4D\u7F6E\u52A8\u753B\n const contentProgress = Math.min(1, progress * 2) // \u524D50%\u5B8C\u6210\u5185\u5BB9\u79FB\u52A8\n const topValue = 50 + contentProgress * 50 // \u4ECE 50% \u5230 100%\n gsap.set(mediaContent, {\n top: `${topValue}%`,\n transform: `translate(-50%, -${topValue}%)`,\n force3D: true, // \u542F\u7528\u786C\u4EF6\u52A0\u901F\n })\n\n // backdrop-filter \u52A8\u753B\uFF08\u4EC5\u5728\u9700\u8981\u65F6\u66F4\u65B0\uFF09\n const blurProgress = Math.max(0, Math.min(1, (progress - 0.5) * 2)) // \u540E50%\u5B8C\u6210\u6A21\u7CCA\n const blurValue = blurProgress * 8\n gsap.set(stickyCover, {\n backdropFilter: `blur(${blurValue}px)`,\n WebkitBackdropFilter: `blur(${blurValue}px)`,\n force3D: true,\n })\n })\n },\n })\n\n return () => {\n if (timelineRef.current) {\n timelineRef.current.kill()\n timelineRef.current = null\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n scrollTriggerRef.current = null\n }\n }\n }, [inView, id, isMobile])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full overflow-hidden', 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 autoplay={false}\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)\nMediaPlayerSticky.displayName = 'MediaPlayerSticky'\n\nexport default withLayout(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "ScrollTrigger", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "SubBox", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "index", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "timelineRef", "scrollTriggerRef", "title_html", "btb", "setbtb", "isMobile", "setIsMobile", "mediaQuery", "isMobileRef", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "triggerElement", "mediaContent", "stickyCover", "self", "progress", "topValue", "blurValue", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|