@anker-in/headless-ui 1.0.9-temp-2 → 1.0.9-temp-4

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 (15) hide show
  1. package/dist/cjs/biz-components/AccordionCards/index.d.ts +1 -0
  2. package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
  3. package/dist/cjs/biz-components/AccordionCards/index.js.map +2 -2
  4. package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
  5. package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
  6. package/dist/cjs/biz-components/MediaPlayerBase/types.d.ts +1 -0
  7. package/dist/cjs/biz-components/MediaPlayerBase/types.js +1 -1
  8. package/dist/cjs/biz-components/MediaPlayerBase/types.js.map +1 -1
  9. package/dist/esm/biz-components/AccordionCards/index.d.ts +1 -0
  10. package/dist/esm/biz-components/AccordionCards/index.js +1 -1
  11. package/dist/esm/biz-components/AccordionCards/index.js.map +2 -2
  12. package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
  13. package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
  14. package/dist/esm/biz-components/MediaPlayerBase/types.d.ts +1 -0
  15. package/package.json +1 -1
package/dist/cjs/biz-components/AccordionCards/index.d.ts CHANGED
@@ -10,6 +10,7 @@ type ItemType = {
10
10
  /** 内容节点 */
11
11
  subTitle: string;
12
12
  link?: string;
13
+ imgLink?: string;
13
14
  };
