npm - @anker-in/headless-ui - Versions diffs - 1.1.9-alpha.1764084619241 → 1.1.9-alpha.1764141671439 - Mend

@anker-in/headless-ui 1.1.9-alpha.1764084619241 → 1.1.9-alpha.1764141671439

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 (613) hide show

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components/index.js'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n  useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n    const variantProductGallery =\n      variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        const variantProductGalleryItem = variantProductGallery?.find(\n          (variantItem: any) => item?.galleries === variantItem?.galleries\n        )\n        let galleries = galleryMap[item?.galleries] || []\n\n        if (\n          variantProductGalleryItem?.images &&\n          Array.isArray(variantProductGalleryItem.images) &&\n          variantProductGalleryItem.images.length > 0\n        ) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = variantProductGalleryItem.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920} 1920`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1440`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1024`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 767`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 390`)\n              }\n\n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n\n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [variant?.payload, galleryMap, product?.payload])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n  )\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n      <List\n        ref={scrollContainerRef}\n        className=\"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => handleGalleryTabClick(el, item, index)}\n                key={item.tabValue + index}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 laptop:flex hidden\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  // useEffect(() => {\n  //   if (commentRef.current) {\n  //     const container = commentRef.current\n  //     const contentHeight = container.scrollHeight\n  //     const containerHeight = container.clientHeight\n  //     const needsScroll = contentHeight > containerHeight\n  //     setShouldScroll(needsScroll)\n  //   }\n  // }, [])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.tabValue}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`,\n                component_type: 'image',\n                component_name: props?.tabLabel || '',\n                position: jIndex + 1,\n                creative_id: '',\n                component_title: '',\n                component_description: '',\n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n        <div className=\"tablet:block hidden\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n                  imgClassName=\"object-cover h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"relative  max-w-[528px] overflow-hidden\">\n              <div\n                ref={commentRef}\n                className={cn('line-clamp-2')}\n                style={\n                  {\n                    // animationDuration: `3s`,\n                  }\n                }\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n      />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full object-cover\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView", "ProductGallery_default"]
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components/index.js'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n  useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n    const variantProductGallery =\n      variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        const variantProductGalleryItem = variantProductGallery?.find(\n          (variantItem: any) => item?.galleries === variantItem?.galleries\n        )\n        let galleries = galleryMap[item?.galleries] || []\n\n        if (\n          variantProductGalleryItem?.images &&\n          Array.isArray(variantProductGalleryItem.images) &&\n          variantProductGalleryItem.images.length > 0\n        ) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = variantProductGalleryItem.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920} 1920`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1440`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1024`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 767`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 390`)\n              }\n\n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n\n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [variant?.payload, galleryMap, product?.payload])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n  )\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n      <List\n        ref={scrollContainerRef}\n        className=\"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => handleGalleryTabClick(el, item, index)}\n                key={item.tabValue + index}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 laptop:flex hidden\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  // useEffect(() => {\n  //   if (commentRef.current) {\n  //     const container = commentRef.current\n  //     const contentHeight = container.scrollHeight\n  //     const containerHeight = container.clientHeight\n  //     const needsScroll = contentHeight > containerHeight\n  //     setShouldScroll(needsScroll)\n  //   }\n  // }, [])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.tabValue}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`,\n                component_type: 'image',\n                component_name: props?.tabLabel || '',\n                position: jIndex + 1,\n                creative_id: '',\n                component_title: '',\n                component_description: '',\n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n        <div className=\"tablet:block hidden\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n                  imgClassName=\"object-cover h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"relative  max-w-[528px] overflow-hidden\">\n              <Swiper\n                modules={[Autoplay]}\n                loop\n                className=\"lg-desktop:h-11 h-10\"\n                direction=\"vertical\"\n                autoplay={{ delay: 2000, disableOnInteraction: false }}\n              >\n                <SwiperSlide>\n                  <Text\n                    html={props?.comment?.content}\n                    className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n                  />\n                </SwiperSlide>\n                <SwiperSlide>\n                  <Text\n                    html={props?.comment?.content}\n                    className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n                  />\n                </SwiperSlide>\n              </Swiper>\n              {/* <div\n                ref={commentRef}\n                className={cn('h-10', shouldScroll && 'animate-scroll-text')}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n                />\n              </div> */}\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n      />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full object-cover\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "Autoplay", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView", "ProductGallery_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 declare const _default: import("react").ForwardRefExoticComponent<Omit<object, keyof import("../../../../../shared/Styles.js").StylesProps> & Partial<import("../../../../../shared/Styles.js").StylesProps & import("../../../../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/types.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface ScrollSpyNavItem {
     label: string;
     href: string;

