npm - @anker-in/headless-ui - Versions diffs - 1.1.17-alpha.1765976123730 → 1.1.17-alpha.1766030104268 - Mend

@anker-in/headless-ui 1.1.17-alpha.1765976123730 → 1.1.17-alpha.1766030104268

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (280) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.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\nif (typeof window !== 'undefined') {\n  gsap.registerPlugin(ScrollTrigger, SplitText)\n}\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n  TEXT_START_OFFSET: '10%',\n  TEXT_ANIMATION_MULTIPLIER: 1.5,\n  TEXT_ANIMATION_OFFSET: 80,\n  VIDEO_HEIGHT_BASE: 102,\n  OVERLAP_FACTOR: 0.5,\n  VIDEO_PROGRESS_THRESHOLD: 0.9,\n  HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\n\nconst SMOOTHING_CONFIG = {\n  DAMPING: 0.18,\n  EPSILON: 0.5,\n} as const\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\ninterface ScrollTriggerInstance {\n  progress: number\n  kill: () => void\n  refresh: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n    },\n    ref\n  ) => {\n    const { sticky } = rest\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<HTMLDivElement>(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 scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n    const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n    const layoutTargetsRef = useRef({ btb: 0, titleHeight: 0 })\n    const layoutInitializedRef = useRef(false)\n    const stickyWrapperRef = useRef<HTMLDivElement>(null)\n    const videoContainerRef = useRef<HTMLDivElement>(null)\n    const videoPinTriggerRef = useRef<ScrollTriggerInstance | 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    // \u89C6\u9891\u64AD\u653E\u63A7\u5236\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    // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n    useEffect(() => {\n      if (!titleRef.current || !sticky) return\n\n      // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n      const calculateLayout = () => {\n        if (!titleRef.current) return\n\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\n        const inViewRefToBottom = screenHeight - rect.bottom\n        const newBtb = inViewRefToBottom > screenHeight ? screenHeight : inViewRefToBottom\n        const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n        layoutTargetsRef.current.btb = newBtb\n        layoutTargetsRef.current.titleHeight = newTitleHeight\n\n        if (!layoutInitializedRef.current) {\n          layoutInitializedRef.current = true\n          setbtb(newBtb)\n          setTitleHeight(newTitleHeight)\n        }\n      }\n\n      // \u521D\u59CB\u8BA1\u7B97\n      calculateLayout()\n\n      // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n      const resizeObserver = new ResizeObserver(() => {\n        // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n        requestAnimationFrame(() => {\n          calculateLayout()\n        })\n      })\n\n      resizeObserver.observe(titleRef.current)\n\n      // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n      let scrollFrame: number | null = null\n      const handleScroll = () => {\n        if (scrollFrame !== null) return\n        scrollFrame = requestAnimationFrame(() => {\n          calculateLayout()\n          scrollFrame = null\n        })\n      }\n\n      window.addEventListener('scroll', handleScroll, { passive: true })\n\n      return () => {\n        resizeObserver.disconnect()\n        window.removeEventListener('scroll', handleScroll)\n        if (scrollFrame !== null) {\n          cancelAnimationFrame(scrollFrame)\n        }\n        layoutInitializedRef.current = false\n      }\n    }, [sticky])\n\n    useEffect(() => {\n      if (!sticky) return\n\n      let rafId: number\n      const smoothAnimate = () => {\n        setbtb(prev => {\n          const target = layoutTargetsRef.current.btb\n          const delta = target - prev\n          if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n          return prev + delta * SMOOTHING_CONFIG.DAMPING\n        })\n\n        setTitleHeight(prev => {\n          const target = layoutTargetsRef.current.titleHeight\n          const delta = target - prev\n          if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n          return prev + delta * SMOOTHING_CONFIG.DAMPING\n        })\n\n        rafId = requestAnimationFrame(smoothAnimate)\n      }\n\n      rafId = requestAnimationFrame(smoothAnimate)\n\n      return () => {\n        cancelAnimationFrame(rafId)\n      }\n    }, [sticky])\n\n    // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n    useEffect(() => {\n      if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n      const titleElement = titleFadeInRef.current\n      const height = titleElement.clientHeight || 80\n\n      // \u5206\u8BCD\n      splitTextInstance.current = new SplitText(titleElement, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n\n      const words = splitTextInstance.current.words\n      const total = words.length\n      const interval = 1 / total\n\n      // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n      const wordAnimations = words.map((_, i) => {\n        const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n        const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n        return { start, width }\n      })\n\n      // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n      gsap.set(words, { opacity: 0 })\n\n      // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n        end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n        scrub: true,\n        onUpdate: self => {\n          const progress = self.progress\n\n          // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n          words.forEach((word, i) => {\n            const { start, width } = wordAnimations[i]\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n\n          // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n          if (bgRef.current) {\n            gsap.set(bgRef.current, { opacity: progress })\n          }\n        },\n      }) as ScrollTriggerInstance\n\n      return () => {\n        splitTextInstance.current?.revert()\n        scrollTriggerRef.current?.kill()\n      }\n    }, [titleAnimation, inView])\n\n    // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n    useEffect(() => {\n      if (!inView || !titleRef.current) return\n\n      heightTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: self => {\n          setVideoHeightProgress(self.progress)\n        },\n      }) as ScrollTriggerInstance\n\n      return () => {\n        heightTriggerRef.current?.kill()\n      }\n    }, [inView])\n\n    // \u66DD\u5149\u57CB\u70B9\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\n\n    // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    useEffect(() => {\n      if (!sticky || !stickyWrapperRef.current || !videoContainerRef.current || !trackRef.current) return\n\n      videoPinTriggerRef.current = ScrollTrigger.create({\n        trigger: stickyWrapperRef.current,\n        start: 'top top',\n        endTrigger: trackRef.current,\n        end: 'bottom top',\n        pin: videoContainerRef.current,\n        pinSpacing: false,\n        anticipatePin: 1,\n        invalidateOnRefresh: true,\n      }) as ScrollTriggerInstance\n\n      requestAnimationFrame(() => {\n        videoPinTriggerRef.current?.refresh()\n      })\n\n      return () => {\n        videoPinTriggerRef.current?.kill()\n        videoPinTriggerRef.current = null\n      }\n    }, [sticky])\n\n    // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n    const handleBtnClick = useCallback(() => {\n      setVisible(true)\n      onBtnClick?.()\n    }, [onBtnClick])\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\n    // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n    if (!sticky) {\n      return (\n        <>\n          <div\n            id={id}\n            className={cn(\n              'relative overflow-hidden',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {/* \u5185\u5BB9\u5C42 */}\n              {!titleAnimation && (\n                <div className=\"media-content text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n                      {btnText}\n                    </Button>\n                  )}\n                </div>\n              )}\n\n              {/* \u89C6\u9891\u5C42 */}\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\n            {/* \u57CB\u70B9\u5143\u7D20 */}\n            <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n          </div>\n\n          {visible && youtubeId && (\n            <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n          )}\n        </>\n      )\n    }\n\n    // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n    return (\n      <>\n        <div\n          ref={titleRef}\n          className={cn(\n            '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 text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {btnText && (\n                  <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n                    {btnText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n        <div\n          style={{\n            marginBottom: `-${btb}px`,\n            marginTop: `-${titleHeight}px`,\n            zIndex: zIndexVideo,\n          }}\n          className=\"relative\"\n        >\n          <div className=\"sticky top-0\" ref={stickyWrapperRef}>\n            <div\n              id={id}\n              className={cn('relative h-screen w-full overflow-hidden', {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div\n                  ref={titleFadeInRef}\n                  className=\"lg-desktop:text-[64px]  absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                  dangerouslySetInnerHTML={{ __html: title_html }}\n                />\n              )}\n              <div className=\"media-cover absolute left-0 top-0 size-full\" ref={videoContainerRef}>\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={false}\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={false}\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          <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\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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",
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.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\nif (typeof window !== 'undefined') {\n  gsap.registerPlugin(ScrollTrigger, SplitText)\n}\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n  TEXT_START_OFFSET: '10%',\n  TEXT_ANIMATION_MULTIPLIER: 1.5,\n  TEXT_ANIMATION_OFFSET: 80,\n  VIDEO_HEIGHT_BASE: 102,\n  OVERLAP_FACTOR: 0.5,\n  VIDEO_PROGRESS_THRESHOLD: 0.9,\n  HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\n\nconst SMOOTHING_CONFIG = {\n  DAMPING: 0.18,\n  EPSILON: 0.5,\n} as const\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\ninterface ScrollTriggerInstance {\n  progress: number\n  kill: () => void\n  refresh: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n    },\n    ref\n  ) => {\n    const { sticky } = rest\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<HTMLDivElement>(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 scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n    const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n    const layoutTargetsRef = useRef({ btb: 0, titleHeight: 0 })\n    const layoutInitializedRef = useRef(false)\n    const stickyWrapperRef = useRef<HTMLDivElement>(null)\n    const videoContainerRef = useRef<HTMLDivElement>(null)\n    const videoPinTriggerRef = useRef<ScrollTriggerInstance | 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    // \u89C6\u9891\u64AD\u653E\u63A7\u5236\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    // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n    useEffect(() => {\n      if (!titleRef.current || !sticky) return\n\n      // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n      const calculateLayout = () => {\n        if (!titleRef.current) return\n\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\n        const inViewRefToBottom = screenHeight - rect.bottom\n        const newBtb = inViewRefToBottom > screenHeight ? screenHeight : inViewRefToBottom\n        const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n        layoutTargetsRef.current.btb = newBtb\n        layoutTargetsRef.current.titleHeight = newTitleHeight\n\n        if (!layoutInitializedRef.current) {\n          layoutInitializedRef.current = true\n          setbtb(newBtb)\n          setTitleHeight(newTitleHeight)\n        }\n      }\n\n      // \u521D\u59CB\u8BA1\u7B97\n      calculateLayout()\n\n      // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n      const resizeObserver = new ResizeObserver(() => {\n        // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n        requestAnimationFrame(() => {\n          calculateLayout()\n        })\n      })\n\n      resizeObserver.observe(titleRef.current)\n\n      // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n      let scrollFrame: number | null = null\n      const handleScroll = () => {\n        if (scrollFrame !== null) return\n        scrollFrame = requestAnimationFrame(() => {\n          calculateLayout()\n          scrollFrame = null\n        })\n      }\n\n      window.addEventListener('scroll', handleScroll, { passive: true })\n\n      return () => {\n        resizeObserver.disconnect()\n        window.removeEventListener('scroll', handleScroll)\n        if (scrollFrame !== null) {\n          cancelAnimationFrame(scrollFrame)\n        }\n        layoutInitializedRef.current = false\n      }\n    }, [sticky])\n\n    useEffect(() => {\n      if (!sticky) return\n\n      let rafId: number\n      const smoothAnimate = () => {\n        setbtb(prev => {\n          const target = layoutTargetsRef.current.btb\n          const delta = target - prev\n          if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n          return prev + delta * SMOOTHING_CONFIG.DAMPING\n        })\n\n        setTitleHeight(prev => {\n          const target = layoutTargetsRef.current.titleHeight\n          const delta = target - prev\n          if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n          return prev + delta * SMOOTHING_CONFIG.DAMPING\n        })\n\n        rafId = requestAnimationFrame(smoothAnimate)\n      }\n\n      rafId = requestAnimationFrame(smoothAnimate)\n\n      return () => {\n        cancelAnimationFrame(rafId)\n      }\n    }, [sticky])\n\n    // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n    useEffect(() => {\n      if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n      const titleElement = titleFadeInRef.current\n      const height = titleElement.clientHeight || 80\n\n      // \u5206\u8BCD\n      splitTextInstance.current = new SplitText(titleElement, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n\n      const words = splitTextInstance.current.words\n      const total = words.length\n      const interval = 1 / total\n\n      // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n      const wordAnimations = words.map((_, i) => {\n        const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n        const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n        return { start, width }\n      })\n\n      // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n      gsap.set(words, { opacity: 0 })\n\n      // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n        end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n        scrub: true,\n        onUpdate: self => {\n          const progress = self.progress\n\n          // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n          words.forEach((word, i) => {\n            const { start, width } = wordAnimations[i]\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n\n          // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n          if (bgRef.current) {\n            gsap.set(bgRef.current, { opacity: progress })\n          }\n        },\n      }) as ScrollTriggerInstance\n\n      return () => {\n        splitTextInstance.current?.revert()\n        scrollTriggerRef.current?.kill()\n      }\n    }, [titleAnimation, inView])\n\n    // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n    useEffect(() => {\n      if (!inView || !titleRef.current) return\n\n      heightTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: self => {\n          setVideoHeightProgress(self.progress)\n        },\n      }) as ScrollTriggerInstance\n\n      return () => {\n        heightTriggerRef.current?.kill()\n      }\n    }, [inView])\n\n    // \u66DD\u5149\u57CB\u70B9\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\n\n    // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    useEffect(() => {\n      if (!sticky || !stickyWrapperRef.current || !videoContainerRef.current || !trackRef.current) return\n\n      videoPinTriggerRef.current = ScrollTrigger.create({\n        trigger: stickyWrapperRef.current,\n        start: 'top top',\n        endTrigger: trackRef.current,\n        end: 'bottom top',\n        pin: videoContainerRef.current,\n        pinSpacing: false,\n        anticipatePin: 1,\n        invalidateOnRefresh: true,\n      }) as ScrollTriggerInstance\n\n      requestAnimationFrame(() => {\n        videoPinTriggerRef.current?.refresh()\n      })\n\n      return () => {\n        videoPinTriggerRef.current?.kill()\n        videoPinTriggerRef.current = null\n      }\n    }, [sticky])\n\n    // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n    const handleBtnClick = useCallback(() => {\n      setVisible(true)\n      onBtnClick?.()\n    }, [onBtnClick])\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\n    // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n    if (!sticky) {\n      return (\n        <>\n          <div\n            id={id}\n            className={cn(\n              'relative overflow-hidden',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {/* \u5185\u5BB9\u5C42 */}\n              {!titleAnimation && (\n                <div className=\"media-content text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n                      {btnText}\n                    </Button>\n                  )}\n                </div>\n              )}\n\n              {/* \u89C6\u9891\u5C42 */}\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\n            {/* \u57CB\u70B9\u5143\u7D20 */}\n            <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n          </div>\n\n          {visible && youtubeId && (\n            <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n          )}\n        </>\n      )\n    }\n\n    // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n    return (\n      <>\n        <div\n          ref={titleRef}\n          className={cn(\n            '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 text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {btnText && (\n                  <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n                    {btnText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n        <div\n          style={{\n            marginBottom: `-${btb}px`,\n            marginTop: `-${titleHeight}px`,\n            zIndex: zIndexVideo,\n          }}\n          className=\"relative\"\n        >\n          <div className=\"sticky top-0\" ref={stickyWrapperRef}>\n            <div\n              id={id}\n              className={cn('relative h-screen w-full overflow-hidden', {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div\n                  ref={titleFadeInRef}\n                  className=\"lg-desktop:text-[64px]  absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                  dangerouslySetInnerHTML={{ __html: title_html }}\n                />\n              )}\n              <div className=\"media-cover absolute left-0 top-0 size-full\" ref={videoContainerRef}>\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          <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\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_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "SMOOTHING_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "layoutTargetsRef", "layoutInitializedRef", "stickyWrapperRef", "videoContainerRef", "videoPinTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "calculateLayout", "rect", "screenHeight", "inViewRefToBottom", "newBtb", "newTitleHeight", "resizeObserver", "scrollFrame", "handleScroll", "rafId", "smoothAnimate", "prev", "target", "delta", "titleElement", "height", "words", "total", "interval", "wordAnimations", "_", "i", "start", "width", "self", "progress", "word", "opacity", "zIndexVideo", "handleBtnClick", "aspect", "Button", "ScrollLoadVideo"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var H=Object.create;var p=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var j=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of S(t))!_.call(e,s)&&s!==o&&p(e,s,{get:()=>t[s],enumerable:!(a=R(t,s))||a.enumerable});return e};var v=(e,t,o)=>(o=e!=null?H(U(e)):{},h(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),q=e=>h(p({},"__esModule",{value:!0}),e);var F={};j(F,{default:()=>A});module.exports=q(F);var l=require("react/jsx-runtime"),i=require("react"),b=require("../../helpers/utils.js"),g=require("../../shared/Styles.js"),r=require("../../components/index.js"),w=v(require("../Title/index.js")),y=v(require("../SwiperBox/index.js")),k=require("../../components/container.js"),M=require("../VideoModal/index.js"),P=require("@payloadcms/richtext-lexical/html"),N=require("../../hooks/useExposure.js"),L=require("../../shared/trackUrlRef.js");const m="video",d="media_player_multi",Y=({data:e,configuration:t})=>{const o=(0,i.useRef)(null);return(0,N.useExposure)(o,{componentType:m,componentName:d,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.description}),(0,l.jsxs)("div",{ref:o,className:(0,b.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 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,L.trackUrlRef)(e?.href,`${m}_${d}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]","data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:e.quote})]}),(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})]})]})},Z=(0,i.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:a},className:s="",key:T,onVideoPlayBtnClick:I},V)=>{const[f,c]=(0,i.useState)(!1),[B,C]=(0,i.useState)(""),[$,z]=(0,i.useState)(""),u=typeof o=="string"?o:o&&(0,P.convertLexicalToHTML)({data:o}),D=(0,i.useRef)(null),x=e.length===2;return(0,l.jsxs)("div",{className:s,ref:D,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(k.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:s,ref:V,children:[o&&(0,l.jsx)(w.default,{className:"mediaplayermulti-title",data:{title:u||""}}),(0,l.jsx)(y.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+T,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:(E,n)=>{c(!0),n?.isYouTube?z?.(n?.youtubeId||""):C?.(n?.video?.url||""),I?.(E)},title:u}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),f&&(0,l.jsx)(M.VideoModal,{visible:f,youTubeId:$,videoUrl:B,onCloseModal:()=>c(!1)})]})});var A=(0,g.withLayout)(Z);
+"use strict";"use client";var R=Object.create;var p=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var i in t)p(e,i,{get:t[i],enumerable:!0})},h=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of U(t))!j.call(e,s)&&s!==i&&p(e,s,{get:()=>t[s],enumerable:!(a=S(t,s))||a.enumerable});return e};var v=(e,t,i)=>(i=e!=null?R(_(e)):{},h(t||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),Y=e=>h(p({},"__esModule",{value:!0}),e);var F={};q(F,{default:()=>A});module.exports=Y(F);var l=require("react/jsx-runtime"),o=require("react"),g=require("../../helpers/utils.js"),w=require("../../shared/Styles.js"),r=require("../../components/index.js"),y=v(require("../Title/index.js")),M=v(require("../SwiperBox/index.js")),k=require("../../components/container.js"),P=require("../VideoModal/index.js"),N=require("@payloadcms/richtext-lexical/html"),L=require("../../hooks/useExposure.js"),T=require("../../shared/trackUrlRef.js");const d="video",m="media_player_multi",Z=({data:e,configuration:t})=>{const i=(0,o.useRef)(null);return(0,L.useExposure)(i,{componentType:d,componentName:m,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.description}),(0,l.jsxs)("div",{ref:i,className:(0,g.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 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,T.trackUrlRef)(e?.href,`${d}_${m}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]","data-headless-type-name":`${d}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:e.quote})]}),(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})]})]})},b=(0,o.forwardRef)(({data:{items:e=[],shape:t="square",title:i,containerProps:a},className:s="",key:I,onVideoPlayBtnClick:V},B)=>{const[f,c]=(0,o.useState)(!1),[C,$]=(0,o.useState)(""),[z,D]=(0,o.useState)(""),u=typeof i=="string"?i:i&&(0,N.convertLexicalToHTML)({data:i}),E=(0,o.useRef)(null),x=e.length===2;return(0,l.jsxs)("div",{className:s,ref:E,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(k.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:s,ref:B,children:[i&&(0,l.jsx)(y.default,{className:"mediaplayermulti-title",data:{title:u||""}}),(0,l.jsx)(M.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+I,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:(H,n)=>{c(!0),n?.isYouTube?D?.(n?.youtubeId||""):$?.(n?.video?.url||""),V?.(H)},title:u}},Slide:Z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),f&&(0,l.jsx)(P.VideoModal,{visible:f,youTubeId:z,videoUrl:C,onCloseModal:()=>c(!1)})]})});b.displayName="MediaPlayerMulti";var A=(0,w.withLayout)(b);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link } 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 { 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 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(data?.href, `${componentType}_${componentName}`)}\n              className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              {data.quote}\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    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\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 className={className} ref={wrapperRef}>\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                    onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n                      setVisible(true)\n                      if (data?.isYouTube) {\n                        setYouTubeId?.(data?.youtubeId || '')\n                      } else {\n                        setVideoUrl?.(data?.video?.url || '')\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\nexport default withLayout(MediaPlayerMulti)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link } 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 { 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 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(data?.href, `${componentType}_${componentName}`)}\n              className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              {data.quote}\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    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\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 className={className} ref={wrapperRef}>\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                    onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n                      setVisible(true)\n                      if (data?.isYouTube) {\n                        setYouTubeId?.(data?.youtubeId || '')\n                      } else {\n                        setVideoUrl?.(data?.video?.url || '')\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_trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "ref", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "itemsLength", "Title", "SwiperBox", "_"]
 }

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

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

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

