@anker-in/headless-ui 0.0.27-alpha.111 → 0.0.27-alpha.112
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.d.ts +2 -2
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerBase/index.d.ts +2 -2
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerBase/types.d.ts +1 -0
- package/dist/cjs/biz-components/MediaPlayerBase/types.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/types.js.map +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.d.ts +2 -2
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerMulti/types.d.ts +1 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/types.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/types.js.map +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.d.ts +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/SwiperBox/types.d.ts +2 -0
- package/dist/cjs/biz-components/SwiperBox/types.js +1 -1
- package/dist/cjs/biz-components/SwiperBox/types.js.map +1 -1
- package/dist/cjs/stories/brandEquity.stories.d.ts +2 -2
- package/dist/cjs/stories/mediaplayerMulti.stories.d.ts +2 -2
- package/dist/esm/biz-components/BrandEquity/BrandEquity.d.ts +2 -2
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerBase/index.d.ts +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerBase/types.d.ts +1 -0
- package/dist/esm/biz-components/MediaPlayerMulti/index.d.ts +2 -2
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/types.d.ts +1 -0
- package/dist/esm/biz-components/MediaPlayerSticky/index.d.ts +2 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/SwiperBox/types.d.ts +2 -0
- package/dist/esm/biz-components/SwiperBox/types.js.map +1 -1
- package/dist/esm/stories/brandEquity.stories.d.ts +2 -2
- package/dist/esm/stories/mediaplayerMulti.stories.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BrandEquityProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Omit<BrandEquityProps
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<BrandEquityProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
4
|
className?: string;
|
|
5
5
|
data?: Record<string, any>;
|
|
6
|
-
} & React.RefAttributes<any>>;
|
|
6
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
7
7
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var g=Object.create;var s=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},n=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!k.call(e,a)&&a!==o&&s(e,a,{get:()=>t[a],enumerable:!(r=v(t,a))||r.enumerable});return e};var N=(e,t,o)=>(o=e!=null?g(b(e)):{},n(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),h=e=>n(s({},"__esModule",{value:!0}),e);var q={};y(q,{default:()=>j});module.exports=h(q);var l=require("react/jsx-runtime"),m=require("react"),p=require("../../helpers/utils.js"),i=N(require("../../components/picture.js")),u=require("../../shared/Styles.js");const w=(0,m.forwardRef)(({data:{items:e=[],itemShape:t},className:o},r)=>(0,l.jsx)("div",{ref:r,className:(0,p.cn)("brand-equity-wrapper w-full",o),children:(0,l.jsx)("div",{className:(0,p.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((a,d)=>(0,l.jsxs)("div",{className:(0,p.cn)("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6 desktop:gap-16 gap-12","laptop:col-span-3 lg-desktop:p-8",{"laptop:col-span-4":[0,5,6,11].includes(d)},t==="round"?"rounded-2xl":"rounded-none"),children:[(0,l.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:a.title}),a.type==="avatar"?(0,l.jsx)("div",{className:"flex -space-x-2",children:a?.avatarList?.map((c,f)=>(0,l.jsx)("div",{className:(0,p.cn)("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:(0,l.jsx)(i.default,{source:c.avatar.url,alt:c.avatar?.alt,className:"size-full object-cover"})},f))}):(0,l.jsx)(i.default,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:a.icon?.url,alt:a.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),(0,l.jsx)("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:a.description})]},d))})}));var j=(0,u.withStyles)(w);
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\n\nconst BrandEquity
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "BrandEquity", "items", "itemShape", "className", "item", "index", "Picture"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape }, className }, ref) => {\n return (\n <div ref={ref} className={cn('brand-equity-wrapper w-full', className)}>\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'brand-equity-item',\n 'flex flex-col bg-white p-4',\n 'desktop:p-6 desktop:gap-16 gap-12',\n 'laptop:col-span-3 lg-desktop:p-8',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {item.title}\n </h3>\n {item.type === 'avatar' ? (\n <div className=\"flex -space-x-2\">\n {item?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <Picture\n className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n source={item.icon?.url}\n alt={item.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {item.description}\n </p>\n </div>\n ))}\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(BrandEquity)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6Bc,IAAAI,EAAA,6BA5BdC,EAAkC,iBAElCC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAK3B,MAAMC,KAAc,cAClB,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,CAAU,EAAG,UAAAC,CAAU,EAAGC,OAE7C,OAAC,OAAI,IAAKA,EAAK,aAAW,MAAG,8BAA+BD,CAAS,EACnE,mBAAC,OAAI,aAAW,MAAG,yBAA0B,qBAAsB,kCAAkC,EAClG,SAAAF,EAAM,IAAI,CAACI,EAAMC,OAChB,QAAC,OAEC,aAAW,MACT,oBACA,6BACA,oCACA,mCACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASA,CAAK,CACrD,EACAJ,IAAc,QAAU,cAAgB,cAC1C,EAEA,qBAAC,OAAI,UAAU,uEACb,oBAAC,MAAG,UAAU,mGACX,SAAAG,EAAK,MACR,EACCA,EAAK,OAAS,YACb,OAAC,OAAI,UAAU,kBACZ,SAAAA,GAAM,YAAY,IAAI,CAACA,EAAuBC,OAC7C,OAAC,OAEC,aAAW,MACT,iEACA,wBACA,wBACF,EAEA,mBAAC,EAAAC,QAAA,CAAQ,OAAQF,EAAK,OAAO,IAAK,IAAKA,EAAK,QAAQ,IAAK,UAAU,yBAAyB,GAPvFC,CAQP,CACD,EACH,KAEA,OAAC,EAAAC,QAAA,CACC,UAAU,2DACV,OAAQF,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GAEJ,KACA,OAAC,KAAE,UAAU,+FACV,SAAAA,EAAK,YACR,IA1CKC,CA2CP,CACD,EACH,EACF,CAGN,EAEA,IAAOb,KAAQ,cAAWO,CAAW",
|
|
6
|
+
"names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "BrandEquity", "items", "itemShape", "className", "ref", "item", "index", "Picture"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MediaPlayerBaseProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Omit<MediaPlayerBaseProps
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
4
|
className?: string;
|
|
5
5
|
data?: Record<string, any>;
|
|
6
|
-
} & React.RefAttributes<any>>;
|
|
6
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
7
7
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var C=Object.create;var d=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var O=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},y=(e,t,a,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of q(t))!G.call(e,s)&&s!==a&&d(e,s,{get:()=>t[s],enumerable:!(n=Y(t,s))||n.enumerable});return e};var k=(e,t,a)=>(a=e!=null?C(A(e)):{},y(t||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),$=e=>y(d({},"__esModule",{value:!0}),e);var K={};O(K,{default:()=>J});module.exports=$(K);var r=require("react/jsx-runtime"),o=require("react"),X=require("@gsap/react"),ee=require("gsap"),re=require("gsap/dist/ScrollTrigger"),m=require("../../helpers/utils.js"),H=require("../../shared/Styles.js"),N=k(require("../../components/picture.js")),M=k(require("../../components/button.js")),u=require("@payloadcms/richtext-lexical/html"),P=require("react-intersection-observer");const F=(0,o.forwardRef)(({className:e="",data:{title:t,videoTitle:a,btnText:n,img:s,video:T,theme:L,shape:B,onBtnClick:g,...R}},E)=>{const{sticky:c}=R,[i,p]=(0,o.useState)(!1),[z,I]=(0,o.useState)(0),l=(0,o.useRef)(null),f=(0,o.useRef)(null),S=(0,o.useRef)(null),{ref:_,inView:v}=(0,P.useInView)();(0,o.useImperativeHandle)(E,()=>f.current);const b=typeof t=="string"?t:t&&(0,u.convertLexicalToHTML)({data:t}),h=typeof a=="string"?a:a&&(0,u.convertLexicalToHTML)({data:a});return(0,o.useEffect)(()=>{v&&!n?(l.current?.play(),p(!0)):(l.current?.pause(),p(!1))},[v]),(0,o.useEffect)(()=>{if(f.current&&c){const V=f.current.getBoundingClientRect(),w=window.innerHeight,j=window.scrollY||window.pageYOffset,D=V.bottom+j,x=document.documentElement.scrollHeight-D;I(x>w?w:x)}},[]),(0,r.jsx)("div",{ref:f,style:c?{marginBottom:`-${z}px`}:{},className:(0,m.cn)("relative",c&&"mt-[-100vh]",c&&'after:content-[" "] after:relative after:box-content after:block after:h-screen',c&&"lg-desktop:after:aspect-w-[1920] lg-desktop:after:aspect-h-[930] desktop:after:aspect-w-[1024] desktop:after:aspect-h-[520] tablet:after:aspect-w-[768] tablet:after:aspect-h-[660] after:aspect-w-[390] after:aspect-h-[660]"),children:(0,r.jsx)("div",{className:"sticky top-0 ",children:(0,r.jsxs)("div",{className:(0,m.cn)("relative overflow-hidden",c?"h-screen w-screen":"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",e,{"aiui-dark":L==="dark","rounded-box":B==="rounded"}),children:[(0,r.jsx)("div",{children:(0,r.jsxs)("div",{ref:_,className:"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[b&&!i&&(0,r.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&&i&&(0,r.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}}),!i&&n&&(0,r.jsx)(M.default,{variant:"link",className:(0,m.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{i?(l.current&&l.current.pause(),p(!1)):(l.current&&l.current.play(),p(!0)),g&&g?.()},children:n})]})}),(0,r.jsx)("div",{children:(0,r.jsxs)("div",{ref:S,className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,r.jsx)("video",{ref:l,className:"size-full object-cover",src:T?.url,muted:!0,loop:!0}),!i&&s?.url&&(0,r.jsx)(N.default,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:s?.url,alt:s?.alt,imgClassName:"w-full h-full object-cover"}),(0,r.jsx)("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})]})})})});var J=(0,H.withStyles)(F);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst MediaPlayerBase
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_react_intersection_observer", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "videoRef", "boxRef", "bgRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', data: { title, videoTitle, btnText, img, video, theme, shape, onBtnClick, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const videoTitle_html =\n typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n useEffect(() => {\n if (boxRef.current && sticky) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, [])\n\n // useGSAP(() => {\n // if (!bgRef.current) return\n // const height = boxRef.current?.clientHeight || 100\n // const screenHeight = bgRef.current?.clientHeight || 100\n // const base = screenHeight + height\n\n // ScrollTrigger.create({\n // trigger: boxRef.current,\n // start: 'top bottom',\n // end: 'bottom top',\n // scrub: true,\n // onUpdate: (self: any) => {\n // const value = self.progress * base - screenHeight\n // gsap.set(bgRef.current, { y: value })\n // },\n // })\n // return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n // }\n // }, [])\n\n return (\n <div\n ref={boxRef}\n style={sticky ? { marginBottom: `-${btb}px` } : {}}\n className={cn(\n 'relative',\n sticky && 'mt-[-100vh]',\n sticky && 'after:content-[\" \"] after:relative after:box-content after:block after:h-screen',\n sticky &&\n 'lg-desktop:after:aspect-w-[1920] lg-desktop:after:aspect-h-[930] desktop:after:aspect-w-[1024] desktop:after:aspect-h-[520] tablet:after:aspect-w-[768] tablet:after:aspect-h-[660] after:aspect-w-[390] after:aspect-h-[660]'\n )}\n >\n <div className=\"sticky top-0 \">\n <div\n className={cn(\n 'relative overflow-hidden',\n sticky\n ? 'h-screen w-screen'\n : 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} muted loop />\n {!isPlaying && img?.url && (\n <Picture\n className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n source={img?.url}\n alt={img?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div className=\"absolute left-0 top-0 z-10 size-full\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_react_intersection_observer", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "onBtnClick", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "videoRef", "boxRef", "bgRef", "inViewRef", "inView", "title_html", "videoTitle_html", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "Button", "Picture"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var a=(o,e,m,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of s(e))!r.call(o,t)&&t!==m&&n(o,t,{get:()=>e[t],enumerable:!(i=p(e,t))||i.enumerable});return o};var d=o=>a(n({},"__esModule",{value:!0}),o);var g={};module.exports=d(g);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -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 video?: Video\n }\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 video?: Video\n onBtnClick?: () => void\n }\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MediaPlayerMultiProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Omit<MediaPlayerMultiProps
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerMultiProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
4
|
className?: string;
|
|
5
5
|
data?: Record<string, any>;
|
|
6
|
-
} & React.RefAttributes<any>>;
|
|
6
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
7
7
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var y=Object.create;var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var M=(e,l)=>{for(var o in l)s(e,o,{get:l[o],enumerable:!0})},p=(e,l,o,a)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of b(l))!k.call(e,i)&&i!==o&&s(e,i,{get:()=>l[i],enumerable:!(a=w(l,i))||a.enumerable});return e};var n=(e,l,o)=>(o=e!=null?y(P(e)):{},p(l||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),N=e=>p(s({},"__esModule",{value:!0}),e);var j={};M(j,{default:()=>T});module.exports=N(j);var t=require("react/jsx-runtime"),r=require("react"),m=require("../../helpers/utils.js"),d=require("../../shared/Styles.js"),f=require("../../components/index.js"),c=n(require("../Title/index.js")),u=n(require("../SwiperBox/index.js")),x=require("@payloadcms/richtext-lexical/html");const L=({data:e,configuration:l})=>{const[o,a]=(0,r.useState)(!1),i=(0,r.useRef)(null);return(0,t.jsxs)("div",{className:(0,m.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[(0,t.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none",children:[o?(0,t.jsx)("video",{ref:i,className:"size-full object-cover",src:e?.video?.url,muted:!0,loop:!0}):(0,t.jsx)(f.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover hover:scale-110 transition-all duration-300"}),(0,t.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:e.video&&(0,t.jsx)("button",{onClick:()=>{o?(i.current&&i.current.pause(),a(!1)):(i.current&&i.current.play(),a(!0)),l?.onVideoPlayBtnClick&&l?.onVideoPlayBtnClick?.(l?.index||0)},className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,t.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:"flex flex-col",children:[(0,t.jsx)("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,t.jsx)("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),(0,t.jsx)("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},S=(0,r.forwardRef)(({data:{items:e=[],shape:l="square",title:o},className:a="",key:i,onVideoPlayBtnClick:h},v)=>{const g=typeof o=="string"?o:o&&(0,x.convertLexicalToHTML)({data:o});return(0,t.jsxs)("div",{className:a,ref:v,children:[o&&(0,t.jsx)(c.default,{data:{title:g||""}}),(0,t.jsx)(u.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+i,data:{list:e,configuration:{shape:l,onVideoPlayBtnClick:h}},Slide:L})]})});var T=(0,d.withStyles)(S);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const [isPlaying, setIsPlaying] = useState<boolean>(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none\">\n {isPlaying ? (\n <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop />\n ) : (\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover hover:scale-110 transition-all duration-300\"\n />\n )}\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data.video && (\n <button\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n }}\n className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBM,IAAAI,EAAA,6BArBNC,
|
|
6
|
-
"names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_html", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "title_html", "Title", "SwiperBox"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const [isPlaying, setIsPlaying] = useState<boolean>(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none\">\n {isPlaying ? (\n <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop />\n ) : (\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover hover:scale-110 transition-all duration-300\"\n />\n )}\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data.video && (\n <button\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n configuration?.onVideoPlayBtnClick && configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n ({ data: { items = [], shape = 'square', title }, className = '', key, onVideoPlayBtnClick }, ref) => {\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className} ref={ref}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick } }}\n Slide={MediaPlayerItem}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBM,IAAAI,EAAA,6BArBNC,EAAoD,iBACpDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwB,qCACxBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAAqC,6CAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAkB,EAAK,EACnDC,KAAW,UAAyB,IAAI,EAC9C,SACE,QAAC,OACC,aAAW,MACT,2CACA,yCACA,iEACAH,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,qBAAC,OAAI,UAAU,+DACZ,UAAAC,KACC,OAAC,SAAM,IAAKE,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,KAE3F,OAAC,WACC,OAAQA,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,yEACf,KAEF,OAAC,OAAI,UAAU,2DACZ,SAAAA,EAAK,UACJ,OAAC,UACC,QAAS,IAAM,CACTE,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,GAEnBF,GAAe,qBAAuBA,GAAe,sBAAsBA,GAAe,OAAS,CAAC,CACtG,EACA,UAAU,gHAEV,mBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,KAEA,QAAC,OAAI,UAAU,oJACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,MAAG,UAAU,4FACX,SAAAD,EAAK,MACR,EACCA,EAAK,UACJ,OAAC,KAAE,UAAU,uFACV,SAAAA,EAAK,MACR,GAEJ,KAEA,OAAC,KAAE,UAAU,0JACV,SAAAA,EAAK,YACR,GACF,GACF,CAEJ,EAEMK,KAAmB,cACvB,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,CAAM,EAAG,UAAAC,EAAY,GAAI,IAAAC,EAAK,oBAAAC,CAAoB,EAAGC,IAAQ,CACpG,MAAMC,EAAa,OAAOL,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EACpG,SACE,QAAC,OAAI,UAAWC,EAAW,IAAKG,EAC7B,UAAAJ,MAAS,OAAC,EAAAM,QAAA,CAAM,KAAM,CAAE,MAAOD,GAAc,EAAG,EAAG,KACpD,OAAC,EAAAE,QAAA,CACC,UAAU,oBACV,GAAI,yBAA2BL,EAC/B,KAAM,CAAE,KAAMJ,EAAO,cAAe,CAAE,MAAOC,EAAO,oBAAAI,CAAoB,CAAE,EAC1E,MAAOZ,EACT,GACF,CAEJ,CACF,EAEA,IAAOV,KAAQ,cAAWgB,CAAgB",
|
|
6
|
+
"names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_html", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "onVideoPlayBtnClick", "ref", "title_html", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var r=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var a=(o,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!p.call(o,t)&&t!==n&&r(o,t,{get:()=>e[t],enumerable:!(i=s(e,t))||i.enumerable});return o};var d=o=>a(r({},"__esModule",{value:!0}),o);var P={};module.exports=d(P);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentCommonProps, Img, Video } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n title: string\n name: string\n description: string\n img: Img\n video?: Video\n quote?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n data: {\n title?: string\n shape?: 'round' | 'square'\n items: MediaPlayerItemProps[]\n }\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Img, Video } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n title: string\n name: string\n description: string\n img: Img\n video?: Video\n quote?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n data: {\n title?: string\n shape?: 'round' | 'square'\n items: MediaPlayerItemProps[]\n }\n onVideoPlayBtnClick?: (jIndex: number) => void\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MediaPlayerBaseProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Omit<MediaPlayerBaseProps
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
4
|
className?: string;
|
|
5
5
|
data?: Record<string, any>;
|
|
6
|
-
} & React.RefAttributes<any>>;
|
|
6
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
7
7
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var T=Object.create;var n=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var Y=(r,a)=>{for(var t in a)n(r,t,{get:a[t],enumerable:!0})},v=(r,a,t,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of q(a))!E.call(r,o)&&o!==t&&n(r,o,{get:()=>a[o],enumerable:!(s=H(a,o))||s.enumerable});return r};var l=(r,a,t)=>(t=r!=null?T(B(r)):{},v(a||!r||!r.__esModule?n(t,"default",{value:r,enumerable:!0}):t,r)),G=r=>v(n({},"__esModule",{value:!0}),r);var Q={};Y(Q,{default:()=>I});module.exports=G(Q);var e=require("react/jsx-runtime"),c=require("react"),m=require("../../helpers/utils.js"),g=require("../../shared/Styles.js"),h=l(require("../Slogan/index.js")),i=require("../../components/gird.js"),w=require("../../components/container.js"),x=l(require("../BrandEquity/index.js")),k=l(require("../MemberEquity/index.js")),N=l(require("../Spacer/index.js")),M=l(require("gsap")),u=require("@payloadcms/richtext-lexical/html"),C=require("react-responsive"),S=l(require("../../components/picture.js"));const b=({defaultConverters:r})=>({...r,text:a=>{const{node:t}=a;return t.$&&t.$.color?`<div class="lexical-${t.$.color}">${t.text}</div>`:t.text}}),d=({children:r,spaceY:a})=>{const t=(0,C.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(w.Container,{spaceY:a,children:(0,e.jsxs)(i.Grid,{children:[!t&&(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:t?12:10,children:r}),!t&&(0,e.jsx)(i.GridItem,{span:1})]})})},j=({children:r,id:a,components:t})=>((0,c.useEffect)(()=>{const s=window.screen.height;M.default.timeline({scrollTrigger:{trigger:`#${a}`,start:"top top",end:`top+=${s*1.8}px bottom`,scrub:0}}).to(`#${a} .sticky-cover`,{opacity:1,duration:.3}).to(`#${a} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),(0,e.jsxs)("div",{id:a,className:"relative z-10 pb-10",children:[(0,e.jsx)(e.Fragment,{children:r}),(0,e.jsx)(e.Fragment,{children:t?.map(s=>{switch(s.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(d,{spaceY:"!my-0",children:(0,e.jsx)(x.default,{data:s,style:s?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(d,{spaceY:"!my-0",children:(0,e.jsx)(k.default,{data:s,className:"w-full",style:s?.style})})});case"ipc-spacer":return(0,e.jsx)(N.default,{data:s,style:s?.style});default:return null}})})]})),F=(0,c.forwardRef)(({className:r="",id:a,data:{title:t,videoTitle:s,btnText:o,img:p,video:f,theme:y,shape:z,components:P}},$)=>{const R=(0,c.useRef)(null),L=typeof t=="string"?t:t&&(0,u.convertLexicalToHTML)({data:t,converters:b});return typeof s=="string"||s&&(0,u.convertLexicalToHTML)({data:s,converters:b}),(0,e.jsxs)(j,{id:a,components:P,children:[(0,e.jsx)("div",{ref:$,className:(0,m.cn)("sticky-box absolute left-0 top-0 h-screen w-full",r,{"aiui-dark":y==="dark","rounded-box":z==="rounded"}),children:(0,e.jsx)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2",children:(0,e.jsx)(d,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(h.default,{className:"sticky-title",data:{title:L||"",theme:y}})})})}),(0,e.jsx)("div",{className:"sticky left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:(0,m.cn)("media-cover","relative h-screen w-full","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),children:[f?.url&&(0,e.jsx)("video",{ref:R,className:"size-full object-cover",src:f?.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),p?.url&&(0,e.jsx)(S.default,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:p?.url,alt:p?.alt,imgClassName:"w-full h-full object-cover"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})]})});var I=(0,g.withStyles)(F);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { defaultHTMLConverters, convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<div class=\"lexical-${node.$.color}\">${node.text}</div>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst StickyBox = ({\n children,\n id,\n components,\n}: {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n}) => {\n useEffect(() => {\n const height = window.screen.height\n\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0,\n },\n })\n .to(`#${id} .sticky-cover`, {\n opacity: 1,\n duration: 0.3,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [])\n\n return (\n <div id={id} className=\"relative z-10 pb-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n}\n\nconst MediaPlayerSticky
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCM,IAAAI,EAAA,6BApCNC,
|
|
6
|
-
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "import_picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "height", "gsap", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "Slogan", "Picture"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { defaultHTMLConverters, convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<div class=\"lexical-${node.$.color}\">${node.text}</div>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst StickyBox = ({\n children,\n id,\n components,\n}: {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n}) => {\n useEffect(() => {\n const height = window.screen.height\n\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0,\n },\n })\n .to(`#${id} .sticky-cover`, {\n opacity: 1,\n duration: 0.3,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [])\n\n return (\n <div id={id} className=\"relative z-10 pb-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n}\n\nconst MediaPlayerSticky = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', id, data: { title, videoTitle, btnText, img, video, theme, shape, components } }, ref) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n return (\n <StickyBox id={id} components={components}>\n <div\n ref={ref}\n className={cn('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n <div className=\"sticky left-0 top-0 w-full\">\n <div\n className={cn(\n 'media-cover',\n 'relative h-screen w-full',\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n )}\n >\n {video?.url && (\n <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {img?.url && (\n <Picture\n className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n source={img?.url}\n alt={img?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n </StickyBox>\n )\n }\n)\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "import_picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "height", "gsap", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "ref", "videoRef", "title_html", "Slogan", "Picture"]
|
|
7
7
|
}
|
|
@@ -3,6 +3,7 @@ export interface SwiperBoxProps {
|
|
|
3
3
|
data: {
|
|
4
4
|
list: any[];
|
|
5
5
|
configuration?: any;
|
|
6
|
+
onVideoPlayBtnClick?: (jIndex: number) => void;
|
|
6
7
|
};
|
|
7
8
|
id: string;
|
|
8
9
|
className?: string;
|
|
@@ -10,5 +11,6 @@ export interface SwiperBoxProps {
|
|
|
10
11
|
Slide: React.ComponentType<{
|
|
11
12
|
data: any;
|
|
12
13
|
configuration?: any;
|
|
14
|
+
jIndex?: number;
|
|
13
15
|
}>;
|
|
14
16
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var o=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(e,n,t,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of c(n))!d.call(e,a)&&a!==t&&o(e,a,{get:()=>n[a],enumerable:!(i=r(n,a))||i.enumerable});return e};var p=e=>m(o({},"__esModule",{value:!0}),e);var s={};module.exports=p(s);var b=require("react");
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SwiperBox/types.ts"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any
|
|
4
|
+
"sourcesContent": ["import React from 'react'\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n onVideoPlayBtnClick?: (jIndex: number) => void\n }\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any; jIndex?: number }>\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAA,IAAAE,EAAkB",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS", "import_react"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: import("react").ForwardRefExoticComponent<Omit<import("../biz-components/BrandEquity/types.js").BrandEquityProps
|
|
4
|
+
component: import("react").ForwardRefExoticComponent<Omit<Omit<import("../biz-components/BrandEquity/types.js").BrandEquityProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
5
5
|
className?: string;
|
|
6
6
|
data?: Record<string, any>;
|
|
7
|
-
} & import("react").RefAttributes<any>>;
|
|
7
|
+
}, "ref"> & import("react").RefAttributes<any>>;
|
|
8
8
|
parameters: {
|
|
9
9
|
layout: string;
|
|
10
10
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: import("react").ForwardRefExoticComponent<Omit<import("../biz-components/MediaPlayerMulti/types.js").MediaPlayerMultiProps
|
|
4
|
+
component: import("react").ForwardRefExoticComponent<Omit<Omit<import("../biz-components/MediaPlayerMulti/types.js").MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
5
5
|
className?: string;
|
|
6
6
|
data?: Record<string, any>;
|
|
7
|
-
} & import("react").RefAttributes<any>>;
|
|
7
|
+
}, "ref"> & import("react").RefAttributes<any>>;
|
|
8
8
|
parameters: {
|
|
9
9
|
layout: string;
|
|
10
10
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BrandEquityProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Omit<BrandEquityProps
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<BrandEquityProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
4
|
className?: string;
|
|
5
5
|
data?: Record<string, any>;
|
|
6
|
-
} & React.RefAttributes<any>>;
|
|
6
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
7
7
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{forwardRef as m}from"react";import{cn as a}from"../../helpers/utils.js";import p from"../../components/picture.js";import{withStyles as u}from"../../shared/Styles.js";const f=m(({data:{items:s=[],itemShape:i},className:d},c)=>e("div",{ref:c,className:a("brand-equity-wrapper w-full",d),children:e("div",{className:a("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:s.map((t,l)=>r("div",{className:a("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6 desktop:gap-16 gap-12","laptop:col-span-3 lg-desktop:p-8",{"laptop:col-span-4":[0,5,6,11].includes(l)},i==="round"?"rounded-2xl":"rounded-none"),children:[r("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[e("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.title}),t.type==="avatar"?e("div",{className:"flex -space-x-2",children:t?.avatarList?.map((o,n)=>e("div",{className:a("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:e(p,{source:o.avatar.url,alt:o.avatar?.alt,className:"size-full object-cover"})},n))}):e(p,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:t.icon?.url,alt:t.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),e("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t.description})]},l))})}));var y=u(f);export{y as default};
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\n\nconst BrandEquity
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "className", "item", "index", "BrandEquity_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape }, className }, ref) => {\n return (\n <div ref={ref} className={cn('brand-equity-wrapper w-full', className)}>\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'brand-equity-item',\n 'flex flex-col bg-white p-4',\n 'desktop:p-6 desktop:gap-16 gap-12',\n 'laptop:col-span-3 lg-desktop:p-8',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {item.title}\n </h3>\n {item.type === 'avatar' ? (\n <div className=\"flex -space-x-2\">\n {item?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <Picture\n className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n source={item.icon?.url}\n alt={item.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {item.description}\n </p>\n </div>\n ))}\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(BrandEquity)\n"],
|
|
5
|
+
"mappings": "aA6Bc,OACE,OAAAA,EADF,QAAAC,MAAA,oBA5Bd,OAAgB,cAAAC,MAAkB,QAElC,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAK3B,MAAMC,EAAcJ,EAClB,CAAC,CAAE,KAAM,CAAE,MAAAK,EAAQ,CAAC,EAAG,UAAAC,CAAU,EAAG,UAAAC,CAAU,EAAGC,IAE7CV,EAAC,OAAI,IAAKU,EAAK,UAAWP,EAAG,8BAA+BM,CAAS,EACnE,SAAAT,EAAC,OAAI,UAAWG,EAAG,yBAA0B,qBAAsB,kCAAkC,EAClG,SAAAI,EAAM,IAAI,CAACI,EAAMC,IAChBX,EAAC,OAEC,UAAWE,EACT,oBACA,6BACA,oCACA,mCACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASS,CAAK,CACrD,EACAJ,IAAc,QAAU,cAAgB,cAC1C,EAEA,UAAAP,EAAC,OAAI,UAAU,uEACb,UAAAD,EAAC,MAAG,UAAU,mGACX,SAAAW,EAAK,MACR,EACCA,EAAK,OAAS,SACbX,EAAC,OAAI,UAAU,kBACZ,SAAAW,GAAM,YAAY,IAAI,CAACA,EAAuBC,IAC7CZ,EAAC,OAEC,UAAWG,EACT,iEACA,wBACA,wBACF,EAEA,SAAAH,EAACI,EAAA,CAAQ,OAAQO,EAAK,OAAO,IAAK,IAAKA,EAAK,QAAQ,IAAK,UAAU,yBAAyB,GAPvFC,CAQP,CACD,EACH,EAEAZ,EAACI,EAAA,CACC,UAAU,2DACV,OAAQO,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GAEJ,EACAX,EAAC,KAAE,UAAU,+FACV,SAAAW,EAAK,YACR,IA1CKC,CA2CP,CACD,EACH,EACF,CAGN,EAEA,IAAOC,EAAQR,EAAWC,CAAW",
|
|
6
|
+
"names": ["jsx", "jsxs", "forwardRef", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "className", "ref", "item", "index", "BrandEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MediaPlayerBaseProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Omit<MediaPlayerBaseProps
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
4
|
className?: string;
|
|
5
5
|
data?: Record<string, any>;
|
|
6
|
-
} & React.RefAttributes<any>>;
|
|
6
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
7
7
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as d}from"react/jsx-runtime";import{useState as
|
|
1
|
+
"use client";import{jsx as e,jsxs as d}from"react/jsx-runtime";import{useState as w,useRef as p,useEffect as x,forwardRef as _,useImperativeHandle as V}from"react";import"@gsap/react";import"gsap";import"gsap/dist/ScrollTrigger";import{cn as f}from"../../helpers/utils.js";import{withStyles as j}from"../../shared/Styles.js";import D from"../../components/picture.js";import C from"../../components/button.js";import{convertLexicalToHTML as y}from"@payloadcms/richtext-lexical/html";import{useInView as Y}from"react-intersection-observer";const q=_(({className:k="",data:{title:a,videoTitle:s,btnText:c,img:i,video:H,theme:N,shape:M,onBtnClick:m,...P}},T)=>{const{sticky:r}=P,[o,l]=w(!1),[L,B]=w(0),t=p(null),n=p(null),R=p(null),{ref:E,inView:u}=Y();V(T,()=>n.current);const g=typeof a=="string"?a:a&&y({data:a}),v=typeof s=="string"?s:s&&y({data:s});return x(()=>{u&&!c?(t.current?.play(),l(!0)):(t.current?.pause(),l(!1))},[u]),x(()=>{if(n.current&&r){const z=n.current.getBoundingClientRect(),b=window.innerHeight,I=window.scrollY||window.pageYOffset,S=z.bottom+I,h=document.documentElement.scrollHeight-S;B(h>b?b:h)}},[]),e("div",{ref:n,style:r?{marginBottom:`-${L}px`}:{},className:f("relative",r&&"mt-[-100vh]",r&&'after:content-[" "] after:relative after:box-content after:block after:h-screen',r&&"lg-desktop:after:aspect-w-[1920] lg-desktop:after:aspect-h-[930] desktop:after:aspect-w-[1024] desktop:after:aspect-h-[520] tablet:after:aspect-w-[768] tablet:after:aspect-h-[660] after:aspect-w-[390] after:aspect-h-[660]"),children:e("div",{className:"sticky top-0 ",children:d("div",{className:f("relative overflow-hidden",r?"h-screen w-screen":"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",k,{"aiui-dark":N==="dark","rounded-box":M==="rounded"}),children:[e("div",{children:d("div",{ref:E,className:"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[g&&!o&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:g}}),v&&o&&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}}),!o&&c&&e(C,{variant:"link",className:f("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{o?(t.current&&t.current.pause(),l(!1)):(t.current&&t.current.play(),l(!0)),m&&m?.()},children:c})]})}),e("div",{children:d("div",{ref:R,className:"media-cover left-0 top-0 h-screen w-screen",children:[e("video",{ref:t,className:"size-full object-cover",src:H?.url,muted:!0,loop:!0}),!o&&i?.url&&e(D,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:i?.url,alt:i?.alt,imgClassName:"w-full h-full object-cover"}),e("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})]})})})});var oe=j(q);export{oe as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst MediaPlayerBase
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "useState", "useRef", "useEffect", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "useInView", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "videoRef", "boxRef", "bgRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', data: { title, videoTitle, btnText, img, video, theme, shape, onBtnClick, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const videoTitle_html =\n typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n useEffect(() => {\n if (boxRef.current && sticky) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, [])\n\n // useGSAP(() => {\n // if (!bgRef.current) return\n // const height = boxRef.current?.clientHeight || 100\n // const screenHeight = bgRef.current?.clientHeight || 100\n // const base = screenHeight + height\n\n // ScrollTrigger.create({\n // trigger: boxRef.current,\n // start: 'top bottom',\n // end: 'bottom top',\n // scrub: true,\n // onUpdate: (self: any) => {\n // const value = self.progress * base - screenHeight\n // gsap.set(bgRef.current, { y: value })\n // },\n // })\n // return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n // }\n // }, [])\n\n return (\n <div\n ref={boxRef}\n style={sticky ? { marginBottom: `-${btb}px` } : {}}\n className={cn(\n 'relative',\n sticky && 'mt-[-100vh]',\n sticky && 'after:content-[\" \"] after:relative after:box-content after:block after:h-screen',\n sticky &&\n 'lg-desktop:after:aspect-w-[1920] lg-desktop:after:aspect-h-[930] desktop:after:aspect-w-[1024] desktop:after:aspect-h-[520] tablet:after:aspect-w-[768] tablet:after:aspect-h-[660] after:aspect-w-[390] after:aspect-h-[660]'\n )}\n >\n <div className=\"sticky top-0 \">\n <div\n className={cn(\n 'relative overflow-hidden',\n sticky\n ? 'h-screen w-screen'\n : 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} muted loop />\n {!isPlaying && img?.url && (\n <Picture\n className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n source={img?.url}\n alt={img?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div className=\"absolute left-0 top-0 z-10 size-full\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "useInView", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "onBtnClick", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "videoRef", "boxRef", "bgRef", "inViewRef", "inView", "title_html", "videoTitle_html", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "MediaPlayerBase_default"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MediaPlayerMultiProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Omit<MediaPlayerMultiProps
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerMultiProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
4
|
className?: string;
|
|
5
5
|
data?: Record<string, any>;
|
|
6
|
-
} & React.RefAttributes<any>>;
|
|
6
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
7
7
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as m,useRef as d,forwardRef as f}from"react";import{cn as c}from"../../helpers/utils.js";import{withStyles as u}from"../../shared/Styles.js";import{Picture as x}from"../../components/index.js";import h from"../Title/index.js";import v from"../SwiperBox/index.js";import{convertLexicalToHTML as g}from"@payloadcms/richtext-lexical/html";const y=({data:l,configuration:i})=>{const[t,r]=m(!1),o=d(null);return a("div",{className:c("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",i.shape==="round"?"rounded-2xl":""),children:[a("div",{className:"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none",children:[t?e("video",{ref:o,className:"size-full object-cover",src:l?.video?.url,muted:!0,loop:!0}):e(x,{source:l.img?.url,alt:l.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:l.video&&e("button",{onClick:()=>{t?(o.current&&o.current.pause(),r(!1)):(o.current&&o.current.play(),r(!0)),i?.onVideoPlayBtnClick&&i?.onVideoPlayBtnClick?.(i?.index||0)},className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),a("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[a("div",{className:"flex flex-col",children:[e("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:l.title}),l.quote&&e("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:l.quote})]}),e("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:l.description})]})]})},w=f(({data:{items:l=[],shape:i="square",title:t},className:r="",key:o,onVideoPlayBtnClick:s},p)=>{const n=typeof t=="string"?t:t&&g({data:t});return a("div",{className:r,ref:p,children:[t&&e(h,{data:{title:n||""}}),e(v,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+o,data:{list:l,configuration:{shape:i,onVideoPlayBtnClick:s}},Slide:y})]})});var j=u(w);export{j as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const [isPlaying, setIsPlaying] = useState<boolean>(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none\">\n {isPlaying ? (\n <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop />\n ) : (\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover hover:scale-110 transition-all duration-300\"\n />\n )}\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data.video && (\n <button\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n }}\n className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti
|
|
5
|
-
"mappings": "aAsBM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBArBN,OAAgB,YAAAC,EAAU,UAAAC,
|
|
6
|
-
"names": ["jsx", "jsxs", "useState", "useRef", "cn", "withStyles", "Picture", "Title", "SwiperBox", "convertLexicalToHTML", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "title_html", "MediaPlayerMulti_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const [isPlaying, setIsPlaying] = useState<boolean>(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none\">\n {isPlaying ? (\n <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop />\n ) : (\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover hover:scale-110 transition-all duration-300\"\n />\n )}\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data.video && (\n <button\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n configuration?.onVideoPlayBtnClick && configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n ({ data: { items = [], shape = 'square', title }, className = '', key, onVideoPlayBtnClick }, ref) => {\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className} ref={ref}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick } }}\n Slide={MediaPlayerItem}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "aAsBM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBArBN,OAAgB,YAAAC,EAAU,UAAAC,EAAQ,cAAAC,MAAkB,QACpD,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,MAAe,4BACxB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,EAAIb,EAAkB,EAAK,EACnDc,EAAWb,EAAyB,IAAI,EAC9C,OACEF,EAAC,OACC,UAAWI,EACT,2CACA,yCACA,iEACAQ,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAZ,EAAC,OAAI,UAAU,+DACZ,UAAAa,EACCd,EAAC,SAAM,IAAKgB,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,EAE3FZ,EAACO,EAAA,CACC,OAAQK,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,yEACf,EAEFZ,EAAC,OAAI,UAAU,2DACZ,SAAAY,EAAK,OACJZ,EAAC,UACC,QAAS,IAAM,CACTc,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,GAEnBF,GAAe,qBAAuBA,GAAe,sBAAsBA,GAAe,OAAS,CAAC,CACtG,EACA,UAAU,gHAEV,SAAAb,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,EAEAC,EAAC,OAAI,UAAU,oJACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAAC,MAAG,UAAU,4FACX,SAAAY,EAAK,MACR,EACCA,EAAK,OACJZ,EAAC,KAAE,UAAU,uFACV,SAAAY,EAAK,MACR,GAEJ,EAEAZ,EAAC,KAAE,UAAU,0JACV,SAAAY,EAAK,YACR,GACF,GACF,CAEJ,EAEMK,EAAmBb,EACvB,CAAC,CAAE,KAAM,CAAE,MAAAc,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,CAAM,EAAG,UAAAC,EAAY,GAAI,IAAAC,EAAK,oBAAAC,CAAoB,EAAGC,IAAQ,CACpG,MAAMC,EAAa,OAAOL,GAAU,SAAWA,EAAQA,GAASV,EAAqB,CAAE,KAAMU,CAAM,CAAC,EACpG,OACEnB,EAAC,OAAI,UAAWoB,EAAW,IAAKG,EAC7B,UAAAJ,GAASpB,EAACQ,EAAA,CAAM,KAAM,CAAE,MAAOiB,GAAc,EAAG,EAAG,EACpDzB,EAACS,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2Ba,EAC/B,KAAM,CAAE,KAAMJ,EAAO,cAAe,CAAE,MAAOC,EAAO,oBAAAI,CAAoB,CAAE,EAC1E,MAAOZ,EACT,GACF,CAEJ,CACF,EAEA,IAAOe,EAAQpB,EAAWW,CAAgB",
|
|
6
|
+
"names": ["jsx", "jsxs", "useState", "useRef", "forwardRef", "cn", "withStyles", "Picture", "Title", "SwiperBox", "convertLexicalToHTML", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "onVideoPlayBtnClick", "ref", "title_html", "MediaPlayerMulti_default"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MediaPlayerBaseProps } from './types.js';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Omit<MediaPlayerBaseProps
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
4
4
|
className?: string;
|
|
5
5
|
data?: Record<string, any>;
|
|
6
|
-
} & React.RefAttributes<any>>;
|
|
6
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
7
7
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as f,jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as w,useEffect as x,forwardRef as k}from"react";import{cn as d}from"../../helpers/utils.js";import{withStyles as N}from"../../shared/Styles.js";import M from"../Slogan/index.js";import{Grid as C,GridItem as i}from"../../components/gird.js";import{Container as S}from"../../components/container.js";import z from"../BrandEquity/index.js";import P from"../MemberEquity/index.js";import $ from"../Spacer/index.js";import R from"gsap";import{convertLexicalToHTML as m}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as L}from"react-responsive";import T from"../../components/picture.js";const u=({defaultConverters:s})=>({...s,text:a=>{const{node:t}=a;return t.$&&t.$.color?`<div class="lexical-${t.$.color}">${t.text}</div>`:t.text}}),c=({children:s,spaceY:a})=>{const t=L({query:"(max-width: 768px)"});return e(S,{spaceY:a,children:o(C,{children:[!t&&e(i,{span:1}),e(i,{span:t?12:10,children:s}),!t&&e(i,{span:1})]})})},H=({children:s,id:a,components:t})=>(x(()=>{const r=window.screen.height;R.timeline({scrollTrigger:{trigger:`#${a}`,start:"top top",end:`top+=${r*1.8}px bottom`,scrub:0}}).to(`#${a} .sticky-cover`,{opacity:1,duration:.3}).to(`#${a} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),o("div",{id:a,className:"relative z-10 pb-10",children:[e(f,{children:s}),e(f,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(c,{spaceY:"!my-0",children:e(z,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(c,{spaceY:"!my-0",children:e(P,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e($,{data:r,style:r?.style});default:return null}})})]})),q=k(({className:s="",id:a,data:{title:t,videoTitle:r,btnText:B,img:l,video:n,theme:p,shape:y,components:v}},b)=>{const g=w(null),h=typeof t=="string"?t:t&&m({data:t,converters:u});return typeof r=="string"||r&&m({data:r,converters:u}),o(H,{id:a,components:v,children:[e("div",{ref:b,className:d("sticky-box absolute left-0 top-0 h-screen w-full",s,{"aiui-dark":p==="dark","rounded-box":y==="rounded"}),children:e("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2",children:e(c,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(M,{className:"sticky-title",data:{title:h||"",theme:p}})})})}),e("div",{className:"sticky left-0 top-0 w-full",children:o("div",{className:d("media-cover","relative h-screen w-full","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),children:[n?.url&&e("video",{ref:g,className:"size-full object-cover",src:n?.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),l?.url&&e(T,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:l?.url,alt:l?.alt,imgClassName:"w-full h-full object-cover"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})]})});var Z=N(q);export{Z as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { defaultHTMLConverters, convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<div class=\"lexical-${node.$.color}\">${node.text}</div>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst StickyBox = ({\n children,\n id,\n components,\n}: {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n}) => {\n useEffect(() => {\n const height = window.screen.height\n\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0,\n },\n })\n .to(`#${id} .sticky-cover`, {\n opacity: 1,\n duration: 0.3,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [])\n\n return (\n <div id={id} className=\"relative z-10 pb-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n}\n\nconst MediaPlayerSticky
|
|
5
|
-
"mappings": "aAqCM,OA+CA,YAAAA,EA9CgB,OAAAC,EADhB,QAAAC,MAAA,oBApCN,OAA0B,UAAAC,EAAQ,aAAAC,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "Picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "MediaPlayerSticky_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { defaultHTMLConverters, convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<div class=\"lexical-${node.$.color}\">${node.text}</div>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst StickyBox = ({\n children,\n id,\n components,\n}: {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n}) => {\n useEffect(() => {\n const height = window.screen.height\n\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0,\n },\n })\n .to(`#${id} .sticky-cover`, {\n opacity: 1,\n duration: 0.3,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [])\n\n return (\n <div id={id} className=\"relative z-10 pb-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"!my-0\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n}\n\nconst MediaPlayerSticky = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', id, data: { title, videoTitle, btnText, img, video, theme, shape, components } }, ref) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n return (\n <StickyBox id={id} components={components}>\n <div\n ref={ref}\n className={cn('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n <div className=\"sticky left-0 top-0 w-full\">\n <div\n className={cn(\n 'media-cover',\n 'relative h-screen w-full',\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n )}\n >\n {video?.url && (\n <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {img?.url && (\n <Picture\n className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n source={img?.url}\n alt={img?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n </StickyBox>\n )\n }\n)\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "forwardRef", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "Picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "ref", "videoRef", "title_html", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|
|
@@ -3,6 +3,7 @@ export interface SwiperBoxProps {
|
|
|
3
3
|
data: {
|
|
4
4
|
list: any[];
|
|
5
5
|
configuration?: any;
|
|
6
|
+
onVideoPlayBtnClick?: (jIndex: number) => void;
|
|
6
7
|
};
|
|
7
8
|
id: string;
|
|
8
9
|
className?: string;
|
|
@@ -10,5 +11,6 @@ export interface SwiperBoxProps {
|
|
|
10
11
|
Slide: React.ComponentType<{
|
|
11
12
|
data: any;
|
|
12
13
|
configuration?: any;
|
|
14
|
+
jIndex?: number;
|
|
13
15
|
}>;
|
|
14
16
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SwiperBox/types.ts"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any
|
|
4
|
+
"sourcesContent": ["import React from 'react'\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n onVideoPlayBtnClick?: (jIndex: number) => void\n }\n id: string\n className?: string\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any; jIndex?: number }>\n}\n"],
|
|
5
5
|
"mappings": "AAAA,MAAkB",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: import("react").ForwardRefExoticComponent<Omit<import("../biz-components/BrandEquity/types.js").BrandEquityProps
|
|
4
|
+
component: import("react").ForwardRefExoticComponent<Omit<Omit<import("../biz-components/BrandEquity/types.js").BrandEquityProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
5
5
|
className?: string;
|
|
6
6
|
data?: Record<string, any>;
|
|
7
|
-
} & import("react").RefAttributes<any>>;
|
|
7
|
+
}, "ref"> & import("react").RefAttributes<any>>;
|
|
8
8
|
parameters: {
|
|
9
9
|
layout: string;
|
|
10
10
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: import("react").ForwardRefExoticComponent<Omit<import("../biz-components/MediaPlayerMulti/types.js").MediaPlayerMultiProps
|
|
4
|
+
component: import("react").ForwardRefExoticComponent<Omit<Omit<import("../biz-components/MediaPlayerMulti/types.js").MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
|
|
5
5
|
className?: string;
|
|
6
6
|
data?: Record<string, any>;
|
|
7
|
-
} & import("react").RefAttributes<any>>;
|
|
7
|
+
}, "ref"> & import("react").RefAttributes<any>>;
|
|
8
8
|
parameters: {
|
|
9
9
|
layout: string;
|
|
10
10
|
};
|