@anker-in/headless-ui 1.0.16-alpha.1 → 1.0.16-alpha.10
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/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/cjs/biz-components/TextModal/index.js +1 -1
- package/dist/cjs/biz-components/TextModal/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/biz-components/Title/types.d.ts +1 -0
- package/dist/cjs/biz-components/Title/types.js +1 -1
- package/dist/cjs/biz-components/Title/types.js.map +1 -1
- package/dist/cjs/components/board.d.ts +3 -1
- package/dist/cjs/components/board.js +1 -1
- package/dist/cjs/components/board.js.map +3 -3
- package/dist/cjs/components/picture.js +1 -1
- package/dist/cjs/components/picture.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/esm/biz-components/TextModal/index.js +1 -1
- package/dist/esm/biz-components/TextModal/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/Title/types.d.ts +1 -0
- package/dist/esm/components/board.d.ts +3 -1
- package/dist/esm/components/board.js +1 -1
- package/dist/esm/components/board.js.map +3 -3
- package/dist/esm/components/picture.js +1 -1
- package/dist/esm/components/picture.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/TextModal/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n textVisible: boolean\n extension?: {\n textPcImg: Img\n textMobileImg: Img\n textTitle: string\n text: string\n textDesc: string\n }\n onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n const { textVisible, extension, onCloseModal } = props\n\n return (\n <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n <DialogContent className=\"
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GA0BY,IAAAI,EAAA,6BAzBZC,EAAsC,sCACtCC,EAA8B,qCAC9BC,EAAmB,kCAenB,MAAML,EAAaM,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,SACE,OAAC,UAAO,KAAMC,EAAa,aAAc,IAAME,EAAa,EAC1D,mBAAC,iBAAc,UAAU,
|
|
4
|
+
"sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n textVisible: boolean\n extension?: {\n textPcImg: Img\n textMobileImg: Img\n textTitle: string\n text: string\n textDesc: string\n }\n onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n const { textVisible, extension, onCloseModal } = props\n\n return (\n <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n <DialogContent className=\"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n <div className=\"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col\">\n <div className=\"min-h-[260px] w-full md-tablet:flex-1\">\n <Picture\n source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n <div className=\"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4\">\n <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n </div>\n <div onClick={() => onCloseModal()} className=\"absolute right-4 top-4 cursor-pointer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n <g clip-path=\"url(#clip0_2548_10038)\">\n <path\n d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n <div className=\"tablet:p-8 p-4 text-[#1D1D1F] tablet:max-h-60 md-tablet:flex-1 overflow-y-auto\">\n <Text html={extension?.text} className=\" tablet:text-2xl text-xl font-bold leading-[1.2]\" />\n <br />\n <Text html={extension?.textDesc} className=\"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]\" />\n </div>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport { TextModal }\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GA0BY,IAAAI,EAAA,6BAzBZC,EAAsC,sCACtCC,EAA8B,qCAC9BC,EAAmB,kCAenB,MAAML,EAAaM,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,SACE,OAAC,UAAO,KAAMC,EAAa,aAAc,IAAME,EAAa,EAC1D,mBAAC,iBAAc,UAAU,gJACvB,oBAAC,OAAI,UAAU,kFACb,oBAAC,OAAI,UAAU,wCACb,mBAAC,WACC,OAAQ,GAAGD,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,YACV,aAAa,6BACf,EACF,KACA,OAAC,OAAI,UAAU,yDACb,mBAAC,QAAK,KAAMA,GAAW,UAAW,UAAU,yDAAyD,EACvG,KACA,OAAC,OAAI,QAAS,IAAMC,EAAa,EAAG,UAAU,wCAC5C,mBAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,KAAE,YAAU,yBACX,mBAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,KACA,QAAC,OAAI,UAAU,iFACb,oBAAC,QAAK,KAAMD,GAAW,KAAM,UAAU,mDAAmD,KAC1F,OAAC,OAAG,KACJ,OAAC,QAAK,KAAMA,GAAW,SAAU,UAAU,8DAA8D,GAC3G,GACF,EACF,EACF,CAEJ",
|
|
6
6
|
"names": ["TextModal_exports", "__export", "TextModal", "__toCommonJS", "import_jsx_runtime", "import_dialog", "import_components", "import_helpers", "props", "textVisible", "extension", "onCloseModal"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var G=Object.create;var m=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var X=(t,e)=>{for(var n in e)m(t,n,{get:e[n],enumerable:!0})},M=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!W.call(t,o)&&o!==n&&m(t,o,{get:()=>e[o],enumerable:!(c=J(e,o))||c.enumerable});return t};var Y=(t,e,n)=>(n=t!=null?G(Q(t)):{},M(e||!t||!t.__esModule?m(n,"default",{value:t,enumerable:!0}):n,t)),Z=t=>M(m({},"__esModule",{value:!0}),t);var et={};X(et,{default:()=>tt});module.exports=Z(et);var i=require("react/jsx-runtime"),r=Y(require("react")),u=require("gsap"),T=require("gsap/dist/SplitText"),k=require("gsap/dist/ScrollTrigger"),y=require("../../helpers/utils.js"),$=require("../../components/index.js"),D=require("../../shared/Styles.js"),P=require("../../hooks/useExposure.js"),S=require("../../shared/trackUrlRef.js"),z=require("react-intersection-observer");const v="link",x="title",N=r.default.forwardRef(({data:t,className:e,as:n="h2"},c)=>{const{title:o,caption:p,theme:b,extensions:f}=t,d=(0,r.useRef)(null),l=(0,r.useRef)(null),s=(0,r.useRef)(null),a=(0,r.useRef)(null),{ref:I,inView:R}=(0,z.useInView)();return(0,r.useImperativeHandle)(c,()=>d.current),(0,P.useExposure)(d,{componentType:v,componentName:x,componentTitle:t?.title}),(0,r.useEffect)(()=>{u.gsap.registerPlugin(T.SplitText,k.ScrollTrigger);function V(){if(!l.current)return;const U=l.current?.clientHeight||80;s.current&&s.current.revert(),a.current&&a.current.kill(),s.current=new T.SplitText(l.current,{type:"words",wordsClass:"word"});const g=s.current.words;u.gsap.set(g,{opacity:0}),a.current=k.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${U*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:j=>{const B=j.progress,L=g.length||1,C=.5,h=1/L,E=h*(1-C),H=(L-1)*E+h,F=Math.min(1,H>0?B/H:0);g.forEach((O,_)=>{const q=_*E,A=h;let w=(F-q)/A;w=Math.max(0,Math.min(1,w)),u.gsap.set(O,{opacity:w})})}})}return R&&V(),()=>{s.current&&s.current.revert(),a.current&&a.current.kill()}},[R]),(o||p)&&(0,i.jsxs)("div",{className:"mb-6 flex items-end justify-between overflow-hidden title-box",ref:d,children:[(0,i.jsx)("div",{ref:I,className:(0,y.cn)("space-y-4 flex-1",e,{"aiui-dark":b==="dark"}),children:(0,i.jsx)($.Heading,{ref:l,as:n,size:4,html:p||o})}),f?.textLink&&(0,i.jsxs)("a",{className:(0,y.cn)({"aiui-dark":b==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,S.trackUrlRef)(f?.link,`${v}_${x}`),"data-headless-type-name":`${v}#${x}`,"data-headless-title-desc-button":`${o}#${p}`,children:[f?.textLink,(0,i.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,i.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})]})]})});N.displayName="Title";var tt=(0,D.withLayout)(N);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }, ref) => {\n const { title, caption, theme, extensions } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,
|
|
6
|
-
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2' }, ref) => {\n const { title, caption, theme, extensions } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div className=\"mb-6 flex items-end justify-between overflow-hidden title-box\" ref={innerRef}>\n <div ref={inViewRef} className={cn('space-y-4 flex-1', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as={as} size={4} html={caption || title} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n {extensions?.textLink}\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n ></path>\n </svg>\n </a>\n )}\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "as", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var o=(t,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of h(e))!p.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(s=n(e,r))||s.enumerable});return t};var m=t=>o(a({},"__esModule",{value:!0}),t);var c={};module.exports=m(c);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n}\n\nexport interface TitleProps {\n data: {\n /**\n * \u4E3B\u6807\u9898\n */\n title?: string\n caption?: string\n /**\n * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n */\n features?: Feature[]\n /**\n * \u4E3B\u9898\u8272\n */\n theme?: Theme\n /**\n * \u6269\u5C55\u6570\u636E\n */\n extensions?: any\n }\n /**\n * \u81EA\u5B9A\u4E49\u7C7B\u540D\n */\n className?: string\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n}\n\nexport interface TitleProps {\n data: {\n /**\n * \u4E3B\u6807\u9898\n */\n title?: string\n caption?: string\n /**\n * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n */\n features?: Feature[]\n /**\n * \u4E3B\u9898\u8272\n */\n theme?: Theme\n /**\n * \u6269\u5C55\u6570\u636E\n */\n extensions?: any\n }\n /**\n * \u81EA\u5B9A\u4E49\u7C7B\u540D\n */\n className?: string\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\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";var t=Object.defineProperty;var
|
|
1
|
+
"use strict";var l=Object.create;var t=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var o=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty;var h=(C,H)=>{for(var L in H)t(C,L,{get:H[L],enumerable:!0})},M=(C,H,L,i)=>{if(H&&typeof H=="object"||typeof H=="function")for(let e of s(H))!a.call(C,e)&&e!==L&&t(C,e,{get:()=>H[e],enumerable:!(i=r(H,e))||i.enumerable});return C};var d=(C,H,L)=>(L=C!=null?l(o(C)):{},M(H||!C||!C.__esModule?t(L,"default",{value:C,enumerable:!0}):L,C)),f=C=>M(t({},"__esModule",{value:!0}),C);var w={};h(w,{default:()=>v});module.exports=f(w);var V=require("react/jsx-runtime"),Z=require("./container"),n=d(require("./link"));const m=({href:C})=>(0,V.jsx)(n.default,{href:C,asChild:!C,children:(0,V.jsx)("div",{className:"relative z-[46] h-[30px]",children:(0,V.jsx)(Z.Container,{childClassName:"flex !bg-[#1D1D1F] items-center justify-end",className:"h-full",children:(0,V.jsx)(p,{})})})}),p=C=>(0,V.jsxs)("svg",{width:"148",height:"10",viewBox:"0 0 148 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",...C,children:[(0,V.jsx)("path",{d:"M88.5391 1.66872C90.8392 1.6688 92.7041 3.53461 92.7041 5.83474C92.7039 8.13468 90.839 9.9997 88.5391 9.99977C86.239 9.99977 84.3733 8.13473 84.373 5.83474C84.373 3.53456 86.2389 1.66872 88.5391 1.66872ZM106.479 1.66872C107.484 1.66872 108.407 2.02531 109.127 2.61892L109.477 1.86208H110.645V9.79958H109.477L109.13 9.0486C108.409 9.64225 107.486 9.99977 106.479 9.99977C104.179 9.99954 102.314 8.13458 102.313 5.83474C102.313 3.53471 104.179 1.66896 106.479 1.66872ZM126.684 1.66872C128.984 1.66872 130.849 3.53456 130.849 5.83474C130.848 8.13473 128.984 9.99977 126.684 9.99977C124.384 9.99972 122.519 8.13469 122.519 5.83474C122.519 3.5346 124.383 1.66878 126.684 1.66872ZM144.748 1.66188C146.602 1.66198 147.794 2.66292 147.823 4.20778H146.278C146.249 3.44345 145.631 3.04577 144.719 3.04567C143.806 3.04567 143.247 3.429 143.247 4.0027C143.247 4.7082 144.07 4.85598 145.026 5.0027L145.025 5.00173C146.365 5.23788 147.998 5.48784 147.998 7.44509C147.998 8.98988 146.716 9.99001 144.775 9.99001C142.834 9.98986 141.568 8.93061 141.524 7.28298H143.128C143.172 8.12086 143.878 8.54763 144.835 8.54763C145.703 8.5475 146.38 8.17982 146.38 7.51833C146.38 6.76851 145.527 6.5909 144.556 6.42946C143.232 6.20932 141.673 5.90104 141.673 4.0613C141.673 2.6337 142.893 1.66188 144.748 1.66188ZM115.1 1.85427H117.434V3.24685H115.102V6.85524C115.102 7.79295 115.614 8.32097 116.582 8.32106H117.478V9.80251L116.275 9.8406C114.545 9.84058 113.474 8.76932 113.474 7.02419V3.24685H112.285V2.93532L114.577 0.000751495H115.1V1.85427ZM63.7627 9.79958H62.1367V-0.000225067H63.7627V9.79958ZM97.5566 7.32302L100.108 1.85427H101.884L98.1787 9.79958H96.9355L93.2305 1.85427H95.0059L97.5566 7.32302ZM120.852 9.79958H119.226V3.24587H120.852V9.79958ZM67.8779 2.61892C68.6117 2.02787 69.5403 1.67165 70.5557 1.67165H70.5566C72.1803 1.67165 73.498 2.98838 73.498 4.61208V9.7986H71.8711V4.96462C71.8711 4.00413 71.0923 3.22462 70.1318 3.22438C68.9018 3.22438 67.9045 4.221 67.9043 5.45095V9.7986H66.2725V1.67165H67.4404L67.8779 2.61892ZM77.3252 2.61892C78.059 2.02789 78.9876 1.67165 80.0029 1.67165H80.0039C81.6276 1.67165 82.9443 2.98838 82.9443 4.61208V9.7986H81.3184V4.96462C81.3184 4.00399 80.5388 3.22438 79.5781 3.22438C78.3483 3.2246 77.3518 4.22113 77.3516 5.45095V9.7986H75.7197V1.67165H76.8877L77.3252 2.61892ZM133.85 1.67165L134.287 2.61892C135.021 2.02792 135.95 1.67173 136.965 1.67165H136.967C138.59 1.67181 139.907 2.98848 139.907 4.61208V9.7986H138.28V4.96462C138.28 4.00403 137.502 3.22446 136.541 3.22438C135.311 3.22438 134.315 4.221 134.314 5.45095V9.7986H132.683V1.67165H133.85ZM88.5391 3.29567C87.1368 3.29567 86 4.43248 86 5.83474C86.0002 7.23681 87.1369 8.3738 88.5391 8.3738C89.9411 8.37372 91.0779 7.23676 91.0781 5.83474C91.0781 4.43253 89.9412 3.29575 88.5391 3.29567ZM106.479 3.29567C105.076 3.29591 103.94 4.43263 103.94 5.83474C103.941 7.23666 105.077 8.37356 106.479 8.3738C107.881 8.3738 109.017 7.23681 109.018 5.83474C109.018 4.43248 107.881 3.29567 106.479 3.29567ZM126.684 3.29567C125.281 3.29573 124.145 4.43252 124.145 5.83474C124.145 7.23677 125.282 8.37374 126.684 8.3738C128.086 8.3738 129.222 7.23681 129.223 5.83474C129.223 4.43248 128.086 3.29567 126.684 3.29567ZM120.852 1.84938H119.226V-0.000225067H120.852V1.84938Z",fill:"white"}),(0,V.jsx)("path",{d:"M11.124 10.0002H8.73438L5.63672 3.35569L2.53809 10.0002H0.148438L4.81152 0.000221252H6.46191L11.124 10.0002ZM20.3516 6.48264V0.000221252H22.5371V9.99924H20.3516L15.2871 3.51682V9.99924H13.1016V0.000221252H15.2871L20.3516 6.48264ZM27.209 9.99924H25.0234V0.000221252H27.209V9.99924ZM30.3037 4.99924L34.21 9.99924H31.4619L27.5586 4.99632L31.4619 0.000221252H34.21L30.3037 4.99924ZM44.6006 2.00413H38.1348V3.99827H43.2354V6.0012H38.1348V7.99534H44.6006V9.99924H35.9492V0.000221252H44.6006V2.00413ZM52.3105 0.000221252C54.2297 0.000274701 55.7852 1.55571 55.7852 3.47483C55.7851 5.0072 54.7924 6.30365 53.416 6.76585L55.9414 9.99729H53.1934L49.29 4.99534H52.2998C53.1392 4.99513 53.8203 4.31423 53.8203 3.47483C53.8203 2.63538 53.1392 1.95453 52.2998 1.95432H48.7715V9.99924H46.5859V0.000221252H52.3105Z",fill:"white"})]});var v=m;
|
|
2
2
|
//# sourceMappingURL=board.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/board.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Container } from './container'\n\nconst Board = () => {\n return (\n <div className=\"relative z-[46] h-[30px]\">\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["board_exports", "__export", "board_default", "__toCommonJS", "import_jsx_runtime", "import_container", "Board", "AnkerInnovations", "props"]
|
|
4
|
+
"sourcesContent": ["import { Container } from './container'\nimport Link from './link'\n\nconst Board = ({ href }: { href?: string }) => {\n return (\n <Link href={href} asChild={!href}>\n <div className=\"relative z-[46] h-[30px]\">\n <Container childClassName=\"flex !bg-[#1D1D1F] items-center justify-end\" className=\"h-full\">\n <AnkerInnovations />\n </Container>\n </div>\n </Link>\n )\n}\n\nconst AnkerInnovations = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"148\" height=\"10\" viewBox=\"0 0 148 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M88.5391 1.66872C90.8392 1.6688 92.7041 3.53461 92.7041 5.83474C92.7039 8.13468 90.839 9.9997 88.5391 9.99977C86.239 9.99977 84.3733 8.13473 84.373 5.83474C84.373 3.53456 86.2389 1.66872 88.5391 1.66872ZM106.479 1.66872C107.484 1.66872 108.407 2.02531 109.127 2.61892L109.477 1.86208H110.645V9.79958H109.477L109.13 9.0486C108.409 9.64225 107.486 9.99977 106.479 9.99977C104.179 9.99954 102.314 8.13458 102.313 5.83474C102.313 3.53471 104.179 1.66896 106.479 1.66872ZM126.684 1.66872C128.984 1.66872 130.849 3.53456 130.849 5.83474C130.848 8.13473 128.984 9.99977 126.684 9.99977C124.384 9.99972 122.519 8.13469 122.519 5.83474C122.519 3.5346 124.383 1.66878 126.684 1.66872ZM144.748 1.66188C146.602 1.66198 147.794 2.66292 147.823 4.20778H146.278C146.249 3.44345 145.631 3.04577 144.719 3.04567C143.806 3.04567 143.247 3.429 143.247 4.0027C143.247 4.7082 144.07 4.85598 145.026 5.0027L145.025 5.00173C146.365 5.23788 147.998 5.48784 147.998 7.44509C147.998 8.98988 146.716 9.99001 144.775 9.99001C142.834 9.98986 141.568 8.93061 141.524 7.28298H143.128C143.172 8.12086 143.878 8.54763 144.835 8.54763C145.703 8.5475 146.38 8.17982 146.38 7.51833C146.38 6.76851 145.527 6.5909 144.556 6.42946C143.232 6.20932 141.673 5.90104 141.673 4.0613C141.673 2.6337 142.893 1.66188 144.748 1.66188ZM115.1 1.85427H117.434V3.24685H115.102V6.85524C115.102 7.79295 115.614 8.32097 116.582 8.32106H117.478V9.80251L116.275 9.8406C114.545 9.84058 113.474 8.76932 113.474 7.02419V3.24685H112.285V2.93532L114.577 0.000751495H115.1V1.85427ZM63.7627 9.79958H62.1367V-0.000225067H63.7627V9.79958ZM97.5566 7.32302L100.108 1.85427H101.884L98.1787 9.79958H96.9355L93.2305 1.85427H95.0059L97.5566 7.32302ZM120.852 9.79958H119.226V3.24587H120.852V9.79958ZM67.8779 2.61892C68.6117 2.02787 69.5403 1.67165 70.5557 1.67165H70.5566C72.1803 1.67165 73.498 2.98838 73.498 4.61208V9.7986H71.8711V4.96462C71.8711 4.00413 71.0923 3.22462 70.1318 3.22438C68.9018 3.22438 67.9045 4.221 67.9043 5.45095V9.7986H66.2725V1.67165H67.4404L67.8779 2.61892ZM77.3252 2.61892C78.059 2.02789 78.9876 1.67165 80.0029 1.67165H80.0039C81.6276 1.67165 82.9443 2.98838 82.9443 4.61208V9.7986H81.3184V4.96462C81.3184 4.00399 80.5388 3.22438 79.5781 3.22438C78.3483 3.2246 77.3518 4.22113 77.3516 5.45095V9.7986H75.7197V1.67165H76.8877L77.3252 2.61892ZM133.85 1.67165L134.287 2.61892C135.021 2.02792 135.95 1.67173 136.965 1.67165H136.967C138.59 1.67181 139.907 2.98848 139.907 4.61208V9.7986H138.28V4.96462C138.28 4.00403 137.502 3.22446 136.541 3.22438C135.311 3.22438 134.315 4.221 134.314 5.45095V9.7986H132.683V1.67165H133.85ZM88.5391 3.29567C87.1368 3.29567 86 4.43248 86 5.83474C86.0002 7.23681 87.1369 8.3738 88.5391 8.3738C89.9411 8.37372 91.0779 7.23676 91.0781 5.83474C91.0781 4.43253 89.9412 3.29575 88.5391 3.29567ZM106.479 3.29567C105.076 3.29591 103.94 4.43263 103.94 5.83474C103.941 7.23666 105.077 8.37356 106.479 8.3738C107.881 8.3738 109.017 7.23681 109.018 5.83474C109.018 4.43248 107.881 3.29567 106.479 3.29567ZM126.684 3.29567C125.281 3.29573 124.145 4.43252 124.145 5.83474C124.145 7.23677 125.282 8.37374 126.684 8.3738C128.086 8.3738 129.222 7.23681 129.223 5.83474C129.223 4.43248 128.086 3.29567 126.684 3.29567ZM120.852 1.84938H119.226V-0.000225067H120.852V1.84938Z\"\n fill=\"white\"\n />\n <path\n d=\"M11.124 10.0002H8.73438L5.63672 3.35569L2.53809 10.0002H0.148438L4.81152 0.000221252H6.46191L11.124 10.0002ZM20.3516 6.48264V0.000221252H22.5371V9.99924H20.3516L15.2871 3.51682V9.99924H13.1016V0.000221252H15.2871L20.3516 6.48264ZM27.209 9.99924H25.0234V0.000221252H27.209V9.99924ZM30.3037 4.99924L34.21 9.99924H31.4619L27.5586 4.99632L31.4619 0.000221252H34.21L30.3037 4.99924ZM44.6006 2.00413H38.1348V3.99827H43.2354V6.0012H38.1348V7.99534H44.6006V9.99924H35.9492V0.000221252H44.6006V2.00413ZM52.3105 0.000221252C54.2297 0.000274701 55.7852 1.55571 55.7852 3.47483C55.7851 5.0072 54.7924 6.30365 53.416 6.76585L55.9414 9.99729H53.1934L49.29 4.99534H52.2998C53.1392 4.99513 53.8203 4.31423 53.8203 3.47483C53.8203 2.63538 53.1392 1.95453 52.2998 1.95432H48.7715V9.99924H46.5859V0.000221252H52.3105Z\"\n fill=\"white\"\n />\n </svg>\n )\n}\n\nexport default Board\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAQU,IAAAI,EAAA,6BARVC,EAA0B,uBAC1BC,EAAiB,qBAEjB,MAAMC,EAAQ,CAAC,CAAE,KAAAC,CAAK,OAElB,OAAC,EAAAC,QAAA,CAAK,KAAMD,EAAM,QAAS,CAACA,EAC1B,mBAAC,OAAI,UAAU,2BACb,mBAAC,aAAU,eAAe,8CAA8C,UAAU,SAChF,mBAACE,EAAA,EAAiB,EACpB,EACF,EACF,EAIEA,EAAoBC,MAEtB,QAAC,OAAI,MAAM,MAAM,OAAO,KAAK,QAAQ,aAAa,KAAK,OAAO,MAAM,6BAA8B,GAAGA,EACnG,oBAAC,QACC,EAAE,uqGACF,KAAK,QACP,KACA,OAAC,QACC,EAAE,iyBACF,KAAK,QACP,GACF,EAIJ,IAAOT,EAAQK",
|
|
6
|
+
"names": ["board_exports", "__export", "board_default", "__toCommonJS", "import_jsx_runtime", "import_container", "import_link", "Board", "href", "Link", "AnkerInnovations", "props"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var x=Object.create;var h=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var F=(t,e)=>{for(var r in e)h(t,r,{get:e[r],enumerable:!0})},M=(t,e,r,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of L(e))!j.call(t,i)&&i!==r&&h(t,i,{get:()=>e[i],enumerable:!(m=A(e,i))||m.enumerable});return t};var N=(t,e,r)=>(r=t!=null?x(k(t)):{},M(e||!t||!t.__esModule?h(r,"default",{value:t,enumerable:!0}):r,t)),$=t=>M(h({},"__esModule",{value:!0}),t);var X={};F(X,{default:()=>T});module.exports=$(X);var g=require("react/jsx-runtime"),a=N(require("react"));const v=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],C=3960,Z=3980,z={domains:["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],deviceSizes:[375,768,1024,1280,1440,1540,1920]},D=t=>v.some(e=>t==e),H=(t="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(t),R=a.default.forwardRef(({imgClassName:t="",source:e="",quality:r=2,deviceSizes:m=[375,767,1023,1024,1279,1440,1439,1539,1919,1920],className:i,loading:P="lazy",alt:S="",...w},y)=>{const E=n=>(z?.domains||[]).some(c=>n.includes(c)),u=(0,a.useCallback)(({src:n,width:o})=>{const c=o;try{const s=new URL(n);if(!D(s.hostname))return n;const l=s.pathname.split("/").pop()||"";if(H(l))return n?.split("/")?.map(f=>{if(E(n)&&/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\?.*)?/.test(f)&&/_[0-9]{2,4}x/.test(n)===!1){const p=f.split(".");return p.map((d,_)=>_===p.length-2?`${d}_${c<3960?c:3980}x`:d).join(".")}return f}).join("/")}catch{return n}},[]),b=(0,a.useCallback)(({srcArr:n,width:o})=>{const c=o*r,s=u({src:n[0][0],width:c});let l;return n.forEach(p=>{var d=p[0];p.length>1&&parseInt(p[1],10)>=o&&(l=u({src:d,width:c}))}),(0,g.jsx)("source",{srcSet:l||s,media:`(max-width: ${o}px)`},o)},[u,r]),I=(0,a.useMemo)(()=>{if(typeof e!="string"||!e)return[];let n;try{n=e.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(s=>s.split(" ").filter(Boolean))}catch(s){return console.log(s),[]}const o=m.map(s=>b({srcArr:n,width:s})),c=u({src:n[0][0],width:1920*r});return o.push((0,g.jsx)("img",{src:c,className:`w-full ${t}`,loading:P,alt:S??"",...w},"default")),o},[m,t,u,r,e,b]);return(0,g.jsxs)("picture",{ref:y,className:`block overflow-hidden ${i}`,children:[I,w.children]})});var T=R;
|
|
2
2
|
//# sourceMappingURL=picture.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/picture.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n className,\n loading = 'lazy',\n alt = '',\n ...rest\n }: PictureProps,\n ref\n ) => {\n const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n const size = width\n try {\n const parsedUrl = new URL(src)\n if (!isMatchDomain(parsedUrl.hostname)) {\n return src\n }\n const fileName = parsedUrl.pathname.split('/').pop() || ''\n if (idMatchFileExtensions(fileName)) {\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["picture_exports", "__export", "picture_default", "__toCommonJS", "import_jsx_runtime", "import_react", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "React", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n imgClassName?: string\n /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n source?: string\n /** \u56FE\u7247\u8D28\u91CF */\n quality?: number\n /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n deviceSizes?: number[]\n}\nconst images = {\n domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n deviceSizes: [375, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n imgClassName = '',\n source = '',\n quality = 2,\n deviceSizes = [375, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n className,\n loading = 'lazy',\n alt = '',\n ...rest\n }: PictureProps,\n ref\n ) => {\n const isShopifycdn = (src: string | string[]) => {\n const domains = images?.domains || []\n return domains.some(domain => src.includes(domain))\n }\n\n const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n const size = width\n try {\n const parsedUrl = new URL(src)\n if (!isMatchDomain(parsedUrl.hostname)) {\n return src\n }\n const fileName = parsedUrl.pathname.split('/').pop() || ''\n if (idMatchFileExtensions(fileName)) {\n return src\n ?.split('/')\n ?.map(item => {\n if (\n isShopifycdn(src) &&\n /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n /_[0-9]{2,4}x/.test(src) === false\n ) {\n const name = item.split('.')\n return name\n .map((v, i) => {\n if (i === name.length - 2) {\n return `${v}_${size < 3960 ? size : 3980}x`\n }\n return v\n })\n .join('.')\n }\n return item\n })\n .join('/')\n }\n } catch (error) {\n return src\n }\n }, [])\n\n const sourceSrcSet = useCallback(\n ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n const computedWidth = width * quality\n const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n let result\n srcArr.forEach(ele => {\n var img = ele[0]\n if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n result = imgSrcSetsize({ src: img, width: computedWidth })\n }\n })\n const srcset = result || def\n return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n },\n [imgSrcSetsize, quality]\n )\n\n const sourceList = useMemo(() => {\n if (typeof source !== 'string' || !source) return []\n let srcArr\n try {\n srcArr = source\n .replace(/[\\r\\n]/g, '')\n .replace(/\\s\\s+/g, ' ')\n .split(',')\n .map(item => item.split(' ').filter(Boolean))\n } catch (error) {\n console.log(error)\n return []\n }\n const sourceList = deviceSizes.map(width => {\n return sourceSrcSet({ srcArr, width })\n })\n\n const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n sourceList.push(\n <img key=\"default\" src={img} className={`w-full ${imgClassName}`} loading={loading} alt={alt ?? ''} {...rest} />\n )\n return sourceList\n }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet])\n\n return (\n <picture ref={ref} className={`block overflow-hidden ${className}`}>\n {sourceList}\n {rest.children}\n </picture>\n )\n }\n)\nexport default Picture\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["picture_exports", "__export", "picture_default", "__toCommonJS", "import_jsx_runtime", "import_react", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "images", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "React", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "isShopifycdn", "src", "imgSrcSetsize", "width", "size", "parsedUrl", "item", "name", "v", "i", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "error"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useMediaQuery as $}from"react-responsive";import G,{useEffect as S,useImperativeHandle as E,useRef as B,useState as r}from"react";import{cn as c}from"../../helpers/utils.js";import{withLayout as
|
|
1
|
+
"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useMediaQuery as $}from"react-responsive";import G,{useEffect as S,useImperativeHandle as E,useRef as B,useState as r}from"react";import{cn as c}from"../../helpers/utils.js";import{withLayout as U}from"../../shared/Styles.js";import H from"../SwiperBox/index.js";import{Button as L,Heading as D,Picture as f,Text as z}from"../../components/index.js";import j from"../Title/index.js";import{VideoModal as R}from"../VideoModal/index.js";import{TextModal as q}from"../TextModal/index.js";import{useExposure as F}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";const m="image",d="graphic",Y=({data:e,configuration:i})=>{const u=()=>{switch(i.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};function b(o){throw new Error("Function not implemented.")}function p(o){throw new Error("Function not implemented.")}function g(o){throw new Error("Function not implemented.")}return t("div",{className:c(u(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:c("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":i?.itemShape==="round"}),children:n("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[e?.href?t("a",{"aria-label":e?.title??e?.description,href:y(e?.href||"",`${m}_${d}`),className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${i?.index+1}`,"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}):t("div",{className:"block size-full cursor-pointer overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),n("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[n("div",{className:c("flex items-end overflow-hidden","graphic-bottom"),children:[n("div",{className:"flex-1 overflow-hidden",children:[t(z,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(D,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:o=>{o.preventDefault(),o.stopPropagation(),i?.onVideoPlayBtnClick?.(i?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:o=>{o.preventDefault(),o.stopPropagation(),i?.onIconClick?.(e,i)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(L,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:y(e?.href,`${m}_${d}`),"data-headless-nav-postion":`''#${i?.index+1}`,"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},k=G.forwardRef(({data:e,className:i},u)=>{const b=$({query:"(max-width: 768px)"}),p=B(null),[g,o]=r(!1),[w,T]=r(""),[N,I]=r(""),[M,V]=r(""),[C,x]=r(null),[P,v]=r(!1),h=l=>{const s=e?.items?.length>3,a=e?.items?.length>2;switch(l){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return s||a?2.3:2;default:return 1.2}};return E(u,()=>p.current),F(p,{componentType:m,componentName:d,componentTitle:e?.title}),S(()=>{const l=p.current?.querySelectorAll(".graphic-description");if(l&&l.length>0){let s=0;l.forEach(a=>{s=Math.max(s,a.offsetHeight)}),l.forEach(a=>{a.style.height=`${s}px`})}},[]),n("div",{className:c("graphicBlock",i),ref:p,children:[n("div",{className:"graphic-box",children:[e?.title&&t(j,{data:{title:e?.title}}),t(H,{id:"Graphic",className:c("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(l,s)=>{o(!0),s?.isYouTube?I?.(s?.youtubeId||""):(T?.(s?.video?.url||""),V?.(s?.mobileVideo?.url||""))},onIconClick:l=>{v(!0),x(l)},title:e?.title}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h()},768:{spaceBetween:16,freeMode:!1,slidesPerView:h(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:h(1440)}}})]}),t(R,{visible:g,youTubeId:N,onCloseModal:()=>o(!1),videoUrl:b&&M||w}),t(q,{textVisible:P,extension:C?.extension,onCloseModal:()=>{v(!1),x(null)}})]})});k.displayName="Graphic";var se=U(k);export{se as default};
|
|
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 { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n function setVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setTextVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setCurrentItem(data: GraphicType) {\n throw new Error('Function not implemented.')\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div\n className=\"relative block size-full cursor-pointer overflow-hidden\"\n >\n <a\n aria-label={data?.title ?? data?.description}\n href={data?.href ? trackUrlRef(data?.href || '', `${componentType}_${componentName}`) : ''}\n className=\"block size-full cursor-pointer overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold 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=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 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 {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\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: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n function setVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setTextVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setCurrentItem(data: GraphicType) {\n throw new Error('Function not implemented.')\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div className=\"relative block size-full cursor-pointer overflow-hidden\">\n {data?.href ? (\n <a\n aria-label={data?.title ?? data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"block size-full cursor-pointer overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n ) : (\n <div className=\"block size-full cursor-pointer overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </div>\n )}\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold 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=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 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 {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\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: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "useMediaQuery", "React", "useEffect", "useImperativeHandle", "useRef", "useState", "cn", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "handleAspect", "setVisible", "arg0", "setTextVisible", "setCurrentItem", "e", "Graphic", "className", "ref", "isMobile", "innerRef", "visible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "textVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "_", "Graphic_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as be,jsx as e,jsxs as c}from"react/jsx-runtime";import{useState as y,useRef as r,useEffect as E,forwardRef as le,useImperativeHandle as ae}from"react";import{debounce as ie}from"lodash";import{cn as b}from"../../helpers/utils.js";import{withLayout as ce}from"../../shared/Styles.js";import de from"../../components/button.js";import{VideoModal as pe}from"../VideoModal/index.js";import{convertLexicalToHTML as U}from"@payloadcms/richtext-lexical/html";import{useInView as ue}from"react-intersection-observer";import{useExposure as me}from"../../hooks/useExposure.js";import G from"../../helpers/ScrollLoadVideo.js";import{gsap as z}from"gsap";import{SplitText as fe}from"gsap/dist/SplitText";import{ScrollTrigger as ge}from"gsap/dist/ScrollTrigger";const ve="media_player_base",xe="video",J=({defaultConverters:h})=>({...h,text:w=>{const{node:t}=w;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),ye=le(({className:h="",id:w,onBtnClick:t,data:{title:d,videoTitle:p,btnText:I,youtubeId:_,video:P,mobileVideo:K,theme:S,img:$,shape:B,titleAnimation:u,...Q}},W)=>{const{sticky:s}=Q,[C,V]=y(!1),[D,X]=y(0),[Z,A]=y(0),[F,j]=y(!1),m=r(null),Y=r(null),o=r(null),f=r(null),q=r(null),g=r(null),H=r(null),{ref:ee,inView:v}=ue();ae(W,()=>o.current);const x=typeof d=="string"?d:d&&U({data:d,converters:J}),T=typeof p=="string"?p:p&&U({data:p,converters:J});E(()=>{v?(m.current?.play(),V(!0)):(m.current?.pause(),V(!1))},[v]);const k=ie(()=>{if(o.current){const l=o.current.getBoundingClientRect(),n=window.innerHeight,a=window.scrollY||window.pageYOffset,L=l.bottom+a,i=document.documentElement.scrollHeight-L;X(i>n?n:i)}if(o.current){const l=o.current.clientHeight,n=window.innerHeight;A(l+n)}},600);E(()=>(k(),window.addEventListener("resize",k),()=>{window.removeEventListener("resize",k)}),[]),E(()=>{function l(){if(!f.current||u!=="fade-in")return;const n=f.current?.clientHeight||80;g.current=new fe(f.current,{type:"words",wordsClass:"word"});const a=g.current.words;z.set(a,{opacity:0}),H.current=ge.create({trigger:o.current,start:"top center-=10%",end:`top+=${n*1.5+80}px center-=10%`,scrub:!0,onUpdate:L=>{const N=L.progress,i=a.length,te=1/i,O=.5;a.forEach((oe,re)=>{const ne=re/i*(1-O),se=te*(1+O);let R=(N-ne)/se;R=Math.max(0,Math.min(R,1)),z.set(oe,{opacity:R})}),z.set(Y.current,{opacity:N})}})}return v&&l(),()=>{g.current&&g.current.revert(),H.current&&H.current.kill()}},[u,v]),me(q,{componentType:xe,componentName:ve,componentTitle:T});const M="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return c(be,{children:[s&&e("div",{ref:o,className:b("relative z-10",M,{"aiui-dark":S==="dark","rounded-box":B==="rounded"},h),children:e("div",{ref:ee,children:!u&&c("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[x&&!C&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),T&&C&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),I&&e(de,{variant:"link",className:b("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{j(!0),t&&t?.()},children:I})]})})}),c("div",{style:s?{marginBottom:`-${D}px`,marginTop:`-${Z}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:c("div",{id:w,className:b("relative overflow-hidden",s?"h-screen w-full":M,{"aiui-dark":S==="dark","rounded-box":B==="rounded"}),children:[u==="fade-in"&&x&&e("div",{ref:f,className:"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),c("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[e(G,{videoRef:m,poster:$?.url||"",src:P?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(G,{videoRef:m,poster:$?.url||"",src:K?.url||P?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:Y,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:b(s&&"relative box-content block",M),style:s?{height:`${D}px`}:{},ref:q})]}),F&&_&&e(pe,{visible:F,youTubeId:_,onCloseModal:()=>j(!1)})]})});var Pe=ce(ye);export{Pe 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 { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover left-0 top-0 h-screen w-screen\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "aspect", "MediaPlayerBase_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n id={id}\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover left-0 top-0 h-screen w-screen\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "aspect", "MediaPlayerBase_default"]
|
|
7
7
|
}
|