@anker-in/headless-ui 1.1.17-alpha.1766384798274 → 1.1.17-alpha.1766385794881

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
  2. package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
  3. package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
  4. package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
  5. package/package.json +1 -1
package/dist/cjs/biz-components/MediaPlayerSticky/index.js CHANGED
@@ -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,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);
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})},F=(r,s,t,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of ye(s))!ge.call(r,o)&&o!==t&&w(r,o,{get:()=>s[o],enumerable:!(a=fe(s,o))||a.enumerable});return r};var d=(r,s,t)=>(t=r!=null?me(be(r)):{},F(s||!r||!r.__esModule?w(t,"default",{value:r,enumerable:!0}):t,r)),we=r=>F(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"),g=require("../../helpers/utils.js"),A=require("../../shared/Styles.js"),U=d(require("../Slogan/index.js")),W=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}}),$=({children:r,spaceY:s,className:t})=>(0,e.jsx)(_.Container,{spaceY:s,className:(0,g.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},a)=>{const o=(0,l.useRef)(null);return(0,e.jsxs)("div",{ref:o,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)($,{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)($,{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:a,videoTitle:o,mobVideo:n,mobImg:i,img:v,isYouTube:ee,youtubePcId:H,youtubeMobileId:te,video:M,theme:z,shape:re,components:le}},Me)=>{const L=(0,l.useRef)(null),N=(0,l.useRef)(null),{ref:se,inView:y}=(0,Q.useInView)(),[B,ne]=(0,l.useState)(!1),[oe,ae]=(0,l.useState)(!1),ie=(0,l.useRef)(null),p=(0,l.useRef)(null),c=(0,l.useRef)(null),ce=typeof a=="string"?a:a&&(0,E.convertLexicalToHTML)({data:a,converters:I});typeof o=="string"||o&&(0,E.convertLexicalToHTML)({data:o,converters:I});const[ue,de]=(0,l.useState)(0),[u,pe]=(0,l.useState)(!1),x=(0,Z.useMediaQuery)({query:"(max-width: 768px)"}),q=(0,l.useRef)(u);return(0,l.useEffect)(()=>{pe(x),q.current=x},[x]),(0,l.useEffect)(()=>{const m=(0,O.debounce)(()=>{if(N.current){const R=N.current.getBoundingClientRect(),b=q.current?window.screen.height:window.innerHeight,f=window.scrollY||window.pageYOffset,S=R.bottom+f,P=document.documentElement.scrollHeight-S;de(P>b?b:P)}},2e3);return m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m),m.cancel?.()}},[]),(0,l.useEffect)(()=>{y&&!B&&(L.current?.play(),ne(!0))},[y,B]),(0,l.useEffect)(()=>{if(p.current&&(p.current.kill(),p.current=null),c.current&&(c.current.kill(),c.current=null),!y||!t)return;const m=u?window.screen.height:window.innerHeight,R=document.querySelector(`#${t}`),b=document.querySelector(`#${t} .media-content`),f=document.querySelector(`.${t} .sticky-cover`);if(!(!R||!b||!f))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(b,{top:`${Y}%`,transform:`translate(-50%, -${Y}%)`,force3D:!0});const V=`blur(${Math.max(0,Math.min(1,(T-.5)*2))*8}px)`;h.default.set(f,{backdropFilter:V,force3D:!0}),f instanceof HTMLElement&&f.style.setProperty("-webkit-backdrop-filter",V)})}}),()=>{p.current&&(p.current.kill(),p.current=null),c.current&&(c.current.kill(),c.current=null)}},[y,t,u]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,className:(0,g.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)($,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(U.default,{className:"sticky-title antialiased",data:{title:ce||"",theme:z}})})})}),(0,e.jsxs)("div",{ref:N,style:{marginBottom:`-${ue}px`,zIndex:y?2:1},className:(0,g.cn)(t,"relative mt-[-200vh]",s),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,g.cn)("media-cover","relative h-screen w-full"),children:[ee?(0,e.jsx)(W.YouTubePlayer,{youTubeId:u&&te||H}):M?.url&&(0,e.jsx)(D.default,{videoRef:L,poster:u&&i?.url?i?.url:v?.url,src:u&&n?.url?n?.url:M?.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:()=>{ae(!0)}}),v?.url&&(!M?.url||oe)&&(0,e.jsx)("img",{src:u&&i?.url?i?.url:v?.url,alt:v?.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,A.withLayout)(G);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map CHANGED
@@ -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 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": "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,OAAgD,UAAU,sCACzD,mBAACX,EAAA,CAAa,OAAO,OACnB,mBAAC,EAAAa,QAAA,CAAa,KAAMH,EAAe,UAAU,SAAS,MAAOA,GAAe,MAAO,EACrF,GAHQ,GAAGA,EAAc,SAAS,IAAIC,CAAK,EAI7C,EAGJ,IAAK,aACH,SACE,OAAC,EAAAG,QAAA,CAEC,KAAMJ,EACN,MAAOA,GAAe,MACtB,UAAU,mBAHL,GAAGA,EAAc,SAAS,IAAIC,CAAK,EAI1C,EAGJ,QACE,OAAO,IACX,CACF,CAAC,EACH,GACF,CAEJ,CAAC,EAEDP,EAAO,YAAc,SAErB,MAAMW,KAAoB,cAMxB,CACE,CACE,UAAAZ,EAAY,GACZ,iBAAAa,EAAmB,GACnB,GAAAV,EACA,KAAM,CACJ,MAAAW,EACA,WAAAC,EACA,SAAAC,EACA,OAAAC,EACA,IAAAC,EACA,UAAAC,GACA,YAAAC,EACA,gBAAAC,GACA,MAAAC,EACA,MAAAC,EACA,MAAAC,GACA,WAAApB,EACF,CACF,EACAC,KACG,CACH,MAAMoB,KAAW,UAAyB,IAAI,EACxCC,KAAS,UAAuB,IAAI,EACpC,CAAE,IAAKC,GAAW,OAAAC,CAAO,KAAI,aAAU,EACvC,CAACC,EAAWC,EAAY,KAAI,YAAS,EAAK,EAC1C,CAACC,GAAWC,EAAY,KAAI,YAAS,EAAK,EAC1CC,MAAa,UAAuB,IAAI,EACxCC,KAAc,UAAkC,IAAI,EACpDC,KAAmB,UAA6B,IAAI,EAEpDC,GACJ,OAAOtB,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,EAAO,WAAYrB,CAAe,CAAC,EAC/G,OAAOsB,GAAe,UAElBA,MAAc,wBAAqB,CAAE,KAAMA,EAAY,WAAYtB,CAAe,CAAC,EAEvF,KAAM,CAAC4C,GAAKC,EAAM,KAAI,YAAS,CAAC,EAC1B,CAACC,EAAUC,EAAW,KAAI,YAAS,EAAK,EACxCC,KAAa,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAC1DC,KAAc,UAAOH,CAAQ,EAEnC,sBAAU,IAAM,CACdC,GAAYC,CAAU,EACtBC,EAAY,QAAUD,CACxB,EAAG,CAACA,CAAU,CAAC,KAEf,aAAU,IAAM,CACd,MAAME,KAAwB,YAAS,IAAM,CAC3C,GAAIjB,EAAO,QAAS,CAClB,MAAMkB,EAAOlB,EAAO,QAAQ,sBAAsB,EAC5CmB,EAAeH,EAAY,QAAU,OAAO,OAAO,OAAS,OAAO,YACnEI,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CT,GAAOU,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACF,EAAG,GAAI,EAEP,OAAAL,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,EAC1DA,EAAsB,SAAS,CACjC,CACF,EAAG,CAAC,CAAC,KAEL,aAAU,IAAM,CACVf,GAAU,CAACC,IACbJ,EAAS,SAAS,KAAK,EACvBK,GAAa,EAAI,EAErB,EAAG,CAACF,EAAQC,CAAS,CAAC,KAEtB,aAAU,IAAM,CAWd,GATIK,EAAY,UACdA,EAAY,QAAQ,KAAK,EACzBA,EAAY,QAAU,MAEpBC,EAAiB,UACnBA,EAAiB,QAAQ,KAAK,EAC9BA,EAAiB,QAAU,MAGzB,CAACP,GAAU,CAACzB,EAAI,OAEpB,MAAM8C,EAASV,EAAW,OAAO,OAAO,OAAS,OAAO,YAClDW,EAAiB,SAAS,cAAc,IAAI/C,CAAE,EAAE,EAChDgD,EAAe,SAAS,cAAc,IAAIhD,CAAE,iBAAiB,EAC7DiD,EAAc,SAAS,cAAc,IAAIjD,CAAE,gBAAgB,EAEjE,GAAI,GAAC+C,GAAkB,CAACC,GAAgB,CAACC,GAGzC,OAAAjB,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAAS,IAAIhC,CAAE,GACf,MAAO,UACP,IAAK,QAAQ8C,EAAS,GAAG,YACzB,MAAO,GACP,oBAAqB,GACrB,SAAUI,GAAQ,CAChB,MAAMC,EAAWD,EAAK,SAGtB,sBAAsB,IAAM,CAG1B,MAAME,EAAW,GADO,KAAK,IAAI,EAAGD,EAAW,CAAC,EACR,GACxC,EAAA9D,QAAK,IAAI2D,EAAc,CACrB,IAAK,GAAGI,CAAQ,IAChB,UAAW,oBAAoBA,CAAQ,KACvC,QAAS,EACX,CAAC,EAID,MAAMC,EADe,KAAK,IAAI,EAAG,KAAK,IAAI,GAAIF,EAAW,IAAO,CAAC,CAAC,EACjC,EACjC,EAAA9D,QAAK,IAAI4D,EAAa,CACpB,eAAgB,QAAQI,CAAS,MACjC,qBAAsB,QAAQA,CAAS,MACvC,QAAS,EACX,CAAC,CACH,CAAC,CACH,CACF,CAAC,EAEM,IAAM,CACPtB,EAAY,UACdA,EAAY,QAAQ,KAAK,EACzBA,EAAY,QAAU,MAEpBC,EAAiB,UACnBA,EAAiB,QAAQ,KAAK,EAC9BA,EAAiB,QAAU,KAE/B,CACF,EAAG,CAACP,EAAQzB,EAAIoC,CAAQ,CAAC,KAGvB,oBACE,oBAAC,OACC,GAAIpC,EACJ,aAAW,MAAG,gDAAiDH,EAAW,CACxE,YAAauB,IAAU,OACvB,cAAeC,KAAU,SAC3B,CAAC,EACD,IAAKS,GAEL,mBAAC,OACC,IAAKN,GACL,UAAU,kHACV,MAAO,CAAE,WAAY,YAAa,QAAS,OAAQ,EAEnD,mBAAC9B,EAAA,CAAa,OAAO,uCACnB,mBAAC,EAAA4D,QAAA,CAAO,UAAU,2BAA2B,KAAM,CAAE,MAAOrB,IAAc,GAAI,MAAAb,CAAM,EAAG,EACzF,EACF,EACF,KAEA,QAAC,OACC,IAAKG,EACL,MAAO,CAAE,aAAc,IAAIW,EAAG,KAAM,OAAQT,EAAS,EAAI,CAAE,EAC3D,aAAW,MAAGzB,EAAI,uBAAwBU,CAAgB,EAE1D,oBAAC,OAAI,UAAU,gBACb,oBAAC,OAAI,aAAW,MAAG,cAAe,0BAA0B,EACzD,UAAAM,MACC,OAAC,iBAAc,UAAWoB,GAAWlB,IAAmBD,EAA2B,EAEnFE,GAAO,QACL,OAAC,EAAAoC,QAAA,CACC,SAAUjC,EACV,OAAQc,GAAYtB,GAAQ,IAAMA,GAAQ,IAAMC,GAAK,IACrD,IAAKqB,GAAYvB,GAAU,IAAMA,GAAU,IAAMM,GAAO,IACxD,UAAU,qNACV,eAAe,6BACf,MAAK,GACL,KAAM,GACN,YAAW,GACX,SAAU,GACV,QAAS,IAAM,CACbU,GAAa,EAAI,CACnB,EACF,EAGHd,GAAK,MAAQ,CAACI,GAAO,KAAOS,QAC3B,OAAC,OACC,IAAKQ,GAAYtB,GAAQ,IAAMA,GAAQ,IAAMC,GAAK,IAClD,IAAKA,GAAK,IACV,UAAU,iEACV,QAAQ,OACV,KAEF,OAAC,OACC,UAAU,oDACV,MAAO,CACL,eAAgB,YAChB,qBAAsB,YACtB,WAAY,iBACd,EACF,GACF,EACF,KAEA,OAAC,OAAI,UAAU,2BAA2B,KAC1C,OAACjB,EAAA,CAAO,WAAYG,GAAY,KAChC,OAAC,OAAI,UAAU,2BAA2B,GAC5C,GACF,CAEJ,CACF,EACAQ,EAAkB,YAAc,oBAEhC,IAAOxC,MAAQ,cAAWwC,CAAiB",
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"]
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 const blurString = `blur(${blurValue}px)`\n gsap.set(stickyCover, {\n backdropFilter: blurString,\n force3D: true,\n })\n // \u4F7F\u7528\u539F\u751F DOM API \u8BBE\u7F6E WebkitBackdropFilter\uFF08GSAP \u4E0D\u652F\u6301\u5E26\u524D\u7F00\u7684\u5C5E\u6027\uFF09\n if (stickyCover instanceof HTMLElement) {\n stickyCover.style.setProperty('-webkit-backdrop-filter', blurString)\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
+ "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", "blurString", "Slogan", "ScrollLoadVideo"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerSticky/index.js CHANGED
@@ -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 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};
1
+ "use client";import{Fragment as C,jsx as e,jsxs as h}from"react/jsx-runtime";import re,{useState as g,useRef as a,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 oe}from"../../shared/Styles.js";import ae 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 P from"gsap";import{ScrollTrigger as V}from"gsap/dist/ScrollTrigger";import{convertLexicalToHTML as F}from"@payloadcms/richtext-lexical/html";typeof window<"u"&&P.registerPlugin(V);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}}),$=({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},m)=>{const c=a(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($,{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($,{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:m,videoTitle:c,mobVideo:r,mobImg:l,img:b,isYouTube:O,youtubePcId:E,youtubeMobileId:Q,video:k,theme:H,shape:A,components:U}},ge)=>{const z=a(null),M=a(null),{ref:W,inView:f}=ne(),[L,_]=g(!1),[J,K]=g(!1),X=a(null),u=a(null),n=a(null),Z=typeof m=="string"?m:m&&F({data:m,converters:I});typeof c=="string"||c&&F({data:c,converters:I});const[D,ee]=g(0),[o,te]=g(!1),N=ye({query:"(max-width: 768px)"}),B=a(o);return v(()=>{te(N),B.current=N},[N]),v(()=>{const d=se(()=>{if(M.current){const x=M.current.getBoundingClientRect(),y=B.current?window.screen.height:window.innerHeight,p=window.scrollY||window.pageYOffset,R=x.bottom+p,T=document.documentElement.scrollHeight-R;ee(T>y?y:T)}},2e3);return d(),window.addEventListener("resize",d),()=>{window.removeEventListener("resize",d),d.cancel?.()}},[]),v(()=>{f&&!L&&(z.current?.play(),_(!0))},[f,L]),v(()=>{if(u.current&&(u.current.kill(),u.current=null),n.current&&(n.current.kill(),n.current=null),!f||!t)return;const d=o?window.screen.height:window.innerHeight,x=document.querySelector(`#${t}`),y=document.querySelector(`#${t} .media-content`),p=document.querySelector(`.${t} .sticky-cover`);if(!(!x||!y||!p))return n.current=V.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;P.set(y,{top:`${q}%`,transform:`translate(-50%, -${q}%)`,force3D:!0});const Y=`blur(${Math.max(0,Math.min(1,(S-.5)*2))*8}px)`;P.set(p,{backdropFilter:Y,force3D:!0}),p instanceof HTMLElement&&p.style.setProperty("-webkit-backdrop-filter",Y)})}}),()=>{u.current&&(u.current.kill(),u.current=null),n.current&&(n.current.kill(),n.current=null)}},[f,t,o]),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":A==="rounded"}),ref:X,children:e("div",{ref:W,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($,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(ae,{className:"sticky-title antialiased",data:{title:Z||"",theme:H}})})})}),h("div",{ref:M,style:{marginBottom:`-${D}px`,zIndex:f?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:o&&Q||E}):k?.url&&e(be,{videoRef:z,poster:o&&l?.url?l?.url:b?.url,src:o&&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)}}),b?.url&&(!k?.url||J)&&e("img",{src:o&&l?.url?l?.url:b?.url,alt:b?.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:U}),e("div",{className:"relative h-screen w-full"})]})]})});G.displayName="MediaPlayerSticky";var Ye=oe(G);export{Ye as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/MediaPlayerSticky/index.js.map CHANGED
@@ -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 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
- "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"]
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 const blurString = `blur(${blurValue}px)`\n gsap.set(stickyCover, {\n backdropFilter: blurString,\n force3D: true,\n })\n // \u4F7F\u7528\u539F\u751F DOM API \u8BBE\u7F6E WebkitBackdropFilter\uFF08GSAP \u4E0D\u652F\u6301\u5E26\u524D\u7F00\u7684\u5C5E\u6027\uFF09\n if (stickyCover instanceof HTMLElement) {\n stickyCover.style.setProperty('-webkit-backdrop-filter', blurString)\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
+ "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", "blurString", "MediaPlayerSticky_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.17-alpha.1766384798274",
3
+ "version": "1.1.17-alpha.1766385794881",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",