@anker-in/headless-ui 0.0.27-alpha.116 → 0.0.27-alpha.119
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/Evaluate/index.d.ts +3 -1
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
- package/dist/cjs/biz-components/Graphic/index.d.ts +2 -1
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +3 -3
- 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 -1
- package/dist/cjs/biz-components/MediaPlayerBase/types.js.map +1 -1
- 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 +2 -1
- 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.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/cjs/components/container.d.ts +9 -4
- package/dist/cjs/components/container.js +1 -1
- package/dist/cjs/components/container.js.map +3 -3
- package/dist/cjs/stories/container.stories.d.ts +4 -2
- package/dist/cjs/stories/graphic.stories.d.ts +1 -0
- package/dist/cjs/types/props.d.ts +10 -0
- package/dist/cjs/types/props.js +1 -1
- package/dist/cjs/types/props.js.map +1 -1
- package/dist/esm/biz-components/Evaluate/index.d.ts +3 -1
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.d.ts +2 -1
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +3 -3
- 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 -1
- 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 +2 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/esm/components/container.d.ts +9 -4
- package/dist/esm/components/container.js +1 -1
- package/dist/esm/components/container.js.map +3 -3
- package/dist/esm/stories/container.stories.d.ts +4 -2
- package/dist/esm/stories/graphic.stories.d.ts +1 -0
- package/dist/esm/types/props.d.ts +10 -0
- package/package.json +1 -1
- package/style.css +30 -3
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { ContainerProps, Theme } from '../../types/props.js';
|
|
2
3
|
export interface EvaluateItem {
|
|
3
4
|
/** 产品图片*/
|
|
4
5
|
img: {
|
|
@@ -21,7 +22,8 @@ export interface EvaluateProps {
|
|
|
21
22
|
/** 形状 */
|
|
22
23
|
shape?: 'round' | 'square';
|
|
23
24
|
/** 主题色*/
|
|
24
|
-
theme?:
|
|
25
|
+
theme?: Theme;
|
|
26
|
+
containerProps?: ContainerProps;
|
|
25
27
|
};
|
|
26
28
|
/** 按钮事件*/
|
|
27
29
|
event?: {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var k=Object.create;var n=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var L=(e,r)=>{for(var i in r)n(e,i,{get:r[i],enumerable:!0})},p=(e,r,i,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of C(r))!P.call(e,s)&&s!==i&&n(e,s,{get:()=>r[s],enumerable:!(a=N(r,s))||a.enumerable});return e};var d=(e,r,i)=>(i=e!=null?k(y(e)):{},p(r||!e||!e.__esModule?n(i,"default",{value:e,enumerable:!0}):i,e)),B=e=>p(n({},"__esModule",{value:!0}),e);var z={};L(z,{default:()=>M});module.exports=B(z);var t=require("react/jsx-runtime"),v=d(require("react")),f=d(require("../Title/index.js")),o=require("../../helpers/utils.js"),c=d(require("../../components/picture.js")),u=d(require("../SwiperBox/index.js")),w=require("../../shared/Styles.js"),l=require("../../components/avatar.js"),x=require("../../components/container.js");const E=({data:e,configuration:r})=>{const i=a=>a?Array.from(new Array(Number(a)))||[]:[];return(0,t.jsxs)("div",{className:(0,o.cn)("bg-container-secondary-1 hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:h-[480px] desktop:h-[384px] h-[360px]"),children:[(0,t.jsxs)("div",{className:(0,o.cn)("laptop:mb-11 desktop:mb-16 mb-16 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}),(0,t.jsx)("div",{className:"mt-1 flex items-center",children:i(e?.rating)?.map?.((a,s)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},s))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:(0,t.jsx)(l.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:e?.avatar?.url?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(l.AvatarFallback,{children:e?.title})]}):e?.title})})]}),(0,t.jsx)("p",{className:"desktop:text-2xl text-info-primary desktop:line-clamp-3 line-clamp-5 h-fit flex-1 break-words text-xl font-bold",children:e?.description||""}),(0,t.jsx)("a",{href:e?.link||"",onClick:()=>{r?.event?.primaryButton(e,r?.index)},children:(0,t.jsxs)("div",{className:(0,o.cn)("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(c.default,{className:"w-full object-cover",source:e?.img?.url})}),(0,t.jsx)("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:e?.subTitle||""})]})})]})},A=v.default.forwardRef(({className:e="",data:r,key:i,...a},s)=>{const{products:h,title:m,theme:g,...b}=r;return(0,t.jsx)("div",{className:e,ref:s,children:(0,t.jsx)("div",{className:"evaluate-box",children:(0,t.jsx)(x.Container,{...r?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:s,className:(0,o.cn)("w-full",e,{"aiui-dark":g==="dark"}),children:[m&&(0,t.jsx)(f.default,{data:{title:m}}),(0,t.jsx)(u.default,{className:"!overflow-visible",id:"Evaluate"+i,data:{list:h,configuration:{...b}},Slide:E,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var M=(0,w.withStyles)(A);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_Styles", "import_avatar", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Picture", "Evaluate", "React", "className", "key", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport type { ContainerProps, Theme, Shape } from '../../types/props.js'\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: {\n url: string\n }\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:h-[480px] desktop:h-[384px] h-[360px]'\n )}\n >\n <div className={cn('laptop:mb-11 desktop:mb-16 mb-16 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n {data?.avatar?.url ? (\n <>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </>\n ) : (\n data?.title\n )}\n </Avatar>\n </div>\n </div>\n <p className=\"desktop:text-2xl text-info-primary desktop:line-clamp-3 line-clamp-5 h-fit flex-1 break-words text-xl font-bold\">\n {data?.description || ''}\n </p>\n <a\n href={data?.link || ''}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index)\n }}\n >\n <div\n className={cn(\n 'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n </div>\n <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n </div>\n </a>\n </div>\n )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n const { products, title, theme, ...ohter } = data\n return (\n <div className={className} ref={ref}>\n <div className=\"evaluate-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter } }}\n Slide={EvaluateItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </Container>\n </div>\n </div>\n )\n})\n\nexport default withStyles(Evaluate)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_Styles", "import_avatar", "import_container", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Picture", "Evaluate", "React", "className", "key", "rest", "ref", "products", "title", "theme", "ohter", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ComponentCommonProps, Img } from '../../types/props.js';
|
|
2
|
+
import type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js';
|
|
3
3
|
type GraphicType = {
|
|
4
4
|
imgUrl: Img;
|
|
5
5
|
title: string;
|
|
@@ -13,6 +13,7 @@ export interface GraphicProps extends ComponentCommonProps {
|
|
|
13
13
|
title?: string;
|
|
14
14
|
items?: GraphicType[];
|
|
15
15
|
itemShape?: 'round' | 'square';
|
|
16
|
+
containerProps?: ContainerProps;
|
|
16
17
|
};
|
|
17
18
|
}
|
|
18
19
|
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var w=Object.create;var l=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},m=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of P(t))!y.call(e,s)&&s!==o&&l(e,s,{get:()=>t[s],enumerable:!(r=v(t,s))||r.enumerable});return e};var n=(e,t,o)=>(o=e!=null?w(N(e)):{},m(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),b=e=>m(l({},"__esModule",{value:!0}),e);var S={};C(S,{default:()=>G});module.exports=b(S);var i=require("react/jsx-runtime"),d=n(require("react")),a=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),h=n(require("../SwiperBox/index.js")),x=require("../../components/index.js"),p=require("../../components/index.js"),g=require("../../components/container.js"),u=n(require("../Title/index.js"));const k=({data:e,configuration:t})=>(0,i.jsx)("div",{className:(0,a.cn)("lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]",{"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,i.jsxs)("a",{href:e?.link,className:"relative cursor-pointer",children:[(0,i.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,i.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,i.jsx)(p.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&(0,i.jsx)(x.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})}),c=d.default.forwardRef(({data:e,className:t,...o},r)=>{const s=e?.items?.length>2;return(0,i.jsx)("div",{className:t,ref:r,children:(0,i.jsx)("div",{className:"graphic-box",children:(0,i.jsxs)(g.Container,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&(0,i.jsx)(u.default,{data:{title:e?.title}}),(0,i.jsx)(h.default,{className:(0,a.cn)("!overflow-visible"),id:"Graphic",data:{list:e?.items||[],configuration:{itemShape:e.itemShape}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:s?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:s?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:s?4:2}}})]})})})});c.displayName="Graphic";var G=(0,f.withStyles)(c);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n return (\n <div\n className={cn('lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a href={data?.link} className=\"relative cursor-pointer\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n return (\n <div ref={ref}>\n {data?.title && <Title data={{ title: data?.title }} />}\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "Item", "data", "configuration", "Graphic", "React", "className", "props", "ref", "isShow", "Title", "SwiperBox"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n return (\n <div\n className={cn('lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a href={data?.link} className=\"relative cursor-pointer\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n return (\n <div className={className} ref={ref}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n className={cn('!overflow-visible')}\n id={'Graphic'}\n data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoCQ,IAAAI,EAAA,6BAnCRC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAA0B,yCAC1BC,EAAkB,gCAoBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MAAG,oFAAqF,CAChG,gDAAkDA,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,KAAE,KAAMD,GAAM,KAAM,UAAU,0BAC7B,oBAAC,WACC,UAAU,SACV,aAAa,kEACb,OAAQA,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUP,GAAM,OAAyB,OAAS,EACxD,SACE,OAAC,OAAI,UAAWI,EAAW,IAAKE,EAC9B,mBAAC,OAAI,UAAU,cACb,oBAAC,aAAW,GAAIN,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACpD,UAAAA,GAAM,UAAS,OAAC,EAAAQ,QAAA,CAAM,KAAM,CAAE,MAAOR,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAS,QAAA,CACC,aAAW,MAAG,mBAAmB,EACjC,GAAI,UACJ,KAAM,CAAE,KAAMT,GAAM,OAAS,CAAC,EAAG,cAAe,CAAE,UAAWA,EAAK,SAAU,CAAE,EAC9E,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeQ,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,EACF,EACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOb,KAAQ,cAAWa,CAAO",
|
|
6
|
+
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_container", "import_Title", "Item", "data", "configuration", "Graphic", "React", "className", "props", "ref", "isShow", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var D=Object.create;var u=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var A=(t,o)=>{for(var e in o)u(t,e,{get:o[e],enumerable:!0})},k=(t,o,e,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of Y(o))!O.call(t,a)&&a!==e&&u(t,a,{get:()=>o[a],enumerable:!(l=F(o,a))||l.enumerable});return t};var H=(t,o,e)=>(e=t!=null?D(q(t)):{},k(o||!t||!t.__esModule?u(e,"default",{value:t,enumerable:!0}):e,t)),G=t=>k(u({},"__esModule",{value:!0}),t);var Q={};A(Q,{default:()=>K});module.exports=G(Q);var s=require("react/jsx-runtime"),r=require("react"),p=require("../../helpers/utils.js"),N=require("../../shared/Styles.js"),L=H(require("../../components/picture.js")),T=H(require("../../components/button.js")),v=require("@payloadcms/richtext-lexical/html"),P=require("react-intersection-observer");const M=({defaultConverters:t})=>({...t,text:o=>{const{node:e}=o;return e.$&&e.$.color?`<span class="lexical-${e.$.color}">${e.text}</span>`:e.text}}),J=(0,r.forwardRef)(({className:t="",onBtnClick:o,data:{title:e,videoTitle:l,btnText:a,img:f,video:B,theme:R,shape:E,...$}},z)=>{const{sticky:n}=$,[i,d]=(0,r.useState)(!1),[g,I]=(0,r.useState)(0),c=(0,r.useRef)(null),m=(0,r.useRef)(null),_=(0,r.useRef)(null),{ref:C,inView:x}=(0,P.useInView)();(0,r.useImperativeHandle)(z,()=>m.current);const h=typeof e=="string"?e:e&&(0,v.convertLexicalToHTML)({data:e,converters:M}),y=typeof l=="string"?l:l&&(0,v.convertLexicalToHTML)({data:l,converters:M});return(0,r.useEffect)(()=>{x&&!a?(c.current?.play(),d(!0)):(c.current?.pause(),d(!1))},[x]),(0,r.useEffect)(()=>{if(m.current&&n){const S=m.current.getBoundingClientRect(),b=window.innerHeight,V=window.scrollY||window.pageYOffset,j=S.bottom+V,w=document.documentElement.scrollHeight-j;I(w>b?b:w)}},[]),(0,s.jsxs)("div",{ref:m,style:n?{marginBottom:`-${g}px`}:{},className:(0,p.cn)("relative",n&&"mt-[-100vh]"),children:[(0,s.jsx)("div",{className:"sticky top-0 ",children:(0,s.jsxs)("div",{className:(0,p.cn)("relative overflow-hidden",n?"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]",t,{"aiui-dark":R==="dark","rounded-box":E==="rounded"}),children:[(0,s.jsx)("div",{children:(0,s.jsxs)("div",{ref:C,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:[h&&!i&&(0,s.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}}),y&&i&&(0,s.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),!i&&a&&(0,s.jsx)(T.default,{variant:"link",className:(0,p.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{i?(c.current&&c.current.pause(),d(!1)):(c.current&&c.current.play(),d(!0)),o&&o?.()},children:a})]})}),(0,s.jsx)("div",{children:(0,s.jsxs)("div",{ref:_,className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,s.jsx)("video",{ref:c,className:"size-full object-cover",src:B?.url,muted:!0,loop:!0}),!i&&f?.url&&(0,s.jsx)(L.default,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:f?.url,alt:f?.alt,imgClassName:"w-full h-full object-cover"}),(0,s.jsx)("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})]})}),(0,s.jsx)("div",{className:(0,p.cn)(n&&"relative box-content block",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]"),style:n?{height:`${g}px`}:{}})]})});var K=(0,N.withStyles)(J);
|
|
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, forwardRef, useImperativeHandle } from 'react'\nimport {
|
|
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", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\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'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n\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 =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n 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('relative', sticky && 'mt-[-100vh]')}\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 className={cn(\n sticky && 'relative box-content block',\n sticky &&\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 )}\n style={sticky ? { height: `${btb}px` } : {}}\n />\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_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_react_intersection_observer", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "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,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
|
|
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 onBtnClick?: () => void\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var b=Object.create;var s=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},p=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of P(t))!M.call(e,i)&&i!==o&&s(e,i,{get:()=>t[i],enumerable:!(a=N(t,i))||a.enumerable});return e};var n=(e,t,o)=>(o=e!=null?b(k(e)):{},p(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),C=e=>p(s({},"__esModule",{value:!0}),e);var z={};L(z,{default:()=>j});module.exports=C(z);var l=require("react/jsx-runtime"),r=require("react"),d=require("../../helpers/utils.js"),m=require("../../shared/Styles.js"),f=require("../../components/index.js"),c=n(require("../Title/index.js")),u=n(require("../SwiperBox/index.js")),x=require("../../components/container.js"),v=require("@payloadcms/richtext-lexical/html");const S=({data:e,configuration:t})=>{const[o,a]=(0,r.useState)(!1),i=(0,r.useRef)(null);return(0,l.jsxs)("div",{className:(0,d.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",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[o?(0,l.jsx)("video",{ref:i,className:"size-full object-cover",src:e?.video?.url,muted:!0,loop:!0}):(0,l.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,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:e.video&&(0,l.jsx)("button",{onClick:()=>{o?(i.current&&i.current.pause(),a(!1)):(i.current&&i.current.play(),a(!0)),t?.onVideoPlayBtnClick&&t?.onVideoPlayBtnClick?.(t?.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,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.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,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.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,l.jsx)("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),(0,l.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})]})]})},T=(0,r.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:a},className:i="",key:h,onVideoPlayBtnClick:g},w)=>{const y=typeof o=="string"?o:o&&(0,v.convertLexicalToHTML)({data:o});return(0,l.jsx)("div",{className:i,children:(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(x.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:i,ref:w,children:[o&&(0,l.jsx)(c.default,{data:{title:y||""}}),(0,l.jsx)(u.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+h,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:g}},Slide:S})]})})})})});var j=(0,m.withStyles)(T);
|
|
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, 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-
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
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"]
|
|
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 { Container } from '../../components/container.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 tablet:h-[18.22vw] relative h-[35.9vw] 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 (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\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 </Container>\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBM,IAAAI,EAAA,6BAtBNC,EAAoD,iBACpDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwB,qCACxBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA0B,yCAC1BC,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,uFACZ,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,CACE,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,EAAO,eAAAC,CAAe,EAAG,UAAAC,EAAY,GAAI,IAAAC,EAAK,oBAAAC,CAAoB,EAC1GC,IACG,CACH,MAAMC,EAAa,OAAON,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EACpG,SACE,OAAC,OAAI,UAAWE,EACd,mBAAC,OAAI,UAAU,uBACb,mBAAC,aAAW,GAAID,GAAkB,CAAC,EAAI,UAAU,kBAC/C,oBAAC,OAAI,UAAWC,EAAW,IAAKG,EAC7B,UAAAL,MAAS,OAAC,EAAAO,QAAA,CAAM,KAAM,CAAE,MAAOD,GAAc,EAAG,EAAG,KACpD,OAAC,EAAAE,QAAA,CACC,UAAU,oBACV,GAAI,yBAA2BL,EAC/B,KAAM,CAAE,KAAML,EAAO,cAAe,CAAE,MAAOC,EAAO,oBAAAK,CAAoB,CAAE,EAC1E,MAAOb,EACT,GACF,EACF,EACF,EACF,CAEJ,CACF,EAEA,IAAOX,KAAQ,cAAWiB,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_container", "import_html", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "title_html", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ComponentCommonProps, Img, Video } from '../../types/props.js';
|
|
1
|
+
import type { ComponentCommonProps, Img, Video, ContainerProps } from '../../types/props.js';
|
|
2
2
|
export interface MediaPlayerItemProps {
|
|
3
3
|
title: string;
|
|
4
4
|
name: string;
|
|
@@ -12,6 +12,7 @@ export interface MediaPlayerMultiProps extends ComponentCommonProps {
|
|
|
12
12
|
title?: string;
|
|
13
13
|
shape?: 'round' | 'square';
|
|
14
14
|
items: MediaPlayerItemProps[];
|
|
15
|
+
containerProps?: ContainerProps;
|
|
15
16
|
};
|
|
16
17
|
onVideoPlayBtnClick?: (jIndex: number) => void;
|
|
17
18
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var m=(o,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of p(e))!a.call(o,r)&&r!==n&&i(o,r,{get:()=>e[r],enumerable:!(t=s(e,r))||t.enumerable});return o};var d=o=>m(i({},"__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 onVideoPlayBtnClick?: (jIndex: number) => void\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Img, Video, ContainerProps } 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 containerProps?: ContainerProps\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,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var P=Object.create;var u=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var B=(r,a)=>{for(var t in a)u(r,t,{get:a[t],enumerable:!0})},v=(r,a,t,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of z(a))!D.call(r,o)&&o!==t&&u(r,o,{get:()=>a[o],enumerable:!(l=C(a,o))||l.enumerable});return r};var n=(r,a,t)=>(t=r!=null?P($(r)):{},v(a||!r||!r.__esModule?u(t,"default",{value:r,enumerable:!0}):t,r)),Y=r=>v(u({},"__esModule",{value:!0}),r);var F={};B(F,{default:()=>j});module.exports=Y(F);var e=require("react/jsx-runtime"),s=n(require("react")),f=require("../../helpers/utils.js"),E=require("../../shared/Styles.js"),M=n(require("../Slogan/index.js")),m=require("../../components/gird.js"),g=require("../../components/container.js"),R=n(require("../BrandEquity/index.js")),h=n(require("../MemberEquity/index.js")),k=n(require("../Spacer/index.js")),w=n(require("gsap")),y=require("@payloadcms/richtext-lexical/html"),x=require("react-responsive"),H=n(require("../../components/picture.js"));const b=({defaultConverters:r})=>({...r,text:a=>{const{node:t}=a;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),d=({children:r,spaceY:a})=>{const t=(0,x.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(g.Container,{spaceY:a,children:(0,e.jsxs)(m.Grid,{children:[!t&&(0,e.jsx)(m.GridItem,{span:1}),(0,e.jsx)(m.GridItem,{span:t?12:10,children:r}),!t&&(0,e.jsx)(m.GridItem,{span:1})]})})},G=s.default.forwardRef(({children:r,id:a,components:t},l)=>{const o=(0,s.useRef)(null),c=(0,s.useRef)(null),p=(0,s.useRef)(null);return(0,s.useImperativeHandle)(l,()=>({mediaPlayerStickyRef:o.current,brandEquityRef:c.current,memberEquityRef:p.current}),[]),(0,s.useEffect)(()=>{const i=window.screen.height;w.default.timeline({scrollTrigger:{trigger:`#${a}`,start:"top top",end:`top+=${i*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,ref:o,className:"relative z-10 pb-10",children:[(0,e.jsx)(e.Fragment,{children:r}),(0,e.jsx)(e.Fragment,{children:t?.map(i=>{switch(i.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(d,{spaceY:"none",children:(0,e.jsx)(R.default,{ref:c,data:i,style:i?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(d,{spaceY:"none",children:(0,e.jsx)(h.default,{ref:p,data:i,className:"w-full",style:i?.style})})});case"ipc-spacer":return(0,e.jsx)(k.default,{data:i,style:i?.style});default:return null}})})]})}),I=(0,s.forwardRef)(({className:r="",id:a,data:{title:t,videoTitle:l,btnText:o,img:c,video:p,theme:i,shape:L,components:T}},N)=>{const S=(0,s.useRef)(null),q=typeof t=="string"?t:t&&(0,y.convertLexicalToHTML)({data:t,converters:b});return typeof l=="string"||l&&(0,y.convertLexicalToHTML)({data:l,converters:b}),(0,e.jsxs)(G,{ref:N,id:a,components:T,children:[(0,e.jsx)("div",{className:(0,f.cn)("sticky-box absolute left-0 top-0 h-screen w-full",r,{"aiui-dark":i==="dark","rounded-box":L==="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)(M.default,{className:"sticky-title",data:{title:q||"",theme:i}})})})}),(0,e.jsx)("div",{className:"sticky left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:(0,f.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:[p?.url&&(0,e.jsx)("video",{ref:S,className:"size-full object-cover",src:p?.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),c?.url&&(0,e.jsx)(H.default,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:c?.url,alt:c?.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 j=(0,E.withStyles)(I);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } 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 {
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCM,IAAAI,EAAA,6BApCNC,EAAoF,oBACpFC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAmB,iCACnBC,EAA+B,oCAC/BC,EAA0B,yCAC1BC,EAAwB,sCACxBC,EAAyB,uCACzBC,EAAmB,iCACnBC,EAAiB,mBAEjBC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } 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 { 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 `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY}>\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 = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n brandEquityRef: HTMLDivElement\n memberEquityRef: HTMLDivElement\n },\n {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }, ref) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n const brandEquityRef = useRef<HTMLDivElement>(null)\n const memberEquityRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => {\n return {\n mediaPlayerStickyRef: mediaPlayerStickyRef.current as HTMLDivElement,\n brandEquityRef: brandEquityRef.current as HTMLDivElement,\n memberEquityRef: memberEquityRef.current as HTMLDivElement,\n }\n }, [])\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 return (\n <div id={id} ref={mediaPlayerStickyRef} 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=\"none\">\n <BrandEquity ref={brandEquityRef} data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity\n ref={memberEquityRef}\n data={componentData}\n className=\"w-full\"\n style={componentData?.style}\n />\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<\n {\n mediaPlayerStickyRef: HTMLDivElement\n brandEquityRef: HTMLDivElement\n memberEquityRef: HTMLDivElement\n },\n 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 ref={ref} id={id} components={components}>\n <div\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 ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop playsInline />\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\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
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", "React", "id", "components", "ref", "mediaPlayerStickyRef", "brandEquityRef", "memberEquityRef", "height", "gsap", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "Slogan", "Picture"]
|
|
7
7
|
}
|
|
@@ -1,17 +1,22 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js';
|
|
2
3
|
type ContainerProps = {
|
|
3
4
|
asChild?: boolean;
|
|
4
5
|
children?: React.ReactNode;
|
|
5
6
|
className?: string;
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
spaceY?: SpaceY;
|
|
8
|
+
spaceTop?: SpaceTop;
|
|
9
|
+
spaceBottom?: SpaceBottom;
|
|
10
|
+
mode?: Mode;
|
|
8
11
|
} & React.ComponentPropsWithoutRef<'div'>;
|
|
9
12
|
declare const Container: React.ForwardRefExoticComponent<{
|
|
10
13
|
asChild?: boolean;
|
|
11
14
|
children?: React.ReactNode;
|
|
12
15
|
className?: string;
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
spaceY?: SpaceY;
|
|
17
|
+
spaceTop?: SpaceTop;
|
|
18
|
+
spaceBottom?: SpaceBottom;
|
|
19
|
+
mode?: Mode;
|
|
15
20
|
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
16
21
|
export { Container };
|
|
17
22
|
export type { ContainerProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var u=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of S(t))!P.call(e,p)&&p!==o&&c(e,p,{get:()=>t[p],enumerable:!(n=g(t,p))||n.enumerable});return e};var T=(e,t,o)=>(o=e!=null?u(h(e)):{},i(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e)),w=e=>i(c({},"__esModule",{value:!0}),e);var Y={};N(Y,{Container:()=>m});module.exports=w(Y);var a=require("react/jsx-runtime"),r=T(require("react")),x=require("../helpers/utils.js"),f=require("@radix-ui/react-slot");const B=({children:e})=>(0,a.jsx)(a.Fragment,{children:e}),M=r.default.forwardRef(({...e},t)=>{const{asChild:o,children:n,className:p,spaceY:s="default",spaceTop:l="none",spaceBottom:d="none",...C}=e,y=o?f.Slot:"div",R={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},b={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},k={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return(0,a.jsx)(y,{...C,ref:t,className:(0,x.cn)("desktop:max-w-[1792px] lg-desktop:max-w-full mx-auto w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",R?.[s]||s,b?.[l]||l,k?.[d]||d,p),children:n})}),m=r.default.forwardRef(({...e},t)=>{const{children:o,mode:n="section"}=e,s={section:M,fragment:B}[n];return(0,a.jsx)(s,{...e,ref:t,children:o})});m.displayName="Container";
|
|
2
2
|
//# sourceMappingURL=container.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/container.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["container_exports", "__export", "Container", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_react_slot", "React", "props", "forwardedRef", "asChild", "
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const {\n asChild,\n children,\n className,\n spaceY = 'default',\n spaceTop = 'none',\n spaceBottom = 'none',\n ...containerProps\n } = props\n\n const Comp = asChild ? Slot : 'div'\n\n const spaceY_map: any = {\n default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n none: '',\n }\n\n const spaceTop_map: any = {\n default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n none: '',\n }\n\n const spaceBottom_map: any = {\n default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n none: '',\n }\n\n return (\n <Comp\n {...containerProps}\n ref={forwardedRef}\n className={cn(\n 'desktop:max-w-[1792px] lg-desktop:max-w-full mx-auto w-full',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n spaceY_map?.[spaceY] || spaceY,\n spaceTop_map?.[spaceTop] || spaceTop,\n spaceBottom_map?.[spaceBottom] || spaceBottom,\n className\n )}\n >\n {children}\n </Comp>\n )\n})\n\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const { children, mode = 'section' } = props\n\n const componentsMap: {\n [P in Mode]: React.ComponentType<any> | string\n } = {\n section: Section,\n fragment: Fragment,\n }\n\n const Component = componentsMap![mode!]\n\n return (\n <Component {...props} ref={forwardedRef}>\n {children}\n </Component>\n )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAiBS,IAAAI,EAAA,6BAjBTC,EAAkB,oBAClBC,EAAmB,+BACnBC,EAAqB,gCAcrB,MAAMC,EAAW,CAAC,CAAE,SAAAC,CAAS,OACpB,mBAAG,SAAAA,EAAS,EAGfC,EAAU,EAAAC,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAL,EACA,UAAAM,EACA,OAAAC,EAAS,UACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIP,EAEEQ,EAAON,EAAU,OAAO,MAExBO,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,SACE,OAACH,EAAA,CACE,GAAGD,EACJ,IAAKN,EACL,aAAW,MACT,8DACA,8EACAQ,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,EAClCH,CACF,EAEC,SAAAN,EACH,CAEJ,CAAC,EAEKP,EAAY,EAAAS,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAJ,EAAU,KAAAe,EAAO,SAAU,EAAIZ,EASjCa,EALF,CACF,QAASf,EACT,SAAUF,CACZ,EAEiCgB,CAAK,EAEtC,SACE,OAACC,EAAA,CAAW,GAAGb,EAAO,IAAKC,EACxB,SAAAJ,EACH,CAEJ,CAAC,EAEDP,EAAU,YAAc",
|
|
6
|
+
"names": ["container_exports", "__export", "Container", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_react_slot", "Fragment", "children", "Section", "React", "props", "forwardedRef", "asChild", "className", "spaceY", "spaceTop", "spaceBottom", "containerProps", "Comp", "spaceY_map", "spaceTop_map", "spaceBottom_map", "mode", "Component"]
|
|
7
7
|
}
|