@@ -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  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  // const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {/* {!isMobile && <GridItem span={1} />} */}\n        <GridItem span={12}>{children}</GridItem>\n        {/* {!isMobile && <GridItem span={1} />} */}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  (\n    {\n      className = '',\n      wrapperClassName = '',\n      id,\n      data: {\n        title,\n        videoTitle,\n        mobVideo,\n        mobImg,\n        img,\n        isYouTube,\n        youtubePcId,\n        youtubeMobileId,\n        video,\n        theme,\n        shape,\n        components,\n      },\n    },\n    ref\n  ) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.8}px bottom`,\n              scrub: 0.5,\n            },\n          })\n          .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n          .to(`.${id} .sticky-cover`, {\n            backdropFilter: 'blur(8px)',\n            duration: 0.4,\n          })\n          .to(\n            `#${id} .media-content`,\n            {\n              top: '100%',\n              transform: 'translate(-50%, -100%)',\n              duration: 1,\n            },\n            '<'\n          )\n      }\n      if (inView) {\n        gsapResize()\n      }\n    }, [inView])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    autoplay={false}\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                  loading=\"lazy\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\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", "SubBox", "React", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "isMobile", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "gsap", "Slogan", "ScrollLoadVideo"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  // const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {/* {!isMobile && <GridItem span={1} />} */}\n        <GridItem span={12}>{children}</GridItem>\n        {/* {!isMobile && <GridItem span={1} />} */}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any, index: number) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div key={`${componentData.blockType}-${index}`} className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div key={`${componentData.blockType}-${index}`} className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return (\n                <Spacer\n                  key={`${componentData.blockType}-${index}`}\n                  data={componentData}\n                  style={componentData?.style}\n                  className=\"!bg-transparent\"\n                />\n              )\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nSubBox.displayName = 'SubBox'\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  (\n    {\n      className = '',\n      wrapperClassName = '',\n      id,\n      data: {\n        title,\n        videoTitle,\n        mobVideo,\n        mobImg,\n        img,\n        isYouTube,\n        youtubePcId,\n        youtubeMobileId,\n        video,\n        theme,\n        shape,\n        components,\n      },\n    },\n    ref\n  ) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.8}px bottom`,\n              scrub: 0.5,\n            },\n          })\n          .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n          .to(`.${id} .sticky-cover`, {\n            backdropFilter: 'blur(8px)',\n            duration: 0.4,\n          })\n          .to(\n            `#${id} .media-content`,\n            {\n              top: '100%',\n              transform: 'translate(-50%, -100%)',\n              duration: 1,\n            },\n            '<'\n          )\n      }\n      if (inView) {\n        gsapResize()\n      }\n    }, [inView])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    autoplay={false}\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                  loading=\"lazy\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\nMediaPlayerSticky.displayName = 'MediaPlayerSticky'\n\nexport default withLayout(MediaPlayerSticky)\n"],
+  "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", "SubBox", "React", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "index", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "isMobile", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "gsap", "Slogan", "ScrollLoadVideo"]
 }

