@anker-in/headless-ui 1.3.21 → 1.3.22-alpha.1781754422536

package/dist/cjs/biz-components/MediaPlayerBase/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        titleAnimation = 'fade-in',\n        variant,\n        headline,\n        paragraphs,\n        metrics,\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const btnFadeInRef = useRef<HTMLButtonElement>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\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        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\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            gsap.set(bgRef.current, { opacity: progress })\n            if (btnFadeInRef.current) {\n              gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n            }\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    if (variant === 'text-layout') {\n      return (\n        <div\n          {...rest}\n          ref={titleRef}\n          className={cn(\n            'relative flex w-full items-center overflow-hidden',\n            'aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]',\n            'laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]',\n            {\n              'aiui-dark': theme === 'dark',\n              'rounded-box': shape === 'rounded',\n            },\n            className\n          )}\n        >\n          <div ref={inViewRef} className=\"pointer-events-none absolute inset-0\" />\n\n          {/* Video Background */}\n          <div className=\"absolute inset-0 z-0\">\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={video?.url!}\n              className=\"tablet:block hidden size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={mobileVideo?.url || video?.url!}\n              className=\"tablet:hidden block size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <div className=\"absolute inset-0 bg-black/30\" />\n          </div>\n\n          {/* Content */}\n          {/* Content \u2014 Fix#1/#9: laptop:flex-row, reduced spacing */}\n          <div\n            className={cn(\n              'relative z-10 mx-auto flex w-full max-w-[1920px] flex-col',\n              'gap-6 px-4 py-10',\n              'tablet:gap-8 tablet:px-8',\n              'laptop:flex-row laptop:gap-12 laptop:px-16',\n              'desktop:gap-16 desktop:px-20',\n              'lg-desktop:px-24'\n            )}\n          >\n            {/* 1. Headline */}\n            {/* 1. Headline \u2014 Fix#1(w-1/2) + Fix#5(Heading size=5) */}\n            <div className=\"laptop:w-1/2 w-full shrink-0\">\n              {headline && (\n                <Heading as=\"h2\" size={5} className=\"text-info-primary\">\n                  {headline}\n                </Heading>\n              )}\n            </div>\n\n            {/* Right column for paragraphs and metrics */}\n            {/* Right column \u2014 Fix#1(w-1/2) + Fix#4(justify-start) + Fix#10(gap) */}\n            <div\n              className={cn(\n                'laptop:w-1/2 flex w-full flex-col justify-start',\n                'tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6'\n              )}\n            >\n              {/* 2. Paragraphs */}\n              {paragraphs && paragraphs.length > 0 && (\n                <div className=\"tablet:gap-4 flex flex-col gap-3\">\n                  {paragraphs.map((p, i) => (\n                    <Text key={i} as=\"p\" size={3} className=\"text-info-primary lg-desktop:text-[18px] opacity-90\">\n                      {typeof p === 'string' ? p : p.text}\n                    </Text>\n                  ))}\n                </div>\n              )}\n\n              {/* 3. Metrics */}\n              {metrics && metrics.length > 0 && (\n                <div className={cn('tablet:grid-cols-3 grid grid-cols-2', 'tablet:gap-6 desktop:gap-8 gap-4')}>\n                  {metrics.map((m, i) => (\n                    <div key={i} className=\"flex flex-col gap-1\">\n                      {/* Fix#7: Heading size=4 equivalent classes on span */}\n                      <span className=\"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]\">\n                        {m.value}\n                      </span>\n                      {/* Fix#8: Text size=2 \u2192 14px, removed uppercase/tracking-wider */}\n                      <Text as=\"span\" size={2} className=\"text-info-primary opacity-80\">\n                        {m.label}\n                      </Text>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      )\n    }\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'pointer-events-none relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : { zIndex: 5 }\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && (\n                <div\n                  className={cn(\n                    'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n                    sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n                  )}\n                >\n                  {title_html && (\n                    <div\n                      ref={titleFadeInRef}\n                      className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      ref={btnFadeInRef}\n                      variant=\"link\"\n                      className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                    </Button>\n                  )}\n                </div>\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
-  "mappings": "ulBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IA0NU,IAAAI,EAAA,6BAzNVC,EAAsF,iBACtFC,GAAyB,kBACzBC,EAAmB,kCACnBC,GAA2B,kCAC3BC,EAAmB,0CACnBC,EAA8B,qCAC9BC,GAA2B,kCAC3BC,EAAqC,6CAGrCC,GAA0B,uCAE1BC,GAA4B,sCAC5BC,EAA4B,gDAC5BC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAGtB,OAAK,eAAe,gBAAe,WAAS,EAE5C,MAAMC,GAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,MAAkB,cACtB,CACE,CACE,UAAAC,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CACJ,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,IAAAC,EACA,MAAAC,EACA,eAAAC,EAAiB,UACjB,QAAAC,GACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,GAAGC,EACL,EACA,GAAGC,CACL,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIH,GACb,CAACI,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1C,CAACC,EAAKC,EAAM,KAAI,YAAS,CAAC,EAC1B,CAACC,GAAaC,EAAc,KAAI,YAAS,CAAC,EAC1C,CAACC,EAAqBC,EAAsB,KAAI,YAAS,CAAC,EAC1D,CAACC,EAASC,CAAU,KAAI,YAAkB,EAAK,EAE/CC,KAAW,UAAyB,IAAI,EACxCC,KAAQ,UAAyB,IAAI,EACrCC,KAAW,UAAuB,IAAI,EACtCC,KAAiB,UAAuB,IAAI,EAC5CC,KAAW,UAAuB,IAAI,EACtCC,KAAoB,UAAyB,IAAI,EACjDC,KAAe,UAA0B,IAAI,EAC7CC,KAAmB,UAA6B,IAAI,EACpDC,KAAmB,UAA6B,IAAI,EACpD,CAAE,IAAKC,GAAW,OAAAC,CAAO,KAAI,cAAU,KAE7C,uBAAoBtB,GAAK,IAAMc,EAAS,OAAyB,EAEjE,MAAMS,EACJ,OAAOvC,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,EAAO,WAAYR,EAAe,CAAC,EACzGgD,GACJ,OAAOvC,GAAe,SAClBA,EACAA,MAAc,wBAAqB,CAAE,KAAMA,EAAY,WAAYT,EAAe,CAAC,KAEzF,aAAU,IAAM,CACV8C,GACFV,EAAS,SAAS,KAAK,EACvBT,EAAa,EAAI,IAEjBS,EAAS,SAAS,MAAM,EACxBT,EAAa,EAAK,EAEtB,EAAG,CAACmB,CAAM,CAAC,EAEX,MAAMG,KAAwB,aAAS,IAAM,CAC3C,GAAIX,EAAS,QAAS,CACpB,MAAMY,EAAOZ,EAAS,QAAQ,sBAAsB,EAC9Ca,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CxB,GAAOyB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIhB,EAAS,QAAS,CACpB,MAAMR,EAAcQ,EAAS,QAAQ,aAC/Ba,EAAe,OAAO,YAC5BpB,GAAeD,EAAcqB,CAAY,CAC3C,CACF,EAAG,GAAG,KAEN,aAAU,KACRF,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,KAEL,aAAU,IAAM,CACd,SAASM,GAAa,CACpB,GAAI,CAAChB,EAAe,SAAWtB,IAAmB,UAAW,OAC7D,MAAMuC,EAASjB,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAI,YAAUF,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMkB,EAAQhB,EAAkB,QAAQ,MACxC,OAAK,IAAIgB,EAAO,CAAE,QAAS,CAAE,CAAC,EAC1Bf,EAAa,SAAS,OAAK,IAAIA,EAAa,QAAS,CAAE,QAAS,CAAE,CAAC,EACvEC,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASL,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQkB,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,IAAc,CACvB,MAAMC,EAAWD,GAAK,SAChBE,GAAQH,EAAM,OACdI,GAAW,EAAID,GACfE,GAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,IAAU,EAAIE,IAC3BI,GAAQL,IAAY,EAAIC,IAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACD,OAAK,IAAI9B,EAAM,QAAS,CAAE,QAASsB,CAAS,CAAC,EACzCjB,EAAa,SACf,OAAK,IAAIA,EAAa,QAAS,CAAE,QAASiB,GAAY,GAAM,EAAI,CAAE,CAAC,CAEvE,CACF,CAAC,CACH,CAEA,SAASS,GAAwB,CAC/BxB,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASN,EAAS,QAClB,MAAO,gBACP,IAAK,aAEL,MAAO,GACP,SAAWoB,GAAc,CACvB,MAAMC,EAAWD,EAAK,SACtBzB,GAAuB0B,CAAQ,CACjC,CACF,CAAC,CACH,CAEA,OAAIb,IACFS,EAAW,EACXa,EAAsB,GAGjB,IAAM,CACX3B,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DE,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAAC3B,EAAgB6B,CAAM,CAAC,KAE3B,gBAAYN,EAAU,CACpB,cAAAzC,GACA,cAAAD,GACA,eAAgBiD,CAClB,CAAC,EAED,MAAMsB,MAAc,WAAQ,IACtBvB,GAAUd,EAAsB,GAAKA,EAAsB,GAAY,EACvEc,EAAe,EACZ,EACN,CAACd,EAAqBc,CAAM,CAAC,EAEhC,GAAI5B,KAAY,cACd,SACE,QAAC,OACE,GAAGK,EACJ,IAAKe,EACL,aAAW,MACT,oDACA,4EACA,8FACA,uDACA,CACE,YAAaxB,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,oBAAC,OAAI,IAAKwC,GAAW,UAAU,uCAAuC,KAGtE,QAAC,OAAI,UAAU,uBACb,oBAAC,EAAAyB,QAAA,CACC,SAAUlC,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,yBACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,EAAA0D,QAAA,CACC,SAAUlC,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,yBACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OAAI,UAAU,+BAA+B,GAChD,KAIA,QAAC,OACC,aAAW,MACT,4DACA,mBACA,2BACA,6CACA,+BACA,kBACF,EAIA,oBAAC,OAAI,UAAU,+BACZ,SAAAO,MACC,OAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAU,oBACjC,SAAAA,EACH,EAEJ,KAIA,QAAC,OACC,aAAW,MACT,kDACA,iDACF,EAGC,UAAAC,GAAcA,EAAW,OAAS,MACjC,OAAC,OAAI,UAAU,mCACZ,SAAAA,EAAW,IAAI,CAACmD,EAAG,OAClB,OAAC,QAAa,GAAG,IAAI,KAAM,EAAG,UAAU,sDACrC,gBAAOA,GAAM,SAAWA,EAAIA,EAAE,MADtB,CAEX,CACD,EACH,EAIDlD,GAAWA,EAAQ,OAAS,MAC3B,OAAC,OAAI,aAAW,MAAG,sCAAuC,kCAAkC,EACzF,SAAAA,EAAQ,IAAI,CAACmD,EAAG,OACf,QAAC,OAAY,UAAU,sBAErB,oBAAC,QAAK,UAAU,oIACb,SAAAA,EAAE,MACL,KAEA,OAAC,QAAK,GAAG,OAAO,KAAM,EAAG,UAAU,+BAChC,SAAAA,EAAE,MACL,IARQ,CASV,CACD,EACH,GAEJ,GACF,GACF,EAIJ,MAAMC,EACJ,6NACF,SACE,oBACG,UAAAhD,MACC,OAAC,OACE,GAAGF,EACJ,IAAKe,EACL,aAAW,MACT,oCACAmC,EACA,CACE,YAAa3D,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,mBAAC,OAAI,IAAKwC,GACP,UAAC5B,MACA,QAAC,OAAI,UAAU,yGACZ,UAAA8B,GAAc,CAACrB,MACd,OAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQqB,CAAW,EAChD,EAEDC,IAAmBtB,MAClB,OAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQsB,EAAgB,EACrD,EAEDtC,MACC,OAAC,EAAAgE,QAAA,CACC,QAAQ,OACR,aAAW,MAAG,kDAAkD,EAChE,QAAS,IAAM,CACbvC,EAAW,EAAI,EAYf5B,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,KAEF,QAAC,OACE,GAAKe,EAAgB,CAAC,EAARF,EACf,MACEE,EACI,CACE,aAAc,IAAIG,CAAG,KACrB,UAAW,IAAIE,EAAW,KAC1B,OAAQuC,EACV,EACA,CAAE,OAAQ,CAAE,EAElB,aAAW,MAAG,WAAYhE,CAAS,EAEnC,oBAAC,OAAI,UAAU,gBACb,oBAAC,OACC,GAAIC,EACJ,aAAW,MAAG,2BAA4BmB,EAAS,kBAAoBgD,EAAQ,CAC7E,YAAa3D,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,cAClB,QAAC,OACC,aAAW,MACT,wFACAQ,EAAS,qDAAuD,cAClE,EAEC,UAAAsB,MACC,OAAC,OACC,IAAKR,EACL,UAAU,kHACV,wBAAyB,CAAE,OAAQQ,CAAW,EAChD,EAEDrC,MACC,OAAC,EAAAgE,QAAA,CACC,IAAKhC,EACL,QAAQ,OACR,aAAW,MAAG,2EAA2E,EACzF,QAAS,IAAM,CACbP,EAAW,EAAI,EACf5B,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EACH,GAEJ,KAEF,QAAC,OACC,UAAU,6DACV,MAAO,CAAE,OAAQ,GAAG,IAAMsB,EAAsB,GAAG,IAAK,EAExD,oBAAC,EAAAsC,QAAA,CACC,SAAUlC,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,EAAA0D,QAAA,CACC,SAAUlC,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OACC,IAAKyB,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,EACCZ,MACC,OAAC,OACC,aAAW,MAAGA,GAAU,iDAAkDgD,CAAM,EAChF,MAAOhD,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKY,EACP,GAEJ,EACCN,GAAWvB,MACV,OAAC,eAAW,QAASuB,EAAS,UAAWvB,EAAW,aAAc,IAAMwB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA/B,GAAgB,YAAc,kBAE9B,IAAOvB,MAAQ,eAAWuB,EAAe",
-  "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_components", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "variant", "headline", "paragraphs", "metrics", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "ScrollLoadVideo", "p", "m", "aspect", "Button"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        variant,\n        headline,\n        paragraphs,\n        metrics,\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const btnFadeInRef = useRef<HTMLButtonElement>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\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        if (!titleFadeInRef.current) return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\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            gsap.set(bgRef.current, { opacity: progress })\n            if (btnFadeInRef.current) {\n              gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n            }\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    if (variant === 'text-layout') {\n      return (\n        <div\n          {...rest}\n          ref={titleRef}\n          className={cn(\n            'relative flex w-full items-center overflow-hidden',\n            'aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]',\n            'laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]',\n            {\n              'aiui-dark': theme === 'dark',\n              'rounded-box': shape === 'rounded',\n            },\n            className\n          )}\n        >\n          <div ref={inViewRef} className=\"pointer-events-none absolute inset-0\" />\n\n          {/* Video Background */}\n          <div className=\"absolute inset-0 z-0\">\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={video?.url!}\n              className=\"tablet:block hidden size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={mobileVideo?.url || video?.url!}\n              className=\"tablet:hidden block size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <div className=\"absolute inset-0 bg-black/30\" />\n          </div>\n\n          {/* Content */}\n          {/* Content \u2014 Fix#1/#9: laptop:flex-row, reduced spacing */}\n          <div\n            className={cn(\n              'relative z-10 mx-auto flex w-full max-w-[1920px] flex-col',\n              'gap-6 px-4 py-10',\n              'tablet:gap-8 tablet:px-8',\n              'laptop:flex-row laptop:gap-12 laptop:px-16',\n              'desktop:gap-16 desktop:px-20',\n              'lg-desktop:px-24'\n            )}\n          >\n            {/* 1. Headline */}\n            {/* 1. Headline \u2014 Fix#1(w-1/2) + Fix#5(Heading size=5) */}\n            <div className=\"laptop:w-1/2 w-full shrink-0\">\n              {headline && (\n                <Heading as=\"h2\" size={5} className=\"text-info-primary\">\n                  {headline}\n                </Heading>\n              )}\n            </div>\n\n            {/* Right column for paragraphs and metrics */}\n            {/* Right column \u2014 Fix#1(w-1/2) + Fix#4(justify-start) + Fix#10(gap) */}\n            <div\n              className={cn(\n                'laptop:w-1/2 flex w-full flex-col justify-start',\n                'tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6'\n              )}\n            >\n              {/* 2. Paragraphs */}\n              {paragraphs && paragraphs.length > 0 && (\n                <div className=\"tablet:gap-4 flex flex-col gap-3\">\n                  {paragraphs.map((p, i) => (\n                    <Text key={i} as=\"p\" size={3} className=\"text-info-primary lg-desktop:text-[18px] opacity-90\">\n                      {typeof p === 'string' ? p : p.text}\n                    </Text>\n                  ))}\n                </div>\n              )}\n\n              {/* 3. Metrics */}\n              {metrics && metrics.length > 0 && (\n                <div className={cn('tablet:grid-cols-3 grid grid-cols-2', 'tablet:gap-6 desktop:gap-8 gap-4')}>\n                  {metrics.map((m, i) => (\n                    <div key={i} className=\"flex flex-col gap-1\">\n                      {/* Fix#7: Heading size=4 equivalent classes on span */}\n                      <span className=\"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]\">\n                        {m.value}\n                      </span>\n                      {/* Fix#8: Text size=2 \u2192 14px, removed uppercase/tracking-wider */}\n                      <Text as=\"span\" size={2} className=\"text-info-primary opacity-80\">\n                        {m.label}\n                      </Text>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      )\n    }\n\n    const aspect_box =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    const aspect_no_stickybox =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'pointer-events-none relative z-10',\n              aspect_box,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                )}\n                {videoTitle_html && isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {btnText && (\n                  <Button\n                    variant=\"link\"\n                    className={cn('member-equity-button-secondary text-info-primary')}\n                    onClick={() => {\n                      setVisible(true)\n                      // if (isPlaying) {\n                      //   if (videoRef.current) {\n                      //     videoRef.current.pause()\n                      //   }\n                      //   setIsPlaying(false)\n                      // } else {\n                      //   if (videoRef.current) {\n                      //     videoRef.current.play()\n                      //   }\n                      //   setIsPlaying(true)\n                      // }\n                      onBtnClick && onBtnClick?.()\n                    }}\n                  >\n                    {btnText}\n                    {/* <Right /> */}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : { zIndex: 5 }\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect_no_stickybox, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              <div className=\"media-cover relative left-0 top-0 h-screen w-screen overflow-hidden\">\n                {!sticky && (\n                  <div\n                    className={cn(\n                      'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n                      'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'\n                    )}\n                  >\n                    {title_html && !isPlaying && (\n                      <div\n                        className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                        dangerouslySetInnerHTML={{ __html: title_html }}\n                      />\n                    )}\n                    {videoTitle_html && isPlaying && (\n                      <div\n                        className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                        dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                      />\n                    )}\n                    {btnText && (\n                      <Button\n                        ref={btnFadeInRef}\n                        variant=\"link\"\n                        className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n                        onClick={() => {\n                          setVisible(true)\n                          onBtnClick && onBtnClick?.()\n                        }}\n                      >\n                        {btnText}\n                      </Button>\n                    )}\n                  </div>\n                )}\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'pointer-events-none relative box-content block', aspect_box)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_components", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "variant", "headline", "paragraphs", "metrics", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "ScrollLoadVideo", "p", "m", "aspect_box", "Button"]
 }

package/dist/cjs/biz-components/MediaPlayerMulti/index.d.ts

@@ -1,5 +1,5 @@
 import type { MediaPlayerMultiProps } from './types.js';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

package/dist/cjs/biz-components/MediaPlayerMulti/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var _=Object.create;var p=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of q(t))!A.call(e,s)&&s!==o&&p(e,s,{get:()=>t[s],enumerable:!(a=j(t,s))||a.enumerable});return e};var w=(e,t,o)=>(o=e!=null?_(Y(e)):{},g(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),F=e=>g(p({},"__esModule",{value:!0}),e);var K={};Z(K,{default:()=>J});module.exports=F(K);var l=require("react/jsx-runtime"),i=require("react"),n=require("../../helpers/utils.js"),M=require("../../shared/Styles.js"),r=require("../../components/index.js"),k=w(require("../Title/index.js")),P=w(require("../SwiperBox/index.js")),N=require("../../components/container.js"),L=require("../VideoModal/index.js"),T=require("@payloadcms/richtext-lexical/html"),I=require("../../hooks/useExposure.js"),C=require("../AiuiProvider/index.js"),V=require("../../shared/trackUrlRef.js");const d="video",c="media_player_multi",G=({data:e,configuration:t})=>{const o=(0,i.useRef)(null);return(0,I.useExposure)(o,{componentType:d,componentName:c,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.description}),(0,l.jsxs)("div",{ref:o,className:(0,n.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(r.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(t?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(r.Link,{asChild:!e?.href,href:(0,V.trackUrlRef)((0,n.getLocalizedPath)(e?.href||"",t?.locale||"us"),`${d}_${c}`),"data-headless-type-name":`${d}#${c}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,l.jsx)(r.Text,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},y=(0,i.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:a},className:s="",key:B,onVideoPlayBtnClick:$,...z},D)=>{const[f,u]=(0,i.useState)(!1),[E,x]=(0,i.useState)(""),[H,h]=(0,i.useState)(""),{locale:R="us"}=(0,C.useAiuiContext)(),v=typeof o=="string"?o:o&&(0,T.convertLexicalToHTML)({data:o}),S=(0,i.useRef)(null),b=e.length===2;return(0,l.jsxs)("div",{...z,ref:S,className:s,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(N.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:s,ref:D,children:[o&&(0,l.jsx)(k.default,{className:"mediaplayermulti-title",data:{title:v||""}}),(0,l.jsx)(P.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+B,data:{list:e,configuration:{shape:t,locale:R,onVideoPlayBtnClick:(U,m)=>{u(!0),m?.isYouTube?(h(m?.youtubeId||""),x("")):(x(m?.video?.url||""),h("")),$?.(U)},title:v}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:b?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),f&&(0,l.jsx)(L.VideoModal,{visible:f,youTubeId:H,videoUrl:E,onCloseModal:()=>u(!1)})]})});y.displayName="MediaPlayerMulti";var J=(0,M.withLayout)(y);
+"use strict";"use client";var S=Object.create;var n=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},w=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of q(t))!A.call(e,s)&&s!==o&&n(e,s,{get:()=>t[s],enumerable:!(r=U(t,s))||r.enumerable});return e};var y=(e,t,o)=>(o=e!=null?S(Y(e)):{},w(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),F=e=>w(n({},"__esModule",{value:!0}),e);var K={};Z(K,{default:()=>J});module.exports=F(K);var l=require("react/jsx-runtime"),i=require("react"),p=require("../../helpers/utils.js"),k=require("../../shared/Styles.js"),a=require("../../components/index.js"),P=y(require("../Title/index.js")),N=y(require("../SwiperBox/index.js")),L=require("../../components/container.js"),T=require("../VideoModal/index.js"),C=require("@payloadcms/richtext-lexical/html"),I=require("../../hooks/useExposure.js"),f=require("../AiuiProvider/index.js"),V=require("../../shared/trackUrlRef.js");const d="video",c="media_player_multi",G=({data:e,configuration:t})=>{const o=(0,i.useRef)(null),{trackingData:r}=(0,f.useAiuiContext)();return(0,I.useExposure)(o,{componentType:d,componentName:c,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.description}),(0,l.jsxs)("div",{ref:o,className:(0,p.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(a.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(a.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(t?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(a.Link,{asChild:!e?.href,href:(0,V.trackUrlRef)((0,p.getLocalizedPath)(e?.href||"",t?.locale||"us"),`${r?.contextHandle||""}_${d}_${c}`),"data-headless-type-name":`${d}#${c}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,l.jsx)(a.Text,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},M=(0,i.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:r},className:s="",key:B,onVideoPlayBtnClick:$,...D},z)=>{const[u,x]=(0,i.useState)(!1),[H,h]=(0,i.useState)(""),[_,v]=(0,i.useState)(""),{locale:j="us",trackingData:O}=(0,f.useAiuiContext)(),b=typeof o=="string"?o:o&&(0,C.convertLexicalToHTML)({data:o}),E=(0,i.useRef)(null),g=e.length===2;return(0,l.jsxs)("div",{...D,ref:E,className:s,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(L.Container,{...r||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:s,ref:z,children:[o&&(0,l.jsx)(P.default,{className:"mediaplayermulti-title",data:{title:b||""}}),(0,l.jsx)(N.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+B,data:{list:e,configuration:{shape:t,locale:j,onVideoPlayBtnClick:(R,m)=>{x(!0),m?.isYouTube?(v(m?.youtubeId||""),h("")):(h(m?.video?.url||""),v("")),$?.(R)},title:b}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:g?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:g?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),u&&(0,l.jsx)(T.VideoModal,{videoClassName:"object-contain",visible:u,youTubeId:_,videoUrl:H,onCloseModal:()=>x(!1)})]})});M.displayName="MediaPlayerMulti";var J=(0,k.withLayout)(M);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.description,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"tablet:block hidden size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <Picture\n          source={data.mobileImg?.url || data.img?.url}\n          alt={data.mobileImg?.alt || data.img?.alt || ''}\n          className=\"tablet:hidden block size-full\"\n          imgClassName=\"w-full h-full object-cover\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(data?.video?.url || data?.youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n              }}\n              className=\"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <Link\n              asChild={!data?.href}\n              href={trackUrlRef(\n                getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                `${componentType}_${componentName}`\n              )}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Text\n                html={data.quote}\n                weight=\"bold\"\n                className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n              />\n            </Link>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    {\n      data: { items = [], shape = 'square', title, containerProps },\n      className = '',\n      key,\n      onVideoPlayBtnClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const { locale = 'us' } = useAiuiContext()\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length === 2\n\n    return (\n      <div {...rest} ref={wrapperRef} className={className}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{\n                  list: items,\n                  configuration: {\n                    shape,\n                    locale,\n                    onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n                      setVisible(true)\n                      if (data?.isYouTube) {\n                        setYouTubeId(data?.youtubeId || '')\n                        setVideoUrl('')\n                      } else {\n                        setVideoUrl(data?.video?.url || '')\n                        setYouTubeId('')\n                      }\n                      onVideoPlayBtnClick?.(_)\n                    },\n                    title: title_html,\n                  },\n                }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.2,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        {visible && (\n          <VideoModal\n            visible={visible}\n            youTubeId={youTubeId}\n            videoUrl={videoUrl}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
-  "mappings": "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",
-  "names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_container", "import_VideoModal", "import_html", "import_useExposure", "import_AiuiProvider", "import_trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "ref", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "rest", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "title_html", "wrapperRef", "itemsLength", "Title", "SwiperBox", "_"]
+  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const { trackingData } = useAiuiContext()\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.description,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"tablet:block hidden size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <Picture\n          source={data.mobileImg?.url || data.img?.url}\n          alt={data.mobileImg?.alt || data.img?.alt || ''}\n          className=\"tablet:hidden block size-full\"\n          imgClassName=\"w-full h-full object-cover\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(data?.video?.url || data?.youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n              }}\n              className=\"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <Link\n              asChild={!data?.href}\n              href={trackUrlRef(\n                getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n              )}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Text\n                html={data.quote}\n                weight=\"bold\"\n                className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n              />\n            </Link>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    {\n      data: { items = [], shape = 'square', title, containerProps },\n      className = '',\n      key,\n      onVideoPlayBtnClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const { locale = 'us', trackingData } = useAiuiContext()\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length === 2\n\n    return (\n      <div {...rest} ref={wrapperRef} className={className}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{\n                  list: items,\n                  configuration: {\n                    shape,\n                    locale,\n                    onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n                      setVisible(true)\n                      if (data?.isYouTube) {\n                        setYouTubeId(data?.youtubeId || '')\n                        setVideoUrl('')\n                      } else {\n                        setVideoUrl(data?.video?.url || '')\n                        setYouTubeId('')\n                      }\n                      onVideoPlayBtnClick?.(_)\n                    },\n                    title: title_html,\n                  },\n                }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.2,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        {visible && (\n          <VideoModal\n            videoClassName=\"object-contain\"\n            visible={visible}\n            youTubeId={youTubeId}\n            videoUrl={videoUrl}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
+  "mappings": "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",
+  "names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_container", "import_VideoModal", "import_html", "import_useExposure", "import_AiuiProvider", "import_trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "ref", "trackingData", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "rest", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "title_html", "wrapperRef", "itemsLength", "Title", "SwiperBox", "_"]
 }

package/dist/cjs/biz-components/MediaPlayerSticky/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { MediaPlayerBaseProps } from './types.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<MediaPlayerBaseProps & React.RefAttributes<{
     mediaPlayerStickyRef: HTMLDivElement;
-}>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
+}>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../index.js").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

package/dist/cjs/biz-components/MediaPlayerSticky/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var ne=Object.create;var b=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var de=Object.getOwnPropertyNames;var pe=Object.getPrototypeOf,ue=Object.prototype.hasOwnProperty;var me=(r,s)=>{for(var t in s)b(r,t,{get:s[t],enumerable:!0})},z=(r,s,t,o)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of de(s))!ue.call(r,i)&&i!==t&&b(r,i,{get:()=>s[i],enumerable:!(o=ce(s,i))||o.enumerable});return r};var c=(r,s,t)=>(t=r!=null?ne(pe(r)):{},z(s||!r||!r.__esModule?b(t,"default",{value:r,enumerable:!0}):t,r)),fe=r=>z(b({},"__esModule",{value:!0}),r);var be={};me(be,{default:()=>ye});module.exports=fe(be);var e=require("react/jsx-runtime"),a=c(require("react")),L=require("es-toolkit"),B=require("react-intersection-observer"),f=require("../../helpers/utils.js"),Y=require("../../shared/Styles.js"),q=c(require("../Slogan/index.js")),F=require("../VideoModal/YouTubePlayer.js"),p=require("../../components/grid.js"),I=require("../../components/container.js"),j=c(require("../BrandEquity/index.js")),G=c(require("../MemberEquity/index.js")),V=c(require("../Spacer/index.js")),Q=c(require("gsap")),x=require("@payloadcms/richtext-lexical/html"),N=require("react-responsive"),O=c(require("../../helpers/ScrollLoadVideo.js"));const C=({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})=>{const o=(0,N.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(I.Container,{spaceY:s,className:(0,f.cn)("!bg-transparent",t),children:(0,e.jsxs)(p.Grid,{children:[!o&&(0,e.jsx)(p.GridItem,{span:1}),(0,e.jsx)(p.GridItem,{span:o?12:10,children:r}),!o&&(0,e.jsx)(p.GridItem,{span:1})]})})},E=a.default.forwardRef(({children:r,id:s,components:t},o)=>{const i=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:i,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)(j.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)(G.default,{data:l,className:"w-full",style:l?.style})})},`${l.blockType}-${n}`);case"ipc-spacer":return(0,e.jsx)(V.default,{data:l,style:l?.style,className:"!bg-transparent"},`${l.blockType}-${n}`);default:return null}})})]})});E.displayName="SubBox";const P=(0,a.forwardRef)(({className:r="",wrapperClassName:s="",id:t,data:{title:o,videoTitle:i,mobVideo:l,mobImg:n,img:y,isYouTube:W,youtubePcId:M,youtubeMobileId:_,video:v,theme:R,shape:A,components:J},...K},ve)=>{const H=(0,a.useRef)(null),g=(0,a.useRef)(null),{ref:U,inView:u}=(0,B.useInView)(),[ge,X]=(0,a.useState)(0),[T,Z]=(0,a.useState)(!1),[D,ee]=(0,a.useState)(!1),te=(0,a.useRef)(null),re=typeof o=="string"?o:o&&(0,x.convertLexicalToHTML)({data:o,converters:C});typeof i=="string"||i&&(0,x.convertLexicalToHTML)({data:i,converters:C});const[ae,se]=(0,a.useState)(0),[d,le]=(0,a.useState)(!1),S=(0,N.useMediaQuery)({query:"(max-width: 768px)"});return(0,a.useEffect)(()=>{le(S)},[S]),(0,a.useEffect)(()=>{u&&!T&&(H.current?.play(),Z(!0))},[u,T]),(0,a.useEffect)(()=>{const m=(0,L.debounce)(()=>{if(g.current){const w=g.current.getBoundingClientRect(),h=d?window.screen.height:window.innerHeight,oe=window.scrollY||window.pageYOffset,ie=w.bottom+oe,$=document.documentElement.scrollHeight-ie;se($>h?h:$),X(h)}},2e3);return m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m)}},[]),(0,a.useEffect)(()=>{function m(){const w=d?window.screen.height:window.innerHeight;Q.default.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${w*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},"<")}u&&m()},[u]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,...K,className:(0,f.cn)("relative z-20 h-screen w-full",r,{"aiui-dark":R==="dark","rounded-box":A==="rounded"}),ref:te,children:(0,e.jsx)("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:(0,e.jsx)(k,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(q.default,{className:"sticky-title antialiased",data:{title:re||"",theme:R,tag:"h2"}})})})}),(0,e.jsxs)("div",{ref:g,style:{marginBottom:`-${ae}px`,zIndex:u?2:1},className:(0,f.cn)(t,"relative mt-[-200vh]",s),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,f.cn)("media-cover","relative h-screen w-full"),children:[W?(0,e.jsx)(F.YouTubePlayer,{youTubeId:d&&_||M}):v?.url&&(0,e.jsx)(O.default,{videoRef:H,poster:d&&n?.url?n?.url:y?.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:()=>{ee(!0)}}),y?.url&&(!v?.url||D)&&(0,e.jsx)("img",{src:d&&n?.url?n?.url:y?.url,alt:y?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]",loading:"lazy"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(E,{components:J}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});P.displayName="MediaPlayerSticky";var ye=(0,Y.withLayout)(P);
+"use strict";"use client";var ie=Object.create;var b=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var me=(r,s)=>{for(var t in s)b(r,t,{get:s[t],enumerable:!0})},S=(r,s,t,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of ce(s))!pe.call(r,i)&&i!==t&&b(r,i,{get:()=>s[i],enumerable:!(l=ne(s,i))||l.enumerable});return r};var c=(r,s,t)=>(t=r!=null?ie(de(r)):{},S(s||!r||!r.__esModule?b(t,"default",{value:r,enumerable:!0}):t,r)),ue=r=>S(b({},"__esModule",{value:!0}),r);var ye={};me(ye,{default:()=>fe});module.exports=ue(ye);var e=require("react/jsx-runtime"),a=c(require("react")),L=require("es-toolkit"),B=require("react-intersection-observer"),f=require("../../helpers/utils.js"),Y=require("../../shared/Styles.js"),q=c(require("../Slogan/index.js")),I=require("../VideoModal/YouTubePlayer.js"),p=require("../../components/grid.js"),F=require("../../components/container.js"),j=c(require("../BrandEquity/index.js")),G=c(require("../MemberEquity/index.js")),V=c(require("../Spacer/index.js")),Q=c(require("gsap")),k=require("@payloadcms/richtext-lexical/html"),x=require("../../hooks/useIsomorphicMediaQuery.js"),O=c(require("../../helpers/ScrollLoadVideo.js"));const C=({defaultConverters:r})=>({...r,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),h=({children:r,spaceY:s,className:t})=>{const l=(0,x.useIsomorphicMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(F.Container,{spaceY:s,className:(0,f.cn)("!bg-transparent",t),children:(0,e.jsxs)(p.Grid,{children:[!l&&(0,e.jsx)(p.GridItem,{span:1}),(0,e.jsx)(p.GridItem,{span:l?12:10,children:r}),!l&&(0,e.jsx)(p.GridItem,{span:1})]})})},E=a.default.forwardRef(({children:r,id:s,components:t},l)=>{const i=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:i,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:r}),(0,e.jsx)(e.Fragment,{children:t?.map((o,n)=>{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)(j.default,{data:o,style:o?.style})})},`${o.blockType}-${n}`);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)(G.default,{data:o,className:"w-full",style:o?.style})})},`${o.blockType}-${n}`);case"ipc-spacer":return(0,e.jsx)(V.default,{data:o,style:o?.style,className:"!bg-transparent"},`${o.blockType}-${n}`);default:return null}})})]})});E.displayName="SubBox";const P=(0,a.forwardRef)(({className:r="",wrapperClassName:s="",id:t,data:{title:l,videoTitle:i,mobVideo:o,mobImg:n,img:y,isYouTube:W,youtubePcId:N,youtubeMobileId:_,video:v,theme:M,shape:A,components:J},...K},be)=>{const R=(0,a.useRef)(null),w=(0,a.useRef)(null),{ref:U,inView:m}=(0,B.useInView)(),[T,X]=(0,a.useState)(!1),[Z,D]=(0,a.useState)(!1),ee=(0,a.useRef)(null),te=typeof l=="string"?l:l&&(0,k.convertLexicalToHTML)({data:l,converters:C});typeof i=="string"||i&&(0,k.convertLexicalToHTML)({data:i,converters:C});const[re,ae]=(0,a.useState)(0),[d,se]=(0,a.useState)(!1),$=(0,x.useIsomorphicMediaQuery)({query:"(max-width: 768px)"});return(0,a.useEffect)(()=>{se($)},[$]),(0,a.useEffect)(()=>{m&&!T&&(R.current?.play(),X(!0))},[m,T]),(0,a.useEffect)(()=>{const u=(0,L.debounce)(()=>{if(w.current){const g=w.current.getBoundingClientRect(),z=d?window.screen.height:window.innerHeight,oe=window.scrollY||window.pageYOffset,le=g.bottom+oe,H=document.documentElement.scrollHeight-le;ae(H>z?z:H)}},2e3);return u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}},[]),(0,a.useEffect)(()=>{function u(){const g=d?window.screen.height:window.innerHeight;Q.default.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${g*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},"<")}m&&u()},[m]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,...K,className:(0,f.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: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:(0,e.jsx)(h,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(q.default,{className:"sticky-title antialiased",data:{title:te||"",theme:M,tag:"h2"}})})})}),(0,e.jsxs)("div",{ref:w,style:{marginBottom:`-${re}px`,zIndex:m?2:1},className:(0,f.cn)(t,"relative mt-[-200vh]",s),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,f.cn)("media-cover","relative h-screen w-full"),children:[W?(0,e.jsx)(I.YouTubePlayer,{youTubeId:d&&_||N}):v?.url&&(0,e.jsx)(O.default,{videoRef:R,poster:d&&n?.url?n?.url:y?.url,src:d&&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,autoplay:!1,onEnded:()=>{D(!0)}}),y?.url&&(!v?.url||Z)&&(0,e.jsx)("img",{src:d&&n?.url?n?.url:y?.url,alt:y?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]",loading:"lazy"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(E,{components:J}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});P.displayName="MediaPlayerSticky";var fe=(0,Y.withLayout)(P);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "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  ({\n    ...defaultConverters,\n    text: (args: any) => {\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  }) as any\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any, 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      ...rest\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    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\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      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          {...rest}\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, tag: 'h2' }} />\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"],
-  "mappings": "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",
-  "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", "isMobile", "SubBox", "React", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "index", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "rest", "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"]
+  "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 { useIsomorphicMediaQuery } from '../../hooks/useIsomorphicMediaQuery.js'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) =>\n  ({\n    ...defaultConverters,\n    text: (args: any) => {\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  }) as any\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useIsomorphicMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any, 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      ...rest\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\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 = useIsomorphicMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\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        }\n      }, 2000)\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          {...rest}\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, tag: 'h2' }} />\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"],
+  "mappings": "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",
+  "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_useIsomorphicMediaQuery", "import_ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "React", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "index", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "rest", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "gsap", "Slogan", "ScrollLoadVideo"]
 }

