npm - @anker-in/headless-ui - Versions diffs - 0.0.59-alpha.4 → 0.0.59 - Mend

@anker-in/headless-ui 0.0.59-alpha.4 → 0.0.59

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

Files changed (71) hide show

package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    pcImage,\n    padImage,\n    mobileImage,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    caption = [],\n    blockLink,\n  } = data\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    if (!bgRef.current) return\n    const clientHeight = boxRef.current?.clientHeight || 100\n    const screenHeight = window.innerHeight\n\n    if (screenHeight <= clientHeight) {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 40\n          const value = self.progress * base - base / 2\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    } else {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom bottom',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base - base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top top',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    }\n    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      data-ui-component-id=\"HeroBanner\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        {\n          'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n          'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n        },\n        className\n      )}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n        ></a>\n      )}\n      <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n        <Picture\n          className=\"laptop:w-full h-full\"\n          imgClassName=\"h-full object-cover\"\n          loading=\"eager\"\n          fetchPriority=\"high\"\n          alt={pcImage?.alt || ''}\n          source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n        />\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n        <div className=\"laptop:text-left max-w-[686px]\">\n          {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n          {subtitle && (\n            <Text\n              as=\"p\"\n              size={3}\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n          {secondaryButton && secondaryButton.text && (\n            <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n                {secondaryButton.text}\n              </Button>\n            </a>\n          )}\n          {primaryButton && primaryButton.text && (\n            <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n                {primaryButton.text}\n              </Button>\n            </a>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                size={2}\n                className={cn(\n                  'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    pcImage,\n    mobileImage,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    caption = [],\n    blockLink,\n  } = data\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    if (!bgRef.current) return\n    const clientHeight = boxRef.current?.clientHeight || 100\n    const screenHeight = window.innerHeight\n\n    if (screenHeight <= clientHeight) {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 40\n          const value = self.progress * base - base / 2\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    } else {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom bottom',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base - base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top top',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    }\n    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      data-ui-component-id=\"HeroBanner\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        {\n          'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n          'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n        },\n        className\n      )}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n        ></a>\n      )}\n      <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n        <Picture\n          className=\"laptop:w-full h-full\"\n          imgClassName=\"h-full object-cover\"\n          loading=\"eager\"\n          fetchPriority=\"high\"\n          alt={pcImage?.alt || ''}\n          source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n        />\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n        <div className=\"laptop:text-left max-w-[686px]\">\n          {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n          {subtitle && (\n            <Text\n              as=\"p\"\n              size={3}\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n          {secondaryButton && secondaryButton.text && (\n            <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n                {secondaryButton.text}\n              </Button>\n            </a>\n          )}\n          {primaryButton && primaryButton.text && (\n            <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n                {primaryButton.text}\n              </Button>\n            </a>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                size={2}\n                className={cn(\n                  'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "size", "caption", "blockLink", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
 }

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

