@anker-in/headless-ui 0.0.27-alpha.86 → 0.0.27-alpha.87
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/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var R=Object.create;var c=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var E=(t,a)=>{for(var p in a)c(t,p,{get:a[p],enumerable:!0})},f=(t,a,p,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of P(a))!I.call(t,r)&&r!==p&&c(t,r,{get:()=>a[r],enumerable:!(s=z(a,r))||s.enumerable});return t};var b=(t,a,p)=>(p=t!=null?R(T(t)):{},f(a||!t||!t.__esModule?c(p,"default",{value:t,enumerable:!0}):p,t)),S=t=>f(c({},"__esModule",{value:!0}),t);var A={};E(A,{default:()=>j});module.exports=S(A);var e=require("react/jsx-runtime"),i=b(require("react")),v=require("@gsap/react"),k=b(require("gsap")),y=require("gsap/ScrollTrigger"),o=require("../../components/index.js"),l=require("../../helpers/index.js"),N=require("../../shared/Styles.js");const h=i.default.forwardRef(({data:t,className:a},p)=>{const{title:s,subtitle:r,pcImage:w,mobileImage:B,primaryButton:x,secondaryButton:g,theme:H="light",caption:d=[]}=t,n=(0,i.useRef)(null);return(0,v.useGSAP)(()=>{const u=n.current?.clientHeight||0;return console.log("bgImageRef height",u),k.default.to(n.current,{scrollTrigger:{trigger:n.current,start:"40% top",end:"bottom top",scrub:!0},y:"50%",ease:"linear"}),()=>{y.ScrollTrigger.getAll().forEach(m=>m.kill())}}),(0,e.jsxs)("div",{"data-ui-component-id":"HeroBanner",ref:p,className:(0,l.cn)(H==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,e.jsx)(o.Picture,{ref:n,className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${w
|
|
1
|
+
"use strict";"use client";var R=Object.create;var c=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var E=(t,a)=>{for(var p in a)c(t,p,{get:a[p],enumerable:!0})},f=(t,a,p,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of P(a))!I.call(t,r)&&r!==p&&c(t,r,{get:()=>a[r],enumerable:!(s=z(a,r))||s.enumerable});return t};var b=(t,a,p)=>(p=t!=null?R(T(t)):{},f(a||!t||!t.__esModule?c(p,"default",{value:t,enumerable:!0}):p,t)),S=t=>f(c({},"__esModule",{value:!0}),t);var A={};E(A,{default:()=>j});module.exports=S(A);var e=require("react/jsx-runtime"),i=b(require("react")),v=require("@gsap/react"),k=b(require("gsap")),y=require("gsap/ScrollTrigger"),o=require("../../components/index.js"),l=require("../../helpers/index.js"),N=require("../../shared/Styles.js");const h=i.default.forwardRef(({data:t,className:a},p)=>{const{title:s,subtitle:r,pcImage:w,mobileImage:B,primaryButton:x,secondaryButton:g,theme:H="light",caption:d=[]}=t,n=(0,i.useRef)(null);return(0,v.useGSAP)(()=>{const u=n.current?.clientHeight||0;return console.log("bgImageRef height",u),k.default.to(n.current,{scrollTrigger:{trigger:n.current,start:"40% top",end:"bottom top",scrub:!0},y:"50%",ease:"linear"}),()=>{y.ScrollTrigger.getAll().forEach(m=>m.kill())}}),(0,e.jsxs)("div",{"data-ui-component-id":"HeroBanner",ref:p,className:(0,l.cn)(H==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,e.jsx)(o.Picture,{ref:n,className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${w?.url||""} , ${B?.url||""} 767`}),(0,e.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[s&&(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[(0,e.jsx)(o.Heading,{as:"h1",size:5,className:(0,l.cn)("hero-banner-title"),html:s}),(0,e.jsx)(o.Text,{as:"p",className:(0,l.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:r})]}),(0,e.jsxs)("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[g&&g.text&&(0,e.jsx)(o.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:g.text}),x&&x.text&&(0,e.jsx)(o.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:x.text})]})]}),d.length>0&&(0,e.jsx)("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:d.map((u,m)=>(0,e.jsxs)(i.default.Fragment,{children:[(0,e.jsx)(o.Text,{className:(0,l.cn)("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:u.title}),m<d.length-1&&(0,e.jsx)("div",{className:(0,l.cn)("bg-info-primary w-px")})]},m))})]})});h.displayName="HeroBanner";var j=(0,N.withStyles)(h);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgImageRef = useRef<HTMLPictureElement>(null)\n\n useGSAP(() => {\n const h = bgImageRef.current?.clientHeight || 0\n console.log('bgImageRef height', h)\n gsap.to(bgImageRef.current!, {\n scrollTrigger: {\n trigger: bgImageRef.current,\n start: `40% top`,\n end: 'bottom top',\n scrub: true,\n },\n y: '50%',\n ease: 'linear',\n })\n\n return () => {\n ScrollTrigger.getAll().forEach(trigger => trigger.kill())\n }\n })\n return (\n <div\n data-ui-component-id=\"HeroBanner\"\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture\n ref={bgImageRef}\n className=\"laptop:w-full absolute h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2CM,IAAAI,EAAA,6BA1CNC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAiB,mBACjBC,EAA8B,8BAE9BC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,KAAa,UAA2B,IAAI,EAElD,oBAAQ,IAAM,CACZ,MAAMC,EAAID,EAAW,SAAS,cAAgB,EAC9C,eAAQ,IAAI,oBAAqBC,CAAC,EAClC,EAAAC,QAAK,GAAGF,EAAW,QAAU,CAC3B,cAAe,CACb,QAASA,EAAW,QACpB,MAAO,UACP,IAAK,aACL,MAAO,EACT,EACA,EAAG,MACH,KAAM,QACR,CAAC,EAEM,IAAM,CACX,gBAAc,OAAO,EAAE,QAAQG,GAAWA,EAAQ,KAAK,CAAC,CAC1D,CACF,CAAC,KAEC,QAAC,OACC,uBAAqB,aACrB,IAAKZ,EACL,aAAW,MACTO,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,oBAAC,WACC,IAAKU,EACL,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGN,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgImageRef = useRef<HTMLPictureElement>(null)\n\n useGSAP(() => {\n const h = bgImageRef.current?.clientHeight || 0\n console.log('bgImageRef height', h)\n gsap.to(bgImageRef.current!, {\n scrollTrigger: {\n trigger: bgImageRef.current,\n start: `40% top`,\n end: 'bottom top',\n scrub: true,\n },\n y: '50%',\n ease: 'linear',\n })\n\n return () => {\n ScrollTrigger.getAll().forEach(trigger => trigger.kill())\n }\n })\n return (\n <div\n data-ui-component-id=\"HeroBanner\"\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture\n ref={bgImageRef}\n className=\"laptop:w-full absolute h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n />\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n {title && (\n <div className=\"laptop:text-left max-w-[686px]\">\n <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n <Text\n as=\"p\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n </div>\n )}\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n {secondaryButton && secondaryButton.text && (\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n className={cn(\n 'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2CM,IAAAI,EAAA,6BA1CNC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAiB,mBACjBC,EAA8B,8BAE9BC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,KAAa,UAA2B,IAAI,EAElD,oBAAQ,IAAM,CACZ,MAAMC,EAAID,EAAW,SAAS,cAAgB,EAC9C,eAAQ,IAAI,oBAAqBC,CAAC,EAClC,EAAAC,QAAK,GAAGF,EAAW,QAAU,CAC3B,cAAe,CACb,QAASA,EAAW,QACpB,MAAO,UACP,IAAK,aACL,MAAO,EACT,EACA,EAAG,MACH,KAAM,QACR,CAAC,EAEM,IAAM,CACX,gBAAc,OAAO,EAAE,QAAQG,GAAWA,EAAQ,KAAK,CAAC,CAC1D,CACF,CAAC,KAEC,QAAC,OACC,uBAAqB,aACrB,IAAKZ,EACL,aAAW,MACTO,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,oBAAC,WACC,IAAKU,EACL,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGN,GAAS,KAAO,EAAE,MAAMC,GAAa,KAAO,EAAE,OAC3D,KAGA,QAAC,OAAI,UAAU,6LACZ,UAAAH,MACC,QAAC,OAAI,UAAU,iCACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,mBAAmB,EAAG,KAAMA,EAAO,KAC3E,OAAC,QACC,GAAG,IACH,aAAW,MACT,oHACF,EACA,KAAMC,EACR,GACF,KAGF,QAAC,OAAI,UAAU,4DACZ,UAAAI,GAAmBA,EAAgB,SAClC,OAAC,UAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAA,EAAgB,KACnB,EAEDD,GAAiBA,EAAc,SAC9B,OAAC,UAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAQ,OAAS,MAChB,OAAC,OAAI,UAAU,uKACZ,SAAAA,EAAQ,IAAI,CAACK,EAAGC,OACf,QAAC,EAAAjB,QAAM,SAAN,CACC,oBAAC,QACC,aAAW,MACT,8KACF,EACA,KAAMgB,EAAE,MACV,EACCC,EAAQN,EAAQ,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,sBAAsB,EAAG,IAPxDM,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDlB,EAAW,YAAc,aAEzB,IAAOT,KAAQ,cAAWS,CAAU",
|
|
6
6
|
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgImageRef", "h", "gsap", "trigger", "c", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var P=Object.create;var i=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var a in t)i(e,a,{get:t[a],enumerable:!0})},f=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of M(t))!R.call(e,s)&&s!==a&&i(e,s,{get:()=>t[s],enumerable:!(o=z(t,s))||o.enumerable});return e};var
|
|
1
|
+
"use strict";"use client";var P=Object.create;var i=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var a in t)i(e,a,{get:t[a],enumerable:!0})},f=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of M(t))!R.call(e,s)&&s!==a&&i(e,s,{get:()=>t[s],enumerable:!(o=z(t,s))||o.enumerable});return e};var v=(e,t,a)=>(a=e!=null?P(B(e)):{},f(t||!e||!e.__esModule?i(a,"default",{value:e,enumerable:!0}):a,e)),_=e=>f(i({},"__esModule",{value:!0}),e);var H={};L(H,{default:()=>C});module.exports=_(H);var l=require("react/jsx-runtime"),p=require("react"),n=require("../../helpers/utils.js"),y=require("../../shared/Styles.js"),g=v(require("../../components/picture.js")),b=v(require("../../components/button.js")),d=require("@payloadcms/richtext-lexical/html"),h=require("./right.js");const j=({className:e="",data:{title:t,videoTitle:a,btnText:o,img:s,video:x,theme:k,shape:w}})=>{const[c,u]=(0,p.useState)(!1),r=(0,p.useRef)(null),m=typeof t=="string"?t:t&&(0,d.convertLexicalToHTML)({data:t}),N=typeof a=="string"?a:a&&(0,d.convertLexicalToHTML)({data:a});return(0,l.jsxs)("div",{className:(0,n.cn)(" relative w-full",e,{"aiui-dark":k==="dark","rounded-box":w==="rounded"}),children:[(0,l.jsxs)("div",{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:[(0,l.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:!c&&m?m:N||""}}),!c&&o&&(0,l.jsxs)(b.default,{variant:"link",className:(0,n.cn)("member-equity-button-secondary"),onClick:()=>{c?(r.current&&r.current.pause(),u(!1)):(r.current&&r.current.play(),u(!0))},children:[o,(0,l.jsx)(h.Right,{})]})]}),(0,l.jsxs)("div",{className:"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1440] desktop:aspect-h-[700] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] aspect-w-[390] aspect-h-[660] relative overflow-hidden",children:[(0,l.jsx)("video",{ref:r,className:"size-full object-cover",src:x?.url,autoPlay:!0,muted:!0,loop:!0}),!c&&(0,l.jsx)(g.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,l.jsx)("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})]})};var C=(0,y.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 } 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'\nimport { Right } from './right.js'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n const videoRef = useRef<HTMLVideoElement>(null)\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 return (\n <div\n className={cn(' relative 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 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\">\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: !isPlaying && title_html ? title_html : videoTitle_html || '' }}\n />\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary')}\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 >\n {btnText}\n <Right />\n </Button>\n )}\n </div>\n <div className=\"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6BQ,IAAAI,EAAA,6BA5BRC,EAAwC,iBACxCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAqC,6CAErCC,EAAsB,sBAEtB,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,CAAM,CAC/D,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1CC,KAAW,UAAyB,IAAI,EAExCC,EAAa,OAAOV,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EAC9FW,EACJ,OAAOV,GAAe,SAAWA,EAAaA,MAAc,wBAAqB,CAAE,KAAMA,CAAW,CAAC,EAEvG,SACE,QAAC,OACC,aAAW,MAAG,mBAAoBF,EAAW,CAC3C,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,qBAAC,OAAI,UAAU,kHACb,oBAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQ,CAACC,GAAaG,EAAaA,EAAaC,GAAmB,EAAG,EACnG,EACC,CAACJ,GAAaL,MACb,QAAC,EAAAU,QAAA,CACC,QAAQ,OACR,aAAW,MAAG,gCAAgC,EAC9C,QAAS,IAAM,CACTL,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,UAAAN,KACD,OAAC,UAAM,GACT,GAEJ,KACA,QAAC,OAAI,UAAU,
|
|
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/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { Right } from './right.js'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n const videoRef = useRef<HTMLVideoElement>(null)\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 return (\n <div\n className={cn(' relative 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 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\">\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: !isPlaying && title_html ? title_html : videoTitle_html || '' }}\n />\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary')}\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 >\n {btnText}\n <Right />\n </Button>\n )}\n </div>\n <div className=\"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1440] desktop:aspect-h-[700] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] aspect-w-[390] aspect-h-[660] relative overflow-hidden\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n {!isPlaying && (\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=\"absolute left-0 top-0 z-10 size-full\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6BQ,IAAAI,EAAA,6BA5BRC,EAAwC,iBACxCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAqC,6CAErCC,EAAsB,sBAEtB,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,CAAM,CAC/D,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1CC,KAAW,UAAyB,IAAI,EAExCC,EAAa,OAAOV,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EAC9FW,EACJ,OAAOV,GAAe,SAAWA,EAAaA,MAAc,wBAAqB,CAAE,KAAMA,CAAW,CAAC,EAEvG,SACE,QAAC,OACC,aAAW,MAAG,mBAAoBF,EAAW,CAC3C,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,qBAAC,OAAI,UAAU,kHACb,oBAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQ,CAACC,GAAaG,EAAaA,EAAaC,GAAmB,EAAG,EACnG,EACC,CAACJ,GAAaL,MACb,QAAC,EAAAU,QAAA,CACC,QAAQ,OACR,aAAW,MAAG,gCAAgC,EAC9C,QAAS,IAAM,CACTL,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,UAAAN,KACD,OAAC,UAAM,GACT,GAEJ,KACA,QAAC,OAAI,UAAU,4OACb,oBAAC,SAAM,IAAKO,EAAU,UAAU,yBAAyB,IAAKL,GAAO,IAAK,SAAQ,GAAC,MAAK,GAAC,KAAI,GAAC,EAC7F,CAACG,MACA,OAAC,EAAAM,QAAA,CACC,UAAU,mDACV,OAAQV,GAAK,IACb,IAAKA,GAAK,IACV,aAAa,6BACf,KAEF,OAAC,OACC,UAAU,uCACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,GACF,CAEJ,EAEA,IAAOf,KAAQ,cAAWU,CAAe",
|
|
6
6
|
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_right", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "videoTitle_html", "Button", "Picture"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import m,{useRef as y}from"react";import{useGSAP as N}from"@gsap/react";import w from"gsap";import{ScrollTrigger as B}from"gsap/ScrollTrigger";import{Button as c,Heading as H,Picture as R,Text as x}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as z}from"../../shared/Styles.js";const g=m.forwardRef(({data:d,className:u},f)=>{const{title:n,subtitle:b,pcImage:h,mobileImage:v,primaryButton:r,secondaryButton:l,theme:k="light",caption:s=[]}=d,p=y(null);return N(()=>{const i=p.current?.clientHeight||0;return console.log("bgImageRef height",i),w.to(p.current,{scrollTrigger:{trigger:p.current,start:"40% top",end:"bottom top",scrub:!0},y:"50%",ease:"linear"}),()=>{B.getAll().forEach(o=>o.kill())}}),a("div",{"data-ui-component-id":"HeroBanner",ref:f,className:e(k==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",u),children:[t(R,{ref:p,className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${h
|
|
1
|
+
"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import m,{useRef as y}from"react";import{useGSAP as N}from"@gsap/react";import w from"gsap";import{ScrollTrigger as B}from"gsap/ScrollTrigger";import{Button as c,Heading as H,Picture as R,Text as x}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as z}from"../../shared/Styles.js";const g=m.forwardRef(({data:d,className:u},f)=>{const{title:n,subtitle:b,pcImage:h,mobileImage:v,primaryButton:r,secondaryButton:l,theme:k="light",caption:s=[]}=d,p=y(null);return N(()=>{const i=p.current?.clientHeight||0;return console.log("bgImageRef height",i),w.to(p.current,{scrollTrigger:{trigger:p.current,start:"40% top",end:"bottom top",scrub:!0},y:"50%",ease:"linear"}),()=>{B.getAll().forEach(o=>o.kill())}}),a("div",{"data-ui-component-id":"HeroBanner",ref:f,className:e(k==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",u),children:[t(R,{ref:p,className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${h?.url||""} , ${v?.url||""} 767`}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[n&&a("div",{className:"laptop:text-left max-w-[686px]",children:[t(H,{as:"h1",size:5,className:e("hero-banner-title"),html:n}),t(x,{as:"p",className:e("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:b})]}),a("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[l&&l.text&&t(c,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:l.text}),r&&r.text&&t(c,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:r.text})]})]}),s.length>0&&t("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:s.map((i,o)=>a(m.Fragment,{children:[t(x,{className:e("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:i.title}),o<s.length-1&&t("div",{className:e("bg-info-primary w-px")})]},o))})]})});g.displayName="HeroBanner";var F=z(g);export{F as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgImageRef = useRef<HTMLPictureElement>(null)\n\n useGSAP(() => {\n const h = bgImageRef.current?.clientHeight || 0\n console.log('bgImageRef height', h)\n gsap.to(bgImageRef.current!, {\n scrollTrigger: {\n trigger: bgImageRef.current,\n start: `40% top`,\n end: 'bottom top',\n scrub: true,\n },\n y: '50%',\n ease: 'linear',\n })\n\n return () => {\n ScrollTrigger.getAll().forEach(trigger => trigger.kill())\n }\n })\n return (\n <div\n data-ui-component-id=\"HeroBanner\"\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture\n ref={bgImageRef}\n className=\"laptop:w-full absolute h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage
|
|
5
|
-
"mappings": "aA2CM,cAAAA,EAUI,QAAAC,MAVJ,oBA1CN,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAOC,MAAU,OACjB,OAAS,iBAAAC,MAAqB,qBAE9B,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaX,EAAM,WAA4C,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,EAAatB,EAA2B,IAAI,EAElD,OAAAC,EAAQ,IAAM,CACZ,MAAMsB,EAAID,EAAW,SAAS,cAAgB,EAC9C,eAAQ,IAAI,oBAAqBC,CAAC,EAClCrB,EAAK,GAAGoB,EAAW,QAAU,CAC3B,cAAe,CACb,QAASA,EAAW,QACpB,MAAO,UACP,IAAK,aACL,MAAO,EACT,EACA,EAAG,MACH,KAAM,QACR,CAAC,EAEM,IAAM,CACXnB,EAAc,OAAO,EAAE,QAAQqB,GAAWA,EAAQ,KAAK,CAAC,CAC1D,CACF,CAAC,EAEC1B,EAAC,OACC,uBAAqB,aACrB,IAAKe,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAf,EAACS,EAAA,CACC,IAAKgB,EACL,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGN,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgImageRef = useRef<HTMLPictureElement>(null)\n\n useGSAP(() => {\n const h = bgImageRef.current?.clientHeight || 0\n console.log('bgImageRef height', h)\n gsap.to(bgImageRef.current!, {\n scrollTrigger: {\n trigger: bgImageRef.current,\n start: `40% top`,\n end: 'bottom top',\n scrub: true,\n },\n y: '50%',\n ease: 'linear',\n })\n\n return () => {\n ScrollTrigger.getAll().forEach(trigger => trigger.kill())\n }\n })\n return (\n <div\n data-ui-component-id=\"HeroBanner\"\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture\n ref={bgImageRef}\n className=\"laptop:w-full absolute h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n />\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n {title && (\n <div className=\"laptop:text-left max-w-[686px]\">\n <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n <Text\n as=\"p\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n </div>\n )}\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n {secondaryButton && secondaryButton.text && (\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n className={cn(\n 'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "aA2CM,cAAAA,EAUI,QAAAC,MAVJ,oBA1CN,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAOC,MAAU,OACjB,OAAS,iBAAAC,MAAqB,qBAE9B,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaX,EAAM,WAA4C,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,EAAatB,EAA2B,IAAI,EAElD,OAAAC,EAAQ,IAAM,CACZ,MAAMsB,EAAID,EAAW,SAAS,cAAgB,EAC9C,eAAQ,IAAI,oBAAqBC,CAAC,EAClCrB,EAAK,GAAGoB,EAAW,QAAU,CAC3B,cAAe,CACb,QAASA,EAAW,QACpB,MAAO,UACP,IAAK,aACL,MAAO,EACT,EACA,EAAG,MACH,KAAM,QACR,CAAC,EAEM,IAAM,CACXnB,EAAc,OAAO,EAAE,QAAQqB,GAAWA,EAAQ,KAAK,CAAC,CAC1D,CACF,CAAC,EAEC1B,EAAC,OACC,uBAAqB,aACrB,IAAKe,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAf,EAACS,EAAA,CACC,IAAKgB,EACL,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGN,GAAS,KAAO,EAAE,MAAMC,GAAa,KAAO,EAAE,OAC3D,EAGAnB,EAAC,OAAI,UAAU,6LACZ,UAAAgB,GACChB,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACQ,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMM,EAAO,EAC3EjB,EAACU,EAAA,CACC,GAAG,IACH,UAAWC,EACT,oHACF,EACA,KAAMO,EACR,GACF,EAGFjB,EAAC,OAAI,UAAU,4DACZ,UAAAqB,GAAmBA,EAAgB,MAClCtB,EAACO,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAe,EAAgB,KACnB,EAEDD,GAAiBA,EAAc,MAC9BrB,EAACO,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAc,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAQ,OAAS,GAChBxB,EAAC,OAAI,UAAU,uKACZ,SAAAwB,EAAQ,IAAI,CAACI,EAAGC,IACf5B,EAACC,EAAM,SAAN,CACC,UAAAF,EAACU,EAAA,CACC,UAAWC,EACT,8KACF,EACA,KAAMiB,EAAE,MACV,EACCC,EAAQL,EAAQ,OAAS,GAAKxB,EAAC,OAAI,UAAWW,EAAG,sBAAsB,EAAG,IAPxDkB,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDhB,EAAW,YAAc,aAEzB,IAAOiB,EAAQlB,EAAWC,CAAU",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgImageRef", "h", "trigger", "c", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useState as
|
|
1
|
+
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useState as g,useRef as b}from"react";import{cn as n}from"../../helpers/utils.js";import{withStyles as h}from"../../shared/Styles.js";import x from"../../components/picture.js";import k from"../../components/button.js";import{convertLexicalToHTML as d}from"@payloadcms/richtext-lexical/html";import{Right as w}from"./right.js";const N=({className:u="",data:{title:a,videoTitle:l,btnText:r,img:c,video:m,theme:f,shape:v}})=>{const[s,i]=g(!1),e=b(null),p=typeof a=="string"?a:a&&d({data:a}),y=typeof l=="string"?l:l&&d({data:l});return o("div",{className:n(" relative w-full",u,{"aiui-dark":f==="dark","rounded-box":v==="rounded"}),children:[o("div",{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:[t("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:!s&&p?p:y||""}}),!s&&r&&o(k,{variant:"link",className:n("member-equity-button-secondary"),onClick:()=>{s?(e.current&&e.current.pause(),i(!1)):(e.current&&e.current.play(),i(!0))},children:[r,t(w,{})]})]}),o("div",{className:"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1440] desktop:aspect-h-[700] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] aspect-w-[390] aspect-h-[660] relative overflow-hidden",children:[t("video",{ref:e,className:"size-full object-cover",src:m?.url,autoPlay:!0,muted:!0,loop:!0}),!s&&t(x,{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"}),t("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})]})};var C=h(N);export{C 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 } 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'\nimport { Right } from './right.js'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n const videoRef = useRef<HTMLVideoElement>(null)\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 return (\n <div\n className={cn(' relative 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 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\">\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: !isPlaying && title_html ? title_html : videoTitle_html || '' }}\n />\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary')}\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 >\n {btnText}\n <Right />\n </Button>\n )}\n </div>\n <div className=\"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]
|
|
5
|
-
"mappings": "aA6BQ,cAAAA,EAKE,QAAAC,MALF,oBA5BR,OAAgB,YAAAC,EAAU,UAAAC,MAAc,QACxC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,SAAAC,MAAa,aAEtB,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,CAAM,CAC/D,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIlB,EAAS,EAAK,EAC1CmB,EAAWlB,EAAyB,IAAI,EAExCmB,EAAa,OAAOV,GAAU,SAAWA,EAAQA,GAASJ,EAAqB,CAAE,KAAMI,CAAM,CAAC,EAC9FW,EACJ,OAAOV,GAAe,SAAWA,EAAaA,GAAcL,EAAqB,CAAE,KAAMK,CAAW,CAAC,EAEvG,OACEZ,EAAC,OACC,UAAWG,EAAG,mBAAoBO,EAAW,CAC3C,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,UAAAjB,EAAC,OAAI,UAAU,kHACb,UAAAD,EAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQ,CAACmB,GAAaG,EAAaA,EAAaC,GAAmB,EAAG,EACnG,EACC,CAACJ,GAAaL,GACbb,EAACM,EAAA,CACC,QAAQ,OACR,UAAWH,EAAG,gCAAgC,EAC9C,QAAS,IAAM,CACTe,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,UAAAN,EACDd,EAACS,EAAA,EAAM,GACT,GAEJ,EACAR,EAAC,OAAI,UAAU,
|
|
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/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { Right } from './right.js'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n const videoRef = useRef<HTMLVideoElement>(null)\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 return (\n <div\n className={cn(' relative 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 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\">\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: !isPlaying && title_html ? title_html : videoTitle_html || '' }}\n />\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary')}\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 >\n {btnText}\n <Right />\n </Button>\n )}\n </div>\n <div className=\"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1440] desktop:aspect-h-[700] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] aspect-w-[390] aspect-h-[660] relative overflow-hidden\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n {!isPlaying && (\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=\"absolute left-0 top-0 z-10 size-full\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "aA6BQ,cAAAA,EAKE,QAAAC,MALF,oBA5BR,OAAgB,YAAAC,EAAU,UAAAC,MAAc,QACxC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,SAAAC,MAAa,aAEtB,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,CAAM,CAC/D,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIlB,EAAS,EAAK,EAC1CmB,EAAWlB,EAAyB,IAAI,EAExCmB,EAAa,OAAOV,GAAU,SAAWA,EAAQA,GAASJ,EAAqB,CAAE,KAAMI,CAAM,CAAC,EAC9FW,EACJ,OAAOV,GAAe,SAAWA,EAAaA,GAAcL,EAAqB,CAAE,KAAMK,CAAW,CAAC,EAEvG,OACEZ,EAAC,OACC,UAAWG,EAAG,mBAAoBO,EAAW,CAC3C,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,UAAAjB,EAAC,OAAI,UAAU,kHACb,UAAAD,EAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQ,CAACmB,GAAaG,EAAaA,EAAaC,GAAmB,EAAG,EACnG,EACC,CAACJ,GAAaL,GACbb,EAACM,EAAA,CACC,QAAQ,OACR,UAAWH,EAAG,gCAAgC,EAC9C,QAAS,IAAM,CACTe,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,UAAAN,EACDd,EAACS,EAAA,EAAM,GACT,GAEJ,EACAR,EAAC,OAAI,UAAU,4OACb,UAAAD,EAAC,SAAM,IAAKqB,EAAU,UAAU,yBAAyB,IAAKL,GAAO,IAAK,SAAQ,GAAC,MAAK,GAAC,KAAI,GAAC,EAC7F,CAACG,GACAnB,EAACM,EAAA,CACC,UAAU,mDACV,OAAQS,GAAK,IACb,IAAKA,GAAK,IACV,aAAa,6BACf,EAEFf,EAAC,OACC,UAAU,uCACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,GACF,CAEJ,EAEA,IAAOwB,EAAQnB,EAAWK,CAAe",
|
|
6
6
|
"names": ["jsx", "jsxs", "useState", "useRef", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "Right", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "videoTitle_html", "MediaPlayerBase_default"]
|
|
7
7
|
}
|