@anker-in/headless-ui 1.0.20-alpha.102201 → 1.0.20-alpha.102301
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var ae=Object.create;var y=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var ne=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,le=Object.prototype.hasOwnProperty;var ce=(s,t)=>{for(var r in t)y(s,r,{get:t[r],enumerable:!0})},S=(s,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of ne(t))!le.call(s,o)&&o!==r&&y(s,o,{get:()=>t[o],enumerable:!(n=oe(t,o))||n.enumerable});return s};var i=(s,t,r)=>(r=s!=null?ae(ie(s)):{},S(t||!s||!s.__esModule?y(r,"default",{value:s,enumerable:!0}):r,s)),de=s=>S(y({},"__esModule",{value:!0}),s);var fe={};ce(fe,{default:()=>ue});module.exports=de(fe);var e=require("react/jsx-runtime"),a=i(require("react")),L=require("es-toolkit"),P=require("react-intersection-observer"),m=require("../../helpers/utils.js"),C=require("../../shared/Styles.js"),$=i(require("../Slogan/index.js")),B=require("../VideoModal/YouTubePlayer.js"),c=require("../../components/gird.js"),Y=require("../../components/container.js"),q=i(require("../BrandEquity/index.js")),F=i(require("../MemberEquity/index.js")),I=i(require("../Spacer/index.js")),j=i(require("gsap")),x=require("@payloadcms/richtext-lexical/html"),N=require("react-responsive"),G=i(require("../../helpers/ScrollLoadVideo.js"));const T=({defaultConverters:s})=>({...s,text:t=>{const{node:r}=t;return r.$&&r.$.color?`<span class="lexical-${r.$.color}">${r.text}</span>`:r.text}}),h=({children:s,spaceY:t,className:r})=>{const n=(0,N.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(Y.Container,{spaceY:t,className:(0,m.cn)("!bg-transparent",r),children:(0,e.jsxs)(c.Grid,{children:[!n&&(0,e.jsx)(c.GridItem,{span:1}),(0,e.jsx)(c.GridItem,{span:n?12:10,children:s}),!n&&(0,e.jsx)(c.GridItem,{span:1})]})})},pe=a.default.forwardRef(({children:s,id:t,components:r})=>{const n=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:n,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:s}),(0,e.jsx)(e.Fragment,{children:r?.map(o=>{switch(o.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(h,{spaceY:"none",children:(0,e.jsx)(q.default,{data:o,style:o?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(h,{spaceY:"none",children:(0,e.jsx)(F.default,{data:o,className:"w-full",style:o?.style})})});case"ipc-spacer":return(0,e.jsx)(I.default,{data:o,style:o?.style,className:"!bg-transparent"});default:return null}})})]})}),me=(0,a.forwardRef)(({className:s="",id:t,data:{title:r,videoTitle:n,mobVideo:o,mobImg:u,img:f,isYouTube:V,youtubePcId:k,youtubeMobileId:Q,video:v,theme:M,shape:O,components:W}})=>{const R=(0,a.useRef)(null),b=(0,a.useRef)(null),{ref:_,inView:d}=(0,P.useInView)(),[ye,A]=(0,a.useState)(0),[H,J]=(0,a.useState)(!1),[K,U]=(0,a.useState)(!1),X=(0,a.useRef)(null),Z=typeof r=="string"?r:r&&(0,x.convertLexicalToHTML)({data:r,converters:T});typeof n=="string"||n&&(0,x.convertLexicalToHTML)({data:n,converters:T});const[D,ee]=(0,a.useState)(0),[l,te]=(0,a.useState)(!1),z=(0,N.useMediaQuery)({query:"(max-width: 768px)"});(0,a.useEffect)(()=>{te(z)},[z]);const w=(0,L.debounce)(()=>{if(b.current){const g=b.current.getBoundingClientRect(),p=l?window.screen.height:window.innerHeight,re=window.scrollY||window.pageYOffset,se=g.bottom+re,E=document.documentElement.scrollHeight-se;ee(E>p?p:E),A(p)}},2e3);return(0,a.useEffect)(()=>{d&&!H&&(R.current?.play(),J(!0))},[d,H]),(0,a.useEffect)(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),(0,a.useEffect)(()=>{function g(){const p=l?window.screen.height:window.innerHeight;j.default.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${p*1.8}px bottom`,scrub:.2}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}d&&g()},[d]),(0,e.jsxs)("div",{className:"overflow-hidden",children:[(0,e.jsx)("div",{id:t,className:(0,m.cn)("relative z-20
|
|
1
|
+
"use strict";"use client";var ae=Object.create;var y=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var ne=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,le=Object.prototype.hasOwnProperty;var ce=(s,t)=>{for(var r in t)y(s,r,{get:t[r],enumerable:!0})},S=(s,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of ne(t))!le.call(s,o)&&o!==r&&y(s,o,{get:()=>t[o],enumerable:!(n=oe(t,o))||n.enumerable});return s};var i=(s,t,r)=>(r=s!=null?ae(ie(s)):{},S(t||!s||!s.__esModule?y(r,"default",{value:s,enumerable:!0}):r,s)),de=s=>S(y({},"__esModule",{value:!0}),s);var fe={};ce(fe,{default:()=>ue});module.exports=de(fe);var e=require("react/jsx-runtime"),a=i(require("react")),L=require("es-toolkit"),P=require("react-intersection-observer"),m=require("../../helpers/utils.js"),C=require("../../shared/Styles.js"),$=i(require("../Slogan/index.js")),B=require("../VideoModal/YouTubePlayer.js"),c=require("../../components/gird.js"),Y=require("../../components/container.js"),q=i(require("../BrandEquity/index.js")),F=i(require("../MemberEquity/index.js")),I=i(require("../Spacer/index.js")),j=i(require("gsap")),x=require("@payloadcms/richtext-lexical/html"),N=require("react-responsive"),G=i(require("../../helpers/ScrollLoadVideo.js"));const T=({defaultConverters:s})=>({...s,text:t=>{const{node:r}=t;return r.$&&r.$.color?`<span class="lexical-${r.$.color}">${r.text}</span>`:r.text}}),h=({children:s,spaceY:t,className:r})=>{const n=(0,N.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(Y.Container,{spaceY:t,className:(0,m.cn)("!bg-transparent",r),children:(0,e.jsxs)(c.Grid,{children:[!n&&(0,e.jsx)(c.GridItem,{span:1}),(0,e.jsx)(c.GridItem,{span:n?12:10,children:s}),!n&&(0,e.jsx)(c.GridItem,{span:1})]})})},pe=a.default.forwardRef(({children:s,id:t,components:r})=>{const n=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:n,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:s}),(0,e.jsx)(e.Fragment,{children:r?.map(o=>{switch(o.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(h,{spaceY:"none",children:(0,e.jsx)(q.default,{data:o,style:o?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(h,{spaceY:"none",children:(0,e.jsx)(F.default,{data:o,className:"w-full",style:o?.style})})});case"ipc-spacer":return(0,e.jsx)(I.default,{data:o,style:o?.style,className:"!bg-transparent"});default:return null}})})]})}),me=(0,a.forwardRef)(({className:s="",id:t,data:{title:r,videoTitle:n,mobVideo:o,mobImg:u,img:f,isYouTube:V,youtubePcId:k,youtubeMobileId:Q,video:v,theme:M,shape:O,components:W}})=>{const R=(0,a.useRef)(null),b=(0,a.useRef)(null),{ref:_,inView:d}=(0,P.useInView)(),[ye,A]=(0,a.useState)(0),[H,J]=(0,a.useState)(!1),[K,U]=(0,a.useState)(!1),X=(0,a.useRef)(null),Z=typeof r=="string"?r:r&&(0,x.convertLexicalToHTML)({data:r,converters:T});typeof n=="string"||n&&(0,x.convertLexicalToHTML)({data:n,converters:T});const[D,ee]=(0,a.useState)(0),[l,te]=(0,a.useState)(!1),z=(0,N.useMediaQuery)({query:"(max-width: 768px)"});(0,a.useEffect)(()=>{te(z)},[z]);const w=(0,L.debounce)(()=>{if(b.current){const g=b.current.getBoundingClientRect(),p=l?window.screen.height:window.innerHeight,re=window.scrollY||window.pageYOffset,se=g.bottom+re,E=document.documentElement.scrollHeight-se;ee(E>p?p:E),A(p)}},2e3);return(0,a.useEffect)(()=>{d&&!H&&(R.current?.play(),J(!0))},[d,H]),(0,a.useEffect)(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),(0,a.useEffect)(()=>{function g(){const p=l?window.screen.height:window.innerHeight;j.default.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${p*1.8}px bottom`,scrub:.2}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}d&&g()},[d]),(0,e.jsxs)("div",{className:"h-screen w-full overflow-hidden",children:[(0,e.jsx)("div",{id:t,className:(0,m.cn)("relative z-20 size-full",s,{"aiui-dark":M==="dark","rounded-box":O==="rounded"}),ref:X,children:(0,e.jsx)("div",{ref:_,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:(0,e.jsx)(h,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)($.default,{className:"sticky-title",data:{title:Z||"",theme:M}})})})}),(0,e.jsxs)("div",{ref:b,style:{marginBottom:`-${D}px`,zIndex:d?2:1},className:(0,m.cn)(t,"relative mt-[-200vh]"),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:[V?(0,e.jsx)(B.YouTubePlayer,{youTubeId:l&&Q||k}):v?.url&&(0,e.jsx)(G.default,{videoRef:R,poster:l&&u?.url?u?.url:f?.url,src:l&&o?.url?o?.url:v?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{U(!0)}}),f?.url&&(!v?.url||K)&&(0,e.jsx)("img",{src:l&&u?.url?u?.url:f?.url,alt:f?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(pe,{components:W}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});var ue=(0,C.withLayout)(me);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n ({\n className = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.2,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <div className=\"overflow-hidden\">\n <div\n id={id}\n className={cn('relative z-20
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n ({\n className = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.2,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <div className=\"h-screen w-full overflow-hidden\">\n <div\n id={id}\n className={cn('relative z-20 size-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2\"\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]')}\n >\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {isYouTube ? (\n <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n ) : (\n video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{ backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)' }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </div>\n )\n }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_react_intersection_observer", "import_utils", "import_Styles", "import_Slogan", "import_YouTubePlayer", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "import_ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "React", "id", "components", "mediaPlayerStickyRef", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "gsap", "Slogan", "ScrollLoadVideo"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as L,jsx as e,jsxs as d}from"react/jsx-runtime";import J,{useState as c,useRef as u,useEffect as f,forwardRef as K}from"react";import{debounce as U}from"es-toolkit";import{useInView as X}from"react-intersection-observer";import{cn as y}from"../../helpers/utils.js";import{withLayout as Z}from"../../shared/Styles.js";import D from"../Slogan/index.js";import{YouTubePlayer as ee}from"../VideoModal/YouTubePlayer.js";import{Grid as te,GridItem as h}from"../../components/gird.js";import{Container as re}from"../../components/container.js";import se from"../BrandEquity/index.js";import ae from"../MemberEquity/index.js";import oe from"../Spacer/index.js";import ne from"gsap";import{convertLexicalToHTML as E}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as S}from"react-responsive";import ie from"../../helpers/ScrollLoadVideo.js";const T=({defaultConverters:o})=>({...o,text:r=>{const{node:t}=r;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),x=({children:o,spaceY:r,className:t})=>{const s=S({query:"(max-width: 768px)"});return e(re,{spaceY:r,className:y("!bg-transparent",t),children:d(te,{children:[!s&&e(h,{span:1}),e(h,{span:s?12:10,children:o}),!s&&e(h,{span:1})]})})},le=J.forwardRef(({children:o,id:r,components:t})=>{const s=u(null);return d("div",{ref:s,className:"relative z-10",children:[e(L,{children:o}),e(L,{children:t?.map(a=>{switch(a.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(x,{spaceY:"none",children:e(se,{data:a,style:a?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(x,{spaceY:"none",children:e(ae,{data:a,className:"w-full",style:a?.style})})});case"ipc-spacer":return e(oe,{data:a,style:a?.style,className:"!bg-transparent"});default:return null}})})]})}),ce=K(({className:o="",id:r,data:{title:t,videoTitle:s,mobVideo:a,mobImg:p,img:m,isYouTube:P,youtubePcId:N,youtubeMobileId:C,video:v,theme:k,shape:$,components:B}})=>{const M=u(null),b=u(null),{ref:Y,inView:i}=X(),[de,q]=c(0),[R,F]=c(!1),[I,j]=c(!1),G=u(null),V=typeof t=="string"?t:t&&E({data:t,converters:T});typeof s=="string"||s&&E({data:s,converters:T});const[Q,O]=c(0),[n,W]=c(!1),H=S({query:"(max-width: 768px)"});f(()=>{W(H)},[H]);const w=U(()=>{if(b.current){const g=b.current.getBoundingClientRect(),l=n?window.screen.height:window.innerHeight,_=window.scrollY||window.pageYOffset,A=g.bottom+_,z=document.documentElement.scrollHeight-A;O(z>l?l:z),q(l)}},2e3);return f(()=>{i&&!R&&(M.current?.play(),F(!0))},[i,R]),f(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),f(()=>{function g(){const l=n?window.screen.height:window.innerHeight;ne.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${l*1.8}px bottom`,scrub:.2}}).from(`#${r} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${r} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}i&&g()},[i]),d("div",{className:"overflow-hidden",children:[e("div",{id:r,className:y("relative z-20
|
|
1
|
+
"use client";import{Fragment as L,jsx as e,jsxs as d}from"react/jsx-runtime";import J,{useState as c,useRef as u,useEffect as f,forwardRef as K}from"react";import{debounce as U}from"es-toolkit";import{useInView as X}from"react-intersection-observer";import{cn as y}from"../../helpers/utils.js";import{withLayout as Z}from"../../shared/Styles.js";import D from"../Slogan/index.js";import{YouTubePlayer as ee}from"../VideoModal/YouTubePlayer.js";import{Grid as te,GridItem as h}from"../../components/gird.js";import{Container as re}from"../../components/container.js";import se from"../BrandEquity/index.js";import ae from"../MemberEquity/index.js";import oe from"../Spacer/index.js";import ne from"gsap";import{convertLexicalToHTML as E}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as S}from"react-responsive";import ie from"../../helpers/ScrollLoadVideo.js";const T=({defaultConverters:o})=>({...o,text:r=>{const{node:t}=r;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),x=({children:o,spaceY:r,className:t})=>{const s=S({query:"(max-width: 768px)"});return e(re,{spaceY:r,className:y("!bg-transparent",t),children:d(te,{children:[!s&&e(h,{span:1}),e(h,{span:s?12:10,children:o}),!s&&e(h,{span:1})]})})},le=J.forwardRef(({children:o,id:r,components:t})=>{const s=u(null);return d("div",{ref:s,className:"relative z-10",children:[e(L,{children:o}),e(L,{children:t?.map(a=>{switch(a.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(x,{spaceY:"none",children:e(se,{data:a,style:a?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(x,{spaceY:"none",children:e(ae,{data:a,className:"w-full",style:a?.style})})});case"ipc-spacer":return e(oe,{data:a,style:a?.style,className:"!bg-transparent"});default:return null}})})]})}),ce=K(({className:o="",id:r,data:{title:t,videoTitle:s,mobVideo:a,mobImg:p,img:m,isYouTube:P,youtubePcId:N,youtubeMobileId:C,video:v,theme:k,shape:$,components:B}})=>{const M=u(null),b=u(null),{ref:Y,inView:i}=X(),[de,q]=c(0),[R,F]=c(!1),[I,j]=c(!1),G=u(null),V=typeof t=="string"?t:t&&E({data:t,converters:T});typeof s=="string"||s&&E({data:s,converters:T});const[Q,O]=c(0),[n,W]=c(!1),H=S({query:"(max-width: 768px)"});f(()=>{W(H)},[H]);const w=U(()=>{if(b.current){const g=b.current.getBoundingClientRect(),l=n?window.screen.height:window.innerHeight,_=window.scrollY||window.pageYOffset,A=g.bottom+_,z=document.documentElement.scrollHeight-A;O(z>l?l:z),q(l)}},2e3);return f(()=>{i&&!R&&(M.current?.play(),F(!0))},[i,R]),f(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),f(()=>{function g(){const l=n?window.screen.height:window.innerHeight;ne.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${l*1.8}px bottom`,scrub:.2}}).from(`#${r} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${r} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}i&&g()},[i]),d("div",{className:"h-screen w-full overflow-hidden",children:[e("div",{id:r,className:y("relative z-20 size-full",o,{"aiui-dark":k==="dark","rounded-box":$==="rounded"}),ref:G,children:e("div",{ref:Y,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:e(x,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(D,{className:"sticky-title",data:{title:V||"",theme:k}})})})}),d("div",{ref:b,style:{marginBottom:`-${Q}px`,zIndex:i?2:1},className:y(r,"relative mt-[-200vh]"),children:[e("div",{className:"sticky top-0 ",children:d("div",{className:y("media-cover","relative h-screen w-full"),children:[P?e(ee,{youTubeId:n&&C||N}):v?.url&&e(ie,{videoRef:M,poster:n&&p?.url?p?.url:m?.url,src:n&&a?.url?a?.url:v?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{j(!0)}}),m?.url&&(!v?.url||I)&&e("img",{src:n&&p?.url?p?.url:m?.url,alt:m?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)"}})]})}),e("div",{className:"relative h-screen w-full"}),e(le,{components:B}),e("div",{className:"relative h-screen w-full"})]})]})});var Ee=Z(ce);export{Ee as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n ({\n className = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.2,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <div className=\"overflow-hidden\">\n <div\n id={id}\n className={cn('relative z-20
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n ({\n className = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.2,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <div className=\"h-screen w-full overflow-hidden\">\n <div\n id={id}\n className={cn('relative z-20 size-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2\"\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]')}\n >\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {isYouTube ? (\n <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n ) : (\n video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{ backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)' }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </div>\n )\n }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|