@@ -7,7 +7,6 @@ export interface HeroBannerProps {
         /** 副标题/描述文本 */
         subtitle: string;
         pcImage: Media;
-        padImage?: Media;
         mobileImage: Media;
         blockLink?: string;
         /** 主按钮文本和配置 */

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as ee,jsx as e,jsxs as m}from"react/jsx-runtime";import{useState as h,useRef as d,useEffect as L,forwardRef as j,useImperativeHandle as q}from"react";import{debounce as O}from"lodash";import{cn as p}from"../../helpers/utils.js";import{withStyles as A}from"../../shared/Styles.js";import G from"../../components/button.js";import{YouTubePlayer as J}from"../VideoModal/YouTubePlayer.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as K}from"react-intersection-observer";import{useExposure as Q}from"../../hooks/useExposure.js";import U from"../../helpers/ScrollLoadVideo.js";const W="media_player_base",X="video",N=({defaultConverters:u})=>({...u,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),Z=j(({className:u="",onBtnClick:s,data:{title:t,videoTitle:i,btnText:f,isYouTube:E,youtubeId:P,video:R,theme:z,shape:B,...I}},_)=>{const{sticky:r}=I,[a,l]=h(!1),[b,$]=h(0),[C,S]=h(0),o=d(null),V=d(null),n=d(null),w=d(null),{ref:D,inView:H}=K();q(_,()=>n.current);const T=typeof t=="string"?t:t&&M({data:t,converters:N}),v=typeof i=="string"?i:i&&M({data:i,converters:N});L(()=>{H&&!f?(o.current?.play(),l(!0)):(o.current?.pause(),l(!1))},[H]);const g=O(()=>{if(n.current){const x=n.current.getBoundingClientRect(),c=window.innerHeight,Y=window.scrollY||window.pageYOffset,F=x.bottom+Y,k=document.documentElement.scrollHeight-F;$(k>c?c:k)}if(n.current){const x=n.current.clientHeight,c=window.innerHeight;S(x+c)}},600);L(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]),Q(w,{componentType:X,componentName:W,componentTitle:v});const y="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 m(ee,{children:[r&&e("div",{ref:n,className:p("relative z-10 ",y),children:e("div",{children:m("div",{ref:D,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:[T&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),v&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),!a&&f&&e(G,{variant:"link",className:p("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(o.current&&o.current.pause(),l(!1)):(o.current&&o.current.play(),l(!0)),s&&s?.()},children:f})]})})}),m("div",{style:r?{marginBottom:`-${b}px`,marginTop:`-${C}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:p("relative overflow-hidden",r?"h-screen w-full":y,u,{"aiui-dark":z==="dark","rounded-box":B==="rounded"}),children:e("div",{children:m("div",{ref:V,className:"media-cover left-0 top-0 h-screen w-screen",children:[E?e(J,{youTubeId:P}):e(U,{videoRef:o,src:R?.url,className:"size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"rgba(0, 0, 0, 0.2)"}})]})})})}),e("div",{className:p(r&&"relative box-content block",y),style:r?{height:`${b}px`}:{},ref:w})]})]})});var me=A(Z);export{me as default};
+"use client";import{Fragment as W,jsx as e,jsxs as m}from"react/jsx-runtime";import{useState as h,useRef as d,useEffect as L,forwardRef as F,useImperativeHandle as Y}from"react";import{debounce as j}from"lodash";import{cn as p}from"../../helpers/utils.js";import{withStyles as q}from"../../shared/Styles.js";import O from"../../components/button.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as A}from"react-intersection-observer";import{useExposure as G}from"../../hooks/useExposure.js";import J from"../../helpers/ScrollLoadVideo.js";const K="media_player_base",Q="video",N=({defaultConverters:u})=>({...u,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),U=F(({className:u="",onBtnClick:s,data:{title:t,videoTitle:i,btnText:f,img:X,video:E,theme:R,shape:P,...z}},B)=>{const{sticky:r}=z,[a,l]=h(!1),[w,_]=h(0),[$,I]=h(0),o=d(null),C=d(null),n=d(null),b=d(null),{ref:S,inView:H}=A();Y(B,()=>n.current);const T=typeof t=="string"?t:t&&M({data:t,converters:N}),v=typeof i=="string"?i:i&&M({data:i,converters:N});L(()=>{H&&!f?(o.current?.play(),l(!0)):(o.current?.pause(),l(!1))},[H]);const g=j(()=>{if(n.current){const y=n.current.getBoundingClientRect(),c=window.innerHeight,V=window.scrollY||window.pageYOffset,D=y.bottom+V,k=document.documentElement.scrollHeight-D;_(k>c?c:k)}if(n.current){const y=n.current.clientHeight,c=window.innerHeight;I(y+c)}},600);L(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]),G(b,{componentType:Q,componentName:K,componentTitle:v});const x="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 m(W,{children:[r&&e("div",{ref:n,className:p("relative z-10 ",x),children:e("div",{children:m("div",{ref:S,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:[T&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),v&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),!a&&f&&e(O,{variant:"link",className:p("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(o.current&&o.current.pause(),l(!1)):(o.current&&o.current.play(),l(!0)),s&&s?.()},children:f})]})})}),m("div",{style:r?{marginBottom:`-${w}px`,marginTop:`-${$}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:p("relative overflow-hidden",r?"h-screen w-full":x,u,{"aiui-dark":R==="dark","rounded-box":P==="rounded"}),children:e("div",{children:m("div",{ref:C,className:"media-cover left-0 top-0 h-screen w-screen",children:[e(J,{videoRef:o,src:E?.url,className:"size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"rgba(0, 0, 0, 0.2)"}})]})})})}),e("div",{className:p(r&&"relative box-content block",x),style:r?{height:`${w}px`}:{},ref:b})]})]})});var ce=q(U);export{ce as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.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'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\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 MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      onBtnClick,\n      data: { title, videoTitle, btnText, isYouTube, youtubeId, video, theme, shape, ...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\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n\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 && !btnText) {\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    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\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 ref={titleRef} className={cn('relative z-10 ', aspect)}>\n            <div>\n              <div\n                ref={inViewRef}\n                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              >\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                )}\n                {videoTitle_html && isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {!isPlaying && btnText && (\n                  <Button\n                    variant=\"link\"\n                    className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                    onClick={() => {\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            </div>\n          </div>\n        )}\n        <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n          <div className=\"sticky top-0 \">\n            <div\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, className, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              <div>\n                <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n                  {/* <video\n                    ref={videoRef}\n                    className=\"size-full object-cover\"\n                    src={video?.url}\n                    muted\n                    loop\n                    playsInline\n                    webkit-playsinline\n                    x5-playsinline\n                  /> */}\n                  {isYouTube ? (\n                    <YouTubePlayer youTubeId={youtubeId} />\n                  ) : (\n                    <ScrollLoadVideo\n                      videoRef={videoRef}\n                      src={video?.url!}\n                      className=\"size-full\"\n                      videoClassName=\"object-cover\"\n                      muted\n                      loop\n                      playsInline\n                      webkit-playsinline\n                      x5-playsinline\n                    />\n                  )}\n                  <div\n                    className=\"absolute left-0 top-0 z-10 size-full\"\n                    style={{\n                      background: 'rgba(0, 0, 0, 0.2)',\n                    }}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n            ref={trackRef}\n          />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
-  "mappings": "aAyGM,mBAAAA,GASY,OAAAC,EALJ,QAAAC,MAJR,oBAxGN,OAAS,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,EAAY,uBAAAC,MAA2B,QAC7E,OAAS,YAAAC,MAAgB,SACzB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAY,6BACnB,OAAS,iBAAAC,MAAqB,iCAC9B,OAAS,wBAAAC,MAA4B,oCAGrC,OAAS,aAAAC,MAAiB,8BAE1B,OAAS,eAAAC,MAAmB,6BAC5B,OAAOC,MAAqB,mCAE5B,MAAMC,EAAgB,oBAChBC,EAAgB,QAEhBC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,EAAkBjB,EACtB,CACE,CACE,UAAAkB,EAAY,GACZ,WAAAC,EACA,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,UAAAC,EAAW,UAAAC,EAAW,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAK,CACzF,EACAC,IACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIF,EACb,CAACG,EAAWC,CAAY,EAAInC,EAAS,EAAK,EAC1C,CAACoC,EAAKC,CAAM,EAAIrC,EAAS,CAAC,EAC1B,CAACsC,EAAaC,CAAc,EAAIvC,EAAS,CAAC,EAE1CwC,EAAWvC,EAAyB,IAAI,EACxCwC,EAAQxC,EAAyB,IAAI,EACrCyC,EAAWzC,EAAuB,IAAI,EACtC0C,EAAW1C,EAAuB,IAAI,EAEtC,CAAE,IAAK2C,EAAW,OAAAC,CAAO,EAAIlC,EAAU,EAE7CP,EAAoB4B,EAAK,IAAMU,EAAS,OAAyB,EAEjE,MAAMI,EACJ,OAAOvB,GAAU,SAAWA,EAAQA,GAASb,EAAqB,CAAE,KAAMa,EAAO,WAAYP,CAAe,CAAC,EACzG+B,EACJ,OAAOvB,GAAe,SAClBA,EACAA,GAAcd,EAAqB,CAAE,KAAMc,EAAY,WAAYR,CAAe,CAAC,EAEzFd,EAAU,IAAM,CACV2C,GAAU,CAACpB,GACbe,EAAS,SAAS,KAAK,EACvBL,EAAa,EAAI,IAEjBK,EAAS,SAAS,MAAM,EACxBL,EAAa,EAAK,EAEtB,EAAG,CAACU,CAAM,CAAC,EAEX,MAAMG,EAAwB3C,EAAS,IAAM,CAC3C,GAAIqC,EAAS,QAAS,CACpB,MAAMO,EAAOP,EAAS,QAAQ,sBAAsB,EAC9CQ,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1Cf,EAAOgB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIX,EAAS,QAAS,CACpB,MAAMJ,EAAcI,EAAS,QAAQ,aAC/BQ,EAAe,OAAO,YAC5BX,EAAeD,EAAcY,CAAY,CAC3C,CACF,EAAG,GAAG,EAENhD,EAAU,KACR8C,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAELpC,EAAY+B,EAAU,CACpB,cAAA5B,EACA,cAAAD,EACA,eAAgBiC,CAClB,CAAC,EAED,MAAMO,EACJ,6NACF,OACEvD,EAAAF,GAAA,CACG,UAAAoC,GACCnC,EAAC,OAAI,IAAK4C,EAAU,UAAWpC,EAAG,iBAAkBgD,CAAM,EACxD,SAAAxD,EAAC,OACC,SAAAC,EAAC,OACC,IAAK6C,EACL,UAAU,yGAET,UAAAE,GAAc,CAACZ,GACdpC,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQgD,CAAW,EAChD,EAEDC,GAAmBb,GAClBpC,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQiD,CAAgB,EACrD,EAED,CAACb,GAAaT,GACb3B,EAACU,EAAA,CACC,QAAQ,OACR,UAAWF,EAAG,4DAA4D,EAC1E,QAAS,IAAM,CACT4B,GACEM,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBL,EAAa,EAAK,IAEdK,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBL,EAAa,EAAI,GAEnBb,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EACF,EACF,EAEF1B,EAAC,OAAI,MAAOkC,EAAS,CAAE,aAAc,IAAIG,CAAG,KAAM,UAAW,IAAIE,CAAW,IAAK,EAAI,CAAC,EAAG,UAAU,WACjG,UAAAxC,EAAC,OAAI,UAAU,gBACb,SAAAA,EAAC,OACC,UAAWQ,EAAG,2BAA4B2B,EAAS,kBAAoBqB,EAAQjC,EAAW,CACxF,YAAaQ,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,SAAAhC,EAAC,OACC,SAAAC,EAAC,OAAI,IAAK0C,EAAO,UAAU,6CAWxB,UAAAf,EACC5B,EAACW,EAAA,CAAc,UAAWkB,EAAW,EAErC7B,EAACe,EAAA,CACC,SAAU2B,EACV,IAAKZ,GAAO,IACZ,UAAU,YACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,qBAAkB,GAClB,iBAAc,GAChB,EAEF9B,EAAC,OACC,UAAU,uCACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,EACF,EACF,EACF,EACAA,EAAC,OACC,UAAWQ,EAAG2B,GAAU,6BAA8BqB,CAAM,EAC5D,MAAOrB,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKO,EACP,GACF,GACF,CAEJ,CACF,EAEA,IAAOY,GAAQhD,EAAWa,CAAe",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "YouTubePlayer", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "isYouTube", "youtubeId", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "trackRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Button from '../../components/button.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'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\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 MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n\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 && !btnText) {\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    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\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 ref={titleRef} className={cn('relative z-10 ', aspect)}>\n            <div>\n              <div\n                ref={inViewRef}\n                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              >\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                )}\n                {videoTitle_html && isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {!isPlaying && btnText && (\n                  <Button\n                    variant=\"link\"\n                    className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                    onClick={() => {\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            </div>\n          </div>\n        )}\n        <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n          <div className=\"sticky top-0 \">\n            <div\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, className, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              <div>\n                <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n                  {/* <video\n                    ref={videoRef}\n                    className=\"size-full object-cover\"\n                    src={video?.url}\n                    muted\n                    loop\n                    playsInline\n                    webkit-playsinline\n                    x5-playsinline\n                  /> */}\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    src={video?.url!}\n                    className=\"size-full\"\n                    videoClassName=\"object-cover\"\n                    muted\n                    loop\n                    playsInline\n                    webkit-playsinline\n                    x5-playsinline\n                  />\n                  <div\n                    className=\"absolute left-0 top-0 z-10 size-full\"\n                    style={{\n                      background: 'rgba(0, 0, 0, 0.2)',\n                    }}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n            ref={trackRef}\n          />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
+  "mappings": "aAiGM,mBAAAA,EASY,OAAAC,EALJ,QAAAC,MAJR,oBAhGN,OAAS,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,EAAY,uBAAAC,MAA2B,QAC7E,OAAS,YAAAC,MAAgB,SACzB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAY,6BACnB,OAAS,wBAAAC,MAA4B,oCAGrC,OAAS,aAAAC,MAAiB,8BAE1B,OAAS,eAAAC,MAAmB,6BAC5B,OAAOC,MAAqB,mCAE5B,MAAMC,EAAgB,oBAChBC,EAAgB,QAEhBC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,EAAkBhB,EACtB,CAAC,CAAE,UAAAiB,EAAY,GAAI,WAAAC,EAAY,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAK,CAAE,EAAGC,IAAQ,CAChH,KAAM,CAAE,OAAAC,CAAO,EAAIF,EACb,CAACG,EAAWC,CAAY,EAAIjC,EAAS,EAAK,EAC1C,CAACkC,EAAKC,CAAM,EAAInC,EAAS,CAAC,EAC1B,CAACoC,EAAaC,CAAc,EAAIrC,EAAS,CAAC,EAE1CsC,EAAWrC,EAAyB,IAAI,EACxCsC,EAAQtC,EAAyB,IAAI,EACrCuC,EAAWvC,EAAuB,IAAI,EACtCwC,EAAWxC,EAAuB,IAAI,EAEtC,CAAE,IAAKyC,EAAW,OAAAC,CAAO,EAAIjC,EAAU,EAE7CN,EAAoB0B,EAAK,IAAMU,EAAS,OAAyB,EAEjE,MAAMI,EACJ,OAAOtB,GAAU,SAAWA,EAAQA,GAASb,EAAqB,CAAE,KAAMa,EAAO,WAAYP,CAAe,CAAC,EACzG8B,EACJ,OAAOtB,GAAe,SAClBA,EACAA,GAAcd,EAAqB,CAAE,KAAMc,EAAY,WAAYR,CAAe,CAAC,EAEzFb,EAAU,IAAM,CACVyC,GAAU,CAACnB,GACbc,EAAS,SAAS,KAAK,EACvBL,EAAa,EAAI,IAEjBK,EAAS,SAAS,MAAM,EACxBL,EAAa,EAAK,EAEtB,EAAG,CAACU,CAAM,CAAC,EAEX,MAAMG,EAAwBzC,EAAS,IAAM,CAC3C,GAAImC,EAAS,QAAS,CACpB,MAAMO,EAAOP,EAAS,QAAQ,sBAAsB,EAC9CQ,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1Cf,EAAOgB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIX,EAAS,QAAS,CACpB,MAAMJ,EAAcI,EAAS,QAAQ,aAC/BQ,EAAe,OAAO,YAC5BX,EAAeD,EAAcY,CAAY,CAC3C,CACF,EAAG,GAAG,EAEN9C,EAAU,KACR4C,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAELnC,EAAY8B,EAAU,CACpB,cAAA3B,EACA,cAAAD,EACA,eAAgBgC,CAClB,CAAC,EAED,MAAMO,EACJ,6NACF,OACErD,EAAAF,EAAA,CACG,UAAAkC,GACCjC,EAAC,OAAI,IAAK0C,EAAU,UAAWlC,EAAG,iBAAkB8C,CAAM,EACxD,SAAAtD,EAAC,OACC,SAAAC,EAAC,OACC,IAAK2C,EACL,UAAU,yGAET,UAAAE,GAAc,CAACZ,GACdlC,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQ8C,CAAW,EAChD,EAEDC,GAAmBb,GAClBlC,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQ+C,CAAgB,EACrD,EAED,CAACb,GAAaR,GACb1B,EAACU,EAAA,CACC,QAAQ,OACR,UAAWF,EAAG,4DAA4D,EAC1E,QAAS,IAAM,CACT0B,GACEM,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBL,EAAa,EAAK,IAEdK,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBL,EAAa,EAAI,GAEnBZ,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EACF,EACF,EAEFzB,EAAC,OAAI,MAAOgC,EAAS,CAAE,aAAc,IAAIG,CAAG,KAAM,UAAW,IAAIE,CAAW,IAAK,EAAI,CAAC,EAAG,UAAU,WACjG,UAAAtC,EAAC,OAAI,UAAU,gBACb,SAAAA,EAAC,OACC,UAAWQ,EAAG,2BAA4ByB,EAAS,kBAAoBqB,EAAQhC,EAAW,CACxF,YAAaO,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,SAAA9B,EAAC,OACC,SAAAC,EAAC,OAAI,IAAKwC,EAAO,UAAU,6CAWzB,UAAAzC,EAACc,EAAA,CACC,SAAU0B,EACV,IAAKZ,GAAO,IACZ,UAAU,YACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,qBAAkB,GAClB,iBAAc,GAChB,EACA5B,EAAC,OACC,UAAU,uCACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,EACF,EACF,EACF,EACAA,EAAC,OACC,UAAWQ,EAAGyB,GAAU,6BAA8BqB,CAAM,EAC5D,MAAOrB,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKO,EACP,GACF,GACF,CAEJ,CACF,EAEA,IAAOY,GAAQ9C,EAAWY,CAAe",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "trackRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
 }

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