package/dist/cjs/biz-components/MemberEquity/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
-"use strict";"use client";var z=Object.create;var c=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var C=(t,o)=>{for(var l in o)c(t,l,{get:o[l],enumerable:!0})},v=(t,o,l,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of j(o))!_.call(t,a)&&a!==l&&c(t,a,{get:()=>o[a],enumerable:!(p=P(o,a))||p.enumerable});return t};var I=(t,o,l)=>(l=t!=null?z(R(t)):{},v(o||!t||!t.__esModule?c(l,"default",{value:t,enumerable:!0}):l,t)),D=t=>v(c({},"__esModule",{value:!0}),t);var F={};C(F,{default:()=>S});module.exports=D(F);var e=require("react/jsx-runtime"),i=I(require("react")),h=require("react-responsive"),s=require("../../components/index.js"),N=require("../../shared/Styles.js"),y=require("../../helpers/utils.js"),f=require("../../shared/mimeType.js"),B=require("../../hooks/useExposure.js"),$=require("../../shared/trackUrlRef.js");const u="image",x="member_area",L=i.default.forwardRef(({data:t,className:o=""},l)=>{const{title:p,description:a,backgroundImage:n,mobileBackgroundImage:m,primaryButton:d,secondaryButton:r,theme:q,shape:M,primaryButtonHandler:g,secondaryButtonHandler:w}=t,E=(0,h.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,i.useRef)(null);(0,i.useImperativeHandle)(l,()=>b.current),(0,B.useExposure)(b,{componentType:u,componentName:x,componentTitle:p,componentDescription:a});const H=()=>{console.log("primaryButtonHandler",g),g?.()},T=()=>{w?.()},k="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,y.cn)("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",o,{"aiui-dark":q==="dark","rounded-box":M==="rounded","h-[480px]":E}),ref:b,children:[(0,f.isVideo)(n?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:n?.url,type:"video/mp4"})}):(0,e.jsx)(s.Picture,{source:n?.url,alt:n?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,f.isVideo)(m?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:m?.url,type:"video/mp4"})}):(0,e.jsx)(s.Picture,{source:m?.url,alt:m?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,e.jsx)("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:(0,e.jsxs)("div",{className:`
+"use strict";"use client";var P=Object.create;var c=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,o)=>{for(var l in o)c(t,l,{get:o[l],enumerable:!0})},v=(t,o,l,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of R(o))!C.call(t,a)&&a!==l&&c(t,a,{get:()=>o[a],enumerable:!(p=j(o,a))||p.enumerable});return t};var D=(t,o,l)=>(l=t!=null?P(_(t)):{},v(o||!t||!t.__esModule?c(l,"default",{value:t,enumerable:!0}):l,t)),L=t=>v(c({},"__esModule",{value:!0}),t);var F={};I(F,{default:()=>S});module.exports=L(F);var e=require("react/jsx-runtime"),i=D(require("react")),N=require("react-responsive"),s=require("../../components/index.js"),B=require("../../shared/Styles.js"),y=require("../../helpers/utils.js"),f=require("../../shared/mimeType.js"),$=require("../../hooks/useExposure.js"),q=require("../../shared/trackUrlRef.js");const u="image",x="member_area",h=i.default.forwardRef(({data:t,className:o=""},l)=>{const{title:p,description:a,backgroundImage:m,mobileBackgroundImage:n,primaryButton:d,secondaryButton:r,theme:M,shape:E,primaryButtonHandler:g,secondaryButtonHandler:w}=t,H=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,i.useRef)(null);(0,i.useImperativeHandle)(l,()=>b.current),(0,$.useExposure)(b,{componentType:u,componentName:x,componentTitle:p,componentDescription:a});const T=()=>{console.log("primaryButtonHandler",g),g?.()},z=()=>{w?.()},k="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,y.cn)("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",o,{"aiui-dark":M==="dark","rounded-box":E==="rounded","h-[480px]":H}),ref:b,children:[(0,f.isVideo)(m?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:m?.url,type:"video/mp4"})}):(0,e.jsx)(s.Picture,{source:m?.url,alt:m?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,f.isVideo)(n?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:n?.url,type:"video/mp4"})}):(0,e.jsx)(s.Picture,{source:n?.url,alt:n?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,e.jsx)("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:(0,e.jsxs)("div",{className:`
               tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5
               laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
-            `,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(s.Heading,{as:"h2",size:3,className:"member-equity-title ",html:p}),(0,e.jsx)(s.Text,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:a})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[r&&r.text&&(0,e.jsxs)(s.Button,{"aria-label":p??a,variant:"secondary",onClick:T,className:(0,y.cn)("member-equity-button-secondary ",k),as:"a",href:(0,$.trackUrlRef)(r.link,`${u}_${x}`),"data-headless-type-name":`${u}#${x}`,"data-headless-title-desc-button":`${p}#${a}#${r.text}`,children:[r.text,(0,e.jsx)("span",{className:"sr-only",children:p??a})]}),d&&d.text&&(0,e.jsx)(s.Button,{variant:"primary",onClick:H,className:(0,y.cn)("member-equity-button-primary ",k),"data-headless-type-name":`${u}#${x}`,"data-headless-title-desc-button":`${p}#${a}#${d.text}`,children:d.text})]})]})})]})});var S=(0,N.withLayout)(L);
+            `,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(s.Heading,{as:"h2",size:3,className:"member-equity-title ",html:p}),(0,e.jsx)(s.Text,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:a})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[r&&r.text&&(0,e.jsxs)(s.Button,{"aria-label":p??a,variant:"secondary",onClick:z,className:(0,y.cn)("member-equity-button-secondary ",k),as:"a",href:(0,q.trackUrlRef)(r.link,`${u}_${x}`),"data-headless-type-name":`${u}#${x}`,"data-headless-title-desc-button":`${p}#${a}#${r.text}`,children:[r.text,(0,e.jsx)("span",{className:"sr-only",children:p??a})]}),d&&d.text&&(0,e.jsx)(s.Button,{variant:"primary",onClick:T,className:(0,y.cn)("member-equity-button-primary ",k),"data-headless-type-name":`${u}#${x}`,"data-headless-title-desc-button":`${p}#${a}#${d.text}`,children:d.text})]})]})})]})});h.displayName="MemberEquity";var S=(0,B.withLayout)(h);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/MemberEquity/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '' }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      console.log('primaryButtonHandler', primaryButtonHandler)\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <Button\n                  aria-label={title ?? description}\n                  variant=\"secondary\"\n                  onClick={handleButtonSecondaryClick}\n                  className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  as=\"a\"\n                  href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                >\n                  {secondaryButton.text}\n                  <span className=\"sr-only\">{title ?? description}</span>\n                </Button>\n              )}\n              {primaryButton && primaryButton.text && (\n                <Button\n                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nexport default withLayout(MemberEquity)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '' }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      console.log('primaryButtonHandler', primaryButtonHandler)\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <Button\n                  aria-label={title ?? description}\n                  variant=\"secondary\"\n                  onClick={handleButtonSecondaryClick}\n                  className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  as=\"a\"\n                  href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                >\n                  {secondaryButton.text}\n                  <span className=\"sr-only\">{title ?? description}</span>\n                </Button>\n              )}\n              {primaryButton && primaryButton.text && (\n                <Button\n                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nMemberEquity.displayName = 'MemberEquity'\n\nexport default withLayout(MemberEquity)\n"],
+  "mappings": "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",
   "names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_Styles", "import_utils", "import_mimeType", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MemberEquity", "React", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize"]
 }

package/dist/cjs/biz-components/NavigationSearch/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var b=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var W=Object.prototype.hasOwnProperty;var q=(t,a)=>{for(var r in a)b(t,r,{get:a[r],enumerable:!0})},G=(t,a,r,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of _(a))!W.call(t,l)&&l!==r&&b(t,l,{get:()=>a[l],enumerable:!(i=B(a,l))||i.enumerable});return t};var j=t=>G(b({},"__esModule",{value:!0}),t);var M={};q(M,{canSearch:()=>C,default:()=>H});module.exports=j(M);var e=require("react/jsx-runtime"),s=require("../../components/index.js"),h=require("../HeaderNavigation/icons/index.js"),p=require("react"),w=require("../AiuiProvider/index.js"),g=require("./types.js"),L=require("es-toolkit"),c=require("../../helpers/utils.js");const C=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),z=(0,p.forwardRef)(({data:t,onSearch:a,onClose:r,searchResult:i,isSearching:l,keywords:m},$)=>{const{locale:d="us",copyWriting:V}=(0,w.useAiuiContext)(),[n,D]=(0,p.useState)(""),[f,N]=(0,p.useState)(!1),F=(0,L.debounce)(o=>{a(o)},300),S=(0,p.useCallback)(o=>{o.key==="Enter"&&!f&&window.open(`${d==="us"?"":d}${t?.moreLink}?q=${n.toLowerCase()}`,"_self")},[f,n,d,t?.moreLink]),P=(0,p.useMemo)(()=>Array.isArray(m)&&m?.length?m.map(o=>o.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(o=>o.popularWord):[],[m,t?.popularWords]),E=(0,p.useCallback)(o=>{switch(o.type){case"Product":return`/products${o.path}?q=${n.toLowerCase()}`;case"Article":return`/blogs/${o.blog.handle}/${o.handle.replace("storefront-","")}?q=${n.toLowerCase()}`;default:break}},[n]),k=(0,p.useMemo)(()=>{if(n){if(i?.totalCount)return g.SearchStatus.Predict;if(!l)return g.SearchStatus.Empty}else return g.SearchStatus.Default},[i?.totalCount,n,l]);return(0,e.jsxs)(s.Container,{childClassName:"!bg-white",className:"relative",ref:$,children:[(0,e.jsx)("style",{jsx:!0,global:!0,children:`
+"use strict";var b=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var G=(t,a)=>{for(var r in a)b(t,r,{get:a[r],enumerable:!0})},j=(t,a,r,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of W(a))!q.call(t,l)&&l!==r&&b(t,l,{get:()=>a[l],enumerable:!(i=_(a,l))||i.enumerable});return t};var z=t=>j(b({},"__esModule",{value:!0}),t);var M={};G(M,{canSearch:()=>$,default:()=>H});module.exports=z(M);var e=require("react/jsx-runtime"),s=require("../../components/index.js"),h=require("../HeaderNavigation/icons/index.js"),p=require("react"),L=require("../AiuiProvider/index.js"),g=require("./types.js"),C=require("es-toolkit"),c=require("../../helpers/utils.js");const $=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),y=(0,p.forwardRef)(({data:t,onSearch:a,onClose:r,searchResult:i,isSearching:l,keywords:m},D)=>{const{locale:d="us",copyWriting:V}=(0,L.useAiuiContext)(),[n,F]=(0,p.useState)(""),[f,N]=(0,p.useState)(!1),S=(0,C.debounce)(o=>{a(o)},300),P=(0,p.useCallback)(o=>{o.key==="Enter"&&!f&&window.open(`${d==="us"?"":d}${t?.moreLink}?q=${n.toLowerCase()}`,"_self")},[f,n,d,t?.moreLink]),E=(0,p.useMemo)(()=>Array.isArray(m)&&m?.length?m.map(o=>o.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(o=>o.popularWord):[],[m,t?.popularWords]),I=(0,p.useCallback)(o=>{switch(o.type){case"Product":return`/products${o.path}?q=${n.toLowerCase()}`;case"Article":return`/blogs/${o.blog.handle}/${o.handle.replace("storefront-","")}?q=${n.toLowerCase()}`;default:break}},[n]),k=(0,p.useMemo)(()=>{if(n){if(i?.totalCount)return g.SearchStatus.Predict;if(!l)return g.SearchStatus.Empty}else return g.SearchStatus.Default},[i?.totalCount,n,l]);return(0,e.jsxs)(s.Container,{childClassName:"!bg-white",className:"relative",ref:D,children:[(0,e.jsx)("style",{jsx:!0,global:!0,children:`
             .navigation-search-component input:-webkit-autofill,
             .navigation-search-component input:-webkit-autofill:hover,
             .navigation-search-component input:-webkit-autofill:focus {
@@ -7,5 +7,5 @@
               transition: background-color 9999s ease-in-out 0s !important;
               caret-color: #000;
             }
-          `}),(0,e.jsxs)("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black",children:[(0,e.jsx)("input",{value:n,onCompositionStart:()=>N(!0),onCompositionEnd:()=>N(!1),onKeyDown:S,onChange:o=>{D(o.target.value),o.target.value&&F(o.target.value)},type:"text",className:"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none",placeholder:t?.placeholder}),(0,e.jsxs)("div",{className:"flex items-center gap-3",children:[(0,e.jsx)(h.Search,{className:"size-5 cursor-pointer",onClick:()=>a(n)}),(0,e.jsx)("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),(0,e.jsx)(h.Close,{className:"size-5 cursor-pointer",onClick:r})]})]}),(0,e.jsx)("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:k===g.SearchStatus.Predict?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(s.Text,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i?.items?.length>6&&(0,e.jsx)(s.Button,{as:"a",href:`${d==="us"?"":d}${t?.moreLink}?q=${n.toLowerCase()}`,className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),(0,e.jsx)("div",{className:"mt-2 flex flex-col",children:i?.items?.filter(o=>C(o)).slice(0,6)?.map(o=>(0,e.jsx)(s.Link,{className:"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:E(o),children:(0,e.jsx)(s.Text,{html:(0,c.highlightSearchWord)(o.title,n),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},o.id))})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[(0,e.jsx)(s.Link,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)(s.Picture,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(s.Heading,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:(0,c.cn)("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),(0,e.jsx)(s.Text,{html:t?.advertisingSubtitle||"20.000mAh",className:(0,c.cn)("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),i?.items?.filter(o=>o.type.toLowerCase()==="product").slice(0,7)?.map(o=>{const u=o?.variants?.[0],v=`${u?.image?.url||o?.images?.[0]?.url}`,x=o?.title||o?.name,I=o?.description,T=o?.badge||"",A=`/products/${o?.handle}?variant=${(0,c.atobID)(u?.id)}`;return(0,e.jsx)(y,{productImage:v,productName:x,productDesc:I,productBadge:T,listingLink:A},o.id)})]})]})]}):(0,e.jsxs)(e.Fragment,{children:[k===g.SearchStatus.Empty&&(0,e.jsx)(s.Text,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"mt-2",children:[(0,e.jsx)(K,{data:t,keywords:P,locale:d}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&(0,e.jsx)(s.Grid,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(o=>(0,e.jsx)(s.GridItem,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:(0,e.jsx)("a",{href:`${d==="us"?"":d}${t?.moreLink}?q=${o?.popularPage.toLowerCase()}`,className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:o?.popularPage})},o?.id))})]})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[(0,e.jsx)(s.Link,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:(0,e.jsxs)("div",{className:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[(0,e.jsx)(s.Picture,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(s.Heading,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:"font-bold text-white"}),(0,e.jsx)(s.Text,{html:t?.advertisingSubtitle||"20.000mAh",className:"text-sm font-bold text-white"})]})]})}),t?.hotProducts?.slice(0,7)?.map(o=>{const u=o?.custom_description,v=o?.badge||"",x=`/products/${o?.handle}?variant=${(0,c.atobID)(o?.shopify_id)}`;return(0,e.jsx)(y,{productImage:o?.image,productName:o?.name,productDesc:u,productBadge:v,listingLink:x},o.id)})]})]})]})})]})}),y=({productImage:t,productName:a,productDesc:r,productBadge:i,className:l,listingLink:m})=>(0,e.jsxs)("div",{className:(0,c.cn)("flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",l),children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)(s.Picture,{source:t,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:" h-[24px] ",children:i&&(0,e.jsx)(s.Text,{as:"p",html:i,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"})}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Link,{href:m,className:"no-underline hover:text-current",children:(0,e.jsx)(s.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:a})}),r&&(0,e.jsx)(s.Text,{as:"p",html:r,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]}),K=({data:t,keywords:a,locale:r})=>(0,e.jsx)("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:a?.map((i,l)=>(0,e.jsx)("a",{href:`${r==="us"?"":r}${t?.moreLink}?q=${i?.toLowerCase()}`,className:"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:i},l))});var H=z;
+          `}),(0,e.jsxs)("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black",children:[(0,e.jsx)("input",{value:n,onCompositionStart:()=>N(!0),onCompositionEnd:()=>N(!1),onKeyDown:P,onChange:o=>{F(o.target.value),o.target.value&&S(o.target.value)},type:"text",className:"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none ",placeholder:t?.placeholder}),(0,e.jsxs)("div",{className:"flex items-center gap-3",children:[(0,e.jsx)(h.Search,{className:"size-5 cursor-pointer",onClick:()=>a(n)}),(0,e.jsx)("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),(0,e.jsx)(h.Close,{className:"size-5 cursor-pointer",onClick:r})]})]}),(0,e.jsx)("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:k===g.SearchStatus.Predict?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(s.Text,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i?.items?.length>6&&(0,e.jsx)(s.Button,{as:"a",href:`${d==="us"?"":d}${t?.moreLink}?q=${n.toLowerCase()}`,className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),(0,e.jsx)("div",{className:"mt-2 flex flex-col",children:i?.items?.filter(o=>$(o)).slice(0,6)?.map(o=>(0,e.jsx)(s.Link,{className:"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:I(o),children:(0,e.jsx)(s.Text,{html:(0,c.highlightSearchWord)(o.title,n),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},o.id))})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[(0,e.jsx)(s.Link,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)(s.Picture,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(s.Heading,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:(0,c.cn)("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),(0,e.jsx)(s.Text,{html:t?.advertisingSubtitle||"20.000mAh",className:(0,c.cn)("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),i?.items?.filter(o=>o.type.toLowerCase()==="product").slice(0,7)?.map(o=>{const u=o?.variants?.[0],v=`${u?.image?.url||o?.images?.[0]?.url}`,x=o?.title||o?.name,T=o?.description,A=o?.badge||"",B=`/products/${o?.handle}?variant=${(0,c.atobID)(u?.id)}`;return(0,e.jsx)(w,{productImage:v,productName:x,productDesc:T,productBadge:A,listingLink:B},o.id)})]})]})]}):(0,e.jsxs)(e.Fragment,{children:[k===g.SearchStatus.Empty&&(0,e.jsx)(s.Text,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"mt-2",children:[(0,e.jsx)(K,{data:t,keywords:E,locale:d}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&(0,e.jsx)(s.Grid,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(o=>(0,e.jsx)(s.GridItem,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:(0,e.jsx)("a",{href:`${d==="us"?"":d}${t?.moreLink}?q=${o?.popularPage.toLowerCase()}`,className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:o?.popularPage})},o?.id))})]})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[(0,e.jsx)(s.Link,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:(0,e.jsxs)("div",{className:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[(0,e.jsx)(s.Picture,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(s.Heading,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:"font-bold text-white"}),(0,e.jsx)(s.Text,{html:t?.advertisingSubtitle||"20.000mAh",className:"text-sm font-bold text-white"})]})]})}),t?.hotProducts?.slice(0,7)?.map(o=>{const u=o?.custom_description,v=o?.badge||"",x=`/products/${o?.handle}?variant=${(0,c.atobID)(o?.shopify_id)}`;return(0,e.jsx)(w,{productImage:o?.image,productName:o?.name,productDesc:u,productBadge:v,listingLink:x},o.id)})]})]})]})})]})});y.displayName="NavigationSearch";const w=({productImage:t,productName:a,productDesc:r,productBadge:i,className:l,listingLink:m})=>(0,e.jsxs)("div",{className:(0,c.cn)("flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",l),children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)(s.Picture,{source:t,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:" h-[24px] ",children:i&&(0,e.jsx)(s.Text,{as:"p",html:i,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"})}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Link,{href:m,className:"no-underline hover:text-current",children:(0,e.jsx)(s.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:a})}),r&&(0,e.jsx)(s.Text,{as:"p",html:r,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]}),K=({data:t,keywords:a,locale:r})=>(0,e.jsx)("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:a?.map((i,l)=>(0,e.jsx)("a",{href:`${r==="us"?"":r}${t?.moreLink}?q=${i?.toLowerCase()}`,className:"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:i},l))});var H=y;
 //# sourceMappingURL=index.js.map