@anker-in/headless-ui 1.1.9-alpha.1764927943455 → 1.1.9-alpha.1764931651058
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/cjs/helpers/ScrollLoadVideo.js +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +5 -5
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/esm/helpers/ScrollLoadVideo.js +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/ScrollLoadVideo.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useEffect, useState } from 'react'\nimport { cn } from '../helpers/utils.js'\n\ninterface ScrollLoadVideoProps {\n src: string\n poster?: string\n className?: string\n videoClassName?: string\n autoplay?: boolean\n muted?: boolean\n loop?: boolean\n controls?: boolean\n playsInline?: boolean\n videoRef?: React.RefObject<HTMLVideoElement>\n [key: string]: any\n}\n\nconst ScrollLoadVideo = ({\n src,\n poster,\n className = '',\n videoClassName = '',\n autoplay = true,\n muted = true,\n loop = true,\n controls = false,\n playsInline = true,\n videoRef,\n ...attr\n}: ScrollLoadVideoProps) => {\n const [shouldLoad, setShouldLoad] = useState(false)\n const internalVideoRef = useRef<HTMLVideoElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const currentVideoRef = videoRef || internalVideoRef\n\n // IntersectionObserver \u771F\u6B63\u7684\u61D2\u52A0\u8F7D + \u89C6\u7A97\u64AD\u653E\u63A7\u5236\n useEffect(() => {\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // \u7B2C\u4E00\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u624D\u5F00\u59CB\u52A0\u8F7D\u89C6\u9891\n if (!shouldLoad) {\n setShouldLoad(true)\n }\n\n // \u5982\u679C\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\u4E14\u89C6\u9891\u5DF2\u52A0\u8F7D\n if (
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmFM,IAAAI,EAAA,6BAnFNC,EAAmD,iBACnDC,EAAmB,+BAgBnB,MAAMC,EAAkB,CAAC,CACvB,IAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,SAAAC,EAAW,GACX,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,SAAAC,EAAW,GACX,YAAAC,EAAc,GACd,SAAAC,EACA,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,KAAI,YAAS,EAAK,EAC5CC,KAAmB,UAAyB,IAAI,EAChDC,KAAe,UAAuB,IAAI,EAE1CC,EAAkBN,GAAYI,EAGpC,sBAAU,IAAM,CACd,MAAMG,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAOR,GALKP,GACHC,EAAc,EAAI,
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useEffect, useState } from 'react'\nimport { cn } from '../helpers/utils.js'\n\ninterface ScrollLoadVideoProps {\n src: string\n poster?: string\n className?: string\n videoClassName?: string\n autoplay?: boolean\n muted?: boolean\n loop?: boolean\n controls?: boolean\n playsInline?: boolean\n videoRef?: React.RefObject<HTMLVideoElement>\n [key: string]: any\n}\n\nconst ScrollLoadVideo = ({\n src,\n poster,\n className = '',\n videoClassName = '',\n autoplay = true,\n muted = true,\n loop = true,\n controls = false,\n playsInline = true,\n videoRef,\n ...attr\n}: ScrollLoadVideoProps) => {\n const [shouldLoad, setShouldLoad] = useState(false)\n const internalVideoRef = useRef<HTMLVideoElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const currentVideoRef = videoRef || internalVideoRef\n\n // IntersectionObserver \u771F\u6B63\u7684\u61D2\u52A0\u8F7D + \u89C6\u7A97\u64AD\u653E\u63A7\u5236\n useEffect(() => {\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // \u7B2C\u4E00\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u624D\u5F00\u59CB\u52A0\u8F7D\u89C6\u9891\n if (!shouldLoad) {\n setShouldLoad(true)\n }\n\n // \u5982\u679C\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\u4E14\u89C6\u9891\u5DF2\u52A0\u8F7D\n if (currentVideoRef.current) {\n const video = currentVideoRef.current\n video.muted = true\n video.currentTime = 0 // \u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u4ECE\u5934\u64AD\u653E\n video.play().catch((error: unknown) => {\n console.warn('\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:', error)\n })\n }\n } else if (currentVideoRef.current) {\n // \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u89C6\u9891\n currentVideoRef.current.pause()\n }\n })\n },\n {\n threshold: 0.1, // \u5F53 10% \u7684\u5143\u7D20\u8FDB\u5165\u89C6\u7A97\u65F6\u89E6\u53D1\n rootMargin: '50px', // \u63D0\u524D 50px \u89E6\u53D1\n }\n )\n\n const currentElement = containerRef.current\n if (currentElement) {\n observer.observe(currentElement)\n }\n\n return () => {\n if (currentElement) {\n observer.unobserve(currentElement)\n }\n }\n }, [currentVideoRef, shouldLoad])\n\n return (\n <div ref={containerRef} className={cn('relative size-full', className)}>\n {/* \u89C6\u9891 */}\n <video\n ref={currentVideoRef}\n src={shouldLoad ? src : undefined} // \u53EA\u6709\u5728\u9700\u8981\u65F6\u624D\u8BBE\u7F6E src\n poster={poster}\n className={cn('size-full object-cover', videoClassName)}\n loop={loop}\n muted={muted}\n controls={controls}\n playsInline={playsInline}\n preload=\"metadata\" // \u5B8C\u5168\u4E0D\u9884\u52A0\u8F7D\n disablePictureInPicture\n webkit-playsinline\n autoPlay={autoplay}\n {...attr}\n />\n </div>\n )\n}\n\nexport default ScrollLoadVideo\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmFM,IAAAI,EAAA,6BAnFNC,EAAmD,iBACnDC,EAAmB,+BAgBnB,MAAMC,EAAkB,CAAC,CACvB,IAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,SAAAC,EAAW,GACX,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,SAAAC,EAAW,GACX,YAAAC,EAAc,GACd,SAAAC,EACA,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,KAAI,YAAS,EAAK,EAC5CC,KAAmB,UAAyB,IAAI,EAChDC,KAAe,UAAuB,IAAI,EAE1CC,EAAkBN,GAAYI,EAGpC,sBAAU,IAAM,CACd,MAAMG,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAOR,GALKP,GACHC,EAAc,EAAI,EAIhBG,EAAgB,QAAS,CAC3B,MAAMI,EAAQJ,EAAgB,QAC9BI,EAAM,MAAQ,GACdA,EAAM,YAAc,EACpBA,EAAM,KAAK,EAAE,MAAOC,GAAmB,CACrC,QAAQ,KAAK,oDAAaA,CAAK,CACjC,CAAC,CACH,OACSL,EAAgB,SAEzBA,EAAgB,QAAQ,MAAM,CAElC,CAAC,CACH,EACA,CACE,UAAW,GACX,WAAY,MACd,CACF,EAEMM,EAAiBP,EAAa,QACpC,OAAIO,GACFL,EAAS,QAAQK,CAAc,EAG1B,IAAM,CACPA,GACFL,EAAS,UAAUK,CAAc,CAErC,CACF,EAAG,CAACN,EAAiBJ,CAAU,CAAC,KAG9B,OAAC,OAAI,IAAKG,EAAc,aAAW,MAAG,qBAAsBZ,CAAS,EAEnE,mBAAC,SACC,IAAKa,EACL,IAAKJ,EAAaX,EAAM,OACxB,OAAQC,EACR,aAAW,MAAG,yBAA0BE,CAAc,EACtD,KAAMG,EACN,MAAOD,EACP,SAAUE,EACV,YAAaC,EACb,QAAQ,WACR,wBAAuB,GACvB,qBAAkB,GAClB,SAAUJ,EACT,GAAGM,EACN,EACF,CAEJ,EAEA,IAAOhB,EAAQK",
|
|
6
6
|
"names": ["ScrollLoadVideo_exports", "__export", "ScrollLoadVideo_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "ScrollLoadVideo", "src", "poster", "className", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "attr", "shouldLoad", "setShouldLoad", "internalVideoRef", "containerRef", "currentVideoRef", "observer", "entries", "entry", "video", "error", "currentElement"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as ge,jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as N,useRef as r,useMemo as Ee,useEffect as x,forwardRef as Ne,useImperativeHandle as we,useCallback as He}from"react";import{cn as y}from"../../helpers/utils.js";import{withLayout as _e}from"../../shared/Styles.js";import ce from"../../components/button.js";import{VideoModal as ue}from"../VideoModal/index.js";import{convertLexicalToHTML as de}from"@payloadcms/richtext-lexical/html";import{useInView as Re}from"react-intersection-observer";import{useExposure as Me}from"../../hooks/useExposure.js";import C from"../../helpers/ScrollLoadVideo.js";import{gsap as D}from"gsap";import{SplitText as pe}from"gsap/dist/SplitText";import{ScrollTrigger as z}from"gsap/dist/ScrollTrigger";typeof window<"u"&&D.registerPlugin(z,pe);const Se="media_player_base",ke="video",m={TEXT_START_OFFSET:"10%",TEXT_ANIMATION_MULTIPLIER:1.5,TEXT_ANIMATION_OFFSET:80,VIDEO_HEIGHT_BASE:102,OVERLAP_FACTOR:.5,VIDEO_PROGRESS_THRESHOLD:.9,HEIGHT_CHANGE_THRESHOLD:5},V={DAMPING:.18,EPSILON:.5},me=({defaultConverters:w})=>({...w,text:H=>{const{node:c}=H;return c.$&&c.$.color?`<span class="lexical-${c.$.color}">${c.text}</span>`:c.text}}),fe=Ne(({className:w="",id:H,onBtnClick:c,data:{title:_,videoTitle:R,btnText:M,youtubeId:S,video:k,mobileVideo:ee,theme:B,img:L,shape:G,titleAnimation:f,...ve}},Te)=>{const{sticky:u}=ve,[O,te]=N(!1),[re,ne]=N(0),[be,le]=N(0),[$,xe]=N(0),[A,q]=N(!1),g=r(null),X=r(null),o=r(null),j=r(null),h=r(null),U=r(null),oe=r(null),se=r(null),F=r({btb:0,titleHeight:0}),W=r(!1),J=r(null),K=r(null),P=r(null),{ref:ae,inView:s}=Re();we(Te,()=>o.current);const v=typeof _=="string"?_:_&&de({data:_,converters:me}),I=typeof R=="string"?R:R&&de({data:R,converters:me});x(()=>{s?(g.current?.play(),te(!0)):(g.current?.pause(),te(!1))},[s]),x(()=>{if(!o.current||!u)return;const n=()=>{if(!o.current)return;const a=o.current.getBoundingClientRect(),T=window.innerHeight,E=T-a.bottom,p=E>T?T:E,b=o.current.clientHeight+T;F.current.btb=p,F.current.titleHeight=b,W.current||(W.current=!0,ne(p),le(b))};n();const d=new ResizeObserver(()=>{requestAnimationFrame(()=>{n()})});d.observe(o.current);let t=null;const l=()=>{t===null&&(t=requestAnimationFrame(()=>{n(),t=null}))};return window.addEventListener("scroll",l,{passive:!0}),()=>{d.disconnect(),window.removeEventListener("scroll",l),t!==null&&cancelAnimationFrame(t),W.current=!1}},[u]),x(()=>{if(!u)return;let n;const d=()=>{ne(t=>{const l=F.current.btb,a=l-t;return Math.abs(a)<=V.EPSILON?l:t+a*V.DAMPING}),le(t=>{const l=F.current.titleHeight,a=l-t;return Math.abs(a)<=V.EPSILON?l:t+a*V.DAMPING}),n=requestAnimationFrame(d)};return n=requestAnimationFrame(d),()=>{cancelAnimationFrame(n)}},[u]),x(()=>{if(!s||!f||f!=="fade-in"||!j.current)return;const n=j.current,d=n.clientHeight||80;U.current=new pe(n,{type:"words",wordsClass:"word"});const t=U.current.words,l=t.length,a=1/l,T=t.map((E,p)=>{const b=p/l*(1-m.OVERLAP_FACTOR),Y=a*(1+m.OVERLAP_FACTOR);return{start:b,width:Y}});return D.set(t,{opacity:0}),oe.current=z.create({trigger:o.current,start:`top center-=${m.TEXT_START_OFFSET}`,end:`top+=${d*m.TEXT_ANIMATION_MULTIPLIER+m.TEXT_ANIMATION_OFFSET}px center-=${m.TEXT_START_OFFSET}`,scrub:!0,onUpdate:E=>{const p=E.progress;t.forEach((b,Y)=>{const{start:he,width:Ie}=T[Y];let Z=(p-he)/Ie;Z=Math.max(0,Math.min(Z,1)),D.set(b,{opacity:Z})}),X.current&&D.set(X.current,{opacity:p})}}),()=>{U.current?.revert(),oe.current?.kill()}},[f,s]),x(()=>{if(!(!s||!o.current))return se.current=z.create({trigger:o.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:n=>{xe(n.progress)}}),()=>{se.current?.kill()}},[s]),Me(h,{componentType:ke,componentName:Se,componentTitle:I});const ye=Ee(()=>s&&$>0&&$<m.VIDEO_PROGRESS_THRESHOLD?3:s?2:1,[$,s]);x(()=>{if(!(!u||!J.current||!K.current||!h.current))return P.current=z.create({trigger:J.current,start:"top top",endTrigger:h.current,end:"bottom top",pin:K.current,pinSpacing:!1,anticipatePin:1,invalidateOnRefresh:!0}),requestAnimationFrame(()=>{P.current?.refresh()}),()=>{P.current?.kill(),P.current=null}},[u]);const ie=He(()=>{q(!0),c?.()},[c]),Q="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return u?i(ge,{children:[e("div",{ref:o,className:y("relative z-10",Q,{"aiui-dark":B==="dark","rounded-box":G==="rounded"},w),children:e("div",{ref:ae,children:!f&&i("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[v&&!O&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),I&&O&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:I}}),M&&e(ce,{variant:"link",className:y("member-equity-button-secondary "),onClick:ie,children:M})]})})}),i("div",{style:{marginBottom:`-${re}px`,marginTop:`-${be}px`,zIndex:ye},className:"relative",children:[e("div",{className:"sticky top-0",ref:J,children:i("div",{id:H,className:y("relative h-screen w-full overflow-hidden",{"aiui-dark":B==="dark","rounded-box":G==="rounded"}),children:[f==="fade-in"&&v&&e("div",{ref:j,className:"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),i("div",{className:"media-cover absolute left-0 top-0 size-full",ref:K,children:[e(C,{videoRef:g,poster:L?.url||"",src:k?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!
|
|
1
|
+
"use client";import{Fragment as ge,jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as N,useRef as r,useMemo as Ee,useEffect as x,forwardRef as Ne,useImperativeHandle as we,useCallback as He}from"react";import{cn as y}from"../../helpers/utils.js";import{withLayout as _e}from"../../shared/Styles.js";import ce from"../../components/button.js";import{VideoModal as ue}from"../VideoModal/index.js";import{convertLexicalToHTML as de}from"@payloadcms/richtext-lexical/html";import{useInView as Re}from"react-intersection-observer";import{useExposure as Me}from"../../hooks/useExposure.js";import C from"../../helpers/ScrollLoadVideo.js";import{gsap as D}from"gsap";import{SplitText as pe}from"gsap/dist/SplitText";import{ScrollTrigger as z}from"gsap/dist/ScrollTrigger";typeof window<"u"&&D.registerPlugin(z,pe);const Se="media_player_base",ke="video",m={TEXT_START_OFFSET:"10%",TEXT_ANIMATION_MULTIPLIER:1.5,TEXT_ANIMATION_OFFSET:80,VIDEO_HEIGHT_BASE:102,OVERLAP_FACTOR:.5,VIDEO_PROGRESS_THRESHOLD:.9,HEIGHT_CHANGE_THRESHOLD:5},V={DAMPING:.18,EPSILON:.5},me=({defaultConverters:w})=>({...w,text:H=>{const{node:c}=H;return c.$&&c.$.color?`<span class="lexical-${c.$.color}">${c.text}</span>`:c.text}}),fe=Ne(({className:w="",id:H,onBtnClick:c,data:{title:_,videoTitle:R,btnText:M,youtubeId:S,video:k,mobileVideo:ee,theme:B,img:L,shape:G,titleAnimation:f,...ve}},Te)=>{const{sticky:u}=ve,[O,te]=N(!1),[re,ne]=N(0),[be,le]=N(0),[$,xe]=N(0),[A,q]=N(!1),g=r(null),X=r(null),o=r(null),j=r(null),h=r(null),U=r(null),oe=r(null),se=r(null),F=r({btb:0,titleHeight:0}),W=r(!1),J=r(null),K=r(null),P=r(null),{ref:ae,inView:s}=Re();we(Te,()=>o.current);const v=typeof _=="string"?_:_&&de({data:_,converters:me}),I=typeof R=="string"?R:R&&de({data:R,converters:me});x(()=>{s?(g.current?.play(),te(!0)):(g.current?.pause(),te(!1))},[s]),x(()=>{if(!o.current||!u)return;const n=()=>{if(!o.current)return;const a=o.current.getBoundingClientRect(),T=window.innerHeight,E=T-a.bottom,p=E>T?T:E,b=o.current.clientHeight+T;F.current.btb=p,F.current.titleHeight=b,W.current||(W.current=!0,ne(p),le(b))};n();const d=new ResizeObserver(()=>{requestAnimationFrame(()=>{n()})});d.observe(o.current);let t=null;const l=()=>{t===null&&(t=requestAnimationFrame(()=>{n(),t=null}))};return window.addEventListener("scroll",l,{passive:!0}),()=>{d.disconnect(),window.removeEventListener("scroll",l),t!==null&&cancelAnimationFrame(t),W.current=!1}},[u]),x(()=>{if(!u)return;let n;const d=()=>{ne(t=>{const l=F.current.btb,a=l-t;return Math.abs(a)<=V.EPSILON?l:t+a*V.DAMPING}),le(t=>{const l=F.current.titleHeight,a=l-t;return Math.abs(a)<=V.EPSILON?l:t+a*V.DAMPING}),n=requestAnimationFrame(d)};return n=requestAnimationFrame(d),()=>{cancelAnimationFrame(n)}},[u]),x(()=>{if(!s||!f||f!=="fade-in"||!j.current)return;const n=j.current,d=n.clientHeight||80;U.current=new pe(n,{type:"words",wordsClass:"word"});const t=U.current.words,l=t.length,a=1/l,T=t.map((E,p)=>{const b=p/l*(1-m.OVERLAP_FACTOR),Y=a*(1+m.OVERLAP_FACTOR);return{start:b,width:Y}});return D.set(t,{opacity:0}),oe.current=z.create({trigger:o.current,start:`top center-=${m.TEXT_START_OFFSET}`,end:`top+=${d*m.TEXT_ANIMATION_MULTIPLIER+m.TEXT_ANIMATION_OFFSET}px center-=${m.TEXT_START_OFFSET}`,scrub:!0,onUpdate:E=>{const p=E.progress;t.forEach((b,Y)=>{const{start:he,width:Ie}=T[Y];let Z=(p-he)/Ie;Z=Math.max(0,Math.min(Z,1)),D.set(b,{opacity:Z})}),X.current&&D.set(X.current,{opacity:p})}}),()=>{U.current?.revert(),oe.current?.kill()}},[f,s]),x(()=>{if(!(!s||!o.current))return se.current=z.create({trigger:o.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:n=>{xe(n.progress)}}),()=>{se.current?.kill()}},[s]),Me(h,{componentType:ke,componentName:Se,componentTitle:I});const ye=Ee(()=>s&&$>0&&$<m.VIDEO_PROGRESS_THRESHOLD?3:s?2:1,[$,s]);x(()=>{if(!(!u||!J.current||!K.current||!h.current))return P.current=z.create({trigger:J.current,start:"top top",endTrigger:h.current,end:"bottom top",pin:K.current,pinSpacing:!1,anticipatePin:1,invalidateOnRefresh:!0}),requestAnimationFrame(()=>{P.current?.refresh()}),()=>{P.current?.kill(),P.current=null}},[u]);const ie=He(()=>{q(!0),c?.()},[c]),Q="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return u?i(ge,{children:[e("div",{ref:o,className:y("relative z-10",Q,{"aiui-dark":B==="dark","rounded-box":G==="rounded"},w),children:e("div",{ref:ae,children:!f&&i("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[v&&!O&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),I&&O&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:I}}),M&&e(ce,{variant:"link",className:y("member-equity-button-secondary "),onClick:ie,children:M})]})})}),i("div",{style:{marginBottom:`-${re}px`,marginTop:`-${be}px`,zIndex:ye},className:"relative",children:[e("div",{className:"sticky top-0",ref:J,children:i("div",{id:H,className:y("relative h-screen w-full overflow-hidden",{"aiui-dark":B==="dark","rounded-box":G==="rounded"}),children:[f==="fade-in"&&v&&e("div",{ref:j,className:"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),i("div",{className:"media-cover absolute left-0 top-0 size-full",ref:K,children:[e(C,{videoRef:g,poster:L?.url||"",src:k?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!1,"webkit-playsinline":!0,"x5-playsinline":!0}),e(C,{videoRef:g,poster:L?.url||"",src:ee?.url||k?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!1,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:X,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:y("relative box-content block",Q),style:{height:`${re}px`},ref:h})]}),A&&S&&e(ue,{visible:A,youTubeId:S,onCloseModal:()=>q(!1)})]}):i(ge,{children:[i("div",{id:H,className:y("relative overflow-hidden",Q,{"aiui-dark":B==="dark","rounded-box":G==="rounded"},w),children:[i("div",{ref:ae,children:[!f&&i("div",{className:"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[v&&!O&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),I&&O&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:I}}),M&&e(ce,{variant:"link",className:y("member-equity-button-secondary"),onClick:ie,children:M})]}),e(C,{videoRef:g,poster:L?.url||"",src:k?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(C,{videoRef:g,poster:L?.url||"",src:ee?.url||k?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0})]}),e("div",{ref:h,className:"absolute bottom-0 left-0 h-px w-full"})]}),A&&S&&e(ue,{visible:A,youTubeId:S,onCloseModal:()=>q(!1)})]})});fe.displayName="MediaPlayerBase";var qe=_e(fe);export{qe 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, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nif (typeof window !== 'undefined') {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n}\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\n\nconst SMOOTHING_CONFIG = {\n DAMPING: 0.18,\n EPSILON: 0.5,\n} as const\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\ninterface ScrollTriggerInstance {\n progress: number\n kill: () => void\n refresh: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const layoutTargetsRef = useRef({ btb: 0, titleHeight: 0 })\n const layoutInitializedRef = useRef(false)\n const stickyWrapperRef = useRef<HTMLDivElement>(null)\n const videoContainerRef = useRef<HTMLDivElement>(null)\n const videoPinTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n // \u89C6\u9891\u64AD\u653E\u63A7\u5236\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n useEffect(() => {\n if (!titleRef.current || !sticky) return\n\n // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n const calculateLayout = () => {\n if (!titleRef.current) return\n\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n // const scrollTop = window.scrollY || window.pageYOffset\n // const elementBottomToPageTop = rect.bottom + scrollTop\n // const pageHeight = document.documentElement.scrollHeight\n // const distanceToPageBottom = pageHeight - elementBottomToPageTop\n\n const inViewRefToBottom = screenHeight - rect.bottom\n const newBtb = inViewRefToBottom > screenHeight ? screenHeight : inViewRefToBottom\n const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n layoutTargetsRef.current.btb = newBtb\n layoutTargetsRef.current.titleHeight = newTitleHeight\n\n if (!layoutInitializedRef.current) {\n layoutInitializedRef.current = true\n setbtb(newBtb)\n setTitleHeight(newTitleHeight)\n }\n }\n\n // \u521D\u59CB\u8BA1\u7B97\n calculateLayout()\n\n // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n const resizeObserver = new ResizeObserver(() => {\n // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n requestAnimationFrame(() => {\n calculateLayout()\n })\n })\n\n resizeObserver.observe(titleRef.current)\n\n // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n let scrollFrame: number | null = null\n const handleScroll = () => {\n if (scrollFrame !== null) return\n scrollFrame = requestAnimationFrame(() => {\n calculateLayout()\n scrollFrame = null\n })\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n\n return () => {\n resizeObserver.disconnect()\n window.removeEventListener('scroll', handleScroll)\n if (scrollFrame !== null) {\n cancelAnimationFrame(scrollFrame)\n }\n layoutInitializedRef.current = false\n }\n }, [sticky])\n\n useEffect(() => {\n if (!sticky) return\n\n let rafId: number\n const smoothAnimate = () => {\n setbtb(prev => {\n const target = layoutTargetsRef.current.btb\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n setTitleHeight(prev => {\n const target = layoutTargetsRef.current.titleHeight\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n rafId = requestAnimationFrame(smoothAnimate)\n }\n\n rafId = requestAnimationFrame(smoothAnimate)\n\n return () => {\n cancelAnimationFrame(rafId)\n }\n }, [sticky])\n\n // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n useEffect(() => {\n if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n const titleElement = titleFadeInRef.current\n const height = titleElement.clientHeight || 80\n\n // \u5206\u8BCD\n splitTextInstance.current = new SplitText(titleElement, {\n type: 'words',\n wordsClass: 'word',\n })\n\n const words = splitTextInstance.current.words\n const total = words.length\n const interval = 1 / total\n\n // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n const wordAnimations = words.map((_, i) => {\n const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n return { start, width }\n })\n\n // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n gsap.set(words, { opacity: 0 })\n\n // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n words.forEach((word, i) => {\n const { start, width } = wordAnimations[i]\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n\n // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n if (bgRef.current) {\n gsap.set(bgRef.current, { opacity: progress })\n }\n },\n }) as ScrollTriggerInstance\n\n return () => {\n splitTextInstance.current?.revert()\n scrollTriggerRef.current?.kill()\n }\n }, [titleAnimation, inView])\n\n // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n useEffect(() => {\n if (!inView || !titleRef.current) return\n\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: self => {\n setVideoHeightProgress(self.progress)\n },\n }) as ScrollTriggerInstance\n\n return () => {\n heightTriggerRef.current?.kill()\n }\n }, [inView])\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n useEffect(() => {\n if (!sticky || !stickyWrapperRef.current || !videoContainerRef.current || !trackRef.current) return\n\n videoPinTriggerRef.current = ScrollTrigger.create({\n trigger: stickyWrapperRef.current,\n start: 'top top',\n endTrigger: trackRef.current,\n end: 'bottom top',\n pin: videoContainerRef.current,\n pinSpacing: false,\n anticipatePin: 1,\n invalidateOnRefresh: true,\n }) as ScrollTriggerInstance\n\n requestAnimationFrame(() => {\n videoPinTriggerRef.current?.refresh()\n })\n\n return () => {\n videoPinTriggerRef.current?.kill()\n videoPinTriggerRef.current = null\n }\n }, [sticky])\n\n // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n </div>\n\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\" ref={stickyWrapperRef}>\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover absolute left-0 top-0 size-full\" ref={videoContainerRef}>\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nif (typeof window !== 'undefined') {\n gsap.registerPlugin(ScrollTrigger, SplitText)\n}\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n TEXT_START_OFFSET: '10%',\n TEXT_ANIMATION_MULTIPLIER: 1.5,\n TEXT_ANIMATION_OFFSET: 80,\n VIDEO_HEIGHT_BASE: 102,\n OVERLAP_FACTOR: 0.5,\n VIDEO_PROGRESS_THRESHOLD: 0.9,\n HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\n\nconst SMOOTHING_CONFIG = {\n DAMPING: 0.18,\n EPSILON: 0.5,\n} as const\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\ninterface ScrollTriggerInstance {\n progress: number\n kill: () => void\n refresh: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const heightTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const layoutTargetsRef = useRef({ btb: 0, titleHeight: 0 })\n const layoutInitializedRef = useRef(false)\n const stickyWrapperRef = useRef<HTMLDivElement>(null)\n const videoContainerRef = useRef<HTMLDivElement>(null)\n const videoPinTriggerRef = useRef<ScrollTriggerInstance | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n // \u89C6\u9891\u64AD\u653E\u63A7\u5236\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n useEffect(() => {\n if (!titleRef.current || !sticky) return\n\n // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n const calculateLayout = () => {\n if (!titleRef.current) return\n\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n // const scrollTop = window.scrollY || window.pageYOffset\n // const elementBottomToPageTop = rect.bottom + scrollTop\n // const pageHeight = document.documentElement.scrollHeight\n // const distanceToPageBottom = pageHeight - elementBottomToPageTop\n\n const inViewRefToBottom = screenHeight - rect.bottom\n const newBtb = inViewRefToBottom > screenHeight ? screenHeight : inViewRefToBottom\n const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n layoutTargetsRef.current.btb = newBtb\n layoutTargetsRef.current.titleHeight = newTitleHeight\n\n if (!layoutInitializedRef.current) {\n layoutInitializedRef.current = true\n setbtb(newBtb)\n setTitleHeight(newTitleHeight)\n }\n }\n\n // \u521D\u59CB\u8BA1\u7B97\n calculateLayout()\n\n // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n const resizeObserver = new ResizeObserver(() => {\n // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n requestAnimationFrame(() => {\n calculateLayout()\n })\n })\n\n resizeObserver.observe(titleRef.current)\n\n // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n let scrollFrame: number | null = null\n const handleScroll = () => {\n if (scrollFrame !== null) return\n scrollFrame = requestAnimationFrame(() => {\n calculateLayout()\n scrollFrame = null\n })\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n\n return () => {\n resizeObserver.disconnect()\n window.removeEventListener('scroll', handleScroll)\n if (scrollFrame !== null) {\n cancelAnimationFrame(scrollFrame)\n }\n layoutInitializedRef.current = false\n }\n }, [sticky])\n\n useEffect(() => {\n if (!sticky) return\n\n let rafId: number\n const smoothAnimate = () => {\n setbtb(prev => {\n const target = layoutTargetsRef.current.btb\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n setTitleHeight(prev => {\n const target = layoutTargetsRef.current.titleHeight\n const delta = target - prev\n if (Math.abs(delta) <= SMOOTHING_CONFIG.EPSILON) return target\n return prev + delta * SMOOTHING_CONFIG.DAMPING\n })\n\n rafId = requestAnimationFrame(smoothAnimate)\n }\n\n rafId = requestAnimationFrame(smoothAnimate)\n\n return () => {\n cancelAnimationFrame(rafId)\n }\n }, [sticky])\n\n // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n useEffect(() => {\n if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n const titleElement = titleFadeInRef.current\n const height = titleElement.clientHeight || 80\n\n // \u5206\u8BCD\n splitTextInstance.current = new SplitText(titleElement, {\n type: 'words',\n wordsClass: 'word',\n })\n\n const words = splitTextInstance.current.words\n const total = words.length\n const interval = 1 / total\n\n // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n const wordAnimations = words.map((_, i) => {\n const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n return { start, width }\n })\n\n // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n gsap.set(words, { opacity: 0 })\n\n // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n\n // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n words.forEach((word, i) => {\n const { start, width } = wordAnimations[i]\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n\n // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n if (bgRef.current) {\n gsap.set(bgRef.current, { opacity: progress })\n }\n },\n }) as ScrollTriggerInstance\n\n return () => {\n splitTextInstance.current?.revert()\n scrollTriggerRef.current?.kill()\n }\n }, [titleAnimation, inView])\n\n // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n useEffect(() => {\n if (!inView || !titleRef.current) return\n\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: self => {\n setVideoHeightProgress(self.progress)\n },\n }) as ScrollTriggerInstance\n\n return () => {\n heightTriggerRef.current?.kill()\n }\n }, [inView])\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n useEffect(() => {\n if (!sticky || !stickyWrapperRef.current || !videoContainerRef.current || !trackRef.current) return\n\n videoPinTriggerRef.current = ScrollTrigger.create({\n trigger: stickyWrapperRef.current,\n start: 'top top',\n endTrigger: trackRef.current,\n end: 'bottom top',\n pin: videoContainerRef.current,\n pinSpacing: false,\n anticipatePin: 1,\n invalidateOnRefresh: true,\n }) as ScrollTriggerInstance\n\n requestAnimationFrame(() => {\n videoPinTriggerRef.current?.refresh()\n })\n\n return () => {\n videoPinTriggerRef.current?.kill()\n videoPinTriggerRef.current = null\n }\n }, [sticky])\n\n // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n const handleBtnClick = useCallback(() => {\n setVisible(true)\n onBtnClick?.()\n }, [onBtnClick])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n\n // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n if (!sticky) {\n return (\n <>\n <div\n id={id}\n className={cn(\n 'relative overflow-hidden',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {/* \u5185\u5BB9\u5C42 */}\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n\n {/* \u89C6\u9891\u5C42 */}\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n </div>\n\n {/* \u57CB\u70B9\u5143\u7D20 */}\n <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n </div>\n\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n\n // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n return (\n <>\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content text-info-primary absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n {btnText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n <div\n style={{\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }}\n className=\"relative\"\n >\n <div className=\"sticky top-0\" ref={stickyWrapperRef}>\n <div\n id={id}\n className={cn('relative h-screen w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover absolute left-0 top-0 size-full\" ref={videoContainerRef}>\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay={false}\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay={false}\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "useCallback", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "SMOOTHING_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "layoutTargetsRef", "layoutInitializedRef", "stickyWrapperRef", "videoContainerRef", "videoPinTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "calculateLayout", "rect", "screenHeight", "inViewRefToBottom", "newBtb", "newTitleHeight", "resizeObserver", "scrollFrame", "handleScroll", "rafId", "smoothAnimate", "prev", "target", "delta", "titleElement", "height", "words", "total", "interval", "wordAnimations", "_", "i", "start", "width", "self", "progress", "word", "opacity", "zIndexVideo", "handleBtnClick", "aspect", "MediaPlayerBase_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as N,jsx as e,jsxs as v}from"react/jsx-runtime";import A,{useState as d,useRef as u,useEffect as f,forwardRef as J}from"react";import{debounce as K}from"es-toolkit";import{useInView as U}from"react-intersection-observer";import{cn as y}from"../../helpers/utils.js";import{withLayout as X}from"../../shared/Styles.js";import Z from"../Slogan/index.js";import{YouTubePlayer as D}from"../VideoModal/YouTubePlayer.js";import{Grid as ee,GridItem as te}from"../../components/grid.js";import{Container as re}from"../../components/container.js";import ae from"../BrandEquity/index.js";import se from"../MemberEquity/index.js";import oe from"../Spacer/index.js";import ne from"gsap";import{convertLexicalToHTML as E}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as
|
|
1
|
+
"use client";import{Fragment as N,jsx as e,jsxs as v}from"react/jsx-runtime";import A,{useState as d,useRef as u,useEffect as f,forwardRef as J}from"react";import{debounce as K}from"es-toolkit";import{useInView as U}from"react-intersection-observer";import{cn as y}from"../../helpers/utils.js";import{withLayout as X}from"../../shared/Styles.js";import Z from"../Slogan/index.js";import{YouTubePlayer as D}from"../VideoModal/YouTubePlayer.js";import{Grid as ee,GridItem as te}from"../../components/grid.js";import{Container as re}from"../../components/container.js";import ae from"../BrandEquity/index.js";import se from"../MemberEquity/index.js";import oe from"../Spacer/index.js";import ne from"gsap";import{convertLexicalToHTML as E}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as le}from"react-responsive";import ie from"../../helpers/ScrollLoadVideo.js";const S=({defaultConverters:a})=>({...a,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),x=({children:a,spaceY:s,className:t})=>e(re,{spaceY:s,className:y("!bg-transparent",t),children:e(ee,{children:e(te,{span:12,children:a})})}),ce=A.forwardRef(({children:a,id:s,components:t},l)=>{const o=u(null);return v("div",{ref:o,className:"relative z-10",children:[e(N,{children:a}),e(N,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(x,{spaceY:"none",children:e(ae,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(x,{spaceY:"none",children:e(se,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(oe,{data:r,style:r?.style,className:"!bg-transparent"});default:return null}})})]})}),de=J(({className:a="",wrapperClassName:s="",id:t,data:{title:l,videoTitle:o,mobVideo:r,mobImg:p,img:m,isYouTube:T,youtubePcId:k,youtubeMobileId:L,video:b,theme:R,shape:P,components:$}},pe)=>{const H=u(null),g=u(null),{ref:B,inView:i}=U(),[me,Y]=d(0),[M,q]=d(!1),[F,I]=d(!1),j=u(null),G=typeof l=="string"?l:l&&E({data:l,converters:S});typeof o=="string"||o&&E({data:o,converters:S});const[V,Q]=d(0),[n,O]=d(!1),z=le({query:"(max-width: 768px)"});f(()=>{O(z)},[z]);const w=K(()=>{if(g.current){const h=g.current.getBoundingClientRect(),c=n?window.screen.height:window.innerHeight,W=window.scrollY||window.pageYOffset,_=h.bottom+W,C=document.documentElement.scrollHeight-_;Q(C>c?c:C),Y(c)}},2e3);return f(()=>{i&&!M&&(H.current?.play(),q(!0))},[i,M]),f(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),f(()=>{function h(){const c=n?window.screen.height:window.innerHeight;ne.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${c*1.8}px bottom`,scrub:.5}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}i&&h()},[i]),v(N,{children:[e("div",{id:t,className:y("relative z-20 h-screen w-full",a,{"aiui-dark":R==="dark","rounded-box":P==="rounded"}),ref:j,children:e("div",{ref:B,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:e(x,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(Z,{className:"sticky-title antialiased",data:{title:G||"",theme:R}})})})}),v("div",{ref:g,style:{marginBottom:`-${V}px`,zIndex:i?2:1},className:y(t,"relative mt-[-200vh]",s),children:[e("div",{className:"sticky top-0 ",children:v("div",{className:y("media-cover","relative h-screen w-full"),children:[T?e(D,{youTubeId:n&&L||k}):b?.url&&e(ie,{videoRef:H,poster:n&&p?.url?p?.url:m?.url,src:n&&r?.url?r?.url:b?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,autoplay:!1,onEnded:()=>{I(!0)}}),m?.url&&(!b?.url||F)&&e("img",{src:n&&p?.url?p?.url:m?.url,alt:m?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]",loading:"lazy"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(ce,{components:$}),e("div",{className:"relative h-screen w-full"})]})]})});var Se=X(de);export{Se as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n // const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {/* {!isMobile && <GridItem span={1} />} */}\n <GridItem span={12}>{children}</GridItem>\n {/* {!isMobile && <GridItem span={1} />} */}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }, ref) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n (\n {\n className = '',\n wrapperClassName = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n },\n ref\n ) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.5,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n style={{ willChange: 'transform', contain: 'paint' }}\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n >\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {isYouTube ? (\n <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n ) : (\n video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n loading=\"lazy\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{\n backdropFilter: 'blur(0px)',\n WebkitBackdropFilter: 'blur(0px)',\n willChange: 'backdrop-filter',\n }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n // const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {/* {!isMobile && <GridItem span={1} />} */}\n <GridItem span={12}>{children}</GridItem>\n {/* {!isMobile && <GridItem span={1} />} */}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }, ref) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n (\n {\n className = '',\n wrapperClassName = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n },\n ref\n ) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.5,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n style={{ willChange: 'transform', contain: 'paint' }}\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n >\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {isYouTube ? (\n <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n ) : (\n video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n autoplay={false}\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n loading=\"lazy\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{\n backdropFilter: 'blur(0px)',\n WebkitBackdropFilter: 'blur(0px)',\n willChange: 'backdrop-filter',\n }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "SubBox", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "isMobile", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as Z,jsx as s,jsxs as m}from"react/jsx-runtime";import{useAiuiContext as te}from"../AiuiProvider/index.js";import{formatVariantPrice as se}from"./shelfDisplay.js";import Q from"../../components/picture.js";import X from"../../components/badge.js";import{cn as x}from"../../helpers/utils.js";import{Text as le}from"../../components/text.js";import E from"../../components/button.js";import{gaTrack as oe}from"../../shared/track.js";import{trackUrlRef as ae}from"../../shared/trackUrlRef.js";import{Heading as ie}from"../../components/heading.js";import{getCouponFromVariant as ne}from"./handleCoupon.js";import{useExposure as re}from"../../hooks/useExposure.js";import{useRef as pe,useEffect as ce,useMemo as k,useState as Y}from"react";const F="image",G="product_shelf",M=999999999e-2,me=e=>{const t=e?.sku,f=e?.variants,h=f?.find(w=>w?.sku===t),T=h?.image?.url||f?.[0]?.image?.url||"",y=h?.image?.altText||f?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:T,altText:y}},Se=({data:e,configuration:t})=>{const{isDisplayBackImage:f=!1,itemShape:h,metafields:T,isTopTag:y=!1,isShowTag:w,isShowOriginalPrice:v}=t||{},{locale:g="us",copyWriting:O,inApp:_,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}=te(),{discounts:U,discountsCopy:I}=T||{},z=pe(null),[H,a]=Y([]),[L,R]=Y(""),V=(r,c,p)=>t?.event?.primaryButton?.(r,c+1,p),D=(r,c,p)=>t?.event?.secondaryButton?.(r,c+1,p),l=k(()=>{const r=e?.variants||[];if(r.length)return e?.sku?r?.find?.(c=>c?.sku===e?.sku)||r[0]:r?.[0]},[e?.sku,e?.variants]),P=l?.id?.split?.("/")||[],q=P?.[P?.length-1],J=!l?.availableForSale&&(l?.price?.amount===M||l?.price===M),$=k(()=>ne({variant:l,inApp:_,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}),[l,_,S,N,B,C]),d=!!(v&&$),W=e?.price?.currencyCode||"USD",K=k(()=>se({locale:g,amount:d?$?.variant_price4wscode:l?.price,baseAmount:d?l?.price:0,currencyCode:W}),[W,g,d,$?.variant_price4wscode,l]),{price:b,basePrice:j,discount:u}=K,{imageUrl:A,altText:o}=me(e),i=e?.custom_name||e?.title,n=e?.custom_description||e?.description;ce(()=>{let r=[];if(u){const p=`${u}${U?.off||I?.off||""}`;R(p),r.push(p)}const c=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,u?1:2);a(r.concat(c))},[e?.tags,u,U?.off,I?.off]),re(z,{componentType:F,componentName:G,componentTitle:i,componentDescription:n,position:t?.index+1});const ee=()=>m(Z,{children:[w&&H?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:H?.map?.((r,c)=>s(X,{className:"shelf-items-tag",children:r},c))}):null,i?s(ie,{as:"h3",title:i||"",size:2,className:"shelf-display-product-title line-clamp-2",html:i||""}):null,n?s(le,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:n||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:J?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:O?.soldOutText}):m(Z,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:l?.availableForSale&&b||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:l?.availableForSale&&j||""})]})}),m("div",{className:x("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(E,{variant:"secondary",onClick:()=>D(e,t?.index,t),className:`
|
|
2
2
|
${t.direction==="vertical"?"w-full":""}
|
|
3
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(
|
|
3
|
+
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(E,{variant:"primary",onClick:()=>V(e,t?.index,t),className:`
|
|
4
4
|
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]});return s("div",{ref:z,className:
|
|
5
|
+
`,children:t?.primaryButton||""}):null]})]});return s("div",{ref:z,className:x("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",h==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:f?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:m("div",{className:"relative inset-0 size-full",children:[s(Q,{source:A,alt:o,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:ee()})]})}):m("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[L&&y&&s(X,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:L||""}),s("div",{className:x("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":i,target:t?.target,href:ae(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}?variant=${q}`,`${F}_${G}`),onClick:()=>{oe({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:t?.index+1}]}})},children:s(Q,{source:A,alt:o,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),ee()]})},e?.id||e?.handle)},Ne=({data:e,configuration:t})=>{const{itemShape:f,itemLength:h,metafields:T}=t||{},{discounts:y,discountsCopy:w}=T||{},{locale:v="us",copyWriting:g,inApp:O,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}=te(),[C,U]=Y([]),I=pe(null),z=(o,i,n)=>t?.event?.primaryButton?.(o,i+1,n),H=(o,i,n)=>t?.event?.secondaryButton?.(o,i+1,n),a=k(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(i=>i?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),L=!a?.availableForSale&&(a?.price?.amount===M||a?.price===M),R=t?.isShowTag,V=t?.isShowOriginalPrice,D=k(()=>ne({variant:a,inApp:O,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}),[a,O,_,S,N,B]),l=!!(V&&D),P=e?.price?.currencyCode||"USD",q=k(()=>se({locale:v,amount:l?D?.variant_price4wscode:a?.price,baseAmount:l?a?.price:0,currencyCode:P}),[P,v,l,D?.variant_price4wscode,a]),{price:J,basePrice:$,discount:d}=q,{imageUrl:W,altText:K}=me(e),b=e?.custom_name||e?.title,j=e?.custom_description||e?.description;re(I,{componentType:F,componentName:G,componentTitle:b,componentDescription:j,position:t?.index+1});const u=()=>h>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},A=()=>h>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return ce(()=>{let o=[];if(d){const n=`${d}${y?.off||w?.off||""}`;o.push(n)}const i=e?.tags?.filter?.(n=>n?.startsWith?.("CLtag"))?.map?.(n=>n?.replace?.("CLtag:",""))?.slice?.(0,d?1:2);U(o.concat(i))},[e?.tags,d,y?.off,w?.off]),s("div",{ref:I,className:x(u().wrap,f==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:m("div",{className:x(A(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:x(u().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":b,target:t?.target,href:ae(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}`,`${F}_${G}`),onClick:()=>{oe({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:s(Q,{source:W,alt:K,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),m("div",{className:x("flex flex-col items-start justify-center",u().boxItem),children:[R&&C?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:C?.map?.((o,i)=>s(X,{className:"shelf-items-tag",children:o},i))}):null,b?s(ie,{as:"h3",title:b||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:b||""}):null,j?s(le,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:j||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:L?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g?.soldOutText}):m(Z,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&J||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&$||""})]})}),m("div",{className:x("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(E,{variant:"secondary",onClick:()=>H(e,t?.index,t),className:`
|
|
6
6
|
${t.direction==="vertical"?"w-full":""}
|
|
7
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(
|
|
7
|
+
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(E,{variant:"primary",onClick:()=>z(e,t?.index,t),className:`
|
|
8
8
|
${t.direction==="vertical"?"w-full":""}
|
|
9
|
-
`,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{
|
|
9
|
+
`,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{Ne as ShelfDisplayHorizontalItem,Se as ShelfDisplayWrapItem,me as getProductImage};
|
|
10
10
|
//# sourceMappingURL=shelfDisplayItem.js.map
|