14
15
  export type AccordionCardsType = {
15
16
  className?: string;
package/dist/cjs/biz-components/AccordionCards/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var D=Object.create;var p=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var W=(e,i)=>{for(var s in i)p(e,s,{get:i[s],enumerable:!0})},I=(e,i,s,c)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of P(i))!$.call(e,a)&&a!==s&&p(e,a,{get:()=>i[a],enumerable:!(c=j(i,a))||c.enumerable});return e};var m=(e,i,s)=>(s=e!=null?D(V(e)):{},I(i||!e||!e.__esModule?p(s,"default",{value:e,enumerable:!0}):s,e)),q=e=>I(p({},"__esModule",{value:!0}),e);var G={};W(G,{default:()=>F});module.exports=q(G);var o=require("react/jsx-runtime"),B=m(require("../Title/index.js")),l=require("../../helpers/utils.js"),y=m(require("../../components/picture.js")),g=m(require("../../components/button.js")),E=m(require("../SwiperBox/index.js")),H=require("../../shared/Styles.js"),r=m(require("react")),M=require("../../hooks/useExposure.js"),x=require("../../shared/trackUrlRef.js"),L=require("../../shared/track.js"),R=m(require("../../shared/throttle.js")),w=require("../../components/heading.js");const u="image",d="scene_banner",U=r.default.forwardRef(({data:e,className:i="",event:s},c)=>{const[a,C]=(0,r.useState)(0),f=(0,r.useRef)(0),v=(0,r.useRef)([]),b=(0,r.useRef)(!1),[k,S]=(0,r.useState)(0),h=(0,r.useRef)(null);(0,r.useImperativeHandle)(c,()=>h.current),(0,M.useExposure)(h,{componentType:u,componentName:d,componentTitle:e?.title});const z=(t,n)=>{n&&(v.current[t]=n)};(0,r.useEffect)(()=>{const t=()=>{v.current[f.current]&&S(v.current[f.current].offsetWidth)};t();const n=(0,R.default)(t,300);return window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[]);const A=({data:t,configuration:n})=>(0,o.jsxs)("div",{className:(0,l.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",n?.itemShape==="round"?"rounded-2xl":""),children:[(0,o.jsx)(y.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.mobileImg?.url||"",alt:t?.mobileImg?.alt||""}),(0,o.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[(0,o.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,o.jsx)("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:t?.title}),(0,o.jsx)("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:t?.subTitle})]}),(0,o.jsx)(g.default,{"aria-label":t?.title??t?.subTitle,variant:"secondary",className:(0,l.cn)("text-info-primary text-sm font-bold"),as:"a",href:(0,x.trackUrlRef)(t.link,`${u}_${d}`),children:n?.primaryButton})]})]}),T=(0,r.useCallback)(t=>{a===t||b.current||(b.current=!0,C(t),f.current=t,(0,L.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:u,component_name:d,component_title:e?.products[t]?.title,component_description:e?.products[t]?.subTitle,position:t+1}}))},[e?.products,a]);return(0,o.jsxs)(o.Fragment,{children:[e?.title&&(0,o.jsx)(B.default,{data:{title:e?.title}}),(0,o.jsx)("div",{ref:h,className:(0,l.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,o.jsx)("div",{className:(0,l.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",i),children:e?.products?.map((t,n)=>{const _=a===n;return(0,o.jsxs)("div",{style:{flex:`${_?8:1} 1 0%`,transition:"all 0.6s"},ref:N=>{N&&z(n,N)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>T(n),onMouseLeave:()=>{b.current=!1},onClick:()=>T(n),children:[(0,o.jsx)(y.default,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:t?.img?.alt||""}),(0,o.jsxs)("div",{style:{width:k},className:(0,l.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",_&&k?"opacity-100":"opacity-0"),children:[(0,o.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,o.jsx)(w.Heading,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:t?.title}),(0,o.jsx)(w.Heading,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:t?.subTitle})]}),(0,o.jsxs)(g.default,{className:(0,l.cn)("mb-1.5 font-bold"),as:"a",href:(0,x.trackUrlRef)(t?.link,`${u}_${d}`),onClick:()=>s?.primaryButton?.(e,n),children:[e?.primaryButton,(0,o.jsx)("span",{className:"sr-only",children:t?.title??t?.subTitle})]})]})]},n)})})}),(0,o.jsx)("div",{className:(0,l.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,o.jsx)(E.default,{className:(0,l.cn)("h-[400px] !overflow-visible",i),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:s}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var F=(0,H.withLayout)(U);
1
+ "use strict";"use client";var A=Object.create;var d=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var W=(e,i)=>{for(var s in i)d(e,s,{get:i[s],enumerable:!0})},I=(e,i,s,u)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of j(i))!V.call(e,a)&&a!==s&&d(e,a,{get:()=>i[a],enumerable:!(u=D(i,a))||u.enumerable});return e};var m=(e,i,s)=>(s=e!=null?A(P(e)):{},I(i||!e||!e.__esModule?d(s,"default",{value:e,enumerable:!0}):s,e)),q=e=>I(d({},"__esModule",{value:!0}),e);var G={};W(G,{default:()=>F});module.exports=q(G);var o=require("react/jsx-runtime"),B=m(require("../Title/index.js")),l=require("../../helpers/utils.js"),y=m(require("../../components/picture.js")),x=m(require("../../components/button.js")),E=m(require("../SwiperBox/index.js")),H=require("../../shared/Styles.js"),r=m(require("react")),L=require("../../hooks/useExposure.js"),f=require("../../shared/trackUrlRef.js"),M=require("../../shared/track.js"),C=m(require("../../shared/throttle.js")),w=require("../../components/heading.js");const c="image",p="scene_banner",U=r.default.forwardRef(({data:e,className:i="",event:s},u)=>{const[a,R]=(0,r.useState)(0),v=(0,r.useRef)(0),b=(0,r.useRef)([]),h=(0,r.useRef)(!1),[k,S]=(0,r.useState)(0),g=(0,r.useRef)(null);(0,r.useImperativeHandle)(u,()=>g.current),(0,L.useExposure)(g,{componentType:c,componentName:p,componentTitle:e?.title});const $=(t,n)=>{n&&(b.current[t]=n)};(0,r.useEffect)(()=>{const t=()=>{b.current[v.current]&&S(b.current[v.current].offsetWidth)};t();const n=(0,C.default)(t,300);return window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[]);const z=({data:t,configuration:n})=>(0,o.jsxs)("div",{className:(0,l.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",n?.itemShape==="round"?"rounded-2xl":""),children:[(0,o.jsx)(y.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.mobileImg?.url||"",alt:t?.mobileImg?.alt||""}),(0,o.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[(0,o.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,o.jsx)("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:t?.title}),(0,o.jsx)("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:t?.subTitle})]}),(0,o.jsx)(x.default,{"aria-label":t?.title??t?.subTitle,variant:"secondary",className:(0,l.cn)("text-info-primary text-sm font-bold"),as:"a",href:(0,f.trackUrlRef)(t.link,`${c}_${p}`),children:n?.primaryButton})]})]}),_=(0,r.useCallback)(t=>{a===t||h.current||(h.current=!0,R(t),v.current=t,(0,M.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:c,component_name:p,component_title:e?.products[t]?.title,component_description:e?.products[t]?.subTitle,position:t+1}}))},[e?.products,a]);return(0,o.jsxs)(o.Fragment,{children:[e?.title&&(0,o.jsx)(B.default,{data:{title:e?.title}}),(0,o.jsx)("div",{ref:g,className:(0,l.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,o.jsx)("div",{className:(0,l.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",i),children:e?.products?.map((t,n)=>{const T=a===n;return(0,o.jsxs)("div",{style:{flex:`${T?8:1} 1 0%`,transition:"all 0.6s"},ref:N=>{N&&$(n,N)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>_(n),onMouseLeave:()=>{h.current=!1},onClick:()=>{_(n)},children:[(0,o.jsx)(y.default,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:t?.img?.alt||"",onClick:()=>{(0,f.trackUrlRef)(t?.imgLink,`${c}_${p}`)}}),(0,o.jsxs)("div",{style:{width:k},className:(0,l.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",T&&k?"opacity-100":"opacity-0"),children:[(0,o.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,o.jsx)(w.Heading,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:t?.title}),(0,o.jsx)(w.Heading,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:t?.subTitle})]}),(0,o.jsxs)(x.default,{className:(0,l.cn)("mb-1.5 font-bold"),as:"a",href:(0,f.trackUrlRef)(t?.link,`${c}_${p}`),onClick:()=>s?.primaryButton?.(e,n),children:[e?.primaryButton,(0,o.jsx)("span",{className:"sr-only",children:t?.title??t?.subTitle})]})]})]},n)})})}),(0,o.jsx)("div",{className:(0,l.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,o.jsx)(E.default,{className:(0,l.cn)("h-[400px] !overflow-visible",i),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:s}},Slide:z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var F=(0,H.withLayout)(U);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/AccordionCards/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\nexport type AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n\n <Button\n aria-label={data?.title ?? data?.subTitle}\n variant=\"secondary\"\n className={cn('text-info-primary text-sm font-bold')}\n as=\"a\"\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n >\n {configuration?.primaryButton}\n </Button>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n >\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {data?.primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\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: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n\n <Button\n aria-label={data?.title ?? data?.subTitle}\n variant=\"secondary\"\n className={cn('text-info-primary text-sm font-bold')}\n as=\"a\"\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n >\n {configuration?.primaryButton}\n </Button>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => {\n handleSwiperItemClick(idx)\n }}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n onClick={() => {\n trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)\n }}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n >\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {data?.primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\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: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
5
+ "mappings": "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",
6
6
  "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_track", "import_throttle", "import_heading", "componentType", "componentName", "AccordionCards", "React", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "hoverIndexRef", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "throttleResize", "throttle", "MobileItem", "configuration", "Picture", "Button", "handleSwiperItemClick", "idx", "Title", "item", "isExpanded", "SwiperBox"]
7
7
  }
package/dist/cjs/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var pe=Object.create;var h=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var ve=(r,n)=>{for(var o in n)h(r,o,{get:n[o],enumerable:!0})},Y=(r,n,o,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of ue(n))!ge.call(r,s)&&s!==o&&h(r,s,{get:()=>n[s],enumerable:!(a=me(n,s))||a.enumerable});return r};var j=(r,n,o)=>(o=r!=null?pe(fe(r)):{},Y(n||!r||!r.__esModule?h(o,"default",{value:r,enumerable:!0}):o,r)),xe=r=>Y(h({},"__esModule",{value:!0}),r);var He={};ve(He,{default:()=>we});module.exports=xe(He);var e=require("react/jsx-runtime"),t=require("react"),O=require("lodash"),u=require("../../helpers/utils.js"),U=require("../../shared/Styles.js"),G=j(require("../../components/button.js")),J=require("../VideoModal/index.js"),E=require("@payloadcms/richtext-lexical/html"),K=require("react-intersection-observer"),Q=require("../../hooks/useExposure.js"),W=j(require("../../helpers/ScrollLoadVideo.js")),b=require("gsap"),X=require("gsap/dist/SplitText"),R=require("gsap/dist/ScrollTrigger");const ye="media_player_base",he="video",q=({defaultConverters:r})=>({...r,text:n=>{const{node:o}=n;return o.$&&o.$.color?`<span class="lexical-${o.$.color}">${o.text}</span>`:o.text}}),be=(0,t.forwardRef)(({className:r="",onBtnClick:n,data:{title:o,videoTitle:a,btnText:s,youtubeId:z,video:Z,theme:I,img:A,shape:_,titleAnimation:f,...ee}},te)=>{const{sticky:c}=ee,[P,$]=(0,t.useState)(!1),[B,oe]=(0,t.useState)(0),[re,ne]=(0,t.useState)(0),[S,C]=(0,t.useState)(!1),w=(0,t.useRef)(null),V=(0,t.useRef)(null),i=(0,t.useRef)(null),g=(0,t.useRef)(null),D=(0,t.useRef)(null),v=(0,t.useRef)(null),{ref:se,inView:x}=(0,K.useInView)();(0,t.useImperativeHandle)(te,()=>i.current);const y=typeof o=="string"?o:o&&(0,E.convertLexicalToHTML)({data:o,converters:q}),H=typeof a=="string"?a:a&&(0,E.convertLexicalToHTML)({data:a,converters:q});(0,t.useEffect)(()=>{x?(w.current?.play(),$(!0)):(w.current?.pause(),$(!1))},[x]);const T=(0,O.debounce)(()=>{if(i.current){const d=i.current.getBoundingClientRect(),l=window.innerHeight,p=window.scrollY||window.pageYOffset,M=d.bottom+p,m=document.documentElement.scrollHeight-M;oe(m>l?l:m)}if(i.current){const d=i.current.clientHeight,l=window.innerHeight;ne(d+l)}},600);(0,t.useEffect)(()=>(T(),window.addEventListener("resize",T),()=>{window.removeEventListener("resize",T)}),[]),(0,t.useEffect)(()=>{function d(){if(!g.current||f!=="fade-in")return;const l=g.current?.clientHeight||80;v.current=new X.SplitText(g.current,{type:"words",wordsClass:"word"});const p=v.current.words;b.gsap.set(p,{opacity:0}),R.ScrollTrigger.create({trigger:i.current,start:"top center-=10%",end:`top+=${l*1.5+80}px center-=10%`,scrub:!0,onUpdate:M=>{const L=M.progress,m=p.length,le=1/m,F=.5;p.forEach((ae,ie)=>{const ce=ie/m*(1-F),de=le*(1+F);let N=(L-ce)/de;N=Math.max(0,Math.min(N,1)),b.gsap.set(ae,{opacity:N})}),b.gsap.set(V.current,{opacity:L})}})}return x&&d(),()=>{v.current&&v.current.revert(),R.ScrollTrigger.getAll().forEach(l=>l.kill())}},[f,x]),(0,Q.useExposure)(D,{componentType:he,componentName:ye,componentTitle:H});const k="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(0,e.jsxs)(e.Fragment,{children:[c&&(0,e.jsx)("div",{ref:i,className:(0,u.cn)("relative z-10 ",k,{"aiui-dark":I==="dark","rounded-box":_==="rounded"},r),children:(0,e.jsx)("div",{ref:se,children:!f&&(0,e.jsxs)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[y&&!P&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),H&&P&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),s&&(0,e.jsx)(G.default,{variant:"link",className:(0,u.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{C(!0),n&&n?.()},children:s})]})})}),(0,e.jsxs)("div",{style:c?{marginBottom:`-${B}px`,marginTop:`-${re}px`}:{},className:"relative",children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,u.cn)("relative overflow-hidden",c?"h-screen w-full":k,{"aiui-dark":I==="dark","rounded-box":_==="rounded"}),children:[f==="fade-in"&&y&&(0,e.jsx)("div",{ref:g,className:"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),(0,e.jsxs)("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,e.jsx)(W.default,{videoRef:w,poster:A?.url||"",src:Z?.url,className:"size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)("div",{ref:V,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),(0,e.jsx)("div",{className:(0,u.cn)(c&&"relative box-content block",k),style:c?{height:`${B}px`}:{},ref:D})]}),S&&z&&(0,e.jsx)(J.VideoModal,{visible:S,youTubeId:z,onCloseModal:()=>C(!1)})]})});var we=(0,U.withLayout)(be);
1
+ "use strict";"use client";var ue=Object.create;var h=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var ge=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var xe=(n,r)=>{for(var o in r)h(n,o,{get:r[o],enumerable:!0})},O=(n,r,o,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of fe(r))!ve.call(n,s)&&s!==o&&h(n,s,{get:()=>r[s],enumerable:!(a=me(r,s))||a.enumerable});return n};var U=(n,r,o)=>(o=n!=null?ue(ge(n)):{},O(r||!n||!n.__esModule?h(o,"default",{value:n,enumerable:!0}):o,n)),ye=n=>O(h({},"__esModule",{value:!0}),n);var Te={};xe(Te,{default:()=>He});module.exports=ye(Te);var e=require("react/jsx-runtime"),t=require("react"),J=require("lodash"),m=require("../../helpers/utils.js"),K=require("../../shared/Styles.js"),Q=U(require("../../components/button.js")),W=require("../VideoModal/index.js"),E=require("@payloadcms/richtext-lexical/html"),X=require("react-intersection-observer"),Z=require("../../hooks/useExposure.js"),R=U(require("../../helpers/ScrollLoadVideo.js")),w=require("gsap"),A=require("gsap/dist/SplitText"),z=require("gsap/dist/ScrollTrigger");const be="media_player_base",he="video",G=({defaultConverters:n})=>({...n,text:r=>{const{node:o}=r;return o.$&&o.$.color?`<span class="lexical-${o.$.color}">${o.text}</span>`:o.text}}),we=(0,t.forwardRef)(({className:n="",onBtnClick:r,data:{title:o,videoTitle:a,btnText:s,youtubeId:I,video:_,mobileVideo:ee,theme:P,img:$,shape:B,titleAnimation:f,...te}},oe)=>{const{sticky:c}=te,[C,S]=(0,t.useState)(!1),[V,ne]=(0,t.useState)(0),[re,se]=(0,t.useState)(0),[D,F]=(0,t.useState)(!1),g=(0,t.useRef)(null),j=(0,t.useRef)(null),i=(0,t.useRef)(null),v=(0,t.useRef)(null),Y=(0,t.useRef)(null),x=(0,t.useRef)(null),{ref:le,inView:y}=(0,X.useInView)();(0,t.useImperativeHandle)(oe,()=>i.current);const b=typeof o=="string"?o:o&&(0,E.convertLexicalToHTML)({data:o,converters:G}),H=typeof a=="string"?a:a&&(0,E.convertLexicalToHTML)({data:a,converters:G});(0,t.useEffect)(()=>{y?(g.current?.play(),S(!0)):(g.current?.pause(),S(!1))},[y]);const T=(0,J.debounce)(()=>{if(i.current){const d=i.current.getBoundingClientRect(),l=window.innerHeight,p=window.scrollY||window.pageYOffset,M=d.bottom+p,u=document.documentElement.scrollHeight-M;ne(u>l?l:u)}if(i.current){const d=i.current.clientHeight,l=window.innerHeight;se(d+l)}},600);(0,t.useEffect)(()=>(T(),window.addEventListener("resize",T),()=>{window.removeEventListener("resize",T)}),[]),(0,t.useEffect)(()=>{function d(){if(!v.current||f!=="fade-in")return;const l=v.current?.clientHeight||80;x.current=new A.SplitText(v.current,{type:"words",wordsClass:"word"});const p=x.current.words;w.gsap.set(p,{opacity:0}),z.ScrollTrigger.create({trigger:i.current,start:"top center-=10%",end:`top+=${l*1.5+80}px center-=10%`,scrub:!0,onUpdate:M=>{const L=M.progress,u=p.length,ae=1/u,q=.5;p.forEach((ie,ce)=>{const de=ce/u*(1-q),pe=ae*(1+q);let N=(L-de)/pe;N=Math.max(0,Math.min(N,1)),w.gsap.set(ie,{opacity:N})}),w.gsap.set(j.current,{opacity:L})}})}return y&&d(),()=>{x.current&&x.current.revert(),z.ScrollTrigger.getAll().forEach(l=>l.kill())}},[f,y]),(0,Z.useExposure)(Y,{componentType:he,componentName:be,componentTitle:H});const k="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(0,e.jsxs)(e.Fragment,{children:[c&&(0,e.jsx)("div",{ref:i,className:(0,m.cn)("relative z-10 ",k,{"aiui-dark":P==="dark","rounded-box":B==="rounded"},n),children:(0,e.jsx)("div",{ref:le,children:!f&&(0,e.jsxs)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[b&&!C&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),H&&C&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),s&&(0,e.jsx)(Q.default,{variant:"link",className:(0,m.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{F(!0),r&&r?.()},children:s})]})})}),(0,e.jsxs)("div",{style:c?{marginBottom:`-${V}px`,marginTop:`-${re}px`}:{},className:"relative",children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,m.cn)("relative overflow-hidden",c?"h-screen w-full":k,{"aiui-dark":P==="dark","rounded-box":B==="rounded"}),children:[f==="fade-in"&&b&&(0,e.jsx)("div",{ref:v,className:"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),(0,e.jsxs)("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,e.jsx)(R.default,{videoRef:g,poster:$?.url||"",src:_?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)(R.default,{videoRef:g,poster:$?.url||"",src:ee?.url||_?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)("div",{ref:j,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),(0,e.jsx)("div",{className:(0,m.cn)(c&&"relative box-content block",k),style:c?{height:`${V}px`}:{},ref:Y})]}),D&&I&&(0,e.jsx)(W.VideoModal,{visible:D,youTubeId:I,onCloseModal:()=>F(!1)})]})});var He=(0,K.withLayout)(we);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/MediaPlayerBase/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n }\n }, [titleAnimation, inView])\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\n ref={titleRef}\n className={cn(\n 'relative z-10 ',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div 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, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover left-0 top-0 h-screen w-screen\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
5
- "mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAqJM,IAAAI,EAAA,6BApJNC,EAA6E,iBAC7EC,EAAyB,kBACzBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAmB,yCACnBC,EAA2B,kCAC3BC,EAAqC,6CAGrCC,EAA0B,uCAE1BC,EAA4B,sCAC5BC,EAA4B,+CAC5BC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAEhBC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,MAAkB,cACtB,CACE,CACE,UAAAC,EAAY,GACZ,WAAAC,EACA,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,MAAAC,EAAO,IAAAC,EAAK,MAAAC,EAAO,eAAAC,EAAgB,GAAGC,EAAK,CACnG,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIF,GACb,CAACG,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1C,CAACC,EAAKC,EAAM,KAAI,YAAS,CAAC,EAC1B,CAACC,GAAaC,EAAc,KAAI,YAAS,CAAC,EAC1C,CAACC,EAASC,CAAU,KAAI,YAAkB,EAAK,EAE/CC,KAAW,UAAyB,IAAI,EACxCC,KAAQ,UAAyB,IAAI,EACrCC,KAAW,UAAuB,IAAI,EACtCC,KAAiB,UAAuB,IAAI,EAC5CC,KAAW,UAAuB,IAAI,EACtCC,KAAoB,UAAyB,IAAI,EACjD,CAAE,IAAKC,GAAW,OAAAC,CAAO,KAAI,aAAU,KAE7C,uBAAoBjB,GAAK,IAAMY,EAAS,OAAyB,EAEjE,MAAMM,EACJ,OAAO5B,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,EAAO,WAAYP,CAAe,CAAC,EACzGoC,EACJ,OAAO5B,GAAe,SAClBA,EACAA,MAAc,wBAAqB,CAAE,KAAMA,EAAY,WAAYR,CAAe,CAAC,KAEzF,aAAU,IAAM,CACVkC,GACFP,EAAS,SAAS,KAAK,EACvBP,EAAa,EAAI,IAEjBO,EAAS,SAAS,MAAM,EACxBP,EAAa,EAAK,EAEtB,EAAG,CAACc,CAAM,CAAC,EAEX,MAAMG,KAAwB,YAAS,IAAM,CAC3C,GAAIR,EAAS,QAAS,CACpB,MAAMS,EAAOT,EAAS,QAAQ,sBAAsB,EAC9CU,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CnB,GAAOoB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIb,EAAS,QAAS,CACpB,MAAMN,EAAcM,EAAS,QAAQ,aAC/BU,EAAe,OAAO,YAC5Bf,GAAeD,EAAcgB,CAAY,CAC3C,CACF,EAAG,GAAG,KAEN,aAAU,KACRF,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,KAEL,aAAU,IAAM,CACd,SAASM,GAAa,CACpB,GAAI,CAACb,EAAe,SAAWf,IAAmB,UAAW,OAC7D,MAAM6B,EAASd,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAI,YAAUF,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMe,EAAQb,EAAkB,QAAQ,MACxC,OAAK,IAAIa,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAAShB,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQe,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,GAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,GAAU,EAAIE,GAC3BI,GAAQL,IAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACD,OAAK,IAAI3B,EAAM,QAAS,CAAE,QAASmB,CAAS,CAAC,CAC/C,CACF,CAAC,CACH,CAEA,OAAIb,GAAQS,EAAW,EAEhB,IAAM,CACXX,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,gBAAc,OAAO,EAAE,QAASwB,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAACzC,EAAgBmB,CAAM,CAAC,KAE3B,eAAYH,EAAU,CACpB,cAAAhC,GACA,cAAAD,GACA,eAAgBsC,CAClB,CAAC,EAED,MAAMqB,EACJ,6NACF,SACE,oBACG,UAAAvC,MACC,OAAC,OACC,IAAKW,EACL,aAAW,MACT,iBACA4B,EACA,CACE,YAAa7C,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAT,CACF,EAEA,mBAAC,OAAI,IAAK4B,GACP,UAAClB,MACA,QAAC,OAAI,UAAU,yGACZ,UAAAoB,GAAc,CAAChB,MACd,OAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQgB,CAAW,EAChD,EAEDC,GAAmBjB,MAClB,OAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQiB,CAAgB,EACrD,EAED3B,MACC,OAAC,EAAAiD,QAAA,CACC,QAAQ,OACR,aAAW,MAAG,4DAA4D,EAC1E,QAAS,IAAM,CACbhC,EAAW,EAAI,EAYfpB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,KAEF,QAAC,OAAI,MAAOS,EAAS,CAAE,aAAc,IAAIG,CAAG,KAAM,UAAW,IAAIE,EAAW,IAAK,EAAI,CAAC,EAAG,UAAU,WACjG,oBAAC,OAAI,UAAU,gBACb,oBAAC,OACC,aAAW,MAAG,2BAA4BL,EAAS,kBAAoBuC,EAAQ,CAC7E,YAAa7C,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAAaoB,MAC/B,OAAC,OACC,IAAKL,EACL,UAAU,wLACV,wBAAyB,CAAE,OAAQK,CAAW,EAChD,KAEF,QAAC,OAAI,UAAU,6CACb,oBAAC,EAAAwB,QAAA,CACC,SAAUhC,EACV,OAAQd,GAAK,KAAO,GACpB,IAAKF,GAAO,IACZ,UAAU,YACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OACC,IAAKiB,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,KACA,OAAC,OACC,aAAW,MAAGV,GAAU,6BAA8BuC,CAAM,EAC5D,MAAOvC,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKU,EACP,GACF,EACCN,GAAWf,MACV,OAAC,cAAW,QAASe,EAAS,UAAWf,EAAW,aAAc,IAAMgB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA,IAAO5C,MAAQ,cAAWsB,EAAe",
6
- "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "aspect", "Button", "ScrollLoadVideo"]
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n }\n }, [titleAnimation, inView])\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\n ref={titleRef}\n className={cn(\n 'relative z-10 ',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div 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, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover left-0 top-0 h-screen w-screen\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
5
+ "mappings": "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",
6
+ "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "aspect", "Button", "ScrollLoadVideo"]
7
7
  }
package/dist/cjs/biz-components/MediaPlayerBase/types.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps {
10
10
  img?: Img;
11
11
  isYouTube?: boolean;
12
12
  video?: Video;
13
+ mobileVideo?: Video;
13
14
  youtubeId?: string;
14
15
  titleAnimation?: 'fade-in';
15
16
  };
package/dist/cjs/biz-components/MediaPlayerBase/types.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var r=(o,e,m,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of p(e))!a.call(o,t)&&t!==m&&n(o,t,{get:()=>e[t],enumerable:!(i=s(e,t))||i.enumerable});return o};var d=o=>r(n({},"__esModule",{value:!0}),o);var g={};module.exports=d(g);
1
+ "use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var r=(o,e,m,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of p(e))!a.call(o,i)&&i!==m&&n(o,i,{get:()=>e[i],enumerable:!(t=s(e,i))||t.enumerable});return o};var d=o=>r(n({},"__esModule",{value:!0}),o);var l={};module.exports=d(l);
2
2
  //# sourceMappingURL=types.js.map
package/dist/cjs/biz-components/MediaPlayerBase/types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/types.ts"],
4
- "sourcesContent": ["import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js'\n\nexport interface MediaPlayerBaseProps extends ComponentCommonProps {\n data: {\n sticky?: boolean\n shape?: Shape\n theme?: Theme\n title?: string\n videoTitle?: string\n btnText?: string\n img?: Img\n isYouTube?: boolean\n video?: Video\n youtubeId?: string\n titleAnimation?: 'fade-in'\n }\n onBtnClick?: () => void\n}\n"],
4
+ "sourcesContent": ["import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js'\n\nexport interface MediaPlayerBaseProps extends ComponentCommonProps {\n data: {\n sticky?: boolean\n shape?: Shape\n theme?: Theme\n title?: string\n videoTitle?: string\n btnText?: string\n img?: Img\n isYouTube?: boolean\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n titleAnimation?: 'fade-in'\n }\n onBtnClick?: () => void\n}\n"],
5
5
  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
6
6
  "names": ["types_exports", "__toCommonJS"]
7
7
  }
package/dist/esm/biz-components/AccordionCards/index.d.ts CHANGED
@@ -10,6 +10,7 @@ type ItemType = {
10
10
  /** 内容节点 */
11
11
  subTitle: string;
12
12
  link?: string;
13
+ imgLink?: string;
13
14
  };
14
15
  export type AccordionCardsType = {
15
16
  className?: string;
package/dist/esm/biz-components/AccordionCards/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as $,jsx as r,jsxs as i}from"react/jsx-runtime";import M from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import x from"../../components/picture.js";import w from"../../components/button.js";import L from"../SwiperBox/index.js";import{withLayout as R}from"../../shared/Styles.js";import C,{useState as k,useRef as s,useCallback as S,useImperativeHandle as z,useEffect as A}from"react";import{useExposure as D}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{gaTrack as j}from"../../shared/track.js";import P from"../../shared/throttle.js";import{Heading as _}from"../../components/heading.js";const l="image",a="scene_banner",V=C.forwardRef(({data:t,className:f="",event:v},N)=>{const[m,I]=k(0),c=s(0),p=s([]),u=s(!1),[b,B]=k(0),d=s(null);z(N,()=>d.current),D(d,{componentType:l,componentName:a,componentTitle:t?.title});const E=(e,o)=>{o&&(p.current[e]=o)};A(()=>{const e=()=>{p.current[c.current]&&B(p.current[c.current].offsetWidth)};e();const o=P(e,300);return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]);const H=({data:e,configuration:o})=>i("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",o?.itemShape==="round"?"rounded-2xl":""),children:[r(x,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""}),i("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[i("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),r("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),r(w,{"aria-label":e?.title??e?.subTitle,variant:"secondary",className:n("text-info-primary text-sm font-bold"),as:"a",href:T(e.link,`${l}_${a}`),children:o?.primaryButton})]})]}),h=S(e=>{m===e||u.current||(u.current=!0,I(e),c.current=e,j({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:l,component_name:a,component_title:t?.products[e]?.title,component_description:t?.products[e]?.subTitle,position:e+1}}))},[t?.products,m]);return i($,{children:[t?.title&&r(M,{data:{title:t?.title}}),r("div",{ref:d,className:n("laptop:block hidden",{"aiui-dark":t?.theme==="dark"}),children:r("div",{className:n("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",f),children:t?.products?.map((e,o)=>{const y=m===o;return i("div",{style:{flex:`${y?8:1} 1 0%`,transition:"all 0.6s"},ref:g=>{g&&E(o,g)},className:n("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>h(o),onMouseLeave:()=>{u.current=!1},onClick:()=>h(o),children:[r(x,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""}),i("div",{style:{width:b},className:n("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",y&&b?"opacity-100":"opacity-0"),children:[i("div",{className:"mr-16 flex-1 overflow-hidden",children:[r(_,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),r(_,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),i(w,{className:n("mb-1.5 font-bold"),as:"a",href:T(e?.link,`${l}_${a}`),onClick:()=>v?.primaryButton?.(t,o),children:[t?.primaryButton,r("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},o)})})}),r("div",{className:n("laptop:hidden block",{"aiui-dark":t?.theme==="dark"}),children:r(L,{className:n("h-[400px] !overflow-visible",f),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,itemShape:t?.itemShape,primaryButton:t?.primaryButton,event:v}},Slide:H,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var te=R(V);export{te as default};
1
+ "use client";import{Fragment as V,jsx as r,jsxs as i}from"react/jsx-runtime";import L from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import w from"../../components/picture.js";import k from"../../components/button.js";import M from"../SwiperBox/index.js";import{withLayout as C}from"../../shared/Styles.js";import R,{useState as _,useRef as a,useCallback as S,useImperativeHandle as $,useEffect as z}from"react";import{useExposure as A}from"../../hooks/useExposure.js";import{trackUrlRef as f}from"../../shared/trackUrlRef.js";import{gaTrack as D}from"../../shared/track.js";import j from"../../shared/throttle.js";import{Heading as T}from"../../components/heading.js";const s="image",l="scene_banner",P=R.forwardRef(({data:t,className:v="",event:b},N)=>{const[m,I]=_(0),c=a(0),p=a([]),u=a(!1),[h,B]=_(0),d=a(null);$(N,()=>d.current),A(d,{componentType:s,componentName:l,componentTitle:t?.title});const E=(e,o)=>{o&&(p.current[e]=o)};z(()=>{const e=()=>{p.current[c.current]&&B(p.current[c.current].offsetWidth)};e();const o=j(e,300);return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]);const H=({data:e,configuration:o})=>i("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",o?.itemShape==="round"?"rounded-2xl":""),children:[r(w,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""}),i("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[i("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),r("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),r(k,{"aria-label":e?.title??e?.subTitle,variant:"secondary",className:n("text-info-primary text-sm font-bold"),as:"a",href:f(e.link,`${s}_${l}`),children:o?.primaryButton})]})]}),g=S(e=>{m===e||u.current||(u.current=!0,I(e),c.current=e,D({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:s,component_name:l,component_title:t?.products[e]?.title,component_description:t?.products[e]?.subTitle,position:e+1}}))},[t?.products,m]);return i(V,{children:[t?.title&&r(L,{data:{title:t?.title}}),r("div",{ref:d,className:n("laptop:block hidden",{"aiui-dark":t?.theme==="dark"}),children:r("div",{className:n("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",v),children:t?.products?.map((e,o)=>{const y=m===o;return i("div",{style:{flex:`${y?8:1} 1 0%`,transition:"all 0.6s"},ref:x=>{x&&E(o,x)},className:n("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>g(o),onMouseLeave:()=>{u.current=!1},onClick:()=>{g(o)},children:[r(w,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||"",onClick:()=>{f(e?.imgLink,`${s}_${l}`)}}),i("div",{style:{width:h},className:n("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",y&&h?"opacity-100":"opacity-0"),children:[i("div",{className:"mr-16 flex-1 overflow-hidden",children:[r(T,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),r(T,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),i(k,{className:n("mb-1.5 font-bold"),as:"a",href:f(e?.link,`${s}_${l}`),onClick:()=>b?.primaryButton?.(t,o),children:[t?.primaryButton,r("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},o)})})}),r("div",{className:n("laptop:hidden block",{"aiui-dark":t?.theme==="dark"}),children:r(M,{className:n("h-[400px] !overflow-visible",v),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,itemShape:t?.itemShape,primaryButton:t?.primaryButton,event:b}},Slide:H,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var te=C(P);export{te as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/AccordionCards/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\nexport type AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n\n <Button\n aria-label={data?.title ?? data?.subTitle}\n variant=\"secondary\"\n className={cn('text-info-primary text-sm font-bold')}\n as=\"a\"\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n >\n {configuration?.primaryButton}\n </Button>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n >\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {data?.primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\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: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n\n <Button\n aria-label={data?.title ?? data?.subTitle}\n variant=\"secondary\"\n className={cn('text-info-primary text-sm font-bold')}\n as=\"a\"\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n >\n {configuration?.primaryButton}\n </Button>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => {\n handleSwiperItemClick(idx)\n }}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n onClick={() => {\n trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)\n }}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n >\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {data?.primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n },\n }}\n Slide={MobileItem}\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: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withLayout", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "gaTrack", "throttle", "Heading", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "hoverIndexRef", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "throttleResize", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "item", "isExpanded", "AccordionCards_default"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as ve,jsx as e,jsxs as c}from"react/jsx-runtime";import{useState as x,useRef as n,useEffect as N,forwardRef as re,useImperativeHandle as ne}from"react";import{debounce as se}from"lodash";import{cn as y}from"../../helpers/utils.js";import{withLayout as le}from"../../shared/Styles.js";import ae from"../../components/button.js";import{VideoModal as ie}from"../VideoModal/index.js";import{convertLexicalToHTML as Y}from"@payloadcms/richtext-lexical/html";import{useInView as ce}from"react-intersection-observer";import{useExposure as de}from"../../hooks/useExposure.js";import pe from"../../helpers/ScrollLoadVideo.js";import{gsap as E}from"gsap";import{SplitText as me}from"gsap/dist/SplitText";import{ScrollTrigger as j}from"gsap/dist/ScrollTrigger";const ue="media_player_base",fe="video",q=({defaultConverters:h})=>({...h,text:d=>{const{node:t}=d;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),ge=re(({className:h="",onBtnClick:d,data:{title:t,videoTitle:p,btnText:R,youtubeId:z,video:O,theme:I,img:U,shape:_,titleAnimation:m,...G}},J)=>{const{sticky:s}=G,[P,$]=x(!1),[B,K]=x(0),[Q,W]=x(0),[S,C]=x(!1),b=n(null),V=n(null),r=n(null),u=n(null),D=n(null),f=n(null),{ref:X,inView:g}=ce();ne(J,()=>r.current);const v=typeof t=="string"?t:t&&Y({data:t,converters:q}),w=typeof p=="string"?p:p&&Y({data:p,converters:q});N(()=>{g?(b.current?.play(),$(!0)):(b.current?.pause(),$(!1))},[g]);const H=se(()=>{if(r.current){const l=r.current.getBoundingClientRect(),o=window.innerHeight,a=window.scrollY||window.pageYOffset,k=l.bottom+a,i=document.documentElement.scrollHeight-k;K(i>o?o:i)}if(r.current){const l=r.current.clientHeight,o=window.innerHeight;W(l+o)}},600);N(()=>(H(),window.addEventListener("resize",H),()=>{window.removeEventListener("resize",H)}),[]),N(()=>{function l(){if(!u.current||m!=="fade-in")return;const o=u.current?.clientHeight||80;f.current=new me(u.current,{type:"words",wordsClass:"word"});const a=f.current.words;E.set(a,{opacity:0}),j.create({trigger:r.current,start:"top center-=10%",end:`top+=${o*1.5+80}px center-=10%`,scrub:!0,onUpdate:k=>{const M=k.progress,i=a.length,Z=1/i,F=.5;a.forEach((A,ee)=>{const te=ee/i*(1-F),oe=Z*(1+F);let L=(M-te)/oe;L=Math.max(0,Math.min(L,1)),E.set(A,{opacity:L})}),E.set(V.current,{opacity:M})}})}return g&&l(),()=>{f.current&&f.current.revert(),j.getAll().forEach(o=>o.kill())}},[m,g]),de(D,{componentType:fe,componentName:ue,componentTitle:w});const T="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 c(ve,{children:[s&&e("div",{ref:r,className:y("relative z-10 ",T,{"aiui-dark":I==="dark","rounded-box":_==="rounded"},h),children:e("div",{ref:X,children:!m&&c("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[v&&!P&&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}}),w&&P&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:w}}),R&&e(ae,{variant:"link",className:y("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{C(!0),d&&d?.()},children:R})]})})}),c("div",{style:s?{marginBottom:`-${B}px`,marginTop:`-${Q}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:c("div",{className:y("relative overflow-hidden",s?"h-screen w-full":T,{"aiui-dark":I==="dark","rounded-box":_==="rounded"}),children:[m==="fade-in"&&v&&e("div",{ref:u,className:"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),c("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[e(pe,{videoRef:b,poster:U?.url||"",src:O?.url,className:"size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:V,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:y(s&&"relative box-content block",T),style:s?{height:`${B}px`}:{},ref:D})]}),S&&z&&e(ie,{visible:S,youTubeId:z,onCloseModal:()=>C(!1)})]})});var ze=le(ge);export{ze as default};
1
+ "use client";import{Fragment as xe,jsx as e,jsxs as c}from"react/jsx-runtime";import{useState as y,useRef as r,useEffect as N,forwardRef as se,useImperativeHandle as le}from"react";import{debounce as ae}from"lodash";import{cn as b}from"../../helpers/utils.js";import{withLayout as ie}from"../../shared/Styles.js";import ce from"../../components/button.js";import{VideoModal as de}from"../VideoModal/index.js";import{convertLexicalToHTML as q}from"@payloadcms/richtext-lexical/html";import{useInView as pe}from"react-intersection-observer";import{useExposure as ue}from"../../hooks/useExposure.js";import O from"../../helpers/ScrollLoadVideo.js";import{gsap as E}from"gsap";import{SplitText as me}from"gsap/dist/SplitText";import{ScrollTrigger as U}from"gsap/dist/ScrollTrigger";const fe="media_player_base",ge="video",G=({defaultConverters:h})=>({...h,text:d=>{const{node:t}=d;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),ve=se(({className:h="",onBtnClick:d,data:{title:t,videoTitle:p,btnText:R,youtubeId:z,video:I,mobileVideo:J,theme:_,img:P,shape:$,titleAnimation:u,...K}},Q)=>{const{sticky:s}=K,[B,C]=y(!1),[S,W]=y(0),[X,Z]=y(0),[V,D]=y(!1),m=r(null),F=r(null),n=r(null),f=r(null),j=r(null),g=r(null),{ref:A,inView:v}=pe();le(Q,()=>n.current);const x=typeof t=="string"?t:t&&q({data:t,converters:G}),w=typeof p=="string"?p:p&&q({data:p,converters:G});N(()=>{v?(m.current?.play(),C(!0)):(m.current?.pause(),C(!1))},[v]);const H=ae(()=>{if(n.current){const l=n.current.getBoundingClientRect(),o=window.innerHeight,a=window.scrollY||window.pageYOffset,k=l.bottom+a,i=document.documentElement.scrollHeight-k;W(i>o?o:i)}if(n.current){const l=n.current.clientHeight,o=window.innerHeight;Z(l+o)}},600);N(()=>(H(),window.addEventListener("resize",H),()=>{window.removeEventListener("resize",H)}),[]),N(()=>{function l(){if(!f.current||u!=="fade-in")return;const o=f.current?.clientHeight||80;g.current=new me(f.current,{type:"words",wordsClass:"word"});const a=g.current.words;E.set(a,{opacity:0}),U.create({trigger:n.current,start:"top center-=10%",end:`top+=${o*1.5+80}px center-=10%`,scrub:!0,onUpdate:k=>{const M=k.progress,i=a.length,ee=1/i,Y=.5;a.forEach((te,oe)=>{const ne=oe/i*(1-Y),re=ee*(1+Y);let L=(M-ne)/re;L=Math.max(0,Math.min(L,1)),E.set(te,{opacity:L})}),E.set(F.current,{opacity:M})}})}return v&&l(),()=>{g.current&&g.current.revert(),U.getAll().forEach(o=>o.kill())}},[u,v]),ue(j,{componentType:ge,componentName:fe,componentTitle:w});const T="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 c(xe,{children:[s&&e("div",{ref:n,className:b("relative z-10 ",T,{"aiui-dark":_==="dark","rounded-box":$==="rounded"},h),children:e("div",{ref:A,children:!u&&c("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[x&&!B&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),w&&B&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:w}}),R&&e(ce,{variant:"link",className:b("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{D(!0),d&&d?.()},children:R})]})})}),c("div",{style:s?{marginBottom:`-${S}px`,marginTop:`-${X}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:c("div",{className:b("relative overflow-hidden",s?"h-screen w-full":T,{"aiui-dark":_==="dark","rounded-box":$==="rounded"}),children:[u==="fade-in"&&x&&e("div",{ref:f,className:"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),c("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[e(O,{videoRef:m,poster:P?.url||"",src:I?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(O,{videoRef:m,poster:P?.url||"",src:J?.url||I?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:F,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:b(s&&"relative box-content block",T),style:s?{height:`${S}px`}:{},ref:j})]}),V&&z&&e(de,{visible:V,youTubeId:z,onCloseModal:()=>D(!1)})]})});var Ie=ie(ve);export{Ie as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/MediaPlayerBase/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n }\n }, [titleAnimation, inView])\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\n ref={titleRef}\n className={cn(\n 'relative z-10 ',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div 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, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover left-0 top-0 h-screen w-screen\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "aspect", "MediaPlayerBase_default"]
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n }\n }, [titleAnimation, inView])\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\n ref={titleRef}\n className={cn(\n 'relative z-10 ',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div 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, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover left-0 top-0 h-screen w-screen\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "aspect", "MediaPlayerBase_default"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerBase/types.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps {
10
10
  img?: Img;
11
11
  isYouTube?: boolean;
12
12
  video?: Video;
13
+ mobileVideo?: Video;
13
14
  youtubeId?: string;
14
15
  titleAnimation?: 'fade-in';
15
16
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.0.9-temp-2",
3
+ "version": "1.0.9-temp-4",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",