@anker-in/headless-ui 1.1.81 → 1.1.83
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/AccordionCards/index.d.ts +1 -36
- package/dist/cjs/biz-components/ActivitySchedule/index.d.ts +1 -3
- package/dist/cjs/biz-components/AiuiProvider/index.d.ts +1 -13
- package/dist/cjs/biz-components/AiuiProvider/index.js +1 -1
- package/dist/cjs/biz-components/AiuiProvider/index.js.map +3 -3
- package/dist/cjs/biz-components/AnchorNavigation/index.d.ts +1 -1
- package/dist/cjs/biz-components/AplusDesc/index.d.ts +1 -17
- package/dist/cjs/biz-components/BrandCardLink/BrandCardLink.d.ts +1 -2
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.d.ts +1 -2
- package/dist/cjs/biz-components/Category/index.d.ts +1 -1
- package/dist/cjs/biz-components/CreativeModule/index.d.ts +1 -7
- package/dist/cjs/biz-components/DownLoad/index.d.ts +1 -6
- package/dist/cjs/biz-components/Evaluate/index.d.ts +1 -1
- package/dist/cjs/biz-components/Faq/Faq.d.ts +2 -3
- package/dist/cjs/biz-components/FeatureCards/FeatureCards.d.ts +1 -3
- package/dist/cjs/biz-components/FeatureShowcase/FeatureShowcase.d.ts +1 -3
- package/dist/cjs/biz-components/Features/index.d.ts +1 -8
- package/dist/cjs/biz-components/FootCharger/index.d.ts +1 -7
- package/dist/cjs/biz-components/FooterNavigation/index.d.ts +1 -2
- package/dist/cjs/biz-components/GiftBox/index.d.ts +1 -3
- package/dist/cjs/biz-components/GiftShelf/index.d.ts +1 -3
- package/dist/cjs/biz-components/GiftTierShelf/index.d.ts +1 -3
- package/dist/cjs/biz-components/Graphic/index.d.ts +1 -1
- package/dist/cjs/biz-components/GraphicAttractionBlock/index.d.ts +1 -1
- package/dist/cjs/biz-components/GraphicMore/index.d.ts +1 -7
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.d.ts +2 -10
- package/dist/cjs/biz-components/HeaderNavigation/index.d.ts +1 -3
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.d.ts +1 -5
- package/dist/cjs/biz-components/ImageTextFeature/ImageTextFeature.d.ts +1 -3
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.d.ts +1 -3
- package/dist/cjs/biz-components/Ksp/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.d.ts +1 -11
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.d.ts +1 -26
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.d.ts +1 -11
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.d.ts +1 -2
- package/dist/cjs/biz-components/Marquee/Marquee.d.ts +2 -3
- package/dist/cjs/biz-components/MarqueeReview/index.d.ts +1 -1
- package/dist/cjs/biz-components/MediaEndorsement/index.d.ts +1 -2
- package/dist/cjs/biz-components/MediaPlayerBase/index.d.ts +1 -2
- 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/MediaPlayerMulti/index.d.ts +1 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.d.ts +1 -5
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts +1 -2
- package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.d.ts +1 -1
- package/dist/cjs/biz-components/MemberEquity/index.d.ts +1 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +2 -17
- package/dist/cjs/biz-components/NavigationSearch/index.d.ts +1 -2
- package/dist/cjs/biz-components/ProductCompare/index.d.ts +1 -1
- package/dist/cjs/biz-components/ProductHero/ProductHero.d.ts +1 -3
- package/dist/cjs/biz-components/ProductNav/ProductNav.d.ts +1 -2
- package/dist/cjs/biz-components/PromotionalBar/index.d.ts +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.d.ts +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.js.map +3 -3
- package/dist/cjs/biz-components/SelectStore/index.d.ts +1 -7
- package/dist/cjs/biz-components/ShelfDisplay/index.d.ts +1 -3
- package/dist/cjs/biz-components/Slogan/index.d.ts +1 -3
- package/dist/cjs/biz-components/Spacer/index.d.ts +1 -3
- package/dist/cjs/biz-components/Specs/index.d.ts +1 -1
- package/dist/cjs/biz-components/SpecsComparison/SpecsComparison.d.ts +1 -3
- package/dist/cjs/biz-components/TabWithImage/TabWithImage.d.ts +1 -3
- package/dist/cjs/biz-components/Tabs/Tabs.d.ts +1 -3
- package/dist/cjs/biz-components/TabsGroup/index.d.ts +1 -3
- package/dist/cjs/biz-components/TabsWithMedia/TabsWithMedia.d.ts +1 -3
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts +1 -3
- package/dist/cjs/biz-components/Title/index.d.ts +1 -1
- package/dist/cjs/biz-components/VideoFeature/VideoFeature.d.ts +1 -3
- package/dist/cjs/biz-components/WheelLottery/index.d.ts +1 -1
- package/dist/cjs/biz-components/WhyChoose/WhyChoose.d.ts +2 -3
- package/dist/cjs/helpers/ScrollLoadVideo.js +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js.map +2 -2
- package/dist/cjs/shared/Styles.d.ts +1 -2
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +2 -2
- package/dist/esm/biz-components/AccordionCards/index.d.ts +1 -36
- package/dist/esm/biz-components/ActivitySchedule/index.d.ts +1 -3
- package/dist/esm/biz-components/AiuiProvider/index.d.ts +1 -13
- package/dist/esm/biz-components/AiuiProvider/index.js +1 -1
- package/dist/esm/biz-components/AiuiProvider/index.js.map +3 -3
- package/dist/esm/biz-components/AnchorNavigation/index.d.ts +1 -1
- package/dist/esm/biz-components/AplusDesc/index.d.ts +1 -17
- package/dist/esm/biz-components/BrandCardLink/BrandCardLink.d.ts +1 -2
- package/dist/esm/biz-components/BrandEquity/BrandEquity.d.ts +1 -2
- package/dist/esm/biz-components/Category/index.d.ts +1 -1
- package/dist/esm/biz-components/CreativeModule/index.d.ts +1 -7
- package/dist/esm/biz-components/DownLoad/index.d.ts +1 -6
- package/dist/esm/biz-components/Evaluate/index.d.ts +1 -1
- package/dist/esm/biz-components/Faq/Faq.d.ts +2 -3
- package/dist/esm/biz-components/FeatureCards/FeatureCards.d.ts +1 -3
- package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.d.ts +1 -3
- package/dist/esm/biz-components/Features/index.d.ts +1 -8
- package/dist/esm/biz-components/FootCharger/index.d.ts +1 -7
- package/dist/esm/biz-components/FooterNavigation/index.d.ts +1 -2
- package/dist/esm/biz-components/GiftBox/index.d.ts +1 -3
- package/dist/esm/biz-components/GiftShelf/index.d.ts +1 -3
- package/dist/esm/biz-components/GiftTierShelf/index.d.ts +1 -3
- package/dist/esm/biz-components/Graphic/index.d.ts +1 -1
- package/dist/esm/biz-components/GraphicAttractionBlock/index.d.ts +1 -1
- package/dist/esm/biz-components/GraphicMore/index.d.ts +1 -7
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.d.ts +2 -10
- package/dist/esm/biz-components/HeaderNavigation/index.d.ts +1 -3
- package/dist/esm/biz-components/HeroBanner/HeroBanner.d.ts +1 -5
- package/dist/esm/biz-components/ImageTextFeature/ImageTextFeature.d.ts +1 -3
- package/dist/esm/biz-components/ImageWithText/ImageWithText.d.ts +1 -3
- package/dist/esm/biz-components/Ksp/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.d.ts +1 -11
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.d.ts +1 -26
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.d.ts +1 -11
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/index.d.ts +1 -2
- package/dist/esm/biz-components/Marquee/Marquee.d.ts +2 -3
- package/dist/esm/biz-components/MarqueeReview/index.d.ts +1 -1
- package/dist/esm/biz-components/MediaEndorsement/index.d.ts +1 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.d.ts +1 -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/MediaPlayerMulti/index.d.ts +1 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.d.ts +1 -5
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts +1 -2
- package/dist/esm/biz-components/MediaSceneSwitcherV2/index.d.ts +1 -1
- package/dist/esm/biz-components/MemberEquity/index.d.ts +1 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +2 -17
- package/dist/esm/biz-components/NavigationSearch/index.d.ts +1 -2
- package/dist/esm/biz-components/ProductCompare/index.d.ts +1 -1
- package/dist/esm/biz-components/ProductHero/ProductHero.d.ts +1 -3
- package/dist/esm/biz-components/ProductNav/ProductNav.d.ts +1 -2
- package/dist/esm/biz-components/PromotionalBar/index.d.ts +1 -1
- package/dist/esm/biz-components/SecondaryBanner/index.d.ts +1 -1
- package/dist/esm/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/esm/biz-components/SecondaryBanner/index.js.map +2 -2
- package/dist/esm/biz-components/SelectStore/index.d.ts +1 -7
- package/dist/esm/biz-components/ShelfDisplay/index.d.ts +1 -3
- package/dist/esm/biz-components/Slogan/index.d.ts +1 -3
- package/dist/esm/biz-components/Spacer/index.d.ts +1 -3
- package/dist/esm/biz-components/Specs/index.d.ts +1 -1
- package/dist/esm/biz-components/SpecsComparison/SpecsComparison.d.ts +1 -3
- package/dist/esm/biz-components/TabWithImage/TabWithImage.d.ts +1 -3
- package/dist/esm/biz-components/Tabs/Tabs.d.ts +1 -3
- package/dist/esm/biz-components/TabsGroup/index.d.ts +1 -3
- package/dist/esm/biz-components/TabsWithMedia/TabsWithMedia.d.ts +1 -3
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts +1 -3
- package/dist/esm/biz-components/Title/index.d.ts +1 -1
- package/dist/esm/biz-components/VideoFeature/VideoFeature.d.ts +1 -3
- package/dist/esm/biz-components/WheelLottery/index.d.ts +1 -1
- package/dist/esm/biz-components/WhyChoose/WhyChoose.d.ts +2 -3
- package/dist/esm/helpers/ScrollLoadVideo.js +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.js.map +2 -2
- package/dist/esm/shared/Styles.d.ts +1 -2
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +2 -2
- package/package.json +1 -1
- package/dist/cjs/biz-components/AiuiProvider/useAutoTracking.d.ts +0 -17
- package/dist/cjs/biz-components/AiuiProvider/useAutoTracking.js +0 -2
- package/dist/cjs/biz-components/AiuiProvider/useAutoTracking.js.map +0 -7
- package/dist/esm/biz-components/AiuiProvider/useAutoTracking.d.ts +0 -17
- package/dist/esm/biz-components/AiuiProvider/useAutoTracking.js +0 -2
- package/dist/esm/biz-components/AiuiProvider/useAutoTracking.js.map +0 -7
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import 'swiper/css/pagination';
|
|
3
2
|
import type { MediaEndorsementProps, MediaEndorsementData, MediaEndorsementItem, MediaEndorsementSemanticName } from './types.js';
|
|
4
|
-
declare const _default:
|
|
3
|
+
declare const _default: any;
|
|
5
4
|
export default _default;
|
|
6
5
|
export type { MediaEndorsementProps, MediaEndorsementData, MediaEndorsementItem, MediaEndorsementSemanticName };
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
declare const _default: import("react").ForwardRefExoticComponent<MediaPlayerBaseProps & import("react").RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
3
2
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as Ne,jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as v,useRef as r,useMemo as ye,useEffect as S,forwardRef as xe,useImperativeHandle as he}from"react";import{debounce as be}from"lodash";import{cn as i}from"../../helpers/utils.js";import{withLayout as we}from"../../shared/Styles.js";import X from"../../components/button.js";import{VideoModal as He}from"../VideoModal/index.js";import{convertLexicalToHTML as Z}from"@payloadcms/richtext-lexical/html";import{useInView as Te}from"react-intersection-observer";import{useExposure as ke}from"../../hooks/useExposure.js";import A from"../../helpers/ScrollLoadVideo.js";import{gsap as d}from"gsap";import{SplitText as ee}from"gsap/dist/SplitText";import{ScrollTrigger as V}from"gsap/dist/ScrollTrigger";const Me="media_player_base",Le="video";d.registerPlugin(V,ee);const te=({defaultConverters:y})=>({...y,text:L=>{const{node:t}=L;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),re=xe(({className:y="",id:L,onBtnClick:t,data:{title:x,videoTitle:h,btnText:b,youtubeId:_,video:$,mobileVideo:ne,theme:B,img:C,shape:D,titleAnimation:w="fade-in",...oe},...F},se)=>{const{sticky:n}=oe,[j,q]=v(!1),[U,le]=v(0),[ie,ae]=v(0),[H,ce]=v(0),[Y,N]=v(!1),T=r(null),O=r(null),o=r(null),k=r(null),G=r(null),M=r(null),u=r(null),R=r(null),I=r(null),{ref:de,inView:s}=Te();he(se,()=>o.current);const m=typeof x=="string"?x:x&&Z({data:x,converters:te}),J=typeof h=="string"?h:h&&Z({data:h,converters:te});S(()=>{s?(T.current?.play(),q(!0)):(T.current?.pause(),q(!1))},[s]);const z=be(()=>{if(o.current){const f=o.current.getBoundingClientRect(),a=window.innerHeight,g=window.scrollY||window.pageYOffset,l=f.bottom+g,c=document.documentElement.scrollHeight-l;le(c>a?a:c)}if(o.current){const f=o.current.clientHeight,a=window.innerHeight;ae(f+a)}},600);S(()=>(z(),window.addEventListener("resize",z),()=>{window.removeEventListener("resize",z)}),[]),S(()=>{function f(){if(!k.current||w!=="fade-in")return;const g=k.current?.clientHeight||80;M.current=new ee(k.current,{type:"words",wordsClass:"word"});const l=M.current.words;d.set(l,{opacity:0}),u.current&&d.set(u.current,{opacity:0}),R.current=V.create({trigger:o.current,start:"top center-=10%",end:`top+=${g*1.5+80}px center-=10%`,scrub:!0,onUpdate:K=>{const c=K.progress,Q=l.length,ue=1/Q,W=.5;l.forEach((me,fe)=>{const ge=fe/Q*(1-W),ve=ue*(1+W);let P=(c-ge)/ve;P=Math.max(0,Math.min(P,1)),d.set(me,{opacity:P})}),d.set(O.current,{opacity:c}),u.current&&d.set(u.current,{opacity:c>=.6?1:0})}})}function a(){I.current=V.create({trigger:o.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const l=g.progress;ce(l)}})}return s&&(f(),a()),()=>{M.current&&M.current.revert(),R.current&&R.current.kill(),I.current&&I.current.kill()}},[w,s]),ke(G,{componentType:Le,componentName:Me,componentTitle:m});const pe=ye(()=>s&&H>0&&H<.9?3:s?2:1,[H,s]),E="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 p(Ne,{children:[n&&e("div",{...F,ref:o,className:i("pointer-events-none relative z-10",E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"},y),children:e("div",{ref:de,children:!w&&p("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:[m&&!j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),J&&j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:J}}),b&&e(X,{variant:"link",className:i("member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]})})}),p("div",{...n?{}:F,style:n?{marginBottom:`-${U}px`,marginTop:`-${ie}px`,zIndex:pe}:{zIndex:5},className:i("relative",y),children:[e("div",{className:"sticky top-0 ",children:p("div",{id:L,className:i("relative overflow-hidden",n?"h-screen w-full":E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"}),children:[w==="fade-in"&&p("div",{className:i("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",n?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[m&&e("div",{ref:k,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),b&&e(X,{ref:u,variant:"link",className:i("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]}),p("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-H*100}vh`},children:[e(A,{videoRef:T,poster:C?.url||"",src:$?.url,className:"tablet:block hidden size-full !h-auto",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline"
|
|
1
|
+
"use client";import{Fragment as Ne,jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as v,useRef as r,useMemo as ye,useEffect as S,forwardRef as xe,useImperativeHandle as he}from"react";import{debounce as be}from"lodash";import{cn as i}from"../../helpers/utils.js";import{withLayout as we}from"../../shared/Styles.js";import X from"../../components/button.js";import{VideoModal as He}from"../VideoModal/index.js";import{convertLexicalToHTML as Z}from"@payloadcms/richtext-lexical/html";import{useInView as Te}from"react-intersection-observer";import{useExposure as ke}from"../../hooks/useExposure.js";import A from"../../helpers/ScrollLoadVideo.js";import{gsap as d}from"gsap";import{SplitText as ee}from"gsap/dist/SplitText";import{ScrollTrigger as V}from"gsap/dist/ScrollTrigger";const Me="media_player_base",Le="video";d.registerPlugin(V,ee);const te=({defaultConverters:y})=>({...y,text:L=>{const{node:t}=L;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),re=xe(({className:y="",id:L,onBtnClick:t,data:{title:x,videoTitle:h,btnText:b,youtubeId:_,video:$,mobileVideo:ne,theme:B,img:C,shape:D,titleAnimation:w="fade-in",...oe},...F},se)=>{const{sticky:n}=oe,[j,q]=v(!1),[U,le]=v(0),[ie,ae]=v(0),[H,ce]=v(0),[Y,N]=v(!1),T=r(null),O=r(null),o=r(null),k=r(null),G=r(null),M=r(null),u=r(null),R=r(null),I=r(null),{ref:de,inView:s}=Te();he(se,()=>o.current);const m=typeof x=="string"?x:x&&Z({data:x,converters:te}),J=typeof h=="string"?h:h&&Z({data:h,converters:te});S(()=>{s?(T.current?.play(),q(!0)):(T.current?.pause(),q(!1))},[s]);const z=be(()=>{if(o.current){const f=o.current.getBoundingClientRect(),a=window.innerHeight,g=window.scrollY||window.pageYOffset,l=f.bottom+g,c=document.documentElement.scrollHeight-l;le(c>a?a:c)}if(o.current){const f=o.current.clientHeight,a=window.innerHeight;ae(f+a)}},600);S(()=>(z(),window.addEventListener("resize",z),()=>{window.removeEventListener("resize",z)}),[]),S(()=>{function f(){if(!k.current||w!=="fade-in")return;const g=k.current?.clientHeight||80;M.current=new ee(k.current,{type:"words",wordsClass:"word"});const l=M.current.words;d.set(l,{opacity:0}),u.current&&d.set(u.current,{opacity:0}),R.current=V.create({trigger:o.current,start:"top center-=10%",end:`top+=${g*1.5+80}px center-=10%`,scrub:!0,onUpdate:K=>{const c=K.progress,Q=l.length,ue=1/Q,W=.5;l.forEach((me,fe)=>{const ge=fe/Q*(1-W),ve=ue*(1+W);let P=(c-ge)/ve;P=Math.max(0,Math.min(P,1)),d.set(me,{opacity:P})}),d.set(O.current,{opacity:c}),u.current&&d.set(u.current,{opacity:c>=.6?1:0})}})}function a(){I.current=V.create({trigger:o.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const l=g.progress;ce(l)}})}return s&&(f(),a()),()=>{M.current&&M.current.revert(),R.current&&R.current.kill(),I.current&&I.current.kill()}},[w,s]),ke(G,{componentType:Le,componentName:Me,componentTitle:m});const pe=ye(()=>s&&H>0&&H<.9?3:s?2:1,[H,s]),E="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 p(Ne,{children:[n&&e("div",{...F,ref:o,className:i("pointer-events-none relative z-10",E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"},y),children:e("div",{ref:de,children:!w&&p("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:[m&&!j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),J&&j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:J}}),b&&e(X,{variant:"link",className:i("member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]})})}),p("div",{...n?{}:F,style:n?{marginBottom:`-${U}px`,marginTop:`-${ie}px`,zIndex:pe}:{zIndex:5},className:i("relative",y),children:[e("div",{className:"sticky top-0 ",children:p("div",{id:L,className:i("relative overflow-hidden",n?"h-screen w-full":E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"}),children:[w==="fade-in"&&p("div",{className:i("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",n?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[m&&e("div",{ref:k,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),b&&e(X,{ref:u,variant:"link",className:i("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]}),p("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-H*100}vh`},children:[e(A,{videoRef:T,poster:C?.url||"",src:$?.url,className:"tablet:block hidden size-full !h-auto",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(A,{videoRef:T,poster:C?.url||"",src:ne?.url||$?.url,className:"tablet:hidden block min-h-screen w-full",videoClassName:"object-cover w-full h-auto",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:O,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),n&&e("div",{className:i(n&&"pointer-events-none relative box-content block",E),style:n?{height:`${U}px`}:{},ref:G})]}),Y&&_&&e(He,{visible:Y,youTubeId:_,onCloseModal:()=>N(!1)})]})});re.displayName="MediaPlayerBase";var je=we(re);export{je as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"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\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: {\n title,\n videoTitle,\n btnText,\n youtubeId,\n video,\n mobileVideo,\n theme,\n img,\n shape,\n titleAnimation = 'fade-in',\n ...dataRest\n },\n ...rest\n },\n ref\n ) => {\n const { sticky } = dataRest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const btnFadeInRef = useRef<HTMLButtonElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n if (btnFadeInRef.current) {\n gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n }\n },\n })\n }\n\n function gsapVideoHeightResize() {\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom top`,\n // markers: true,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n setVideoHeightProgress(progress)\n },\n })\n }\n\n if (inView) {\n gsapResize()\n gsapVideoHeightResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n heightTriggerRef.current && heightTriggerRef.current.kill()\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n {...rest}\n ref={titleRef}\n className={cn(\n 'pointer-events-none relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div\n {...(!sticky ? rest : {})}\n style={\n sticky\n ? {\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }\n : { zIndex: 5 }\n }\n className={cn('relative', className)}\n >\n <div className=\"sticky top-0 \">\n <div\n id={id}\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && (\n <div\n className={cn(\n 'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n )}\n >\n {title_html && (\n <div\n ref={titleFadeInRef}\n className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {btnText && (\n <Button\n ref={btnFadeInRef}\n variant=\"link\"\n className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n </Button>\n )}\n </div>\n )}\n <div\n className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n >\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full !h-auto\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline=\"true\"\n x5-playsinline=\"true\"\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block min-h-screen w-full\"\n videoClassName=\"object-cover w-full h-auto\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline=\"true\"\n x5-playsinline=\"true\"\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n {sticky && (\n <div\n className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n )}\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"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\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: {\n title,\n videoTitle,\n btnText,\n youtubeId,\n video,\n mobileVideo,\n theme,\n img,\n shape,\n titleAnimation = 'fade-in',\n ...dataRest\n },\n ...rest\n },\n ref\n ) => {\n const { sticky } = dataRest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const btnFadeInRef = useRef<HTMLButtonElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n if (btnFadeInRef.current) {\n gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n }\n },\n })\n }\n\n function gsapVideoHeightResize() {\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom top`,\n // markers: true,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n setVideoHeightProgress(progress)\n },\n })\n }\n\n if (inView) {\n gsapResize()\n gsapVideoHeightResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n heightTriggerRef.current && heightTriggerRef.current.kill()\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n {...rest}\n ref={titleRef}\n className={cn(\n 'pointer-events-none relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div\n {...(!sticky ? rest : {})}\n style={\n sticky\n ? {\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }\n : { zIndex: 5 }\n }\n className={cn('relative', className)}\n >\n <div className=\"sticky top-0 \">\n <div\n id={id}\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && (\n <div\n className={cn(\n 'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n )}\n >\n {title_html && (\n <div\n ref={titleFadeInRef}\n className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {btnText && (\n <Button\n ref={btnFadeInRef}\n variant=\"link\"\n className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n </Button>\n )}\n </div>\n )}\n <div\n className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n >\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full !h-auto\"\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 min-h-screen w-full\"\n videoClassName=\"object-cover w-full h-auto\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n {sticky && (\n <div\n className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n )}\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "aAuMM,mBAAAA,GAmBc,OAAAC,EAFJ,QAAAC,MAjBV,oBAtMN,OAAS,YAAAC,EAAU,UAAAC,EAAQ,WAAAC,GAAS,aAAAC,EAAW,cAAAC,GAAY,uBAAAC,OAA2B,QACtF,OAAS,YAAAC,OAAgB,SACzB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAOC,MAAY,6BACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAS,wBAAAC,MAA4B,oCAGrC,OAAS,aAAAC,OAAiB,8BAE1B,OAAS,eAAAC,OAAmB,6BAC5B,OAAOC,MAAqB,mCAC5B,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,OAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAGtBJ,EAAK,eAAeE,EAAeD,EAAS,EAE5C,MAAMI,GAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,GAAkBpB,GACtB,CACE,CACE,UAAAqB,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CACJ,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,YAAAC,GACA,MAAAC,EACA,IAAAC,EACA,MAAAC,EACA,eAAAC,EAAiB,UACjB,GAAGC,EACL,EACA,GAAGC,CACL,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIH,GACb,CAACI,EAAWC,CAAY,EAAI3C,EAAS,EAAK,EAC1C,CAAC4C,EAAKC,EAAM,EAAI7C,EAAS,CAAC,EAC1B,CAAC8C,GAAaC,EAAc,EAAI/C,EAAS,CAAC,EAC1C,CAACgD,EAAqBC,EAAsB,EAAIjD,EAAS,CAAC,EAC1D,CAACkD,EAASC,CAAU,EAAInD,EAAkB,EAAK,EAE/CoD,EAAWnD,EAAyB,IAAI,EACxCoD,EAAQpD,EAAyB,IAAI,EACrCqD,EAAWrD,EAAuB,IAAI,EACtCsD,EAAiBtD,EAAuB,IAAI,EAC5CuD,EAAWvD,EAAuB,IAAI,EACtCwD,EAAoBxD,EAAyB,IAAI,EACjDyD,EAAezD,EAA0B,IAAI,EAC7C0D,EAAmB1D,EAA6B,IAAI,EACpD2D,EAAmB3D,EAA6B,IAAI,EACpD,CAAE,IAAK4D,GAAW,OAAAC,CAAO,EAAIlD,GAAU,EAE7CP,GAAoBmC,GAAK,IAAMc,EAAS,OAAyB,EAEjE,MAAMS,EACJ,OAAOnC,GAAU,SAAWA,EAAQA,GAASjB,EAAqB,CAAE,KAAMiB,EAAO,WAAYR,EAAe,CAAC,EACzG4C,EACJ,OAAOnC,GAAe,SAClBA,EACAA,GAAclB,EAAqB,CAAE,KAAMkB,EAAY,WAAYT,EAAe,CAAC,EAEzFjB,EAAU,IAAM,CACV2D,GACFV,EAAS,SAAS,KAAK,EACvBT,EAAa,EAAI,IAEjBS,EAAS,SAAS,MAAM,EACxBT,EAAa,EAAK,EAEtB,EAAG,CAACmB,CAAM,CAAC,EAEX,MAAMG,EAAwB3D,GAAS,IAAM,CAC3C,GAAIgD,EAAS,QAAS,CACpB,MAAMY,EAAOZ,EAAS,QAAQ,sBAAsB,EAC9Ca,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CxB,GAAOyB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIhB,EAAS,QAAS,CACpB,MAAMR,EAAcQ,EAAS,QAAQ,aAC/Ba,EAAe,OAAO,YAC5BpB,GAAeD,EAAcqB,CAAY,CAC3C,CACF,EAAG,GAAG,EAENhE,EAAU,KACR8D,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAEL9D,EAAU,IAAM,CACd,SAASoE,GAAa,CACpB,GAAI,CAAChB,EAAe,SAAWlB,IAAmB,UAAW,OAC7D,MAAMmC,EAASjB,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAIzC,GAAUuC,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMkB,EAAQhB,EAAkB,QAAQ,MACxC1C,EAAK,IAAI0D,EAAO,CAAE,QAAS,CAAE,CAAC,EAC1Bf,EAAa,SAAS3C,EAAK,IAAI2C,EAAa,QAAS,CAAE,QAAS,CAAE,CAAC,EACvEC,EAAiB,QAAU1C,EAAc,OAAO,CAC9C,QAASqC,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQkB,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,GAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,GAAU,EAAIE,GAC3BI,GAAQL,IAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CpE,EAAK,IAAIgE,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACDpE,EAAK,IAAIsC,EAAM,QAAS,CAAE,QAASsB,CAAS,CAAC,EACzCjB,EAAa,SACf3C,EAAK,IAAI2C,EAAa,QAAS,CAAE,QAASiB,GAAY,GAAM,EAAI,CAAE,CAAC,CAEvE,CACF,CAAC,CACH,CAEA,SAASS,GAAwB,CAC/BxB,EAAiB,QAAU3C,EAAc,OAAO,CAC9C,QAASqC,EAAS,QAClB,MAAO,gBACP,IAAK,aAEL,MAAO,GACP,SAAWoB,GAAc,CACvB,MAAMC,EAAWD,EAAK,SACtBzB,GAAuB0B,CAAQ,CACjC,CACF,CAAC,CACH,CAEA,OAAIb,IACFS,EAAW,EACXa,EAAsB,GAGjB,IAAM,CACX3B,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DE,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACvB,EAAgByB,CAAM,CAAC,EAE3BjD,GAAY2C,EAAU,CACpB,cAAArC,GACA,cAAAD,GACA,eAAgB6C,CAClB,CAAC,EAED,MAAMsB,GAAcnF,GAAQ,IACtB4D,GAAUd,EAAsB,GAAKA,EAAsB,GAAY,EACvEc,EAAe,EACZ,EACN,CAACd,EAAqBc,CAAM,CAAC,EAE1BwB,EACJ,6NACF,OACEvF,EAAAF,GAAA,CACG,UAAA4C,GACC3C,EAAC,OACE,GAAGyC,EACJ,IAAKe,EACL,UAAW/C,EACT,oCACA+E,EACA,CACE,YAAapD,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,SAAA3B,EAAC,OAAI,IAAK+D,GACP,UAACxB,GACAtC,EAAC,OAAI,UAAU,yGACZ,UAAAgE,GAAc,CAACrB,GACd5C,EAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQiE,CAAW,EAChD,EAEDC,GAAmBtB,GAClB5C,EAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQkE,CAAgB,EACrD,EAEDlC,GACChC,EAACW,EAAA,CACC,QAAQ,OACR,UAAWF,EAAG,kDAAkD,EAChE,QAAS,IAAM,CACb4C,EAAW,EAAI,EAYfxB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,EAEF/B,EAAC,OACE,GAAK0C,EAAgB,CAAC,EAARF,EACf,MACEE,EACI,CACE,aAAc,IAAIG,CAAG,KACrB,UAAW,IAAIE,EAAW,KAC1B,OAAQuC,EACV,EACA,CAAE,OAAQ,CAAE,EAElB,UAAW9E,EAAG,WAAYkB,CAAS,EAEnC,UAAA3B,EAAC,OAAI,UAAU,gBACb,SAAAC,EAAC,OACC,GAAI2B,EACJ,UAAWnB,EAAG,2BAA4BkC,EAAS,kBAAoB6C,EAAQ,CAC7E,YAAapD,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAClBtC,EAAC,OACC,UAAWQ,EACT,wFACAkC,EAAS,qDAAuD,cAClE,EAEC,UAAAsB,GACCjE,EAAC,OACC,IAAKyD,EACL,UAAU,kHACV,wBAAyB,CAAE,OAAQQ,CAAW,EAChD,EAEDjC,GACChC,EAACW,EAAA,CACC,IAAKiD,EACL,QAAQ,OACR,UAAWnD,EAAG,2EAA2E,EACzF,QAAS,IAAM,CACb4C,EAAW,EAAI,EACfxB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EACH,GAEJ,EAEF/B,EAAC,OACC,UAAU,6DACV,MAAO,CAAE,OAAQ,GAAG,IAAMiD,EAAsB,GAAG,IAAK,EAExD,UAAAlD,EAACgB,EAAA,CACC,SAAUsC,EACV,OAAQjB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,wCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACAlC,EAACgB,EAAA,CACC,SAAUsC,EACV,OAAQjB,GAAK,KAAO,GACpB,IAAKF,IAAa,KAAOD,GAAO,IAChC,UAAU,0CACV,eAAe,6BACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACAlC,EAAC,OACC,IAAKuD,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,EACCZ,GACC3C,EAAC,OACC,UAAWS,EAAGkC,GAAU,iDAAkD6C,CAAM,EAChF,MAAO7C,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKY,EACP,GAEJ,EACCN,GAAWnB,GACVjC,EAACY,GAAA,CAAW,QAASwC,EAAS,UAAWnB,EAAW,aAAc,IAAMoB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA3B,GAAgB,YAAc,kBAE9B,IAAO+D,GAAQ/E,GAAWgB,EAAe",
|
|
6
6
|
"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", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "aspect", "MediaPlayerBase_default"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
declare const _default: import("react").ForwardRefExoticComponent<MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
3
2
|
export default _default;
|
|
@@ -1,6 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import type { MediaPlayerBaseProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<MediaPlayerBaseProps & React.RefAttributes<{
|
|
4
|
-
mediaPlayerStickyRef: HTMLDivElement;
|
|
5
|
-
}> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
6
2
|
export default _default;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { MediaSceneSwitcherProps } from './types.js';
|
|
2
1
|
import 'swiper/css';
|
|
3
|
-
declare const _default:
|
|
2
|
+
declare const _default: any;
|
|
4
3
|
export default _default;
|
|
@@ -54,5 +54,5 @@ export interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivE
|
|
|
54
54
|
/** 场景切换回调 */
|
|
55
55
|
onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void;
|
|
56
56
|
}
|
|
57
|
-
declare const _default:
|
|
57
|
+
declare const _default: any;
|
|
58
58
|
export default _default;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import type { MemberEquityProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<MemberEquityProps & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & React.RefAttributes<any>>;
|
|
1
|
+
declare const _default: any;
|
|
4
2
|
export default _default;
|
|
@@ -1,19 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
4
|
-
onSecondaryButtonClick?: () => void;
|
|
5
|
-
onPrimaryButtonClick?: () => void;
|
|
6
|
-
data: {
|
|
7
|
-
shape?: import("../../types/props").Shape;
|
|
8
|
-
sectionTitle?: string;
|
|
9
|
-
groupByTab?: boolean;
|
|
10
|
-
items: ({
|
|
11
|
-
width?: "full" | "half" | "one-third";
|
|
12
|
-
} & Item)[];
|
|
13
|
-
carousel?: {
|
|
14
|
-
items: Item[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
} & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
import type { MultiLayoutGraphicBlockProps } from './types';
|
|
2
|
+
declare const _default: any;
|
|
18
3
|
export default _default;
|
|
19
4
|
export type { MultiLayoutGraphicBlockProps };
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { NavigationSearchProps } from './types.js';
|
|
2
1
|
export declare const canSearch: (target: any) => boolean;
|
|
3
|
-
declare const _default:
|
|
2
|
+
declare const _default: any;
|
|
4
3
|
export default _default;
|
|
@@ -44,5 +44,5 @@ export interface ProductCompareProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
44
44
|
theme?: Theme;
|
|
45
45
|
};
|
|
46
46
|
}
|
|
47
|
-
declare const _default:
|
|
47
|
+
declare const _default: any;
|
|
48
48
|
export default _default;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import type { ProductHeroProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<ProductHeroProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
4
2
|
export default _default;
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
declare const _default: import("react").ForwardRefExoticComponent<ProductNavProps & import("react").RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
3
2
|
export default _default;
|
|
@@ -42,5 +42,5 @@ export interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement
|
|
|
42
42
|
data: PromotionalBarData;
|
|
43
43
|
classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>;
|
|
44
44
|
}
|
|
45
|
-
declare const _default:
|
|
45
|
+
declare const _default: any;
|
|
46
46
|
export default _default;
|
|
@@ -87,5 +87,5 @@ export interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement>
|
|
|
87
87
|
*/
|
|
88
88
|
jumpOptions?: JumpOptions;
|
|
89
89
|
}
|
|
90
|
-
declare const _default:
|
|
90
|
+
declare const _default: any;
|
|
91
91
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import*as x from"react";import{cva as E}from"class-variance-authority";import k from"jump.js";import{cn as a,getLocalizedPath as v}from"../../helpers/index.js";import{Text as h,Button as B,Heading as J,Picture as R,Countdown as V}from"../../components/index.js";import W from"../Media/index.js";import{useAiuiContext as $}from"../AiuiProvider/index.js";import{withLayout as F}from"
|
|
1
|
+
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import*as x from"react";import{cva as E}from"class-variance-authority";import k from"jump.js";import{cn as a,getLocalizedPath as v}from"../../helpers/index.js";import{Text as h,Button as B,Heading as J,Picture as R,Countdown as V}from"../../components/index.js";import W from"../Media/index.js";import{useAiuiContext as $}from"../AiuiProvider/index.js";import{withLayout as F}from"../../shared/Styles.js";const _=E("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),T=x.forwardRef(({className:I,classNames:n={},data:t,jumpOptions:z={},...M},N)=>{const{pcImage:S,padImage:C,mobileImage:D,isVideoLoop:L=!0,endDate:u,endDate_tz:O,dateFormat:P,size:c="base",iconArray:m,theme:j="light",primaryButton:o,secondaryButton:i,title:w,titleTag:A="h1"}=t,{locale:b="us"}=$(),g={...{duration:500,offset:0},...z},d=x.useId(),l=w?`${d}-title`:void 0,f=t.subtitle?`${d}-subtitle`:void 0,y=t.superTitle?`${d}-super-title`:void 0,H=[y,f].filter(Boolean).join(" ")||void 0;return p("section",{ref:N,role:"banner","aria-labelledby":l,"aria-describedby":H,className:a({"aiui-dark":j==="dark"},_({size:c}),I,n?.root),...M,children:[e(W,{pcImage:S,padImage:C,mobileImage:D,className:a("absolute inset-0 size-full object-cover",{"h-fit":c==="xlg"}),imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:L,playsInline:!0,autoPlay:!0}),p("div",{className:a("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",n?.content),children:[p("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[t.superTitle&&e(h,{as:"p",size:2,id:y,className:a("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",n?.superTitle),html:t.superTitle}),t.title&&e(J,{as:A,size:["xlg","lg"].includes(c)?5:4,id:l,className:a("banner-title ",n?.title),html:t.title}),t.subtitle&&e(h,{as:"p",size:3,id:f,className:a("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",n?.subtitle),html:t.subtitle})]}),u&&e("div",{className:"banner-countdown",children:e(V,{endDate:u,endDate_tz:O,dateFormat:P,variant:"spacious",className:"lg-desktop:mt-8 mt-6"})}),p("div",{className:a("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",n?.buttonGroup),children:[i?.text&&e(B,{variant:"secondary",onClick:r=>{if(i.link?.startsWith("#")){r.preventDefault();const s=document.querySelector(i.link);s&&k(s,g)}i.onClick?.()},className:a("",n?.secondaryButton),"aria-describedby":l,...i.link&&!i.link.startsWith("#")?{as:"a",href:v(i.link,b)}:{},children:i.text}),o?.text&&e(B,{onClick:r=>{if(o.link?.startsWith("#")){r.preventDefault();const s=document.querySelector(o.link);s&&k(s,g)}o.onClick?.()},className:a("",n?.primaryButton),"aria-describedby":l,...o.link&&!o.link.startsWith("#")?{as:"a",href:v(o.link,b)}:{},children:o.text})]}),Array.isArray(m)&&m.length>0&&e("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:m.map((r,s)=>r.pcImage?e(R,{source:r.pcImage.url,alt:r.pcImage.alt||`icon ${s+1}`,role:"img",className:"laptop:h-auto h-[48px] max-w-none",imgClassName:"h-full"},s):null)})]})]})});T.displayName="SecondaryBanner";var ee=F(T);export{ee as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SecondaryBanner/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { withLayout } from '../index.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = true,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n title,\n titleTag = 'h1',\n } = data\n\n const { locale = 'us' } = useAiuiContext()\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(secondaryButton.link, locale) }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(primaryButton.link, locale) }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default withLayout(SecondaryBanner)\n"],
|
|
5
|
-
"mappings": "aAwLQ,cAAAA,EAoBE,QAAAC,MApBF,oBAtLR,UAAYC,MAAW,QACvB,OAAS,OAAAC,MAAW,2BACpB,OAAOC,MAAU,UACjB,OAAS,MAAAC,EAAI,oBAAAC,MAAwB,yBAErC,OAAS,QAAAC,EAAM,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,aAAAC,MAAiB,4BAC1D,OAAOC,MAAW,oBAElB,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,cAAAC,MAAkB,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = true,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n title,\n titleTag = 'h1',\n } = data\n\n const { locale = 'us' } = useAiuiContext()\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(secondaryButton.link, locale) }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(primaryButton.link, locale) }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default withLayout(SecondaryBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "cva", "jump", "cn", "getLocalizedPath", "Text", "Button", "Heading", "Picture", "Countdown", "Media", "useAiuiContext", "withLayout", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "jumpOptions", "props", "ref", "pcImage", "padImage", "mobileImage", "isVideoLoop", "endDate", "endDate_tz", "dateFormat", "size", "icons", "theme", "primaryButton", "secondaryButton", "title", "titleTag", "locale", "mergedJumpOptions", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "e", "element", "icon", "index", "SecondaryBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import type { Img } from '../../types/props.js';
|
|
3
2
|
export type SelectStoreDataType = {
|
|
4
3
|
title: string;
|
|
@@ -8,10 +7,5 @@ export type SelectStoreDataType = {
|
|
|
8
7
|
padImg: Img;
|
|
9
8
|
miniImg: Img;
|
|
10
9
|
};
|
|
11
|
-
|
|
12
|
-
data: {
|
|
13
|
-
list: SelectStoreDataType[];
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
declare const _default: React.ForwardRefExoticComponent<SelectStoreType & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & React.RefAttributes<any>>;
|
|
10
|
+
declare const _default: any;
|
|
17
11
|
export default _default;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import type { ShelfDisplayProps } from './shelfDisplay.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<ShelfDisplayProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
4
2
|
export default _default;
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { SloganProps } from './types.js';
|
|
3
1
|
export declare const componentType = "copy";
|
|
4
2
|
export declare const componentName = "brand_slogan";
|
|
5
|
-
declare const _default:
|
|
3
|
+
declare const _default: any;
|
|
6
4
|
export default _default;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import type { SpacerProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
4
2
|
export default _default;
|
|
@@ -5,5 +5,5 @@ export interface SpecsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
|
|
|
5
5
|
onChange?: (product: any, index: number) => void;
|
|
6
6
|
onSecondaryChange?: (data: any) => void;
|
|
7
7
|
}
|
|
8
|
-
declare const _default:
|
|
8
|
+
declare const _default: any;
|
|
9
9
|
export default _default;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import type { SpecsComparisonProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<SpecsComparisonProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
4
2
|
export default _default;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import type { TabWithImageProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<TabWithImageProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
4
2
|
export default _default;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import React from 'react';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
4
2
|
export default _default;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import React from 'react';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<TabsGroupProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
4
2
|
export default _default;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import type { TabsWithMediaProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<TabsWithMediaProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
4
2
|
export default _default;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { ThreeDCarouselProps } from './types.js';
|
|
3
1
|
import 'swiper/css';
|
|
4
2
|
import 'swiper/css/navigation';
|
|
5
3
|
import 'swiper/css/pagination';
|
|
6
4
|
import 'swiper/css/effect-coverflow';
|
|
7
|
-
declare const _default:
|
|
5
|
+
declare const _default: any;
|
|
8
6
|
export default _default;
|
|
@@ -2,5 +2,5 @@ import React from 'react';
|
|
|
2
2
|
import type { TitlePropsBase } from './types.js';
|
|
3
3
|
export interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {
|
|
4
4
|
}
|
|
5
|
-
declare const _default:
|
|
5
|
+
declare const _default: any;
|
|
6
6
|
export default _default;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import type { VideoFeatureProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<VideoFeatureProps & React.RefAttributes<HTMLDivElement> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps>>;
|
|
1
|
+
declare const _default: any;
|
|
4
2
|
export default _default;
|
|
@@ -32,7 +32,7 @@ import type { WheelLotteryProps, WheelLotteryHandle } from './types.js';
|
|
|
32
32
|
* ```
|
|
33
33
|
*/
|
|
34
34
|
export declare const WheelLottery: import("react").ForwardRefExoticComponent<WheelLotteryProps & import("react").RefAttributes<WheelLotteryHandle>>;
|
|
35
|
-
declare const _default:
|
|
35
|
+
declare const _default: any;
|
|
36
36
|
export default _default;
|
|
37
37
|
export { WinnerModal } from './WinnerModal.js';
|
|
38
38
|
export { RulesModal } from './RulesModal.js';
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type { WhyChooseProps, WhyChooseItem as ItemType } from './types.js';
|
|
1
|
+
import type { WhyChooseItem as ItemType } from './types.js';
|
|
3
2
|
declare const WhyChooseItem: {
|
|
4
3
|
({ data }: {
|
|
5
4
|
data: ItemType;
|
|
6
5
|
}): import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
displayName: string;
|
|
8
7
|
};
|
|
9
|
-
declare const _default:
|
|
8
|
+
declare const _default: any;
|
|
10
9
|
export default _default;
|
|
11
10
|
export { WhyChooseItem };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as m}from"react/jsx-runtime";import{useRef as i,useEffect as
|
|
1
|
+
import{jsx as m}from"react/jsx-runtime";import{useRef as i,useEffect as u,useState as N}from"react";import{cn as f}from"../helpers/utils.js";const T=({src:v,poster:b,className:p="",videoClassName:h="",autoplay:g=!0,muted:y=!0,loop:t=!0,controls:L=!1,playsInline:E=!0,videoRef:R,intersectionObserverConfig:M={threshold:0,rootMargin:"200px"},...V})=>{const[o,P]=N(!1),w=i(null),l=i(null),a=i(!1),e=R||w,{threshold:c,rootMargin:d}=M;return u(()=>{const n=e.current;if(!n||t)return;const r=()=>{a.current=!0};return n.addEventListener("ended",r),()=>{n.removeEventListener("ended",r)}},[e,t,o]),u(()=>{const n=new IntersectionObserver(I=>{I.forEach(S=>{if(S.isIntersecting){if(o||P(!0),e.current){const s=e.current;if(!t&&a.current)return;s.muted=!0,s.currentTime=0,s.play().catch(k=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",k)})}}else e.current&&e.current.pause()})},{threshold:c,rootMargin:d}),r=l.current;return r&&n.observe(r),()=>{r&&n.unobserve(r)}},[e,t,d,o,c]),m("div",{ref:l,className:f("relative size-full",p),children:m("video",{ref:e,src:o?v:void 0,poster:o?b:void 0,className:f("size-full object-cover",h),loop:t,muted:y,controls:L,playsInline:E,preload:"metadata",disablePictureInPicture:!0,"webkit-playsinline":!0,autoPlay:g,...V})})};var z=T;export{z 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 intersectionObserverConfig?: {\n threshold?: number | number[]\n rootMargin?: string\n }\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 intersectionObserverConfig = {\n threshold: 0, // \u5F53\u5143\u7D20\u8FDB\u5165\u89C6\u7A97\u65F6\u89E6\u53D1\n rootMargin: '200px', // \u63D0\u524D 200px \u89E6\u53D1\n },\n ...attr\n}: ScrollLoadVideoProps) => {\n const [shouldLoad, setShouldLoad] = useState(false)\n const internalVideoRef = useRef<HTMLVideoElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n // \u8DDF\u8E2A\u89C6\u9891\u662F\u5426\u5DF2\u7ECF\u64AD\u653E\u5B8C\u6210\uFF08\u7528\u4E8E loop=false \u65F6\u53EA\u64AD\u653E\u4E00\u6B21\uFF09\n const hasPlayedRef = useRef(false)\n\n const currentVideoRef = videoRef || internalVideoRef\n const { threshold, rootMargin } = intersectionObserverConfig\n\n // \u76D1\u542C\u89C6\u9891\u64AD\u653E\u7ED3\u675F\u4E8B\u4EF6\n useEffect(() => {\n const video = currentVideoRef.current\n if (!video || loop) return\n\n const handleEnded = () => {\n hasPlayedRef.current = true\n }\n\n video.addEventListener('ended', handleEnded)\n return () => {\n video.removeEventListener('ended', handleEnded)\n }\n }, [currentVideoRef, loop, shouldLoad])\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\n // \u5982\u679C loop=false \u4E14\u89C6\u9891\u5DF2\u7ECF\u64AD\u653E\u8FC7\uFF0C\u4E0D\u518D\u91CD\u65B0\u64AD\u653E\n if (!loop && hasPlayedRef.current) {\n return\n }\n\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: threshold,\n rootMargin: rootMargin,\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, loop, rootMargin, shouldLoad, threshold])\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={shouldLoad ? poster : undefined}\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 // eslint-disable-next-line react/no-unknown-property\n webkit-playsinline
|
|
5
|
-
"mappings": "AAmHM,cAAAA,MAAA,oBAnHN,OAAgB,UAAAC,EAAQ,aAAAC,EAAW,YAAAC,MAAgB,QACnD,OAAS,MAAAC,MAAU,sBAoBnB,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,2BAAAC,EAA6B,CAC3B,UAAW,EACX,WAAY,OACd,EACA,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIhB,EAAS,EAAK,EAC5CiB,EAAmBnB,EAAyB,IAAI,EAChDoB,EAAepB,EAAuB,IAAI,EAE1CqB,EAAerB,EAAO,EAAK,EAE3BsB,EAAkBR,GAAYK,EAC9B,CAAE,UAAAI,EAAW,WAAAC,CAAW,EAAIT,EAGlC,OAAAd,EAAU,IAAM,CACd,MAAMwB,EAAQH,EAAgB,QAC9B,GAAI,CAACG,GAASd,EAAM,OAEpB,MAAMe,EAAc,IAAM,CACxBL,EAAa,QAAU,EACzB,EAEA,OAAAI,EAAM,iBAAiB,QAASC,CAAW,EACpC,IAAM,CACXD,EAAM,oBAAoB,QAASC,CAAW,CAChD,CACF,EAAG,CAACJ,EAAiBX,EAAMM,CAAU,CAAC,EAGtChB,EAAU,IAAM,CACd,MAAM0B,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAOR,GALKZ,GACHC,EAAc,EAAI,EAIhBI,EAAgB,QAAS,CAC3B,MAAMG,EAAQH,EAAgB,QAG9B,GAAI,CAACX,GAAQU,EAAa,QACxB,OAGFI,EAAM,MAAQ,GACdA,EAAM,YAAc,EACpBA,EAAM,KAAK,EAAE,MAAOK,GAAmB,CACrC,QAAQ,KAAK,oDAAaA,CAAK,CACjC,CAAC,CACH,OACSR,EAAgB,SAEzBA,EAAgB,QAAQ,MAAM,CAElC,CAAC,CACH,EACA,CACE,UAAWC,EACX,WAAYC,CACd,CACF,EAEMO,EAAiBX,EAAa,QACpC,OAAIW,GACFJ,EAAS,QAAQI,CAAc,EAG1B,IAAM,CACPA,GACFJ,EAAS,UAAUI,CAAc,CAErC,CACF,EAAG,CAACT,EAAiBX,EAAMa,EAAYP,EAAYM,CAAS,CAAC,EAG3DxB,EAAC,OAAI,IAAKqB,EAAc,UAAWjB,EAAG,qBAAsBI,CAAS,EAEnE,SAAAR,EAAC,SACC,IAAKuB,EACL,IAAKL,EAAaZ,EAAM,OACxB,OAAQY,EAAaX,EAAS,OAC9B,UAAWH,EAAG,yBAA0BK,CAAc,EACtD,KAAMG,EACN,MAAOD,EACP,SAAUE,EACV,YAAaC,EACb,QAAQ,WACR,wBAAuB,GAEvB,
|
|
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 intersectionObserverConfig?: {\n threshold?: number | number[]\n rootMargin?: string\n }\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 intersectionObserverConfig = {\n threshold: 0, // \u5F53\u5143\u7D20\u8FDB\u5165\u89C6\u7A97\u65F6\u89E6\u53D1\n rootMargin: '200px', // \u63D0\u524D 200px \u89E6\u53D1\n },\n ...attr\n}: ScrollLoadVideoProps) => {\n const [shouldLoad, setShouldLoad] = useState(false)\n const internalVideoRef = useRef<HTMLVideoElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n // \u8DDF\u8E2A\u89C6\u9891\u662F\u5426\u5DF2\u7ECF\u64AD\u653E\u5B8C\u6210\uFF08\u7528\u4E8E loop=false \u65F6\u53EA\u64AD\u653E\u4E00\u6B21\uFF09\n const hasPlayedRef = useRef(false)\n\n const currentVideoRef = videoRef || internalVideoRef\n const { threshold, rootMargin } = intersectionObserverConfig\n\n // \u76D1\u542C\u89C6\u9891\u64AD\u653E\u7ED3\u675F\u4E8B\u4EF6\n useEffect(() => {\n const video = currentVideoRef.current\n if (!video || loop) return\n\n const handleEnded = () => {\n hasPlayedRef.current = true\n }\n\n video.addEventListener('ended', handleEnded)\n return () => {\n video.removeEventListener('ended', handleEnded)\n }\n }, [currentVideoRef, loop, shouldLoad])\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\n // \u5982\u679C loop=false \u4E14\u89C6\u9891\u5DF2\u7ECF\u64AD\u653E\u8FC7\uFF0C\u4E0D\u518D\u91CD\u65B0\u64AD\u653E\n if (!loop && hasPlayedRef.current) {\n return\n }\n\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: threshold,\n rootMargin: rootMargin,\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, loop, rootMargin, shouldLoad, threshold])\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={shouldLoad ? poster : undefined}\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 // eslint-disable-next-line react/no-unknown-property\n webkit-playsinline\n autoPlay={autoplay}\n {...attr}\n />\n </div>\n )\n}\n\nexport default ScrollLoadVideo\n"],
|
|
5
|
+
"mappings": "AAmHM,cAAAA,MAAA,oBAnHN,OAAgB,UAAAC,EAAQ,aAAAC,EAAW,YAAAC,MAAgB,QACnD,OAAS,MAAAC,MAAU,sBAoBnB,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,2BAAAC,EAA6B,CAC3B,UAAW,EACX,WAAY,OACd,EACA,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIhB,EAAS,EAAK,EAC5CiB,EAAmBnB,EAAyB,IAAI,EAChDoB,EAAepB,EAAuB,IAAI,EAE1CqB,EAAerB,EAAO,EAAK,EAE3BsB,EAAkBR,GAAYK,EAC9B,CAAE,UAAAI,EAAW,WAAAC,CAAW,EAAIT,EAGlC,OAAAd,EAAU,IAAM,CACd,MAAMwB,EAAQH,EAAgB,QAC9B,GAAI,CAACG,GAASd,EAAM,OAEpB,MAAMe,EAAc,IAAM,CACxBL,EAAa,QAAU,EACzB,EAEA,OAAAI,EAAM,iBAAiB,QAASC,CAAW,EACpC,IAAM,CACXD,EAAM,oBAAoB,QAASC,CAAW,CAChD,CACF,EAAG,CAACJ,EAAiBX,EAAMM,CAAU,CAAC,EAGtChB,EAAU,IAAM,CACd,MAAM0B,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAOR,GALKZ,GACHC,EAAc,EAAI,EAIhBI,EAAgB,QAAS,CAC3B,MAAMG,EAAQH,EAAgB,QAG9B,GAAI,CAACX,GAAQU,EAAa,QACxB,OAGFI,EAAM,MAAQ,GACdA,EAAM,YAAc,EACpBA,EAAM,KAAK,EAAE,MAAOK,GAAmB,CACrC,QAAQ,KAAK,oDAAaA,CAAK,CACjC,CAAC,CACH,OACSR,EAAgB,SAEzBA,EAAgB,QAAQ,MAAM,CAElC,CAAC,CACH,EACA,CACE,UAAWC,EACX,WAAYC,CACd,CACF,EAEMO,EAAiBX,EAAa,QACpC,OAAIW,GACFJ,EAAS,QAAQI,CAAc,EAG1B,IAAM,CACPA,GACFJ,EAAS,UAAUI,CAAc,CAErC,CACF,EAAG,CAACT,EAAiBX,EAAMa,EAAYP,EAAYM,CAAS,CAAC,EAG3DxB,EAAC,OAAI,IAAKqB,EAAc,UAAWjB,EAAG,qBAAsBI,CAAS,EAEnE,SAAAR,EAAC,SACC,IAAKuB,EACL,IAAKL,EAAaZ,EAAM,OACxB,OAAQY,EAAaX,EAAS,OAC9B,UAAWH,EAAG,yBAA0BK,CAAc,EACtD,KAAMG,EACN,MAAOD,EACP,SAAUE,EACV,YAAaC,EACb,QAAQ,WACR,wBAAuB,GAEvB,qBAAkB,GAClB,SAAUJ,EACT,GAAGO,EACN,EACF,CAEJ,EAEA,IAAOgB,EAAQ5B",
|
|
6
6
|
"names": ["jsx", "useRef", "useEffect", "useState", "cn", "ScrollLoadVideo", "src", "poster", "className", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "intersectionObserverConfig", "attr", "shouldLoad", "setShouldLoad", "internalVideoRef", "containerRef", "hasPlayedRef", "currentVideoRef", "threshold", "rootMargin", "video", "handleEnded", "observer", "entries", "entry", "error", "currentElement", "ScrollLoadVideo_default"]
|
|
7
7
|
}
|
|
@@ -34,5 +34,4 @@ export declare const useStyles: (styleProps: Partial<StylesProps>, data?: Record
|
|
|
34
34
|
* @param WrappedComponent - 需要包装的组件
|
|
35
35
|
* @param defaultLayoutProps - 默认样式属性
|
|
36
36
|
*/
|
|
37
|
-
export declare function withLayout<P
|
|
38
|
-
export declare function withLayout<P>(WrappedComponent: React.ComponentType<P>, defaultLayoutProps?: Partial<StylesProps & ContainerProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & Partial<StylesProps & ContainerProps>> & React.RefAttributes<any>>;
|
|
37
|
+
export declare function withLayout<P>(WrappedComponent: React.ComponentType<P>, defaultLayoutProps?: Partial<StylesProps & ContainerProps>): any;
|