package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts

@@ -1,6 +1,6 @@
 import type { MediaSceneSwitcherProps } from './types.js';
 import 'swiper/css';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaSceneSwitcherProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaSceneSwitcherProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js

@@ -1,4 +1,4 @@
-"use strict";"use client";var U=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var V=(t,s)=>{for(var a in s)U(t,a,{get:s[a],enumerable:!0})},_=(t,s,a,m)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of R(s))!H.call(t,i)&&i!==a&&U(t,i,{get:()=>s[i],enumerable:!(m=j(s,i))||m.enumerable});return t};var q=t=>_(U({},"__esModule",{value:!0}),t);var G={};V(G,{default:()=>Q});module.exports=q(G);var e=require("react/jsx-runtime"),o=require("react"),D=require("react-responsive"),d=require("../../helpers/utils.js"),C=require("../../shared/Styles.js"),r=require("../../components/index.js"),f=require("../../hooks/useExposure.js"),w=require("swiper/react"),F=require("swiper/modules"),Y=require("swiper/css");const S="media",A="media_scene_switcher",v=3e3,$=({data:t,configuration:s,theme:a})=>{const m=(0,o.useRef)(null),i=s?.isActive||!1;return(0,f.useExposure)(m,{componentType:S,componentName:A,componentTitle:t?.title,position:(s?.index??0)+1}),(0,e.jsxs)("div",{ref:m,className:(0,d.cn)("media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors","relative text-[#6D6D6F]",i?"opacity-100":"opacity-60",{"bg-[#1D1D1F] text-white":i,"bg-[#EAEAEC] text-[1D1D1F]":i&&a==="light"}),onClick:()=>s?.onItemClick?.(s?.index??0),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"media-scene-switcher-item-title flex-1",children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.title})}),t?.description&&i&&(0,e.jsx)(r.Text,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 text-sm font-bold",html:t.description})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]",a==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":a==="dark"&&i}),children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full",{"media-scene-switcher-progress-active":i}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:i?`progress-bar ${v}ms ease-out`:"none"}})]})},O=({data:t,configuration:s,theme:a})=>{const m=(0,o.useRef)(null),i=s?.isActive||!1,p=(0,D.useMediaQuery)({query:"(max-width: 768px)"});(0,f.useExposure)(m,{componentType:S,componentName:A,componentTitle:t?.title,position:(s?.index??0)+1});const n=p&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,x=p&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,b=x||t?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)("div",{ref:m,className:(0,d.cn)("media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] max-w-full flex-col overflow-hidden",{"aiui-dark":a==="dark"}),children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden",children:n?(0,e.jsx)("video",{src:n,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:b,className:"size-full object-cover"}):x?(0,e.jsx)(r.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:x,alt:t?.title||""}):null}),(0,e.jsxs)("div",{className:(0,d.cn)("media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]","text-[#6D6D6F]",{"bg-[#1D1D1F] text-white":i,"bg-[#EAEAEC] text-[1D1D1F]":i&&a==="light"}),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1",children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.title})}),t?.description&&i&&(0,e.jsx)(r.Text,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 line-clamp-3 text-sm font-bold",html:t.description})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]",a==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":a==="dark"&&i}),children:(0,e.jsx)(r.Heading,{as:"h6",size:1,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":i}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:i?`progress-bar ${v}ms ease-out`:"none"}})]})},M=(0,o.forwardRef)(({className:t="",data:s,id:a},m)=>{const{title:i,subtitle:p,items:n=[],theme:x="light",layout:b,titleIcon:u}=s||{},[g,N]=(0,o.useState)(0),[T,B]=(0,o.useState)(0),k=(0,o.useRef)(null),h=(0,o.useRef)(0),z=(0,D.useMediaQuery)({query:"(max-width: 1023px)"});(0,o.useImperativeHandle)(m,()=>k.current),(0,f.useExposure)(k,{componentType:S,componentName:A,componentTitle:i}),(0,o.useEffect)(()=>{if(!(z||n.length===0))return h.current=window.setInterval(()=>{N(l=>(l+1)%n.length)},v),()=>{h.current&&window.clearInterval(h.current)}},[z,n.length]);const P=l=>{N(l),h.current&&window.clearInterval(h.current),h.current=window.setInterval(()=>{N(c=>(c+1)%n.length)},v)},y=n[g],J=y?.videoUrl?.url,W=y?.imageUrl?.url||y?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{children:`
+"use strict";"use client";var U=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var V=(t,s)=>{for(var o in s)U(t,o,{get:s[o],enumerable:!0})},_=(t,s,o,m)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of R(s))!H.call(t,i)&&i!==o&&U(t,i,{get:()=>s[i],enumerable:!(m=j(s,i))||m.enumerable});return t};var q=t=>_(U({},"__esModule",{value:!0}),t);var G={};V(G,{default:()=>Q});module.exports=q(G);var e=require("react/jsx-runtime"),a=require("react"),D=require("../../hooks/useIsomorphicMediaQuery.js"),d=require("../../helpers/utils.js"),C=require("../../shared/Styles.js"),r=require("../../components/index.js"),f=require("../../hooks/useExposure.js"),w=require("swiper/react"),F=require("swiper/modules"),Y=require("swiper/css");const S="media",A="media_scene_switcher",v=3e3,$=({data:t,configuration:s,theme:o})=>{const m=(0,a.useRef)(null),i=s?.isActive||!1;return(0,f.useExposure)(m,{componentType:S,componentName:A,componentTitle:t?.title,position:(s?.index??0)+1}),(0,e.jsxs)("div",{ref:m,className:(0,d.cn)("media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors","relative text-[#6D6D6F]",i?"opacity-100":"opacity-60",{"bg-[#1D1D1F] text-white":i,"bg-[#EAEAEC] text-[1D1D1F]":i&&o==="light"}),onClick:()=>s?.onItemClick?.(s?.index??0),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"media-scene-switcher-item-title flex-1",children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.title})}),t?.description&&i&&(0,e.jsx)(r.Text,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 text-sm font-bold",html:t.description})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]",o==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":o==="dark"&&i}),children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full",{"media-scene-switcher-progress-active":i}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:i?`progress-bar ${v}ms ease-out`:"none"}})]})},O=({data:t,configuration:s,theme:o})=>{const m=(0,a.useRef)(null),i=s?.isActive||!1,p=(0,D.useIsomorphicMediaQuery)({query:"(max-width: 768px)"});(0,f.useExposure)(m,{componentType:S,componentName:A,componentTitle:t?.title,position:(s?.index??0)+1});const n=p&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,x=p&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,b=x||t?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)("div",{ref:m,className:(0,d.cn)("media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] max-w-full flex-col overflow-hidden",{"aiui-dark":o==="dark"}),children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden",children:n?(0,e.jsx)("video",{src:n,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:b,className:"size-full object-cover"}):x?(0,e.jsx)(r.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:x,alt:t?.title||""}):null}),(0,e.jsxs)("div",{className:(0,d.cn)("media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]","text-[#6D6D6F]",{"bg-[#1D1D1F] text-white":i,"bg-[#EAEAEC] text-[1D1D1F]":i&&o==="light"}),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1",children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.title})}),t?.description&&i&&(0,e.jsx)(r.Text,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 line-clamp-3 text-sm font-bold",html:t.description})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]",o==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":o==="dark"&&i}),children:(0,e.jsx)(r.Heading,{as:"h6",size:1,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":i}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:i?`progress-bar ${v}ms ease-out`:"none"}})]})},M=(0,a.forwardRef)(({className:t="",data:s,id:o},m)=>{const{title:i,subtitle:p,items:n=[],theme:x="light",layout:b,titleIcon:u}=s||{},[g,N]=(0,a.useState)(0),[T,B]=(0,a.useState)(0),k=(0,a.useRef)(null),h=(0,a.useRef)(0),z=(0,D.useIsomorphicMediaQuery)({query:"(max-width: 1023px)"});(0,a.useImperativeHandle)(m,()=>k.current),(0,f.useExposure)(k,{componentType:S,componentName:A,componentTitle:i}),(0,a.useEffect)(()=>{if(!(z||n.length===0))return h.current=window.setInterval(()=>{N(l=>(l+1)%n.length)},v),()=>{h.current&&window.clearInterval(h.current)}},[z,n.length]);const P=l=>{N(l),h.current&&window.clearInterval(h.current),h.current=window.setInterval(()=>{N(c=>(c+1)%n.length)},v)},y=n[g],J=y?.videoUrl?.url,W=y?.imageUrl?.url||y?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{children:`
           @keyframes progress-bar {
             from {
               transform: translate3d(-100%, 0, 0);
@@ -7,5 +7,5 @@
               transform: translate3d(0, 0, 0);
             }
           }
-        `}),(0,e.jsxs)("section",{id:a,ref:k,className:(0,d.cn)("media-scene-switcher text-info-primary w-full",{"aiui-dark":x==="dark"},t),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",{"order-1":b==="right"}),children:n.map((l,c)=>{const E=l?.videoUrl?.url,I=l?.imageUrl?.url,L=I||l?.videoUrl?.thumbnailURL||"";return(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":c===g}),children:E?(0,e.jsx)("video",{src:E,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:L,className:"size-full object-cover"}):I?(0,e.jsx)(r.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:I,alt:l?.title||""}):null},l.id||c)})}),(0,e.jsxs)("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-header flex flex-col",children:[(0,e.jsxs)("div",{className:"desktop:gap-2 flex items-center gap-1",children:[i&&(0,e.jsx)(r.Heading,{as:"h3",html:i,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),u&&(0,e.jsx)(r.Picture,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),p&&(0,e.jsx)(r.Text,{as:"span",size:4,html:p,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:n.map((l,c)=>(0,e.jsx)($,{data:l,configuration:{index:c,isActive:c===g,onItemClick:P},theme:x},l.id||c))})]})]}),(0,e.jsxs)("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-mobile-header",children:[(0,e.jsxs)("div",{className:"desktop:gap-2 flex items-center gap-1",children:[i&&(0,e.jsx)(r.Heading,{as:"h2",html:i,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]"}),u&&(0,e.jsx)(r.Picture,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),p&&(0,e.jsx)(r.Text,{as:"span",size:4,html:p,className:"media-scene-switcher-subtitle text-[14px]"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:(0,e.jsx)(w.Swiper,{onSlideChange:l=>B(l.realIndex),initialSlide:0,modules:[F.Autoplay],loop:n.length>1,autoplay:n.length>1?{delay:v,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:n.map((l,c)=>(0,e.jsx)(w.SwiperSlide,{className:"!h-auto !w-[296px] max-w-full",children:(0,e.jsx)(O,{data:l,configuration:{index:c,isActive:c===T},theme:x})},l.id||c))})})]})]})]})});M.displayName="MediaSceneSwitcher";var Q=(0,C.withLayout)(M,{style:"overflow: hidden;"});
+        `}),(0,e.jsxs)("section",{id:o,ref:k,className:(0,d.cn)("media-scene-switcher text-info-primary w-full",{"aiui-dark":x==="dark"},t),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",{"order-1":b==="right"}),children:n.map((l,c)=>{const E=l?.videoUrl?.url,I=l?.imageUrl?.url,L=I||l?.videoUrl?.thumbnailURL||"";return(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":c===g}),children:E?(0,e.jsx)("video",{src:E,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:L,className:"size-full object-cover"}):I?(0,e.jsx)(r.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:I,alt:l?.title||""}):null},l.id||c)})}),(0,e.jsxs)("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-header flex flex-col",children:[(0,e.jsxs)("div",{className:"desktop:gap-2 flex items-center gap-1",children:[i&&(0,e.jsx)(r.Heading,{as:"h3",html:i,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),u&&(0,e.jsx)(r.Picture,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),p&&(0,e.jsx)(r.Text,{as:"span",size:4,html:p,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:n.map((l,c)=>(0,e.jsx)($,{data:l,configuration:{index:c,isActive:c===g,onItemClick:P},theme:x},l.id||c))})]})]}),(0,e.jsxs)("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-mobile-header",children:[(0,e.jsxs)("div",{className:"desktop:gap-2 flex items-center gap-1",children:[i&&(0,e.jsx)(r.Heading,{as:"h2",html:i,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]"}),u&&(0,e.jsx)(r.Picture,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),p&&(0,e.jsx)(r.Text,{as:"span",size:4,html:p,className:"media-scene-switcher-subtitle text-[14px]"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:(0,e.jsx)(w.Swiper,{onSlideChange:l=>B(l.realIndex),initialSlide:0,modules:[F.Autoplay],loop:n.length>1,autoplay:n.length>1?{delay:v,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:n.map((l,c)=>(0,e.jsx)(w.SwiperSlide,{className:"!h-auto !w-[296px] max-w-full",children:(0,e.jsx)(O,{data:l,configuration:{index:c,isActive:c===T},theme:x})},l.id||c))})})]})]})]})});M.displayName="MediaSceneSwitcher";var Q=(0,C.withLayout)(M,{style:"overflow: hidden;"});
 //# sourceMappingURL=MediaSceneSwitcher.js.map