package/dist/esm/biz-components/Listing/components/PurchaseBar/index.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import type { PurchaseBarProps } from './types.js';
 declare const _default: import("react").ForwardRefExoticComponent<Omit<PurchaseBarProps, keyof import("../../../../shared/Styles.js").StylesProps> & Partial<import("../../../../shared/Styles.js").StylesProps & import("../../../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/Marquee/Marquee.d.ts CHANGED Viewed

@@ -11,8 +11,8 @@ declare const MarqueeImageContent: {
 };
 declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MarqueeProps & React.RefAttributes<SwiperRef>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;
 export { MarqueeItem, MarqueeImageContent, MarqueeTextContent };

package/dist/esm/biz-components/MarqueeReview/index.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import type { Media, Theme } from '../../types/props.js';
+/**
+ * 评论项数据结构
+ */
+export interface ReviewItem {
+    /** 评论者名称 */
+    name: string;
+    /** 评论者头像 URL */
+    avatar: Media;
+    /** 评论内容 */
+    comment: string;
+    /** 评分(1-5星) */
+    rating?: number;
+}
+/**
+ * 轮播评论数据结构
+ */
+export interface MarqueeReviewData {
+    /** 主标题 */
+    title: string;
+    /** 副标题 */
+    subtitle: string;
+    /** 评论列表 */
+    items: ReviewItem[];
+    /** 主题：light 或 dark */
+    theme?: Theme;
+}
+/**
+ * MarqueeReview 组件 Props
+ */
+export interface MarqueeReviewProps {
+    /** 评论数据 */
+    data: MarqueeReviewData;
+    /** 自定义类名 */
+    className?: string;
+}
+declare const _default: import("react").ForwardRefExoticComponent<Omit<MarqueeReviewProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
+} & import("react").RefAttributes<any>>;
+export default _default;