@@ -8,9 +8,7 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps {
         videoTitle?: string;
         btnText?: string;
         img?: Img;
-        isYouTube?: boolean;
         video?: Video;
-        youtubeId?: string;
     };
     onBtnClick?: () => void;
 }

package/dist/esm/biz-components/MediaPlayerMulti/YouTubePlayer.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare function YouTubePlayer({ youTubeId }: {
+    youTubeId: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/biz-components/MediaPlayerMulti/YouTubePlayer.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as e}from"react/jsx-runtime";import"react";import r from"react-youtube";function p({youTubeId:o}){return e(r,{videoId:o,opts:{playerVars:{autoplay:0,rel:0},width:"100%",height:"100%"}})}export{p as YouTubePlayer};
2	+ //# sourceMappingURL=YouTubePlayer.js.map

package/dist/esm/biz-components/MediaPlayerMulti/YouTubePlayer.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaPlayerMulti/YouTubePlayer.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport YouTube from 'react-youtube'\n\nexport function YouTubePlayer({ youTubeId }: { youTubeId: string }) {\n  //   const onReady = event => {\n  //     // event.target.playVideo();\n  //   }\n\n  return (\n    <YouTube\n      videoId={youTubeId}\n      opts={{\n        playerVars: { autoplay: 0, rel: 0 },\n        width: '100%',\n        height: '100%',\n      }}\n    />\n  )\n}\n"],
+  "mappings": "AASI,cAAAA,MAAA,oBATJ,MAAkB,QAClB,OAAOC,MAAa,gBAEb,SAASC,EAAc,CAAE,UAAAC,CAAU,EAA0B,CAKlE,OACEH,EAACC,EAAA,CACC,QAASE,EACT,KAAM,CACJ,WAAY,CAAE,SAAU,EAAG,IAAK,CAAE,EAClC,MAAO,OACP,OAAQ,MACV,EACF,CAEJ",
+  "names": ["jsx", "YouTube", "YouTubePlayer", "youTubeId"]
+}

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as l,jsxs as o}from"react/jsx-runtime";import{useState as s,forwardRef as M,useRef as N}from"react";import{cn as P}from"../../helpers/utils.js";import{withStyles as T}from"../../shared/Styles.js";import{Picture as c,Link as V}from"../../components/index.js";import I from"../Title/index.js";import L from"../SwiperBox/index.js";import{Container as B}from"../../components/container.js";import{VideoModal as C}from"../VideoModal/index.js";import{convertLexicalToHTML as U}from"@payloadcms/richtext-lexical/html";import{useExposure as S}from"../../hooks/useExposure.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";const u="video",x="media_player_multi",R=({data:e,configuration:t})=>o("div",{className:P("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(c,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),l(c,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),l("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&l("button",{onClick:()=>{t?.setVisible?.(!0),e?.isYouTube?t?.setYouTubeId?.(e?.youtubeId):t?.setVideoUrl?.(e?.video?.url),t?.onVideoPlayBtnClick?.(t?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:l("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[l("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&l(V,{href:z(e?.href,`${u}_${x}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),l("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]}),Y=M(({data:{items:e=[],shape:t="square",title:i,containerProps:b},className:r="",key:v,onVideoPlayBtnClick:h},g)=>{const[w,a]=s(!1),[y,p]=s(""),[k,d]=s(""),m=typeof i=="string"?i:i&&U({data:i}),n=N(null);S(n,{componentType:u,componentName:x,componentTitle:m});const f=e.length;return o("div",{className:r,ref:n,children:[l("div",{className:"mediaplayermulti-box",children:l(B,{...b||{},className:"overflow-hidden",children:o("div",{className:r,ref:g,children:[i&&l(I,{className:"mediaplayermulti-title",data:{title:m||""}}),l(L,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+v,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:h,setVisible:a,setVideoUrl:p,setYouTubeId:d}},Slide:R,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:f===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),l(C,{visible:w,setVisible:a,youTubeId:k,videoUrl:y,setVideoUrl:p,setYouTubeId:d})]})});var J=T(Y);export{J as default};
+"use client";import{jsx as l,jsxs as o}from"react/jsx-runtime";import{useState as r,forwardRef as P,useRef as C}from"react";import{cn as T}from"../../helpers/utils.js";import{withStyles as I}from"../../shared/Styles.js";import{Picture as x,Link as B}from"../../components/index.js";import{Dialog as L,DialogContent as V}from"../../components/dialog.js";import _ from"../Title/index.js";import z from"../SwiperBox/index.js";import{Container as D}from"../../components/container.js";import{YouTubePlayer as Y}from"./YouTubePlayer.js";import{convertLexicalToHTML as j}from"@payloadcms/richtext-lexical/html";import{useExposure as S}from"../../hooks/useExposure.js";import{trackUrlRef as H}from"../../shared/trackUrlRef.js";const b="video",g="media_player_multi",R=({data:e,configuration:t})=>o("div",{className:T("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(x,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),l(x,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),l("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.YoutubeId)&&l("button",{onClick:()=>{t?.setVisible?.(!0),e?.isYouTube?t?.setYouTubeId?.(e?.YoutubeId):t?.setVideoUrl?.(e?.video?.url),t?.onVideoPlayBtnClick?.(t?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:l("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[l("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&l(B,{href:H(e?.href,`${b}_${g}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),l("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]}),U=P(({data:{items:e=[],shape:t="square",title:i,containerProps:v},className:a="",key:w,onVideoPlayBtnClick:k},y)=>{const[N,s]=r(!1),[n,p]=r(""),[d,m]=r(""),c=typeof i=="string"?i:i&&j({data:i}),u=C(null),f=()=>{p(""),m("")};S(u,{componentType:b,componentName:g,componentTitle:c});const h=e.length;return o("div",{className:a,ref:u,children:[l("div",{className:"mediaplayermulti-box",children:l(D,{...v||{},className:"overflow-hidden",children:o("div",{className:a,ref:y,children:[i&&l(_,{className:"mediaplayermulti-title",data:{title:c||""}}),l(z,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+w,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:k,setVisible:s,setVideoUrl:p,setYouTubeId:m}},Slide:R,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:h===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),l(L,{open:N,onOpenChange:M=>{s(M),f()},children:o(V,{className:"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[d?l(Y,{youTubeId:d}):null,n?l("video",{className:"size-full object-cover",src:n,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,l("div",{onClick:()=>{s(!1),f()},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:l("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:l("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var X=I(U);export{X as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"tablet:block hidden size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <Picture\n          source={data.mobileImg?.url || data.img?.url}\n          alt={data.mobileImg?.alt || data.img?.alt || ''}\n          className=\"tablet:hidden block size-full\"\n          imgClassName=\"w-full h-full object-cover\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(data?.video?.url || data?.youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.setVisible?.(true)\n                if (data?.isYouTube) {\n                  configuration?.setYouTubeId?.(data?.youtubeId)\n                } else {\n                  configuration?.setVideoUrl?.(data?.video?.url)\n                }\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n              }}\n              className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <Link\n              href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n            >\n              {data.quote}\n            </Link>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    useExposure(wrapperRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length\n\n    return (\n      <div className={className} ref={wrapperRef}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{\n                  list: items,\n                  configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl, setYouTubeId },\n                }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.2,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 2 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 2 : 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        <VideoModal\n          visible={visible}\n          setVisible={setVisible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          setVideoUrl={setVideoUrl}\n          setYouTubeId={setYouTubeId}\n        />\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
-  "mappings": "aA2BM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA1BN,OAAS,YAAAC,EAAU,cAAAC,EAAY,UAAAC,MAAc,QAC7C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,aAAAC,MAAiB,gCAC1B,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAE3CnB,EAAC,OACC,UAAWI,EACT,2CACA,yCACA,iEACAe,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAnB,EAAC,OAAI,UAAU,uFACb,UAAAD,EAACO,EAAA,CACC,OAAQY,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,gCACV,aAAa,gFACf,EACAnB,EAACO,EAAA,CACC,OAAQY,EAAK,WAAW,KAAOA,EAAK,KAAK,IACzC,IAAKA,EAAK,WAAW,KAAOA,EAAK,KAAK,KAAO,GAC7C,UAAU,gCACV,aAAa,6BACf,EACAnB,EAAC,OAAI,UAAU,2DACX,UAAAmB,GAAM,OAAO,KAAOA,GAAM,YAC1BnB,EAAC,UACC,QAAS,IAAM,CACboB,GAAe,aAAa,EAAI,EAC5BD,GAAM,UACRC,GAAe,eAAeD,GAAM,SAAS,EAE7CC,GAAe,cAAcD,GAAM,OAAO,GAAG,EAE/CC,GAAe,sBAAsBA,GAAe,OAAS,CAAC,CAChE,EACA,UAAU,gHAEV,SAAApB,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,EAEAC,EAAC,OAAI,UAAU,oIACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAAC,MAAG,UAAU,2HACX,SAAAmB,EAAK,MACR,EACCA,EAAK,OACJnB,EAACQ,EAAA,CACC,KAAMO,EAAYI,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,UAAU,kHAET,SAAAE,EAAK,MACR,GAEJ,EAEAnB,EAAC,KAAE,UAAU,mLACV,SAAAmB,EAAK,YACR,GACF,GACF,EAIEE,EAAmBlB,EACvB,CACE,CAAE,KAAM,CAAE,MAAAmB,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,EAAO,eAAAC,CAAe,EAAG,UAAAC,EAAY,GAAI,IAAAC,EAAK,oBAAAC,CAAoB,EAC1GC,IACG,CACH,KAAM,CAACC,EAASC,CAAU,EAAI7B,EAAkB,EAAK,EAC/C,CAAC8B,EAAUC,CAAW,EAAI/B,EAAiB,EAAE,EAC7C,CAACgC,EAAWC,CAAY,EAAIjC,EAAiB,EAAE,EAC/CkC,EAAa,OAAOZ,GAAU,SAAWA,EAAQA,GAASX,EAAqB,CAAE,KAAMW,CAAM,CAAC,EAC9Fa,EAAajC,EAAuB,IAAI,EAE9CU,EAAYuB,EAAY,CACtB,cAAArB,EACA,cAAAC,EACA,eAAgBmB,CAClB,CAAC,EAGD,MAAME,EAAchB,EAAM,OAE1B,OACErB,EAAC,OAAI,UAAWyB,EAAW,IAAKW,EAC9B,UAAArC,EAAC,OAAI,UAAU,uBACb,SAAAA,EAACW,EAAA,CAAW,GAAIc,GAAkB,CAAC,EAAI,UAAU,kBAC/C,SAAAxB,EAAC,OAAI,UAAWyB,EAAW,IAAKG,EAC7B,UAAAL,GAASxB,EAACS,EAAA,CAAM,UAAU,yBAAyB,KAAM,CAAE,MAAO2B,GAAc,EAAG,EAAG,EACvFpC,EAACU,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2BiB,EAC/B,KAAM,CACJ,KAAML,EACN,cAAe,CAAE,MAAOC,EAAO,oBAAAK,EAAqB,WAAAG,EAAY,YAAAE,EAAa,aAAAE,CAAa,CAC5F,EACA,MAAOjB,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeoB,IAAgB,EAAI,EAAI,GACzC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,IAAgB,EAAI,EAAI,GACzC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EACF,EACF,EACAtC,EAACY,EAAA,CACC,QAASkB,EACT,WAAYC,EACZ,UAAWG,EACX,SAAUF,EACV,YAAaC,EACb,aAAcE,EAChB,GACF,CAEJ,CACF,EAEA,IAAOI,EAAQjC,EAAWe,CAAgB",
-  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Link", "Title", "SwiperBox", "Container", "VideoModal", "convertLexicalToHTML", "useExposure", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "itemsLength", "MediaPlayerMulti_default"]
+  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { YouTubePlayer } from './YouTubePlayer.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"tablet:block hidden size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <Picture\n          source={data.mobileImg?.url || data.img?.url}\n          alt={data.mobileImg?.alt || data.img?.alt || ''}\n          className=\"tablet:hidden block size-full\"\n          imgClassName=\"w-full h-full object-cover\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(data?.video?.url || data?.YoutubeId) && (\n            <button\n              onClick={() => {\n                configuration?.setVisible?.(true)\n                if (data?.isYouTube) {\n                  configuration?.setYouTubeId?.(data?.YoutubeId)\n                } else {\n                  configuration?.setVideoUrl?.(data?.video?.url)\n                }\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n              }}\n              className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <Link\n              href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n            >\n              {data.quote}\n            </Link>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    const clearContent = () => {\n      setVideoUrl('')\n      setYouTubeId('')\n    }\n\n    useExposure(wrapperRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length\n\n    return (\n      <div className={className} ref={wrapperRef}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{\n                  list: items,\n                  configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl, setYouTubeId },\n                }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.2,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 2 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 2 : 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        <Dialog\n          open={visible}\n          onOpenChange={(flag: boolean) => {\n            setVisible(flag)\n            clearContent()\n          }}\n        >\n          <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n            {youTubeId ? <YouTubePlayer youTubeId={youTubeId} /> : null}\n            {videoUrl ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n            <div\n              onClick={() => {\n                setVisible(false)\n                clearContent()\n              }}\n              className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n                data-slot=\"icon\"\n                className=\"HomeCharger_closeWrap__Z7aBo\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n              </svg>\n            </div>\n          </DialogContent>\n        </Dialog>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Link", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "YouTubePlayer", "convertLexicalToHTML", "useExposure", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "clearContent", "itemsLength", "flag", "MediaPlayerMulti_default"]
 }

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

@@ -6,7 +6,7 @@ export interface MediaPlayerItemProps {
     img: Img;
     mobileImg?: Img;
     video?: Video;
-    youtubeId?: string;
+    YoutubeId?: string;
     isYouTube?: boolean;
     quote?: string;
     href?: string;

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as h,jsx as e,jsxs as l}from"react/jsx-runtime";import A,{useState as d,useRef as p,useEffect as u,forwardRef as J}from"react";import{debounce as K}from"es-toolkit";import{useInView as U}from"react-intersection-observer";import{cn as b}from"../../helpers/utils.js";import{withStyles 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 w}from"../../components/gird.js";import{Container as te}from"../../components/container.js";import re from"../BrandEquity/index.js";import se from"../MemberEquity/index.js";import ae from"../Spacer/index.js";import oe from"gsap";import{convertLexicalToHTML as P}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as C}from"react-responsive";import le from"../../helpers/ScrollLoadVideo.js";const L=({defaultConverters:a})=>({...a,text:r=>{const{node:t}=r;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),g=({children:a,spaceY:r})=>{const t=C({query:"(max-width: 768px)"});return e(te,{spaceY:r,className:"!bg-transparent",children:l(ee,{children:[!t&&e(w,{span:1}),e(w,{span:t?12:10,children:a}),!t&&e(w,{span:1})]})})},ie=A.forwardRef(({children:a,id:r,components:t})=>{const o=p(null);return l("div",{ref:o,className:"relative z-10",children:[e(h,{children:a}),e(h,{children:t?.map(s=>{switch(s.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(g,{spaceY:"none",children:e(re,{data:s,style:s?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(g,{spaceY:"none",children:e(se,{data:s,className:"w-full",style:s?.style})})});case"ipc-spacer":return e(ae,{data:s,style:s?.style,className:"!bg-transparent"});default:return null}})})]})}),ne=J(({className:a="",id:r,data:{title:t,videoTitle:o,mobVideo:s,mobImg:i,img:n,isYouTube:z,youtubePcId:x,youtubeMobileId:B,video:m,theme:N,shape:$,components:Y}})=>{const k=p(null),f=p(null),{ref:q,inView:M}=U(),[R,F]=d(!1),[j,G]=d(!1),I=p(null),V=typeof t=="string"?t:t&&P({data:t,converters:L});typeof o=="string"||o&&P({data:o,converters:L});const[E,Q]=d(0),[c,O]=d(!1),H=C({query:"(max-width: 768px)"});u(()=>{O(H)},[H]);const y=K(()=>{if(f.current){const v=f.current.getBoundingClientRect(),S=window.innerHeight,W=window.scrollY||window.pageYOffset,_=v.bottom+W,T=document.documentElement.scrollHeight-_;Q(T>S?S:T)}},2e3);return u(()=>{M&&!R&&(k.current?.play(),F(!0))},[M,R]),u(()=>(y(),window.addEventListener("resize",y),()=>{window.removeEventListener("resize",y)}),[]),u(()=>{const v=window.screen.height;oe.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${v*1.8}px bottom`,scrub:0}}).to(`.${r} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[E]),l(h,{children:[e("div",{id:r,className:b("relative z-20 h-screen w-full",a,{"aiui-dark":N==="dark","rounded-box":$==="rounded"}),ref:I,children:e("div",{ref:q,className:"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:e(g,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(Z,{className:"sticky-title",data:{title:V||"",theme:N}})})})}),l("div",{ref:f,style:{marginBottom:`-${E}px`},className:b(r,"relative mt-[-200vh]"),children:[e("div",{className:"sticky top-0 ",children:l("div",{className:b("media-cover","relative h-screen w-full"),children:[z?e(D,{youTubeId:c&&B||x}):m?.url&&e(le,{videoRef:k,poster:c&&i?.url?i?.url:n?.url,src:c&&s?.url?s?.url:m?.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,onEnded:()=>{G(!0)}}),n?.url&&(!m?.url||j)&&e("img",{src:c&&i?.url?i?.url:n?.url,alt:n?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)"}})]})}),e("div",{className:"relative h-screen w-full"}),e(ie,{components:Y}),e("div",{className:"relative h-screen w-full"})]})]})});var Ee=X(ne);export{Ee as default};
+"use client";import{Fragment as h,jsx as e,jsxs as l}from"react/jsx-runtime";import O,{useState as c,useRef as d,useEffect as p,forwardRef as _}from"react";import{debounce as A}from"es-toolkit";import{useInView as J}from"react-intersection-observer";import{cn as b}from"../../helpers/utils.js";import{withStyles as K}from"../../shared/Styles.js";import U from"../Slogan/index.js";import{Grid as W,GridItem as w}from"../../components/gird.js";import{Container as X}from"../../components/container.js";import Z from"../BrandEquity/index.js";import D from"../MemberEquity/index.js";import ee from"../Spacer/index.js";import te from"gsap";import{convertLexicalToHTML as P}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as C}from"react-responsive";import re from"../../helpers/ScrollLoadVideo.js";const L=({defaultConverters:a})=>({...a,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),g=({children:a,spaceY:s})=>{const t=C({query:"(max-width: 768px)"});return e(X,{spaceY:s,className:"!bg-transparent",children:l(W,{children:[!t&&e(w,{span:1}),e(w,{span:t?12:10,children:a}),!t&&e(w,{span:1})]})})},se=O.forwardRef(({children:a,id:s,components:t})=>{const o=d(null);return l("div",{ref:o,className:"relative z-10",children:[e(h,{children:a}),e(h,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(g,{spaceY:"none",children:e(Z,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(g,{spaceY:"none",children:e(D,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(ee,{data:r,style:r?.style,className:"!bg-transparent"});default:return null}})})]})}),ae=_(({className:a="",id:s,data:{title:t,videoTitle:o,mobVideo:r,mobImg:n,img:i,video:m,theme:x,shape:T,components:z}})=>{const N=d(null),u=d(null),{ref:B,inView:M}=J(),[R,$]=c(!1),[Y,q]=c(!1),j=d(null),G=typeof t=="string"?t:t&&P({data:t,converters:L});typeof o=="string"||o&&P({data:o,converters:L});const[k,I]=c(0),[f,V]=c(!1),E=C({query:"(max-width: 768px)"});p(()=>{V(E)},[E]);const y=A(()=>{if(u.current){const v=u.current.getBoundingClientRect(),H=window.innerHeight,F=window.scrollY||window.pageYOffset,Q=v.bottom+F,S=document.documentElement.scrollHeight-Q;I(S>H?H:S)}},2e3);return p(()=>{M&&!R&&(N.current?.play(),$(!0))},[M,R]),p(()=>(y(),window.addEventListener("resize",y),()=>{window.removeEventListener("resize",y)}),[]),p(()=>{const v=window.screen.height;te.timeline({scrollTrigger:{trigger:`#${s}`,start:"top top",end:`top+=${v*1.8}px bottom`,scrub:0}}).to(`#${s} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[k]),l(h,{children:[e("div",{id:s,className:b("relative z-20 h-screen w-full",a,{"aiui-dark":x==="dark","rounded-box":T==="rounded"}),ref:j,children:e("div",{ref:B,className:"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:e(g,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(U,{className:"sticky-title",data:{title:G||"",theme:x}})})})}),l("div",{ref:u,style:{marginBottom:`-${k}px`},className:b(s,"relative mt-[-200vh]"),children:[e("div",{className:"sticky top-0 ",children:l("div",{className:b("media-cover","relative h-screen w-full"),children:[m?.url&&e(re,{videoRef:N,poster:f&&n?.url?n?.url:i?.url,src:f&&r?.url?r?.url:m?.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,onEnded:()=>{q(!0)}}),i?.url&&(!m?.url||Y)&&e("img",{src:f&&n?.url?n?.url:i?.url,alt:i?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]"}),e("div",{className:"sticky-cover opacity-1 absolute left-0 top-0 z-10 size-full",style:{background:"rgba(0, 0, 0, 0.2)"}})]})}),e("div",{className:"relative h-screen w-full"}),e(se,{components:z}),e("div",{className:"relative h-screen w-full"})]})]})});var xe=K(ae);export{xe as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.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 = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className=\"!bg-transparent\">\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{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 }) => {\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    className = '',\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    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\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 = 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    }, 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      const height = window.screen.height\n      gsap\n        .timeline({\n          scrollTrigger: {\n            trigger: `#${id}`,\n            start: 'top top',\n            end: `top+=${height * 1.8}px bottom`,\n            scrub: 0,\n          },\n        })\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    }, [btb])\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 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2\"\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div ref={boxRef} style={{ marginBottom: `-${btb}px` }} className={cn(id, 'relative mt-[-200vh]')}>\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                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{ backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)' }}\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 withStyles(MediaPlayerSticky)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withStyles", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "MediaPlayerSticky_default"]
+  "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 { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.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'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\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\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 = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className=\"!bg-transparent\">\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{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 }) => {\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>(({ className = '', id, data: { title, videoTitle, mobVideo, mobImg, img, video, theme, shape, components } }) => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n  const { ref: inViewRef, inView } = useInView()\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 = 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  }, 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    const height = window.screen.height\n    gsap\n      .timeline({\n        scrollTrigger: {\n          trigger: `#${id}`,\n          start: 'top top',\n          end: `top+=${height * 1.8}px bottom`,\n          scrub: 0,\n        },\n      })\n      // .to(`.${id} .sticky-cover`, {\n      //   opacity: 1,\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  }, [btb])\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 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2\"\n        >\n          <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n            <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n          </SubContainer>\n        </div>\n      </div>\n\n      <div ref={boxRef} style={{ marginBottom: `-${btb}px` }} className={cn(id, 'relative mt-[-200vh]')}>\n        <div className=\"sticky top-0 \">\n          <div className={cn('media-cover', 'relative h-screen w-full')}>\n            {/* {video?.url && (\n              <video\n                ref={videoRef}\n                className=\"size-full object-cover object-[82%]\"\n                src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                muted\n                playsInline\n                onEnded={() => {\n                  setIsEntered(true)\n                }}\n              />\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            {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              />\n            )}\n            <div\n              className=\"sticky-cover opacity-1 absolute left-0 top-0 z-10 size-full\"\n              style={{\n                background: 'rgba(0, 0, 0, 0.2)',\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\nexport default withStyles(MediaPlayerSticky)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "mobVideo", "mobImg", "img", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "MediaPlayerSticky_default"]
 }

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

@@ -13,9 +13,6 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps {
         mobImg?: Img;
         video?: Video;
         mobVideo?: Video;
-        isYouTube?: boolean;
-        youtubePcId: string;
-        youtubeMobileId?: string;
         components?: MediaPlayerComponent[];
     };
 }

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

@@ -1,6 +1,6 @@
-"use client";import{Fragment as Z,jsx as t,jsxs as u}from"react/jsx-runtime";import $,{useState as N,useEffect as E,useRef as H,useImperativeHandle as q}from"react";import{cn as d}from"../../helpers/utils.js";import L from"../../components/picture.js";import R from"./tabSwitch.js";import D from"../../components/button.js";import V from"../Title/index.js";import A from"../SwiperBox/index.js";import{withStyles as O}from"../../shared/Styles.js";import{formatVariantPrice as U}from"./shelfDisplay.js";import"../../components/container.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as j}from"../../hooks/useExposure.js";import{gaTrack as z}from"../../shared/track.js";import{useAiuiContext as W}from"../AiuiProvider/index.js";import F from"../../components/badge.js";import{Heading as Q}from"../../components/heading.js";import{Text as G}from"../../components/text.js";import{trackUrlRef as J}from"../../shared/trackUrlRef.js";const S="image",T="product_shelf",K=999999999e-2,X=({data:e,configuration:r})=>{const{locale:s="us",copyWriting:f}=W(),h=P({query:"(max-width: 768px)"}),v=(o,i)=>r?.event?.primaryButton?.(o,i+1),a=(o,i)=>r?.event?.secondaryButton?.(o,i+1),n=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},y=!n?.availableForSale&&n?.price?.amount===K,x=r?.isShowTag,{price:b,basePrice:l}=U({locale:s,amount:n?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),p=()=>{const o=e?.sku,i=e?.variants;return i?.find(w=>w?.sku===o)?.image?.url||i?.[0]?.image?.url||""};return t("div",{className:d("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.shape==="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",{"h-[360px]":h}),children:u("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[t("div",{className:d("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:t("a",{href:J(`${s==="us"||!s?"":`/${s}`}/products/${e?.handle}`,`${S}_${T}`),children:t(L,{source:p(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),x?t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((o,i)=>t(F,{children:o},i))}):null,e?.title?t(Q,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}):null,e?.description?t(G,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}):null,t("div",{className:"mb-2 mt-[20px] flex items-center",children:y?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:f?.soldOutText}):u(Z,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:l||""})]})}),u("div",{className:d("lg-desktop:gap-3 flex items-center gap-2",r.direction==="vertical"?"flex-col":""),children:[r?.secondaryButton?t(D,{variant:"secondary",onClick:()=>a(e,r?.index),className:`
+"use client";import{Fragment as ee,jsx as t,jsxs as f}from"react/jsx-runtime";import E,{useState as B,useEffect as H,useRef as q,useImperativeHandle as L}from"react";import{cn as u}from"../../helpers/utils.js";import R from"../../components/picture.js";import V from"./tabSwitch.js";import N from"../../components/button.js";import A from"../Title/index.js";import O from"../SwiperBox/index.js";import{withStyles as U}from"../../shared/Styles.js";import{formatVariantPrice as j}from"./shelfDisplay.js";import"../../components/container.js";import{useMediaQuery as D}from"react-responsive";import{useExposure as z}from"../../hooks/useExposure.js";import{gaTrack as W}from"../../shared/track.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";import Q from"../../components/badge.js";import{Heading as G}from"../../components/heading.js";import{Text as J}from"../../components/text.js";import{trackUrlRef as K}from"../../shared/trackUrlRef.js";const k="image",S="product_shelf",X=999999999e-2,Y=({data:e,configuration:r})=>{const{locale:s="us",copyWriting:h}=F(),v=D({query:"(max-width: 768px)"}),y=(i,o)=>r?.event?.primaryButton?.(i,o+1),a=(i,o)=>r?.event?.secondaryButton?.(i,o+1),n=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},x=!n?.availableForSale&&n?.price?.amount===X,b=r?.isShowTag,{price:g,basePrice:l}=j({locale:s,amount:n?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),p=()=>{const i=e?.sku,o=e?.variants;return o?.find(m=>m?.sku===i)?.image?.url||o?.[0]?.image?.url||""};return t("div",{className:u("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.shape==="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",{"h-[360px]":v}),children:f("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[t("div",{className:u("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:t("a",{href:K(`${s==="us"||!s?"":`/${s}`}/products/${e?.handle}`,`${k}_${S}`),children:t(R,{source:p(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),b?t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((i,o)=>t(Q,{children:i},o))}):null,e?.title?t(G,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}):null,e?.description?t(J,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}):null,t("div",{className:"mb-2 mt-[20px] flex items-center",children:x?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:h?.soldOutText}):f(ee,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:l||""})]})}),f("div",{className:u("lg-desktop:gap-3 flex items-center gap-2",r.direction==="vertical"?"flex-col":""),children:[r?.secondaryButton?t(N,{variant:"secondary",onClick:()=>a(e,r?.index),className:`
                 ${r.direction==="vertical"?"w-full":""}
-              `,children:r?.secondaryButton||""}):null,r?.primaryButton?t(D,{variant:"primary",onClick:()=>v(e,r?.index),className:`
+              `,children:r?.secondaryButton||""}):null,r?.primaryButton?t(N,{variant:"primary",onClick:()=>y(e,r?.index),className:`
               ${r.direction==="vertical"?"w-full":""}
-            `,children:r?.primaryButton||""}):null]})]})},e?.id||e?.handle)},Y=$.forwardRef(({data:e,buildData:r,className:s="",key:f,event:h},v)=>{const[a,n]=N(""),[y,x]=N([]),b=P({query:"(max-width: 768px)"}),l=H(null);q(v,()=>l.current),j(l,{componentType:S,componentName:T,componentTitle:e?.title,navigation:a});const{productsTab:p=[],productsCard:o=[],title:i,isShowTab:g=!0,tabShape:w="square",isShowTag:C=!1,...I}=e,k=c=>{const _=c?.map(m=>{const B=r?.products?.find(M=>M?.handle===m?.handle);if(B)return{sku:m.sku,...B}})?.filter(m=>m);x(_)};return E(()=>{if(g){n(p?.[0]?.tab||""),k(p?.[0]?.data||[]);return}k(o)},[]),u("div",{ref:l,className:d("w-full",s,{"aiui-dark":e?.theme==="dark"}),children:[i&&t(V,{data:{title:i}}),g&&t("div",{className:`${b?"w-full overflow-hidden":""}`,children:t(R,{value:a,tabs:p,tabShape:w,onTabClick:c=>{n(c?.tab),k(c?.data||[]),z({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:S,component_name:T,component_title:e?.title,component_position:1,navigation:c?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t(A,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${f}${a}`,data:{list:y,configuration:{...I,event:h,isShowTag:C}},Slide:X,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var be=O(Y);export{be as default};
+            `,children:r?.primaryButton||""}):null]})]})},e?.id||e?.handle)},Z=E.forwardRef(({data:e,buildData:r,className:s="",key:h,event:v},y)=>{const[a,n]=B(""),[x,b]=B([]),g=D({query:"(max-width: 768px)"}),l=q(null);L(y,()=>l.current),z(l,{componentType:k,componentName:S,componentTitle:e?.title,navigation:a});const{productsTab:p=[],productsCard:i=[],title:o,align:P="left",isShowTab:m=!0,tabShape:C="square",isShowTag:I=!1,..._}=e,w=c=>{const M=c?.map(d=>{const T=r?.products?.find($=>$?.handle===d?.handle);if(T)return{sku:d.sku,...T}})?.filter(d=>d);b(M)};return H(()=>{if(m){n(p?.[0]?.tab||""),w(p?.[0]?.data||[]);return}w(i)},[]),f("div",{ref:l,className:u("w-full",s,{"aiui-dark":e?.theme==="dark"}),children:[o&&t(A,{data:{title:o}}),m&&t("div",{className:`${g?"w-full overflow-hidden":""}`,children:t(V,{value:a,tabs:p,tabShape:C,onTabClick:c=>{n(c?.tab),w(c?.data||[]),W({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:k,component_name:S,component_title:e?.title,component_position:1,navigation:c?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t(O,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${h}${a}`,data:{list:x,configuration:{..._,event:v,isShowTag:I}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var ge=U(Z);export{ge as default};
 //# sourceMappingURL=index.js.map