@anker-in/headless-ui 1.1.17-alpha.1766132717397 → 1.1.17-alpha.1766373865742

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
  2. package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
  3. package/dist/cjs/biz-components/Slogan/index.js +1 -1
  4. package/dist/cjs/biz-components/Slogan/index.js.map +2 -2
  5. package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
  6. package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
  7. package/dist/esm/biz-components/Slogan/index.js +1 -1
  8. package/dist/esm/biz-components/Slogan/index.js.map +2 -2
  9. package/package.json +1 -1
package/dist/cjs/biz-components/MediaPlayerSticky/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var ie=Object.create;var y=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var ue=(r,s)=>{for(var t in s)y(r,t,{get:s[t],enumerable:!0})},$=(r,s,t,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of ce(s))!pe.call(r,o)&&o!==t&&y(r,o,{get:()=>s[o],enumerable:!(i=ne(s,o))||i.enumerable});return r};var c=(r,s,t)=>(t=r!=null?ie(de(r)):{},$(s||!r||!r.__esModule?y(t,"default",{value:r,enumerable:!0}):t,r)),me=r=>$(y({},"__esModule",{value:!0}),r);var ye={};ue(ye,{default:()=>fe});module.exports=me(ye);var e=require("react/jsx-runtime"),a=c(require("react")),P=require("es-toolkit"),L=require("react-intersection-observer"),m=require("../../helpers/utils.js"),B=require("../../shared/Styles.js"),Y=c(require("../Slogan/index.js")),q=require("../VideoModal/YouTubePlayer.js"),b=require("../../components/grid.js"),F=require("../../components/container.js"),I=c(require("../BrandEquity/index.js")),j=c(require("../MemberEquity/index.js")),G=c(require("../Spacer/index.js")),V=c(require("gsap")),N=require("@payloadcms/richtext-lexical/html"),Q=require("react-responsive"),O=c(require("../../helpers/ScrollLoadVideo.js"));const z=({defaultConverters:r})=>({...r,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),k=({children:r,spaceY:s,className:t})=>(0,e.jsx)(F.Container,{spaceY:s,className:(0,m.cn)("!bg-transparent",t),children:(0,e.jsx)(b.Grid,{children:(0,e.jsx)(b.GridItem,{span:12,children:r})})}),C=a.default.forwardRef(({children:r,id:s,components:t},i)=>{const o=(0,a.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((l,n)=>{switch(l.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(k,{spaceY:"none",children:(0,e.jsx)(I.default,{data:l,style:l?.style})})},`${l.blockType}-${n}`);case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(k,{spaceY:"none",children:(0,e.jsx)(j.default,{data:l,className:"w-full",style:l?.style})})},`${l.blockType}-${n}`);case"ipc-spacer":return(0,e.jsx)(G.default,{data:l,style:l?.style,className:"!bg-transparent"},`${l.blockType}-${n}`);default:return null}})})]})});C.displayName="SubBox";const E=(0,a.forwardRef)(({className:r="",wrapperClassName:s="",id:t,data:{title:i,videoTitle:o,mobVideo:l,mobImg:n,img:f,isYouTube:W,youtubePcId:x,youtubeMobileId:_,video:v,theme:M,shape:A,components:J}},be)=>{const R=(0,a.useRef)(null),g=(0,a.useRef)(null),{ref:K,inView:p}=(0,L.useInView)(),[ve,U]=(0,a.useState)(0),[H,X]=(0,a.useState)(!1),[Z,D]=(0,a.useState)(!1),ee=(0,a.useRef)(null),te=typeof i=="string"?i:i&&(0,N.convertLexicalToHTML)({data:i,converters:z});typeof o=="string"||o&&(0,N.convertLexicalToHTML)({data:o,converters:z});const[re,ae]=(0,a.useState)(0),[d,se]=(0,a.useState)(!1),T=(0,Q.useMediaQuery)({query:"(max-width: 768px)"});(0,a.useEffect)(()=>{se(T)},[T]);const w=(0,P.debounce)(()=>{if(g.current){const h=g.current.getBoundingClientRect(),u=d?window.screen.height:window.innerHeight,le=window.scrollY||window.pageYOffset,oe=h.bottom+le,S=document.documentElement.scrollHeight-oe;ae(S>u?u:S),U(u)}},2e3);return(0,a.useEffect)(()=>{p&&!H&&(R.current?.play(),X(!0))},[p,H]),(0,a.useEffect)(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),(0,a.useEffect)(()=>{function h(){const u=d?window.screen.height:window.innerHeight;V.default.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${u*1.8}px bottom`,scrub:.5}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}p&&h()},[p]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,className:(0,m.cn)("relative z-20 h-screen w-full",r,{"aiui-dark":M==="dark","rounded-box":A==="rounded"}),ref:ee,children:(0,e.jsx)("div",{ref:K,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)(k,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(Y.default,{className:"sticky-title antialiased",data:{title:te||"",theme:M}})})})}),(0,e.jsxs)("div",{ref:g,style:{marginBottom:`-${re}px`,zIndex:p?2:1},className:(0,m.cn)(t,"relative mt-[-200vh]",s),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,m.cn)("media-cover","relative h-screen w-full"),children:[W?(0,e.jsx)(q.YouTubePlayer,{youTubeId:d&&_||x}):v?.url&&(0,e.jsx)(O.default,{videoRef:R,poster:d&&n?.url?n?.url:f?.url,src:d&&l?.url?l?.url:v?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,autoplay:!1,onEnded:()=>{D(!0)}}),f?.url&&(!v?.url||Z)&&(0,e.jsx)("img",{src:d&&n?.url?n?.url:f?.url,alt:f?.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)(C,{components:J}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});E.displayName="MediaPlayerSticky";var fe=(0,B.withLayout)(E);
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,n)=>{for(var t in n)w(r,t,{get:n[t],enumerable:!0})},V=(r,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of ye(n))!ge.call(r,a)&&a!==t&&w(r,a,{get:()=>n[a],enumerable:!(o=fe(n,a))||o.enumerable});return r};var d=(r,n,t)=>(t=r!=null?me(be(r)):{},V(n||!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:n=>{const{node:t}=n;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),P=({children:r,spaceY:n,className:t})=>(0,e.jsx)(_.Container,{spaceY:n,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:n,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((s,i)=>{switch(s.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:s,style:s?.style})})},`${s.blockType}-${i}`);case"ipc-member-equity":return(0,e.jsx)("div",{className:"tablet:min-h-0 relative z-20 min-h-[480px] w-full bg-transparent",children:(0,e.jsx)(P,{spaceY:"none",children:(0,e.jsx)(K.default,{data:s,className:"w-full",style:s?.style})})},`${s.blockType}-${i}`);case"ipc-spacer":return(0,e.jsx)(X.default,{data:s,style:s?.style,className:"!bg-transparent"},`${s.blockType}-${i}`);default:return null}})})]})});j.displayName="SubBox";const G=(0,l.forwardRef)(({className:r="",wrapperClassName:n="",id:t,data:{title:o,videoTitle:a,mobVideo:s,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:ne,inView:f}=(0,Q.useInView)(),[B,se]=(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(),se(!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:ne,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]",n),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&&s?.url?s?.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
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 { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n // const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {/* {!isMobile && <GridItem span={1} />} */}\n <GridItem span={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 [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.5,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n style={{ willChange: 'transform', contain: 'paint' }}\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n >\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {isYouTube ? (\n <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n ) : (\n video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n 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_html", "import_react_responsive", "import_ScrollLoadVideo", "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", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "isMobile", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "gsap", "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\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,OAEC,UAAU,mEAEV,mBAACX,EAAA,CAAa,OAAO,OACnB,mBAAC,EAAAa,QAAA,CAAa,KAAMH,EAAe,UAAU,SAAS,MAAOA,GAAe,MAAO,EACrF,GALK,GAAGA,EAAc,SAAS,IAAIC,CAAK,EAM1C,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"]
7
7
  }
package/dist/cjs/biz-components/Slogan/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var K=Object.create;var h=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Z=(t,r)=>{for(var n in r)h(t,n,{get:r[n],enumerable:!0})},G=(t,r,n,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of Q(r))!X.call(t,o)&&o!==n&&h(t,o,{get:()=>r[o],enumerable:!(l=O(r,o))||l.enumerable});return t};var tt=(t,r,n)=>(n=t!=null?K(W(t)):{},G(r||!t||!t.__esModule?h(n,"default",{value:t,enumerable:!0}):n,t)),et=t=>G(h({},"__esModule",{value:!0}),t);var lt={};Z(lt,{componentName:()=>nt,componentType:()=>rt,default:()=>st});module.exports=et(lt);var s=require("react/jsx-runtime"),e=tt(require("react")),g=require("gsap"),N=require("gsap/dist/SplitText"),v=require("gsap/dist/ScrollTrigger"),u=require("../../helpers/utils.js"),w=require("../../components/index.js"),C=require("../../shared/Styles.js"),P=require("react-intersection-observer");const rt="copy",nt="brand_slogan";function ot(t=[],r=3){const n=[];for(let l=0;l<t.length;l+=r)n.push(t.slice(l,l+r));return n}const j=e.default.forwardRef(({data:t,className:r=""},n)=>{const{title:l,features:o=[],featureChunkSize:k=3}=t,[y,I]=e.default.useState(0),[V,b]=e.default.useState(!0),M=(0,e.useRef)(null),T=(0,e.useRef)(null),E=(0,e.useRef)(null),d=ot(o,k),S=d.length,p=o.length>k,F=p?[...d,d[0]]:d,R=40;(0,e.useImperativeHandle)(n,()=>M.current);const{ref:U,inView:L}=(0,P.useInView)();e.default.useEffect(()=>{if(!p)return;const i=setInterval(()=>{I(a=>a+1),b(!0)},3e3);return()=>clearInterval(i)},[S,p]),e.default.useEffect(()=>{if(p)if(y===S){const i=setTimeout(()=>{b(!1),I(0)},500);return()=>clearTimeout(i)}else b(!0)},[y,S,p]);const f=(0,e.useRef)(null),$=(0,e.useRef)(null),x=(0,e.useRef)(null);return(0,e.useEffect)(()=>{g.gsap.registerPlugin(v.ScrollTrigger,N.SplitText);function i(){if(!f.current)return;x.current=new N.SplitText(f.current,{type:"words",wordsClass:"word"});const a=f.current?.clientHeight||100,m=x.current.words;g.gsap.set(m,{opacity:0}),T.current=v.ScrollTrigger.create({trigger:f.current,start:"bottom bottom-=4%",end:`bottom+=${a*1.5}px bottom-=4%`,scrub:!0,onUpdate:c=>{const A=c.progress,z=m.length,Y=1/z,D=.5;m.forEach((_,q)=>{const B=q/z*(1-D),J=Y*(1+D);let H=(A-B)/J;H=Math.max(0,Math.min(H,1)),g.gsap.set(_,{opacity:H})})}}),o&&o.length>0&&(E.current=v.ScrollTrigger.create({trigger:$.current,start:`bottom+=${a*2}px bottom-=6%`,end:`bottom+=${a*2+100}px bottom-=6%`,onUpdate:c=>{g.gsap.set($.current,{opacity:c.progress})}}))}return L&&i(),()=>{x.current&&x.current.revert(),T.current&&T.current.kill(),E.current&&E.current.kill()}},[L]),(0,s.jsx)("div",{ref:U,children:(0,s.jsxs)("div",{ref:M,className:(0,u.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",r),children:[(0,s.jsx)(w.Heading,{ref:f,as:"h1",size:2,weight:"bold",align:"left",className:(0,u.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:l}),o&&o.length>0&&(0,s.jsx)("div",{className:(0,u.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${R}px]`),children:(0,s.jsx)("div",{className:(0,u.cn)(["flex flex-col",V?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*R}px)`},children:F.map((i,a)=>(0,s.jsx)("div",{className:(0,u.cn)("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${R}px]`),children:i.map((m,c)=>(0,s.jsxs)(e.default.Fragment,{children:[c>0&&(0,s.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,s.jsx)(w.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:m.title})]},c))},a))})})]})})});j.displayName="Slogan";var st=(0,C.withLayout)(j);
1
+ "use strict";"use client";var K=Object.create;var h=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Z=(t,r)=>{for(var n in r)h(t,n,{get:r[n],enumerable:!0})},G=(t,r,n,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of Q(r))!X.call(t,o)&&o!==n&&h(t,o,{get:()=>r[o],enumerable:!(l=O(r,o))||l.enumerable});return t};var tt=(t,r,n)=>(n=t!=null?K(W(t)):{},G(r||!t||!t.__esModule?h(n,"default",{value:t,enumerable:!0}):n,t)),et=t=>G(h({},"__esModule",{value:!0}),t);var lt={};Z(lt,{componentName:()=>nt,componentType:()=>rt,default:()=>st});module.exports=et(lt);var s=require("react/jsx-runtime"),e=tt(require("react")),g=require("gsap"),N=require("gsap/dist/SplitText"),v=require("gsap/dist/ScrollTrigger"),u=require("../../helpers/utils.js"),w=require("../../components/index.js"),C=require("../../shared/Styles.js"),P=require("react-intersection-observer");const rt="copy",nt="brand_slogan";function ot(t=[],r=3){const n=[];for(let l=0;l<t.length;l+=r)n.push(t.slice(l,l+r));return n}const j=e.default.forwardRef(({data:t,className:r=""},n)=>{const{title:l,features:o=[],featureChunkSize:k=3}=t,[y,I]=e.default.useState(0),[V,b]=e.default.useState(!0),M=(0,e.useRef)(null),T=(0,e.useRef)(null),E=(0,e.useRef)(null),d=ot(o,k),S=d.length,p=o.length>k,F=p?[...d,d[0]]:d,R=40;(0,e.useImperativeHandle)(n,()=>M.current);const{ref:U,inView:L}=(0,P.useInView)();e.default.useEffect(()=>{if(!p)return;const i=setInterval(()=>{I(a=>a+1),b(!0)},3e3);return()=>clearInterval(i)},[S,p]),e.default.useEffect(()=>{if(p)if(y===S){const i=setTimeout(()=>{b(!1),I(0)},500);return()=>clearTimeout(i)}else b(!0)},[y,S,p]);const f=(0,e.useRef)(null),$=(0,e.useRef)(null),x=(0,e.useRef)(null);return(0,e.useEffect)(()=>{g.gsap.registerPlugin(v.ScrollTrigger,N.SplitText);function i(){if(!f.current)return;x.current=new N.SplitText(f.current,{type:"words",wordsClass:"word"});const a=f.current?.clientHeight||100,m=x.current.words;g.gsap.set(m,{opacity:0}),T.current=v.ScrollTrigger.create({trigger:f.current,start:"bottom bottom-=4%",end:`bottom+=${a*1.5}px bottom-=4%`,scrub:!0,onUpdate:c=>{const A=c.progress,z=m.length,Y=1/z,D=.5;m.forEach((_,q)=>{const B=q/z*(1-D),J=Y*(1+D);let H=(A-B)/J;H=Math.max(0,Math.min(H,1)),g.gsap.set(_,{opacity:H})})}}),o&&o.length>0&&(E.current=v.ScrollTrigger.create({trigger:$.current,start:`bottom+=${a*2}px bottom-=6%`,end:`bottom+=${a*2+100}px bottom-=6%`,onUpdate:c=>{g.gsap.set($.current,{opacity:c.progress})}}))}return L&&i(),()=>{x.current&&x.current.revert(),T.current&&T.current.kill(),E.current&&E.current.kill()}},[L]),(0,s.jsx)("div",{ref:U,children:(0,s.jsxs)("div",{ref:M,className:(0,u.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",r),children:[(0,s.jsx)(w.Heading,{ref:f,as:"h1",size:2,weight:"bold",align:"left",className:(0,u.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-[1.1]"),html:l}),o&&o.length>0&&(0,s.jsx)("div",{className:(0,u.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${R}px]`),children:(0,s.jsx)("div",{className:(0,u.cn)(["flex flex-col",V?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*R}px)`},children:F.map((i,a)=>(0,s.jsx)("div",{className:(0,u.cn)("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${R}px]`),children:i.map((m,c)=>(0,s.jsxs)(e.default.Fragment,{children:[c>0&&(0,s.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,s.jsx)(w.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:m.title})]},c))},a))})})]})})});j.displayName="Slogan";var st=(0,C.withLayout)(j);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/Slogan/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const { ref: inViewRef, inView } = useInView()\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n\n function gsapResize() {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n\n if (features && features.length > 0) {\n featuresTriggerRef.current = ScrollTrigger.create({\n trigger: featuresRef.current,\n start: `bottom+=${height * 2}px bottom-=6%`,\n end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n onUpdate: (self: any) => {\n gsap.set(featuresRef.current, { opacity: self.progress })\n },\n })\n }\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n featuresTriggerRef.current && featuresTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef}>\n <div\n ref={innerRef}\n className={cn(\n 'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h1\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n )}\n html={title}\n />\n {features && features.length > 0 && (\n <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning\n ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className={cn(\n 'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n `tablet:h-[${groupHeight}px]`\n )}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n <Text\n size={3}\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const { ref: inViewRef, inView } = useInView()\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n\n function gsapResize() {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n\n if (features && features.length > 0) {\n featuresTriggerRef.current = ScrollTrigger.create({\n trigger: featuresRef.current,\n start: `bottom+=${height * 2}px bottom-=6%`,\n end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n onUpdate: (self: any) => {\n gsap.set(featuresRef.current, { opacity: self.progress })\n },\n })\n }\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n featuresTriggerRef.current && featuresTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef}>\n <div\n ref={innerRef}\n className={cn(\n 'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h1\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-[1.1]'\n )}\n html={title}\n />\n {features && features.length > 0 && (\n <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning\n ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className={cn(\n 'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n `tablet:h-[${groupHeight}px]`\n )}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n <Text\n size={3}\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
5
+ "mappings": "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",
6
6
  "names": ["Slogan_exports", "__export", "componentName", "componentType", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_react_intersection_observer", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "scrollTriggerRef", "featuresTriggerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "inViewRef", "inView", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "group", "idx", "feature", "index"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerSticky/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as N,jsx as e,jsxs as b}from"react/jsx-runtime";import K,{useState as p,useRef as m,useEffect as f,forwardRef as U}from"react";import{debounce as X}from"es-toolkit";import{useInView as Z}from"react-intersection-observer";import{cn as y}from"../../helpers/utils.js";import{withLayout as D}from"../../shared/Styles.js";import ee from"../Slogan/index.js";import{YouTubePlayer as te}from"../VideoModal/YouTubePlayer.js";import{Grid as re,GridItem as ae}from"../../components/grid.js";import{Container as se}from"../../components/container.js";import le from"../BrandEquity/index.js";import oe from"../MemberEquity/index.js";import ie from"../Spacer/index.js";import ne from"gsap";import{convertLexicalToHTML as $}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as ce}from"react-responsive";import de from"../../helpers/ScrollLoadVideo.js";const z=({defaultConverters:s})=>({...s,text:l=>{const{node:t}=l;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),k=({children:s,spaceY:l,className:t})=>e(se,{spaceY:l,className:y("!bg-transparent",t),children:e(re,{children:e(ae,{span:12,children:s})})}),C=K.forwardRef(({children:s,id:l,components:t},n)=>{const o=m(null);return b("div",{ref:o,className:"relative z-10",children:[e(N,{children:s}),e(N,{children:t?.map((r,a)=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(k,{spaceY:"none",children:e(le,{data:r,style:r?.style})})},`${r.blockType}-${a}`);case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(k,{spaceY:"none",children:e(oe,{data:r,className:"w-full",style:r?.style})})},`${r.blockType}-${a}`);case"ipc-spacer":return e(ie,{data:r,style:r?.style,className:"!bg-transparent"},`${r.blockType}-${a}`);default:return null}})})]})});C.displayName="SubBox";const E=U(({className:s="",wrapperClassName:l="",id:t,data:{title:n,videoTitle:o,mobVideo:r,mobImg:a,img:u,isYouTube:P,youtubePcId:x,youtubeMobileId:L,video:v,theme:M,shape:B,components:Y}},pe)=>{const R=m(null),g=m(null),{ref:q,inView:c}=Z(),[ue,F]=p(0),[H,I]=p(!1),[j,G]=p(!1),V=m(null),Q=typeof n=="string"?n:n&&$({data:n,converters:z});typeof o=="string"||o&&$({data:o,converters:z});const[O,W]=p(0),[i,_]=p(!1),T=ce({query:"(max-width: 768px)"});f(()=>{_(T)},[T]);const w=X(()=>{if(g.current){const h=g.current.getBoundingClientRect(),d=i?window.screen.height:window.innerHeight,A=window.scrollY||window.pageYOffset,J=h.bottom+A,S=document.documentElement.scrollHeight-J;W(S>d?d:S),F(d)}},2e3);return f(()=>{c&&!H&&(R.current?.play(),I(!0))},[c,H]),f(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),f(()=>{function h(){const d=i?window.screen.height:window.innerHeight;ne.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${d*1.8}px bottom`,scrub:.5}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}c&&h()},[c]),b(N,{children:[e("div",{id:t,className:y("relative z-20 h-screen w-full",s,{"aiui-dark":M==="dark","rounded-box":B==="rounded"}),ref:V,children:e("div",{ref:q,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:e(k,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(ee,{className:"sticky-title antialiased",data:{title:Q||"",theme:M}})})})}),b("div",{ref:g,style:{marginBottom:`-${O}px`,zIndex:c?2:1},className:y(t,"relative mt-[-200vh]",l),children:[e("div",{className:"sticky top-0 ",children:b("div",{className:y("media-cover","relative h-screen w-full"),children:[P?e(te,{youTubeId:i&&L||x}):v?.url&&e(de,{videoRef:R,poster:i&&a?.url?a?.url:u?.url,src:i&&r?.url?r?.url:v?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,autoplay:!1,onEnded:()=>{G(!0)}}),u?.url&&(!v?.url||j)&&e("img",{src:i&&a?.url?a?.url:u?.url,alt:u?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]",loading:"lazy"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(C,{components:Y}),e("div",{className:"relative h-screen w-full"})]})]})});E.displayName="MediaPlayerSticky";var ze=D(E);export{ze 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 o,useEffect as v,forwardRef as le}from"react";import{debounce as ne}from"es-toolkit";import{useInView as se}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:n})=>({...n,text:i=>{const{node:t}=i;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),P=({children:n,spaceY:i,className:t})=>e(de,{spaceY:i,className:w("!bg-transparent",t),children:e(ce,{children:e(ue,{span:12,children:n})})}),j=re.forwardRef(({children:n,id:i,components:t},p)=>{const c=o(null);return h("div",{ref:c,className:"relative z-10",children:[e(C,{children:n}),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:"tablet:min-h-0 relative z-20 min-h-[480px] 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:n="",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}=se(),[L,_]=g(!1),[J,K]=g(!1),X=o(null),u=o(null),s=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=ne(()=>{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),s.current&&(s.current.kill(),s.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 s.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),s.current&&(s.current.kill(),s.current=null)}},[m,t,a]),h(C,{children:[e("div",{id:t,className:w("relative z-20 h-screen w-full overflow-hidden",n,{"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
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 { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n // const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {/* {!isMobile && <GridItem span={1} />} */}\n <GridItem span={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 [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.5,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n style={{ willChange: 'transform', contain: 'paint' }}\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n >\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {isYouTube ? (\n <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n ) : (\n video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n 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", "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", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "isMobile", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "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\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,OAEC,UAAU,mEAEV,SAAAA,EAAC4B,EAAA,CAAa,OAAO,OACnB,SAAA5B,EAACiB,GAAA,CAAa,KAAMoB,EAAe,UAAU,SAAS,MAAOA,GAAe,MAAO,EACrF,GALK,GAAGA,EAAc,SAAS,IAAIC,CAAK,EAM1C,EAGJ,IAAK,aACH,OACEtC,EAACkB,GAAA,CAEC,KAAMmB,EACN,MAAOA,GAAe,MACtB,UAAU,mBAHL,GAAGA,EAAc,SAAS,IAAIC,CAAK,EAI1C,EAGJ,QACE,OAAO,IACX,CACF,CAAC,EACH,GACF,CAEJ,CAAC,EAEDN,EAAO,YAAc,SAErB,MAAMO,EAAoBjC,GAMxB,CACE,CACE,UAAAyB,EAAY,GACZ,iBAAAS,EAAmB,GACnB,GAAAP,EACA,KAAM,CACJ,MAAAQ,EACA,WAAAC,EACA,SAAAC,EACA,OAAAC,EACA,IAAAC,EACA,UAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAjB,CACF,CACF,EACAC,KACG,CACH,MAAMiB,EAAWhD,EAAyB,IAAI,EACxCiD,EAASjD,EAAuB,IAAI,EACpC,CAAE,IAAKkD,EAAW,OAAAC,CAAO,EAAI/C,GAAU,EACvC,CAACgD,EAAWC,CAAY,EAAItD,EAAS,EAAK,EAC1C,CAACuD,EAAWC,CAAY,EAAIxD,EAAS,EAAK,EAC1CyD,EAAaxD,EAAuB,IAAI,EACxCyD,EAAczD,EAAkC,IAAI,EACpD0D,EAAmB1D,EAA6B,IAAI,EAEpD2D,EACJ,OAAOtB,GAAU,SAAWA,EAAQA,GAASpB,EAAqB,CAAE,KAAMoB,EAAO,WAAYjB,CAAe,CAAC,EAC/G,OAAOkB,GAAe,UAElBA,GAAcrB,EAAqB,CAAE,KAAMqB,EAAY,WAAYlB,CAAe,CAAC,EAEvF,KAAM,CAACwC,EAAKC,EAAM,EAAI9D,EAAS,CAAC,EAC1B,CAAC+D,EAAUC,EAAW,EAAIhE,EAAS,EAAK,EACxCiE,EAAa9C,GAAc,CAAE,MAAO,oBAAqB,CAAC,EAC1D+C,EAAcjE,EAAO8D,CAAQ,EAEnC,OAAA7D,EAAU,IAAM,CACd8D,GAAYC,CAAU,EACtBC,EAAY,QAAUD,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf/D,EAAU,IAAM,CACd,MAAMiE,EAAwB/D,GAAS,IAAM,CAC3C,GAAI8C,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,EAELjE,EAAU,IAAM,CACVkD,GAAU,CAACC,IACbJ,EAAS,SAAS,KAAK,EACvBK,EAAa,EAAI,EAErB,EAAG,CAACF,EAAQC,CAAS,CAAC,EAEtBnD,EAAU,IAAM,CAWd,GATIwD,EAAY,UACdA,EAAY,QAAQ,KAAK,EACzBA,EAAY,QAAU,MAEpBC,EAAiB,UACnBA,EAAiB,QAAQ,KAAK,EAC9BA,EAAiB,QAAU,MAGzB,CAACP,GAAU,CAACtB,EAAI,OAEpB,MAAM2C,EAASV,EAAW,OAAO,OAAO,OAAS,OAAO,YAClDW,EAAiB,SAAS,cAAc,IAAI5C,CAAE,EAAE,EAChD6C,EAAe,SAAS,cAAc,IAAI7C,CAAE,iBAAiB,EAC7D8C,EAAc,SAAS,cAAc,IAAI9C,CAAE,gBAAgB,EAEjE,GAAI,GAAC4C,GAAkB,CAACC,GAAgB,CAACC,GAGzC,OAAAjB,EAAiB,QAAU1C,EAAc,OAAO,CAC9C,QAAS,IAAIa,CAAE,GACf,MAAO,UACP,IAAK,QAAQ2C,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,GACxC9D,EAAK,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,EACjC9D,EAAK,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,EAAQtB,EAAIiC,CAAQ,CAAC,EAGvBjE,EAAAF,EAAA,CACE,UAAAC,EAAC,OACC,GAAIiC,EACJ,UAAWxB,EAAG,gDAAiDsB,EAAW,CACxE,YAAamB,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EACD,IAAKS,EAEL,SAAA5D,EAAC,OACC,IAAKsD,EACL,UAAU,kHACV,MAAO,CAAE,WAAY,YAAa,QAAS,OAAQ,EAEnD,SAAAtD,EAAC4B,EAAA,CAAa,OAAO,uCACnB,SAAA5B,EAACW,GAAA,CAAO,UAAU,2BAA2B,KAAM,CAAE,MAAOoD,GAAc,GAAI,MAAAb,CAAM,EAAG,EACzF,EACF,EACF,EAEAjD,EAAC,OACC,IAAKoD,EACL,MAAO,CAAE,aAAc,IAAIW,CAAG,KAAM,OAAQT,EAAS,EAAI,CAAE,EAC3D,UAAW9C,EAAGwB,EAAI,uBAAwBO,CAAgB,EAE1D,UAAAxC,EAAC,OAAI,UAAU,gBACb,SAAAC,EAAC,OAAI,UAAWQ,EAAG,cAAe,0BAA0B,EACzD,UAAAqC,EACC9C,EAACY,GAAA,CAAc,UAAWsD,GAAWlB,GAAmBD,EAA2B,EAEnFE,GAAO,KACLjD,EAACuB,GAAA,CACC,SAAU6B,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,EAAa,EAAI,CACnB,EACF,EAGHd,GAAK,MAAQ,CAACI,GAAO,KAAOS,IAC3B1D,EAAC,OACC,IAAKkE,GAAYtB,GAAQ,IAAMA,GAAQ,IAAMC,GAAK,IAClD,IAAKA,GAAK,IACV,UAAU,iEACV,QAAQ,OACV,EAEF7C,EAAC,OACC,UAAU,oDACV,MAAO,CACL,eAAgB,YAChB,qBAAsB,YACtB,WAAY,iBACd,EACF,GACF,EACF,EAEAA,EAAC,OAAI,UAAU,2BAA2B,EAC1CA,EAACgC,EAAA,CAAO,WAAYE,EAAY,EAChClC,EAAC,OAAI,UAAU,2BAA2B,GAC5C,GACF,CAEJ,CACF,EACAuC,EAAkB,YAAc,oBAEhC,IAAO6C,GAAQ1E,GAAW6B,CAAiB",
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
  }
package/dist/esm/biz-components/Slogan/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as r,jsxs as G}from"react/jsx-runtime";import l,{useImperativeHandle as q,useRef as i,useEffect as B}from"react";import{gsap as h}from"gsap";import{SplitText as z}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as p}from"../../helpers/utils.js";import{Heading as J,Text as K}from"../../components/index.js";import{withLayout as O}from"../../shared/Styles.js";import{useInView as Q}from"react-intersection-observer";const lt="copy",it="brand_slogan";function W(f=[],m=3){const g=[];for(let n=0;n<f.length;n+=m)g.push(f.slice(n,n+m));return g}const D=l.forwardRef(({data:f,className:m=""},g)=>{const{title:n,features:o=[],featureChunkSize:H=3}=f,[v,N]=l.useState(0),[j,w]=l.useState(!0),k=i(null),y=i(null),b=i(null),d=W(o,H),T=d.length,a=o.length>H,C=a?[...d,d[0]]:d,E=40;q(g,()=>k.current);const{ref:P,inView:I}=Q();l.useEffect(()=>{if(!a)return;const t=setInterval(()=>{N(e=>e+1),w(!0)},3e3);return()=>clearInterval(t)},[T,a]),l.useEffect(()=>{if(a)if(v===T){const t=setTimeout(()=>{w(!1),N(0)},500);return()=>clearTimeout(t)}else w(!0)},[v,T,a]);const c=i(null),M=i(null),x=i(null);return B(()=>{h.registerPlugin(R,z);function t(){if(!c.current)return;x.current=new z(c.current,{type:"words",wordsClass:"word"});const e=c.current?.clientHeight||100,u=x.current.words;h.set(u,{opacity:0}),y.current=R.create({trigger:c.current,start:"bottom bottom-=4%",end:`bottom+=${e*1.5}px bottom-=4%`,scrub:!0,onUpdate:s=>{const V=s.progress,L=u.length,F=1/L,$=.5;u.forEach((U,A)=>{const Y=A/L*(1-$),_=F*(1+$);let S=(V-Y)/_;S=Math.max(0,Math.min(S,1)),h.set(U,{opacity:S})})}}),o&&o.length>0&&(b.current=R.create({trigger:M.current,start:`bottom+=${e*2}px bottom-=6%`,end:`bottom+=${e*2+100}px bottom-=6%`,onUpdate:s=>{h.set(M.current,{opacity:s.progress})}}))}return I&&t(),()=>{x.current&&x.current.revert(),y.current&&y.current.kill(),b.current&&b.current.kill()}},[I]),r("div",{ref:P,children:G("div",{ref:k,className:p("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",m),children:[r(J,{ref:c,as:"h1",size:2,weight:"bold",align:"left",className:p("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:n}),o&&o.length>0&&r("div",{className:p("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${E}px]`),children:r("div",{className:p(["flex flex-col",j?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${v*E}px)`},children:C.map((t,e)=>r("div",{className:p("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${E}px]`),children:t.map((u,s)=>G(l.Fragment,{children:[s>0&&r("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),r(K,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:u.title})]},s))},e))})})]})})});D.displayName="Slogan";var at=O(D);export{it as componentName,lt as componentType,at as default};
1
+ "use client";import{jsx as r,jsxs as G}from"react/jsx-runtime";import l,{useImperativeHandle as q,useRef as i,useEffect as B}from"react";import{gsap as h}from"gsap";import{SplitText as z}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as p}from"../../helpers/utils.js";import{Heading as J,Text as K}from"../../components/index.js";import{withLayout as O}from"../../shared/Styles.js";import{useInView as Q}from"react-intersection-observer";const lt="copy",it="brand_slogan";function W(f=[],m=3){const g=[];for(let n=0;n<f.length;n+=m)g.push(f.slice(n,n+m));return g}const D=l.forwardRef(({data:f,className:m=""},g)=>{const{title:n,features:o=[],featureChunkSize:H=3}=f,[v,N]=l.useState(0),[j,w]=l.useState(!0),k=i(null),y=i(null),b=i(null),d=W(o,H),T=d.length,a=o.length>H,C=a?[...d,d[0]]:d,E=40;q(g,()=>k.current);const{ref:P,inView:I}=Q();l.useEffect(()=>{if(!a)return;const t=setInterval(()=>{N(e=>e+1),w(!0)},3e3);return()=>clearInterval(t)},[T,a]),l.useEffect(()=>{if(a)if(v===T){const t=setTimeout(()=>{w(!1),N(0)},500);return()=>clearTimeout(t)}else w(!0)},[v,T,a]);const c=i(null),M=i(null),x=i(null);return B(()=>{h.registerPlugin(R,z);function t(){if(!c.current)return;x.current=new z(c.current,{type:"words",wordsClass:"word"});const e=c.current?.clientHeight||100,u=x.current.words;h.set(u,{opacity:0}),y.current=R.create({trigger:c.current,start:"bottom bottom-=4%",end:`bottom+=${e*1.5}px bottom-=4%`,scrub:!0,onUpdate:s=>{const V=s.progress,L=u.length,F=1/L,$=.5;u.forEach((U,A)=>{const Y=A/L*(1-$),_=F*(1+$);let S=(V-Y)/_;S=Math.max(0,Math.min(S,1)),h.set(U,{opacity:S})})}}),o&&o.length>0&&(b.current=R.create({trigger:M.current,start:`bottom+=${e*2}px bottom-=6%`,end:`bottom+=${e*2+100}px bottom-=6%`,onUpdate:s=>{h.set(M.current,{opacity:s.progress})}}))}return I&&t(),()=>{x.current&&x.current.revert(),y.current&&y.current.kill(),b.current&&b.current.kill()}},[I]),r("div",{ref:P,children:G("div",{ref:k,className:p("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",m),children:[r(J,{ref:c,as:"h1",size:2,weight:"bold",align:"left",className:p("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-[1.1]"),html:n}),o&&o.length>0&&r("div",{className:p("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${E}px]`),children:r("div",{className:p(["flex flex-col",j?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${v*E}px)`},children:C.map((t,e)=>r("div",{className:p("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${E}px]`),children:t.map((u,s)=>G(l.Fragment,{children:[s>0&&r("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),r(K,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:u.title})]},s))},e))})})]})})});D.displayName="Slogan";var at=O(D);export{it as componentName,lt as componentType,at as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Slogan/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const { ref: inViewRef, inView } = useInView()\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n\n function gsapResize() {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n\n if (features && features.length > 0) {\n featuresTriggerRef.current = ScrollTrigger.create({\n trigger: featuresRef.current,\n start: `bottom+=${height * 2}px bottom-=6%`,\n end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n onUpdate: (self: any) => {\n gsap.set(featuresRef.current, { opacity: self.progress })\n },\n })\n }\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n featuresTriggerRef.current && featuresTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef}>\n <div\n ref={innerRef}\n className={cn(\n 'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h1\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n )}\n html={title}\n />\n {features && features.length > 0 && (\n <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning\n ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className={cn(\n 'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n `tablet:h-[${groupHeight}px]`\n )}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n <Text\n size={3}\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3 } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const innerRef = useRef<HTMLDivElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const { ref: inViewRef, inView } = useInView()\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const featuresRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n\n function gsapResize() {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n\n if (features && features.length > 0) {\n featuresTriggerRef.current = ScrollTrigger.create({\n trigger: featuresRef.current,\n start: `bottom+=${height * 2}px bottom-=6%`,\n end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n onUpdate: (self: any) => {\n gsap.set(featuresRef.current, { opacity: self.progress })\n },\n })\n }\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n featuresTriggerRef.current && featuresTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef}>\n <div\n ref={innerRef}\n className={cn(\n 'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h1\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-[1.1]'\n )}\n html={title}\n />\n {features && features.length > 0 && (\n <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning\n ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className={cn(\n 'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n `tablet:h-[${groupHeight}px]`\n )}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n <Text\n size={3}\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useEffect", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withLayout", "useInView", "componentType", "componentName", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "scrollTriggerRef", "featuresTriggerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "inViewRef", "inView", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "group", "idx", "feature", "index", "Slogan_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.1766132717397",
3
+ "version": "1.1.17-alpha.1766373865742",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",