package/dist/esm/biz-components/MarqueeReview/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as e,jsxs as p}from"react/jsx-runtime";import{Text as m,Heading as c,Avatar as g,AvatarImage as u,AvatarFallback as w}from"../../components/index.js";import{cn as n}from"../../helpers/utils.js";import{withLayout as k}from"../../shared/Styles.js";const x=9,N=3,b=(t,a)=>Array.from({length:Math.ceil(t.length/a)},(i,r)=>t.slice(ra,(r+1)a)),C=()=>e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})}),y=({item:t})=>p("div",{className:"rounded-box bg-container-primary text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px] flex h-[240px] grow flex-col justify-between p-[16px]",children:[p("div",{className:"flex justify-between",children:[p("div",{className:"flex flex-col",children:[e(m,{size:4,html:t.name,className:"laptop:block hidden"}),e(m,{size:2,html:t.name,className:"laptop:hidden block"}),e("div",{className:"mt-2 flex gap-1",children:new Array(t.rating\|\|5).fill(0).map((a,i)=>e(C,{},i))})]}),p(g,{size:"small",className:" laptop:size-[48px] size-[40px]",children:[e(u,{src:t.avatar?.url,alt:t.avatar?.alt\|\|""}),e(w,{children:(t.name??"").slice(0,2).toUpperCase()})]})]}),e("div",{children:e(c,{as:"h6",size:2,html:`"${t.comment}`,className:"line-clamp-5 min-h-[120px] text-wrap"})})]});function L({data:t,className:a}){const{title:i,subtitle:r,items:l=[],theme:d="light"}=t,f=b(l.length<x?[...l,...l.slice(x-l.length)]:l,N).slice(0,3).map(o=>[...o,...o]);return p("section",{className:n("text-info-primary flex flex-col items-center justify-center py-3",a,{"aiui-dark":d==="dark"}),children:[e(c,{as:"h1",size:4,html:i,className:"laptop:text-center w-full text-left"}),e(m,{size:2,html:r,className:"tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]"}),e("div",{className:n("mask-fade-vertical laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px] mt-[24px] flex h-[480px] gap-4 overflow-hidden"),children:f.map((o,s)=>e("div",{className:n("animate-marquee-scroll relative flex h-fit flex-1 flex-col gap-4",{"top-10":s===0\|\|s===2,"hidden desktop:flex":s===1,"hidden tablet:flex":s===2}),children:o.map((h,v)=>e(y,{item:h},v))},s))})]})}var R=k(L);export{R as default};
2	+ //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/MarqueeReview/index.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MarqueeReview/index.tsx"],
+  "sourcesContent": ["import { Text, Heading, Avatar, AvatarImage, AvatarFallback } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } from '../../types/props.js'\n\nconst FIX_ITEMS_LENGTH = 9\nconst COUNT = 3\n\n/**\n * \u8BC4\u8BBA\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface ReviewItem {\n  /** \u8BC4\u8BBA\u8005\u540D\u79F0 */\n  name: string\n  /** \u8BC4\u8BBA\u8005\u5934\u50CF URL */\n  avatar: Media\n  /** \u8BC4\u8BBA\u5185\u5BB9 */\n  comment: string\n  /** \u8BC4\u5206(1-5\u661F) */\n  rating?: number\n}\n\n/**\n * \u8F6E\u64AD\u8BC4\u8BBA\u6570\u636E\u7ED3\u6784\n */\nexport interface MarqueeReviewData {\n  /** \u4E3B\u6807\u9898 */\n  title: string\n  /** \u526F\u6807\u9898 */\n  subtitle: string\n  /** \u8BC4\u8BBA\u5217\u8868 */\n  items: ReviewItem[]\n  /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n  theme?: Theme\n}\n\n/**\n * MarqueeReview \u7EC4\u4EF6 Props\n */\nexport interface MarqueeReviewProps {\n  /** \u8BC4\u8BBA\u6570\u636E */\n  data: MarqueeReviewData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst _chunk = <T,>(array: T[], size: number): T[][] => {\n  return Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>\n    array.slice(index * size, (index + 1) * size)\n  )\n}\n\nconst StarIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n      fill=\"#F77234\"\n    />\n  </svg>\n)\n\ninterface CardProps {\n  item: ReviewItem\n}\n\nconst Card = ({ item }: CardProps) => {\n  return (\n    <div className=\"rounded-box bg-container-primary text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px] flex h-[240px] grow flex-col justify-between p-[16px]\">\n      <div className=\"flex justify-between\">\n        <div className=\"flex flex-col\">\n          <Text size={4} html={item.name} className=\"laptop:block hidden\" />\n          <Text size={2} html={item.name} className=\"laptop:hidden block\" />\n          <div className=\"mt-2 flex gap-1\">\n            {new Array(item.rating || 5).fill(0).map((_, index) => (\n              <StarIcon key={index} />\n            ))}\n          </div>\n        </div>\n        <Avatar size=\"small\" className=\" laptop:size-[48px]  size-[40px]\">\n          <AvatarImage src={item.avatar?.url} alt={item.avatar?.alt || ''} />\n          <AvatarFallback>{(item.name ?? '').slice(0, 2).toUpperCase()}</AvatarFallback>\n        </Avatar>\n      </div>\n      <div>\n        <Heading as=\"h6\" size={2} html={`\"${item.comment}`} className=\"line-clamp-5 min-h-[120px] text-wrap\" />\n      </div>\n    </div>\n  )\n}\n\n/**\n * MarqueeReview - \u5782\u76F4\u6EDA\u52A8\u7684\u8BC4\u8BBA\u8F6E\u64AD\u7EC4\u4EF6\n *\n * \u7528\u4E8E\u5C55\u793A\u7528\u6237\u8BC4\u8BBA,\u652F\u6301\u591A\u5217\u5782\u76F4\u65E0\u9650\u6EDA\u52A8\u6548\u679C\u3002\n *\n * @example\n * ```tsx\n * <MarqueeReview\n *   data={{\n *     title: \"\u5BA2\u6237\u8BC4\u4EF7\",\n *     subtitle: \"\u770B\u770B\u7528\u6237\u600E\u4E48\u8BF4\",\n *     items: [\n *       {\n *         name: \"\u5F20\u4E09\",\n *         avatar: \"/avatar1.jpg\",\n *         comment: \"\u975E\u5E38\u597D\u7528\u7684\u4EA7\u54C1!\",\n *         rating: 5\n *       }\n *     ]\n *   }}\n * />\n * ```\n */\nfunction MarqueeReview({ data, className }: MarqueeReviewProps) {\n  const { title, subtitle, items = [], theme = 'light' } = data\n\n  const chunkItems = _chunk(\n    items.length < FIX_ITEMS_LENGTH ? [...items, ...items.slice(FIX_ITEMS_LENGTH - items.length)] : items,\n    COUNT\n  )\n    .slice(0, 3)\n    .map(item => [...item, ...item])\n\n  return (\n    <section\n      className={cn('text-info-primary flex flex-col items-center justify-center py-3', className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"laptop:text-center w-full text-left\" />\n      <Text\n        size={2}\n        html={subtitle}\n        className=\"tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]\"\n      />\n      <div\n        className={cn(\n          'mask-fade-vertical laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px] mt-[24px] flex h-[480px] gap-4 overflow-hidden'\n        )}\n      >\n        {chunkItems.map((items, index) => (\n          <div\n            key={index}\n            className={cn('animate-marquee-scroll relative flex h-fit flex-1 flex-col gap-4', {\n              'top-10': index === 0 || index === 2,\n              'hidden desktop:flex': index === 1,\n              'hidden tablet:flex': index === 2,\n            })}\n          >\n            {items.map((item, innerIndex) => (\n              <Card key={innerIndex} item={item} />\n            ))}\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(MarqueeReview)\n"],
+  "mappings": "AAsDI,cAAAA,EAeI,QAAAC,MAfJ,oBAtDJ,OAAS,QAAAC,EAAM,WAAAC,EAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,4BACnE,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAmB,EACnBC,EAAQ,EAwCRC,EAAS,CAAKC,EAAYC,IACvB,MAAM,KAAK,CAAE,OAAQ,KAAK,KAAKD,EAAM,OAASC,CAAI,CAAE,EAAG,CAACC,EAAGC,IAChEH,EAAM,MAAMG,EAAQF,GAAOE,EAAQ,GAAKF,CAAI,CAC9C,EAGIG,EAAW,IACfhB,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,EAOIiB,EAAO,CAAC,CAAE,KAAAC,CAAK,IAEjBjB,EAAC,OAAI,UAAU,kLACb,UAAAA,EAAC,OAAI,UAAU,uBACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,KAAMgB,EAAK,KAAM,UAAU,sBAAsB,EAChElB,EAACE,EAAA,CAAK,KAAM,EAAG,KAAMgB,EAAK,KAAM,UAAU,sBAAsB,EAChElB,EAAC,OAAI,UAAU,kBACZ,aAAI,MAAMkB,EAAK,QAAU,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACJ,EAAGC,IAC3Cf,EAACgB,EAAA,GAAcD,CAAO,CACvB,EACH,GACF,EACAd,EAACG,EAAA,CAAO,KAAK,QAAQ,UAAU,mCAC7B,UAAAJ,EAACK,EAAA,CAAY,IAAKa,EAAK,QAAQ,IAAK,IAAKA,EAAK,QAAQ,KAAO,GAAI,EACjElB,EAACM,EAAA,CAAiB,UAAAY,EAAK,MAAQ,IAAI,MAAM,EAAG,CAAC,EAAE,YAAY,EAAE,GAC/D,GACF,EACAlB,EAAC,OACC,SAAAA,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAM,IAAIe,EAAK,OAAO,GAAI,UAAU,uCAAuC,EACvG,GACF,EA2BJ,SAASC,EAAc,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAuB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,OAAQ,EAAIL,EAEnDM,EAAaf,EACjBa,EAAM,OAASf,EAAmB,CAAC,GAAGe,EAAO,GAAGA,EAAM,MAAMf,EAAmBe,EAAM,MAAM,CAAC,EAAIA,EAChGd,CACF,EACG,MAAM,EAAG,CAAC,EACV,IAAIQ,GAAQ,CAAC,GAAGA,EAAM,GAAGA,CAAI,CAAC,EAEjC,OACEjB,EAAC,WACC,UAAWM,EAAG,mEAAoEc,EAAW,CAC3F,YAAaI,IAAU,MACzB,CAAC,EAED,UAAAzB,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAMmB,EAAO,UAAU,sCAAsC,EACvFtB,EAACE,EAAA,CACC,KAAM,EACN,KAAMqB,EACN,UAAU,8KACZ,EACAvB,EAAC,OACC,UAAWO,EACT,2HACF,EAEC,SAAAmB,EAAW,IAAI,CAACF,EAAOT,IACtBf,EAAC,OAEC,UAAWO,EAAG,mEAAoE,CAChF,SAAUQ,IAAU,GAAKA,IAAU,EACnC,sBAAuBA,IAAU,EACjC,qBAAsBA,IAAU,CAClC,CAAC,EAEA,SAAAS,EAAM,IAAI,CAACN,EAAMS,IAChB3B,EAACiB,EAAA,CAAsB,KAAMC,GAAlBS,CAAwB,CACpC,GATIZ,CAUP,CACD,EACH,GACF,CAEJ,CAEA,IAAOa,EAAQpB,EAAWW,CAAa",
+  "names": ["jsx", "jsxs", "Text", "Heading", "Avatar", "AvatarImage", "AvatarFallback", "cn", "withLayout", "FIX_ITEMS_LENGTH", "COUNT", "_chunk", "array", "size", "_", "index", "StarIcon", "Card", "item", "MarqueeReview", "data", "className", "title", "subtitle", "items", "theme", "chunkItems", "innerIndex", "MarqueeReview_default"]
+}

