@anker-in/headless-ui 1.1.9-alpha.1764927943455 → 1.1.9-alpha.1764931651058
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.
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/cjs/helpers/ScrollLoadVideo.js +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +5 -5
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/esm/helpers/ScrollLoadVideo.js +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${data?.sku || variant?.sku}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "getCouponFromVariant", "useExposure", "useRef", "useEffect", "useMemo", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "channel", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "variants", "isSoldOut", "coupon", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "getCouponFromVariant", "useExposure", "useRef", "useEffect", "useMemo", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "channel", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "coupon", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as i}from"react/jsx-runtime";import{useRef as
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import{useRef as l,useEffect as P,useState as S}from"react";import{cn as a}from"../helpers/utils.js";const w=({src:c,poster:u,className:d="",videoClassName:f="",autoplay:p=!0,muted:m=!0,loop:b=!0,controls:v=!1,playsInline:y=!0,videoRef:L,...R})=>{const[r,g]=S(!1),V=l(null),n=l(null),e=L||V;return P(()=>{const s=new IntersectionObserver(h=>{h.forEach(E=>{if(E.isIntersecting){if(r||g(!0),e.current){const t=e.current;t.muted=!0,t.currentTime=0,t.play().catch(I=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",I)})}}else e.current&&e.current.pause()})},{threshold:.1,rootMargin:"50px"}),o=n.current;return o&&s.observe(o),()=>{o&&s.unobserve(o)}},[e,r]),i("div",{ref:n,className:a("relative size-full",d),children:i("video",{ref:e,src:r?c:void 0,poster:u,className:a("size-full object-cover",f),loop:b,muted:m,controls:v,playsInline:y,preload:"metadata",disablePictureInPicture:!0,"webkit-playsinline":!0,autoPlay:p,...R})})};var k=w;export{k as default};
|
|
2
2
|
//# sourceMappingURL=ScrollLoadVideo.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/ScrollLoadVideo.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useEffect, useState } from 'react'\nimport { cn } from '../helpers/utils.js'\n\ninterface ScrollLoadVideoProps {\n src: string\n poster?: string\n className?: string\n videoClassName?: string\n autoplay?: boolean\n muted?: boolean\n loop?: boolean\n controls?: boolean\n playsInline?: boolean\n videoRef?: React.RefObject<HTMLVideoElement>\n [key: string]: any\n}\n\nconst ScrollLoadVideo = ({\n src,\n poster,\n className = '',\n videoClassName = '',\n autoplay = true,\n muted = true,\n loop = true,\n controls = false,\n playsInline = true,\n videoRef,\n ...attr\n}: ScrollLoadVideoProps) => {\n const [shouldLoad, setShouldLoad] = useState(false)\n const internalVideoRef = useRef<HTMLVideoElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const currentVideoRef = videoRef || internalVideoRef\n\n // IntersectionObserver \u771F\u6B63\u7684\u61D2\u52A0\u8F7D + \u89C6\u7A97\u64AD\u653E\u63A7\u5236\n useEffect(() => {\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // \u7B2C\u4E00\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u624D\u5F00\u59CB\u52A0\u8F7D\u89C6\u9891\n if (!shouldLoad) {\n setShouldLoad(true)\n }\n\n // \u5982\u679C\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\u4E14\u89C6\u9891\u5DF2\u52A0\u8F7D\n if (
|
|
5
|
-
"mappings": "AAmFM,cAAAA,MAAA,oBAnFN,OAAgB,UAAAC,EAAQ,aAAAC,EAAW,YAAAC,MAAgB,QACnD,OAAS,MAAAC,MAAU,sBAgBnB,MAAMC,EAAkB,CAAC,CACvB,IAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,SAAAC,EAAW,GACX,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,SAAAC,EAAW,GACX,YAAAC,EAAc,GACd,SAAAC,EACA,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIf,EAAS,EAAK,EAC5CgB,EAAmBlB,EAAyB,IAAI,EAChDmB,EAAenB,EAAuB,IAAI,EAE1CoB,EAAkBN,GAAYI,EAGpC,OAAAjB,EAAU,IAAM,CACd,MAAMoB,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAOR,GALKP,GACHC,EAAc,EAAI,
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useEffect, useState } from 'react'\nimport { cn } from '../helpers/utils.js'\n\ninterface ScrollLoadVideoProps {\n src: string\n poster?: string\n className?: string\n videoClassName?: string\n autoplay?: boolean\n muted?: boolean\n loop?: boolean\n controls?: boolean\n playsInline?: boolean\n videoRef?: React.RefObject<HTMLVideoElement>\n [key: string]: any\n}\n\nconst ScrollLoadVideo = ({\n src,\n poster,\n className = '',\n videoClassName = '',\n autoplay = true,\n muted = true,\n loop = true,\n controls = false,\n playsInline = true,\n videoRef,\n ...attr\n}: ScrollLoadVideoProps) => {\n const [shouldLoad, setShouldLoad] = useState(false)\n const internalVideoRef = useRef<HTMLVideoElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const currentVideoRef = videoRef || internalVideoRef\n\n // IntersectionObserver \u771F\u6B63\u7684\u61D2\u52A0\u8F7D + \u89C6\u7A97\u64AD\u653E\u63A7\u5236\n useEffect(() => {\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // \u7B2C\u4E00\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u624D\u5F00\u59CB\u52A0\u8F7D\u89C6\u9891\n if (!shouldLoad) {\n setShouldLoad(true)\n }\n\n // \u5982\u679C\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\u4E14\u89C6\u9891\u5DF2\u52A0\u8F7D\n if (currentVideoRef.current) {\n const video = currentVideoRef.current\n video.muted = true\n video.currentTime = 0 // \u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u4ECE\u5934\u64AD\u653E\n video.play().catch((error: unknown) => {\n console.warn('\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:', error)\n })\n }\n } else if (currentVideoRef.current) {\n // \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u89C6\u9891\n currentVideoRef.current.pause()\n }\n })\n },\n {\n threshold: 0.1, // \u5F53 10% \u7684\u5143\u7D20\u8FDB\u5165\u89C6\u7A97\u65F6\u89E6\u53D1\n rootMargin: '50px', // \u63D0\u524D 50px \u89E6\u53D1\n }\n )\n\n const currentElement = containerRef.current\n if (currentElement) {\n observer.observe(currentElement)\n }\n\n return () => {\n if (currentElement) {\n observer.unobserve(currentElement)\n }\n }\n }, [currentVideoRef, shouldLoad])\n\n return (\n <div ref={containerRef} className={cn('relative size-full', className)}>\n {/* \u89C6\u9891 */}\n <video\n ref={currentVideoRef}\n src={shouldLoad ? src : undefined} // \u53EA\u6709\u5728\u9700\u8981\u65F6\u624D\u8BBE\u7F6E src\n poster={poster}\n className={cn('size-full object-cover', videoClassName)}\n loop={loop}\n muted={muted}\n controls={controls}\n playsInline={playsInline}\n preload=\"metadata\" // \u5B8C\u5168\u4E0D\u9884\u52A0\u8F7D\n disablePictureInPicture\n webkit-playsinline\n autoPlay={autoplay}\n {...attr}\n />\n </div>\n )\n}\n\nexport default ScrollLoadVideo\n"],
|
|
5
|
+
"mappings": "AAmFM,cAAAA,MAAA,oBAnFN,OAAgB,UAAAC,EAAQ,aAAAC,EAAW,YAAAC,MAAgB,QACnD,OAAS,MAAAC,MAAU,sBAgBnB,MAAMC,EAAkB,CAAC,CACvB,IAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,SAAAC,EAAW,GACX,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,SAAAC,EAAW,GACX,YAAAC,EAAc,GACd,SAAAC,EACA,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIf,EAAS,EAAK,EAC5CgB,EAAmBlB,EAAyB,IAAI,EAChDmB,EAAenB,EAAuB,IAAI,EAE1CoB,EAAkBN,GAAYI,EAGpC,OAAAjB,EAAU,IAAM,CACd,MAAMoB,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAOR,GALKP,GACHC,EAAc,EAAI,EAIhBG,EAAgB,QAAS,CAC3B,MAAMI,EAAQJ,EAAgB,QAC9BI,EAAM,MAAQ,GACdA,EAAM,YAAc,EACpBA,EAAM,KAAK,EAAE,MAAOC,GAAmB,CACrC,QAAQ,KAAK,oDAAaA,CAAK,CACjC,CAAC,CACH,OACSL,EAAgB,SAEzBA,EAAgB,QAAQ,MAAM,CAElC,CAAC,CACH,EACA,CACE,UAAW,GACX,WAAY,MACd,CACF,EAEMM,EAAiBP,EAAa,QACpC,OAAIO,GACFL,EAAS,QAAQK,CAAc,EAG1B,IAAM,CACPA,GACFL,EAAS,UAAUK,CAAc,CAErC,CACF,EAAG,CAACN,EAAiBJ,CAAU,CAAC,EAG9BjB,EAAC,OAAI,IAAKoB,EAAc,UAAWhB,EAAG,qBAAsBI,CAAS,EAEnE,SAAAR,EAAC,SACC,IAAKqB,EACL,IAAKJ,EAAaX,EAAM,OACxB,OAAQC,EACR,UAAWH,EAAG,yBAA0BK,CAAc,EACtD,KAAMG,EACN,MAAOD,EACP,SAAUE,EACV,YAAaC,EACb,QAAQ,WACR,wBAAuB,GACvB,qBAAkB,GAClB,SAAUJ,EACT,GAAGM,EACN,EACF,CAEJ,EAEA,IAAOY,EAAQvB",
|
|
6
6
|
"names": ["jsx", "useRef", "useEffect", "useState", "cn", "ScrollLoadVideo", "src", "poster", "className", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "attr", "shouldLoad", "setShouldLoad", "internalVideoRef", "containerRef", "currentVideoRef", "observer", "entries", "entry", "video", "error", "currentElement", "ScrollLoadVideo_default"]
|
|
7
7
|
}
|