package/dist/esm/biz-components/MediaPlayerBase/index.backup.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { MediaPlayerBaseProps } from './types.js';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
+}, "ref"> & import("react").RefAttributes<any>>;
+export default _default;

package/dist/esm/biz-components/MediaPlayerBase/index.backup.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use client";import{Fragment as Me,jsx as e,jsxs as u}from"react/jsx-runtime";import{useState as p,useRef as n,useMemo as ue,useEffect as E,forwardRef as me,useImperativeHandle as ge}from"react";import{debounce as fe}from"lodash";import{cn as w}from"../../helpers/utils.js";import{withLayout as ve}from"../../shared/Styles.js";import xe from"../../components/button.js";import{VideoModal as ye}from"../VideoModal/index.js";import{convertLexicalToHTML as K}from"@payloadcms/richtext-lexical/html";import{useInView as be}from"react-intersection-observer";import{useExposure as he}from"../../hooks/useExposure.js";import Q from"../../helpers/ScrollLoadVideo.js";import{gsap as I}from"gsap";import{SplitText as we}from"gsap/dist/SplitText";import{ScrollTrigger as W}from"gsap/dist/ScrollTrigger";const He="media_player_base",Te="video",X=({defaultConverters:H})=>({...H,text:T=>{const{node:t}=T;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),ke=me(({className:H="",id:T,onBtnClick:t,data:{title:m,videoTitle:g,btnText:_,youtubeId:P,video:S,mobileVideo:Z,theme:V,img:$,shape:B,titleAnimation:f,...A}},ee)=>{const{sticky:i}=A,[C,D]=p(!1),[F,te]=p(0),[re,oe]=p(0),[v,ne]=p(0),[j,U]=p(!1),x=n(null),Y=n(null),r=n(null),y=n(null),q=n(null),b=n(null),k=n(null),M=n(null),{ref:se,inView:s}=be();ge(ee,()=>r.current);const h=typeof m=="string"?m:m&&K({data:m,converters:X}),L=typeof g=="string"?g:g&&K({data:g,converters:X});E(()=>{s?(x.current?.play(),D(!0)):(x.current?.pause(),D(!1))},[s]);const N=fe(()=>{if(r.current){const a=r.current.getBoundingClientRect(),l=window.innerHeight,c=window.scrollY\|\|window.pageYOffset,o=a.bottom+c,d=document.documentElement.scrollHeight-o;te(d>l?l:d)}if(r.current){const a=r.current.clientHeight,l=window.innerHeight;oe(a+l)}},600);E(()=>(N(),window.addEventListener("resize",N),()=>{window.removeEventListener("resize",N)}),[]),E(()=>{function a(){if(!y.current\|\|f!=="fade-in")return;const c=y.current?.clientHeight\|\|80;b.current=new we(y.current,{type:"words",wordsClass:"word"});const o=b.current.words;I.set(o,{opacity:0}),k.current=W.create({trigger:r.current,start:"top center-=10%",end:`top+=${c1.5+80}px center-=10%`,scrub:!0,onUpdate:O=>{const d=O.progress,G=o.length,ie=1/G,J=.5;o.forEach((ae,ce)=>{const de=ce/G(1-J),pe=ie(1+J);let z=(d-de)/pe;z=Math.max(0,Math.min(z,1)),I.set(ae,{opacity:z})}),I.set(Y.current,{opacity:d})}})}function l(){M.current=W.create({trigger:r.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:c=>{const o=c.progress;console.log("progress__",o),ne(o)}})}return s&&(a(),l()),()=>{b.current&&b.current.revert(),k.current&&k.current.kill(),M.current&&M.current.kill()}},[f,s]),he(q,{componentType:Te,componentName:He,componentTitle:L});const le=ue(()=>s&&v>0&&v<.9?3:s?2:1,[v,s]),R="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]";return u(Me,{children:[i&&e("div",{ref:r,className:w("relative z-10",R,{"aiui-dark":V==="dark","rounded-box":B==="rounded"},H),children:e("div",{ref:se,children:!f&&u("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[h&&!C&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:h}}),L&&C&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:L}}),_&&e(xe,{variant:"link",className:w("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{U(!0),t&&t?.()},children:_})]})})}),u("div",{style:i?{marginBottom:`-${F}px`,marginTop:`-${re}px`,zIndex:le}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:u("div",{id:T,className:w("relative overflow-hidden",i?"h-screen w-full":R,{"aiui-dark":V==="dark","rounded-box":B==="rounded"}),children:[f==="fade-in"&&h&&e("div",{ref:y,className:"lg-desktop:text-[64px] text-btn-primary-foreground 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",dangerouslySetInnerHTML:{__html:h}}),u("div",{className:"media-cover left-0 top-0 h-screen w-screen",style:{height:`${102-v100}vh`},children:[e(Q,{videoRef:x,poster:$?.url\|\|"",src:S?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(Q,{videoRef:x,poster:$?.url\|\|"",src:Z?.url\|\|S?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:Y,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:w(i&&"relative box-content block",R),style:i?{height:`${F}px`}:{},ref:q})]}),j&&P&&e(ye,{visible:j,youTubeId:P,onCloseModal:()=>U(!1)})]})});var De=ve(ke);export{De as default};
2	+ //# sourceMappingURL=index.backup.js.map

package/dist/esm/biz-components/MediaPlayerBase/index.backup.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.backup.tsx"],
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: { 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<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            console.log('progress__', progress)\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            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 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-btn-primary-foreground 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-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : {}\n          }\n          className=\"relative\"\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div\n                  ref={titleFadeInRef}\n                  className=\"lg-desktop:text-[64px] text-btn-primary-foreground 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\n                className=\"media-cover left-0 top-0 h-screen w-screen\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n            ref={trackRef}\n          />\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "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", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "aspect", "index_backup_default"]
+}

package/dist/esm/biz-components/MediaPlayerBase/index.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import type { MediaPlayerBaseProps } from './types.js';
 declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as Me,jsx as e,jsxs as u}from"react/jsx-runtime";import{useState as p,useRef as n,useMemo as ue,useEffect as E,forwardRef as me,useImperativeHandle as ge}from"react";import{debounce as fe}from"lodash";import{cn as w}from"../../helpers/utils.js";import{withLayout as ve}from"../../shared/Styles.js";import xe from"../../components/button.js";import{VideoModal as ye}from"../VideoModal/index.js";import{convertLexicalToHTML as K}from"@payloadcms/richtext-lexical/html";import{useInView as be}from"react-intersection-observer";import{useExposure as he}from"../../hooks/useExposure.js";import Q from"../../helpers/ScrollLoadVideo.js";import{gsap as I}from"gsap";import{SplitText as we}from"gsap/dist/SplitText";import{ScrollTrigger as W}from"gsap/dist/ScrollTrigger";const He="media_player_base",Te="video",X=({defaultConverters:H})=>({...H,text:T=>{const{node:t}=T;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),ke=me(({className:H="",id:T,onBtnClick:t,data:{title:m,videoTitle:g,btnText:_,youtubeId:P,video:S,mobileVideo:Z,theme:V,img:$,shape:B,titleAnimation:f,...A}},ee)=>{const{sticky:i}=A,[C,D]=p(!1),[F,te]=p(0),[re,oe]=p(0),[v,ne]=p(0),[j,U]=p(!1),x=n(null),Y=n(null),r=n(null),y=n(null),q=n(null),b=n(null),k=n(null),M=n(null),{ref:se,inView:s}=be();ge(ee,()=>r.current);const h=typeof m=="string"?m:m&&K({data:m,converters:X}),L=typeof g=="string"?g:g&&K({data:g,converters:X});E(()=>{s?(x.current?.play(),D(!0)):(x.current?.pause(),D(!1))},[s]);const N=fe(()=>{if(r.current){const a=r.current.getBoundingClientRect(),l=window.innerHeight,c=window.scrollY||window.pageYOffset,o=a.bottom+c,d=document.documentElement.scrollHeight-o;te(d>l?l:d)}if(r.current){const a=r.current.clientHeight,l=window.innerHeight;oe(a+l)}},600);E(()=>(N(),window.addEventListener("resize",N),()=>{window.removeEventListener("resize",N)}),[]),E(()=>{function a(){if(!y.current||f!=="fade-in")return;const c=y.current?.clientHeight||80;b.current=new we(y.current,{type:"words",wordsClass:"word"});const o=b.current.words;I.set(o,{opacity:0}),k.current=W.create({trigger:r.current,start:"top center-=10%",end:`top+=${c*1.5+80}px center-=10%`,scrub:!0,onUpdate:O=>{const d=O.progress,G=o.length,ie=1/G,J=.5;o.forEach((ae,ce)=>{const de=ce/G*(1-J),pe=ie*(1+J);let z=(d-de)/pe;z=Math.max(0,Math.min(z,1)),I.set(ae,{opacity:z})}),I.set(Y.current,{opacity:d})}})}function l(){M.current=W.create({trigger:r.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:c=>{const o=c.progress;console.log("progress__",o),ne(o)}})}return s&&(a(),l()),()=>{b.current&&b.current.revert(),k.current&&k.current.kill(),M.current&&M.current.kill()}},[f,s]),he(q,{componentType:Te,componentName:He,componentTitle:L});const le=ue(()=>s&&v>0&&v<.9?3:s?2:1,[v,s]),R="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]";return u(Me,{children:[i&&e("div",{ref:r,className:w("relative z-10",R,{"aiui-dark":V==="dark","rounded-box":B==="rounded"},H),children:e("div",{ref:se,children:!f&&u("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[h&&!C&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:h}}),L&&C&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:L}}),_&&e(xe,{variant:"link",className:w("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{U(!0),t&&t?.()},children:_})]})})}),u("div",{style:i?{marginBottom:`-${F}px`,marginTop:`-${re}px`,zIndex:le}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:u("div",{id:T,className:w("relative overflow-hidden",i?"h-screen w-full":R,{"aiui-dark":V==="dark","rounded-box":B==="rounded"}),children:[f==="fade-in"&&h&&e("div",{ref:y,className:"lg-desktop:text-[64px] text-btn-primary-foreground 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",dangerouslySetInnerHTML:{__html:h}}),u("div",{className:"media-cover left-0 top-0 h-screen w-screen",style:{height:`${102-v*100}vh`},children:[e(Q,{videoRef:x,poster:$?.url||"",src:S?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(Q,{videoRef:x,poster:$?.url||"",src:Z?.url||S?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:Y,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:w(i&&"relative box-content block",R),style:i?{height:`${F}px`}:{},ref:q})]}),j&&P&&e(ye,{visible:j,youTubeId:P,onCloseModal:()=>U(!1)})]})});var De=ve(ke);export{De as default};
+"use client";import{Fragment as ce,jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as y,useRef as i,useMemo as ve,useEffect as P,forwardRef as xe,useImperativeHandle as be,useCallback as ye}from"react";import{cn as g}from"../../helpers/utils.js";import{withLayout as Ee}from"../../shared/Styles.js";import oe from"../../components/button.js";import{VideoModal as le}from"../VideoModal/index.js";import{convertLexicalToHTML as ne}from"@payloadcms/richtext-lexical/html";import{useInView as he}from"react-intersection-observer";import{useExposure as He}from"../../hooks/useExposure.js";import z from"../../helpers/ScrollLoadVideo.js";import{gsap as J}from"gsap";import{SplitText as _e}from"gsap/dist/SplitText";import{ScrollTrigger as se}from"gsap/dist/ScrollTrigger";const Ie="media_player_base",we="video",r={TEXT_START_OFFSET:"10%",TEXT_ANIMATION_MULTIPLIER:1.5,TEXT_ANIMATION_OFFSET:80,VIDEO_HEIGHT_BASE:102,OVERLAP_FACTOR:.5,VIDEO_PROGRESS_THRESHOLD:.9,HEIGHT_CHANGE_THRESHOLD:5},ae=({defaultConverters:E})=>({...E,text:h=>{const{node:n}=h;return n.$&&n.$.color?`<span class="lexical-${n.$.color}">${n.text}</span>`:n.text}}),ie=xe(({className:E="",id:h,onBtnClick:n,data:{title:H,videoTitle:_,btnText:I,youtubeId:w,video:N,mobileVideo:K,theme:D,img:S,shape:V,titleAnimation:c,...de}},ue)=>{const{sticky:B}=de,[k,Q]=y(!1),[W,pe]=y(0),[me,fe]=y(0),[R,Te]=y(0),[M,$]=y(!1),d=i(null),G=i(null),t=i(null),X=i(null),j=i(null),q=i(null),Z=i(null),ee=i(null),{ref:te,inView:o}=he();be(ue,()=>t.current);const u=typeof H=="string"?H:H&&ne({data:H,converters:ae}),v=typeof _=="string"?_:_&&ne({data:_,converters:ae});P(()=>{o?(d.current?.play(),Q(!0)):(d.current?.pause(),Q(!1))},[o]),P(()=>{if(!t.current||!B)return;const s=()=>{if(!t.current)return;const Y=t.current.getBoundingClientRect(),m=window.innerHeight,f=window.scrollY||window.pageYOffset,x=Y.bottom+f,C=document.documentElement.scrollHeight-x,F=C>m?m:C,T=t.current.clientHeight+m;pe(b=>Math.abs(F-b)>r.HEIGHT_CHANGE_THRESHOLD?F:b),fe(b=>Math.abs(T-b)>r.HEIGHT_CHANGE_THRESHOLD?T:b)};s();const L=new ResizeObserver(()=>{requestAnimationFrame(()=>{s()})});L.observe(t.current);const p=()=>{requestAnimationFrame(()=>{s()})};let a;const O=()=>{a||(a=setTimeout(()=>{p(),a=null},100))};return window.addEventListener("scroll",O,{passive:!0}),()=>{L.disconnect(),window.removeEventListener("scroll",O),a&&clearTimeout(a)}},[B]),P(()=>{if(!o||!c||c!=="fade-in"||!X.current)return;const s=X.current,L=s.clientHeight||80;q.current=new _e(s,{type:"words",wordsClass:"word"});const p=q.current.words,a=p.length,O=1/a,Y=p.map((m,f)=>{const x=f/a*(1-r.OVERLAP_FACTOR),A=O*(1+r.OVERLAP_FACTOR);return{start:x,width:A}});return J.set(p,{opacity:0}),Z.current=se.create({trigger:t.current,start:`top center-=${r.TEXT_START_OFFSET}`,end:`top+=${L*r.TEXT_ANIMATION_MULTIPLIER+r.TEXT_ANIMATION_OFFSET}px center-=${r.TEXT_START_OFFSET}`,scrub:!0,onUpdate:m=>{const f=m.progress;p.forEach((x,A)=>{const{start:C,width:F}=Y[A];let T=(f-C)/F;T=Math.max(0,Math.min(T,1)),J.set(x,{opacity:T})}),G.current&&J.set(G.current,{opacity:f})}}),()=>{q.current?.revert(),Z.current?.kill()}},[c,o]),P(()=>{if(!(!o||!t.current))return ee.current=se.create({trigger:t.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:s=>{Te(s.progress)}}),()=>{ee.current?.kill()}},[o]),He(j,{componentType:we,componentName:Ie,componentTitle:v});const ge=ve(()=>o&&R>0&&R<r.VIDEO_PROGRESS_THRESHOLD?3:o?2:1,[R,o]),re=ye(()=>{$(!0),n?.()},[n]),U="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]";return B?l(ce,{children:[e("div",{ref:t,className:g("relative z-10",U,{"aiui-dark":D==="dark","rounded-box":V==="rounded"},E),children:e("div",{ref:te,children:!c&&l("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",children:[u&&!k&&e("div",{className:"lg-desktop:text-[64px]  text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:u}}),v&&k&&e("div",{className:"lg-desktop:text-[64px]  text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),I&&e(oe,{variant:"link",className:g("member-equity-button-secondary "),onClick:re,children:I})]})})}),l("div",{style:{marginBottom:`-${W}px`,marginTop:`-${me}px`,zIndex:ge},className:"relative",children:[e("div",{className:"sticky top-0",children:l("div",{id:h,className:g("relative h-screen w-full overflow-hidden",{"aiui-dark":D==="dark","rounded-box":V==="rounded"}),children:[c==="fade-in"&&u&&e("div",{ref:X,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",dangerouslySetInnerHTML:{__html:u}}),l("div",{className:"media-cover absolute left-0 top-0 size-full",style:{height:`${r.VIDEO_HEIGHT_BASE-R*100}vh`},children:[e(z,{videoRef:d,poster:S?.url||"",src:N?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(z,{videoRef:d,poster:S?.url||"",src:K?.url||N?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:G,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:g("relative box-content block",U),style:{height:`${W}px`},ref:j})]}),M&&w&&e(le,{visible:M,youTubeId:w,onCloseModal:()=>$(!1)})]}):l(ce,{children:[l("div",{id:h,className:g("relative overflow-hidden",U,{"aiui-dark":D==="dark","rounded-box":V==="rounded"},E),children:[l("div",{ref:te,children:[!c&&l("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",children:[u&&!k&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:u}}),v&&k&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),I&&e(oe,{variant:"link",className:g("member-equity-button-secondary"),onClick:re,children:I})]}),e(z,{videoRef:d,poster:S?.url||"",src:N?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(z,{videoRef:d,poster:S?.url||"",src:K?.url||N?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0})]}),e("div",{ref:j,className:"absolute bottom-0 left-0 h-px w-full"})]}),M&&w&&e(le,{visible:M,youTubeId:w,onCloseModal:()=>$(!1)})]})});ie.displayName="MediaPlayerBase";var De=Ee(ie);export{De as default};
 //# sourceMappingURL=index.js.map