@anker-in/headless-ui 0.0.57 → 0.0.58
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/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var S=Object.create;var n=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var E=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},v=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of R(t))!q.call(e,i)&&i!==o&&n(e,i,{get:()=>t[i],enumerable:!(a=H(t,i))||a.enumerable});return e};var w=(e,t,o)=>(o=e!=null?S(U(e)):{},v(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),Z=e=>v(n({},"__esModule",{value:!0}),e);var A={};E(A,{default:()=>W});module.exports=Z(A);var l=require("react/jsx-runtime"),s=require("react"),N=require("../../helpers/utils.js"),M=require("../../shared/Styles.js"),r=require("../../components/index.js"),p=require("../../components/dialog.js"),P=w(require("../Title/index.js")),C=w(require("../SwiperBox/index.js")),T=require("../../components/container.js"),I=require("./YouTubePlayer.js"),B=require("@payloadcms/richtext-lexical/html"),L=require("../../hooks/useExposure.js"),V=require("../../shared/trackUrlRef.js");const k="video",y="media_player_multi",$=({data:e,configuration:t})=>(0,l.jsxs)("div",{className:(0,N.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(r.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.YoutubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.setVisible?.(!0),e?.isYouTube?t?.setYouTubeId?.(e?.YoutubeId):t?.setVideoUrl?.(e?.video?.url),t?.onVideoPlayBtnClick?.(t?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(r.Link,{href:(0,V.trackUrlRef)(e?.href,`${k}_${y}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]}),O=(0,s.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:a},className:i="",key:_,onVideoPlayBtnClick:z},D)=>{const[Y,d]=(0,s.useState)(!1),[m,c]=(0,s.useState)(""),[u,f]=(0,s.useState)(""),h=typeof o=="string"?o:o&&(0,B.convertLexicalToHTML)({data:o}),x=(0,s.useRef)(null),b=()=>{c(""),f("")};(0,L.useExposure)(x,{componentType:k,componentName:y,componentTitle:h});const g=e.length;return(0,l.jsxs)("div",{className:i,ref:x,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(T.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:i,ref:D,children:[o&&(0,l.jsx)(P.default,{className:"mediaplayermulti-title",data:{title:h||""}}),(0,l.jsx)(C.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+_,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:z,setVisible:d,setVideoUrl:c,setYouTubeId:f}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:g===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:g===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),(0,l.jsx)(p.Dialog,{open:Y,onOpenChange:j=>{d(j),b()},children:(0,l.jsxs)(p.DialogContent,{className:"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[u?(0,l.jsx)(I.YouTubePlayer,{youTubeId:u}):null,m?(0,l.jsx)("video",{className:"size-full object-cover",src:m,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,(0,l.jsx)("div",{onClick:()=>{d(!1),b()},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:(0,l.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:(0,l.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var W=(0,M.withStyles)(O);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { YouTubePlayer } from './YouTubePlayer.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.YoutubeId) && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n if (data?.isYouTube) {\n configuration?.setYouTubeId?.(data?.YoutubeId)\n } else {\n configuration?.setVideoUrl?.(data?.video?.url)\n }\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n href={data?.href}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n >\n {data.quote}\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const clearContent = () => {\n setVideoUrl('')\n setYouTubeId('')\n }\n\n useExposure(wrapperRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length\n\n return (\n <div className={className} ref={wrapperRef}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl, setYouTubeId },\n }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n clearContent()\n }}\n >\n <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {youTubeId ? <YouTubePlayer youTubeId={youTubeId} /> : null}\n {videoUrl ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n clearContent()\n }}\n className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_dialog", "import_Title", "import_SwiperBox", "import_container", "import_YouTubePlayer", "import_html", "import_useExposure", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "clearContent", "itemsLength", "Title", "SwiperBox", "flag"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { YouTubePlayer } from './YouTubePlayer.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.YoutubeId) && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n if (data?.isYouTube) {\n configuration?.setYouTubeId?.(data?.YoutubeId)\n } else {\n configuration?.setVideoUrl?.(data?.video?.url)\n }\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n >\n {data.quote}\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const clearContent = () => {\n setVideoUrl('')\n setYouTubeId('')\n }\n\n useExposure(wrapperRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length\n\n return (\n <div className={className} ref={wrapperRef}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl, setYouTubeId },\n }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n clearContent()\n }}\n >\n <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {youTubeId ? <YouTubePlayer youTubeId={youTubeId} /> : null}\n {videoUrl ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n clearContent()\n }}\n className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_dialog", "import_Title", "import_SwiperBox", "import_container", "import_YouTubePlayer", "import_html", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "clearContent", "itemsLength", "Title", "SwiperBox", "flag"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var D=Object.create;var p=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ae=(r,s)=>{for(var t in s)p(r,t,{get:s[t],enumerable:!0})},P=(r,s,t,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of te(s))!se.call(r,o)&&o!==t&&p(r,o,{get:()=>s[o],enumerable:!(l=ee(s,o))||l.enumerable});return r};var n=(r,s,t)=>(t=r!=null?D(re(r)):{},P(s||!r||!r.__esModule?p(t,"default",{value:r,enumerable:!0}):t,r)),oe=r=>P(p({},"__esModule",{value:!0}),r);var ce={};ae(ce,{default:()=>ie});module.exports=oe(ce);var e=require("react/jsx-runtime"),a=n(require("react")),L=require("es-toolkit"),T=require("react-intersection-observer"),m=require("../../helpers/utils.js"),z=require("../../shared/Styles.js"),B=n(require("../Slogan/index.js")),i=require("../../components/gird.js"),$=require("../../components/container.js"),Y=n(require("../BrandEquity/index.js")),q=n(require("../MemberEquity/index.js")),j=n(require("../Spacer/index.js")),G=n(require("gsap")),g=require("@payloadcms/richtext-lexical/html"),h=require("react-responsive"),I=n(require("../../helpers/ScrollLoadVideo.js"));const C=({defaultConverters:r})=>({...r,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),w=({children:r,spaceY:s})=>{const t=(0,h.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)($.Container,{spaceY:s,className:"!bg-transparent",children:(0,e.jsxs)(i.Grid,{children:[!t&&(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:t?12:10,children:r}),!t&&(0,e.jsx)(i.GridItem,{span:1})]})})},le=a.default.forwardRef(({children:r,id:s,components:t})=>{const l=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:l,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:r}),(0,e.jsx)(e.Fragment,{children:t?.map(o=>{switch(o.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(w,{spaceY:"none",children:(0,e.jsx)(Y.default,{data:o,style:o?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(w,{spaceY:"none",children:(0,e.jsx)(q.default,{data:o,className:"w-full",style:o?.style})})});case"ipc-spacer":return(0,e.jsx)(j.default,{data:o,style:o?.style,className:"!bg-transparent"});default:return null}})})]})}),ne=(0,a.forwardRef)(({className:r="",id:s,data:{title:t,videoTitle:l,mobVideo:o,mobImg:c,img:d,video:u,theme:x,shape:V,components:F}})=>{const N=(0,a.useRef)(null),f=(0,a.useRef)(null),{ref:Q,inView:M}=(0,T.useInView)(),[R,O]=(0,a.useState)(!1),[_,A]=(0,a.useState)(!1),J=(0,a.useRef)(null),K=typeof t=="string"?t:t&&(0,g.convertLexicalToHTML)({data:t,converters:C});typeof l=="string"||l&&(0,g.convertLexicalToHTML)({data:l,converters:C});const[k,U]=(0,a.useState)(0),[y,W]=(0,a.useState)(!1),E=(0,h.useMediaQuery)({query:"(max-width: 768px)"});(0,a.useEffect)(()=>{W(E)},[E]);const v=(0,L.debounce)(()=>{if(f.current){const b=f.current.getBoundingClientRect(),H=window.innerHeight,X=window.scrollY||window.pageYOffset,Z=b.bottom+X,S=document.documentElement.scrollHeight-Z;U(S>H?H:S)}},2e3);return(0,a.useEffect)(()=>{M&&!R&&(N.current?.play(),O(!0))},[M,R]),(0,a.useEffect)(()=>(v(),window.addEventListener("resize",v),()=>{window.removeEventListener("resize",v)}),[]),(0,a.useEffect)(()=>{const b=window.screen.height;G.default.timeline({scrollTrigger:{trigger:`#${s}`,start:"top top",end:`top+=${b*1.8}px bottom`,scrub:0}}).to(`#${s} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[k]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:s,className:(0,m.cn)("relative z-20 h-screen w-full",r,{"aiui-dark":x==="dark","rounded-box":V==="rounded"}),ref:J,children:(0,e.jsx)("div",{ref:Q,className:"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:(0,e.jsx)(w,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)(B.default,{className:"sticky-title",data:{title:K||"",theme:x}})})})}),(0,e.jsxs)("div",{ref:f,style:{marginBottom:`-${k}px`},className:(0,m.cn)(s,"relative mt-[-200vh]"),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,m.cn)("media-cover","relative h-screen w-full"),children:[u?.url&&(0,e.jsx)(I.default,{videoRef:N,poster:y&&c?.url?c?.url:d?.url,src:y&&o?.url?o?.url:u?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{A(!0)}}),d?.url&&(!u?.url||_)&&(0,e.jsx)("img",{src:y&&c?.url?c?.url:d?.url,alt:d?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]"}),(0,e.jsx)("div",{className:"sticky-cover opacity-1 absolute left-0 top-0 z-10 size-full",style:{background:"rgba(0, 0, 0, 0.2)"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(le,{components:F}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});var ie=(0,z.withStyles)(ne);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_react_intersection_observer", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className=\"!bg-transparent\">\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(({ className = '', id, data: { title, videoTitle, mobVideo, mobImg, img, video, theme, shape, components } }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n const height = window.screen.height\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0,\n },\n })\n // .to(`.${id} .sticky-cover`, {\n // opacity: 1,\n // duration: 0.4,\n // })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [btb])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2\"\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div ref={boxRef} style={{ marginBottom: `-${btb}px` }} className={cn(id, 'relative mt-[-200vh]')}>\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {/* {video?.url && (\n <video\n ref={videoRef}\n className=\"size-full object-cover object-[82%]\"\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n muted\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )} */}\n {video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n />\n )}\n <div\n className=\"sticky-cover opacity-1 absolute left-0 top-0 z-10 size-full\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n})\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_react_intersection_observer", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "import_ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "SubBox", "React", "id", "components", "mediaPlayerStickyRef", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "className", "title", "videoTitle", "mobVideo", "mobImg", "img", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "gsap", "Slogan", "ScrollLoadVideo"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as l,jsxs as o}from"react/jsx-runtime";import{useState as
|
|
1
|
+
"use client";import{jsx as l,jsxs as o}from"react/jsx-runtime";import{useState as r,forwardRef as P,useRef as C}from"react";import{cn as T}from"../../helpers/utils.js";import{withStyles as I}from"../../shared/Styles.js";import{Picture as x,Link as B}from"../../components/index.js";import{Dialog as L,DialogContent as V}from"../../components/dialog.js";import _ from"../Title/index.js";import z from"../SwiperBox/index.js";import{Container as D}from"../../components/container.js";import{YouTubePlayer as Y}from"./YouTubePlayer.js";import{convertLexicalToHTML as j}from"@payloadcms/richtext-lexical/html";import{useExposure as S}from"../../hooks/useExposure.js";import{trackUrlRef as H}from"../../shared/trackUrlRef.js";const b="video",g="media_player_multi",R=({data:e,configuration:t})=>o("div",{className:T("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(x,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),l(x,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),l("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.YoutubeId)&&l("button",{onClick:()=>{t?.setVisible?.(!0),e?.isYouTube?t?.setYouTubeId?.(e?.YoutubeId):t?.setVideoUrl?.(e?.video?.url),t?.onVideoPlayBtnClick?.(t?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:l("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[l("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&l(B,{href:H(e?.href,`${b}_${g}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),l("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]}),U=P(({data:{items:e=[],shape:t="square",title:i,containerProps:v},className:a="",key:w,onVideoPlayBtnClick:k},y)=>{const[N,s]=r(!1),[n,p]=r(""),[d,m]=r(""),c=typeof i=="string"?i:i&&j({data:i}),u=C(null),f=()=>{p(""),m("")};S(u,{componentType:b,componentName:g,componentTitle:c});const h=e.length;return o("div",{className:a,ref:u,children:[l("div",{className:"mediaplayermulti-box",children:l(D,{...v||{},className:"overflow-hidden",children:o("div",{className:a,ref:y,children:[i&&l(_,{className:"mediaplayermulti-title",data:{title:c||""}}),l(z,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+w,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:k,setVisible:s,setVideoUrl:p,setYouTubeId:m}},Slide:R,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:h===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),l(L,{open:N,onOpenChange:M=>{s(M),f()},children:o(V,{className:"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[d?l(Y,{youTubeId:d}):null,n?l("video",{className:"size-full object-cover",src:n,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,l("div",{onClick:()=>{s(!1),f()},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:l("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:l("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var X=I(U);export{X as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { YouTubePlayer } from './YouTubePlayer.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.YoutubeId) && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n if (data?.isYouTube) {\n configuration?.setYouTubeId?.(data?.YoutubeId)\n } else {\n configuration?.setVideoUrl?.(data?.video?.url)\n }\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n href={data?.href}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n >\n {data.quote}\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const clearContent = () => {\n setVideoUrl('')\n setYouTubeId('')\n }\n\n useExposure(wrapperRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length\n\n return (\n <div className={className} ref={wrapperRef}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl, setYouTubeId },\n }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n clearContent()\n }}\n >\n <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {youTubeId ? <YouTubePlayer youTubeId={youTubeId} /> : null}\n {videoUrl ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n clearContent()\n }}\n className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Link", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "YouTubePlayer", "convertLexicalToHTML", "useExposure", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "clearContent", "itemsLength", "flag", "MediaPlayerMulti_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { YouTubePlayer } from './YouTubePlayer.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {(data?.video?.url || data?.YoutubeId) && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n if (data?.isYouTube) {\n configuration?.setYouTubeId?.(data?.YoutubeId)\n } else {\n configuration?.setVideoUrl?.(data?.video?.url)\n }\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n >\n {data.quote}\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const clearContent = () => {\n setVideoUrl('')\n setYouTubeId('')\n }\n\n useExposure(wrapperRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length\n\n return (\n <div className={className} ref={wrapperRef}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{\n list: items,\n configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl, setYouTubeId },\n }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n clearContent()\n }}\n >\n <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {youTubeId ? <YouTubePlayer youTubeId={youTubeId} /> : null}\n {videoUrl ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n clearContent()\n }}\n className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Link", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "YouTubePlayer", "convertLexicalToHTML", "useExposure", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "clearContent", "itemsLength", "flag", "MediaPlayerMulti_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as h,jsx as e,jsxs as
|
|
1
|
+
"use client";import{Fragment as h,jsx as e,jsxs as l}from"react/jsx-runtime";import O,{useState as c,useRef as d,useEffect as p,forwardRef as _}from"react";import{debounce as A}from"es-toolkit";import{useInView as J}from"react-intersection-observer";import{cn as b}from"../../helpers/utils.js";import{withStyles as K}from"../../shared/Styles.js";import U from"../Slogan/index.js";import{Grid as W,GridItem as w}from"../../components/gird.js";import{Container as X}from"../../components/container.js";import Z from"../BrandEquity/index.js";import D from"../MemberEquity/index.js";import ee from"../Spacer/index.js";import te from"gsap";import{convertLexicalToHTML as P}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as C}from"react-responsive";import re from"../../helpers/ScrollLoadVideo.js";const L=({defaultConverters:a})=>({...a,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),g=({children:a,spaceY:s})=>{const t=C({query:"(max-width: 768px)"});return e(X,{spaceY:s,className:"!bg-transparent",children:l(W,{children:[!t&&e(w,{span:1}),e(w,{span:t?12:10,children:a}),!t&&e(w,{span:1})]})})},se=O.forwardRef(({children:a,id:s,components:t})=>{const o=d(null);return l("div",{ref:o,className:"relative z-10",children:[e(h,{children:a}),e(h,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(g,{spaceY:"none",children:e(Z,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(g,{spaceY:"none",children:e(D,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(ee,{data:r,style:r?.style,className:"!bg-transparent"});default:return null}})})]})}),ae=_(({className:a="",id:s,data:{title:t,videoTitle:o,mobVideo:r,mobImg:n,img:i,video:m,theme:x,shape:T,components:z}})=>{const N=d(null),u=d(null),{ref:B,inView:M}=J(),[R,$]=c(!1),[Y,q]=c(!1),j=d(null),G=typeof t=="string"?t:t&&P({data:t,converters:L});typeof o=="string"||o&&P({data:o,converters:L});const[k,I]=c(0),[f,V]=c(!1),E=C({query:"(max-width: 768px)"});p(()=>{V(E)},[E]);const y=A(()=>{if(u.current){const v=u.current.getBoundingClientRect(),H=window.innerHeight,F=window.scrollY||window.pageYOffset,Q=v.bottom+F,S=document.documentElement.scrollHeight-Q;I(S>H?H:S)}},2e3);return p(()=>{M&&!R&&(N.current?.play(),$(!0))},[M,R]),p(()=>(y(),window.addEventListener("resize",y),()=>{window.removeEventListener("resize",y)}),[]),p(()=>{const v=window.screen.height;te.timeline({scrollTrigger:{trigger:`#${s}`,start:"top top",end:`top+=${v*1.8}px bottom`,scrub:0}}).to(`#${s} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[k]),l(h,{children:[e("div",{id:s,className:b("relative z-20 h-screen w-full",a,{"aiui-dark":x==="dark","rounded-box":T==="rounded"}),ref:j,children:e("div",{ref:B,className:"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:e(g,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(U,{className:"sticky-title",data:{title:G||"",theme:x}})})})}),l("div",{ref:u,style:{marginBottom:`-${k}px`},className:b(s,"relative mt-[-200vh]"),children:[e("div",{className:"sticky top-0 ",children:l("div",{className:b("media-cover","relative h-screen w-full"),children:[m?.url&&e(re,{videoRef:N,poster:f&&n?.url?n?.url:i?.url,src:f&&r?.url?r?.url:m?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{q(!0)}}),i?.url&&(!m?.url||Y)&&e("img",{src:f&&n?.url?n?.url:i?.url,alt:i?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]"}),e("div",{className:"sticky-cover opacity-1 absolute left-0 top-0 z-10 size-full",style:{background:"rgba(0, 0, 0, 0.2)"}})]})}),e("div",{className:"relative h-screen w-full"}),e(se,{components:z}),e("div",{className:"relative h-screen w-full"})]})]})});var xe=K(ae);export{xe as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className=\"!bg-transparent\">\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(({ className = '', id, data: { title, videoTitle, mobVideo, mobImg, img, video, theme, shape, components } }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n const height = window.screen.height\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0,\n },\n })\n // .to(`.${id} .sticky-cover`, {\n // opacity: 1,\n // duration: 0.4,\n // })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [btb])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2\"\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div ref={boxRef} style={{ marginBottom: `-${btb}px` }} className={cn(id, 'relative mt-[-200vh]')}>\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {/* {video?.url && (\n <video\n ref={videoRef}\n className=\"size-full object-cover object-[82%]\"\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n muted\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )} */}\n {video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n />\n )}\n <div\n className=\"sticky-cover opacity-1 absolute left-0 top-0 z-10 size-full\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n})\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "aAwCM,OAuBA,YAAAA,EAtBgB,OAAAC,EADhB,QAAAC,MAAA,oBAvCN,OAAOC,GAAS,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,MAAkB,QAC/D,OAAS,YAAAC,MAAgB,aACzB,OAAS,aAAAC,MAAiB,8BAC1B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAY,qBACnB,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAiB,0BACxB,OAAOC,MAAkB,2BACzB,OAAOC,OAAY,qBACnB,OAAOC,OAAU,OAEjB,OAAS,wBAAAC,MAA4B,oCAIrC,OAAS,iBAAAC,MAAqB,mBAE9B,OAAOC,OAAqB,mCAG5B,MAAMC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,EAAe,CAAC,CAAE,SAAAC,EAAU,OAAAC,CAAO,IAAsD,CAC7F,MAAMC,EAAWT,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAC9D,OACEpB,EAACc,EAAA,CAAU,OAAQc,EAAQ,UAAU,kBACnC,SAAA3B,EAACW,EAAA,CACE,WAACiB,GAAY7B,EAACa,EAAA,CAAS,KAAM,EAAG,EACjCb,EAACa,EAAA,CAAS,KAAMgB,EAAW,GAAK,GAAK,SAAAF,EAAS,EAC7C,CAACE,GAAY7B,EAACa,EAAA,CAAS,KAAM,EAAG,GACnC,EACF,CAEJ,EAEMiB,GAAS5B,EAAM,WASnB,CAAC,CAAE,SAAAyB,EAAU,GAAAI,EAAI,WAAAC,CAAW,IAAM,CAClC,MAAMC,EAAuB7B,EAAuB,IAAI,EAExD,OACEH,EAAC,OAAI,IAAKgC,EAAsB,UAAU,gBACxC,UAAAjC,EAAAD,EAAA,CAAG,SAAA4B,EAAS,EACZ3B,EAAAD,EAAA,CACG,SAAAiC,GAAY,IAAKE,GAAuB,CACvC,OAAQA,EAAc,UAAW,CAC/B,IAAK,mBACH,OACElC,EAAC,OAAI,UAAU,+BACb,SAAAA,EAAC0B,EAAA,CAAa,OAAO,OACnB,SAAA1B,EAACe,EAAA,CAAY,KAAMmB,EAAe,MAAOA,GAAe,MAAO,EACjE,EACF,EAGJ,IAAK,oBACH,OACElC,EAAC,OAAI,UAAU,sCACb,SAAAA,EAAC0B,EAAA,CAAa,OAAO,OACnB,SAAA1B,EAACgB,EAAA,CAAa,KAAMkB,EAAe,UAAU,SAAS,MAAOA,GAAe,MAAO,EACrF,EACF,EAGJ,IAAK,aACH,OAAOlC,EAACiB,GAAA,CAAO,KAAMiB,EAAe,MAAOA,GAAe,MAAO,UAAU,kBAAkB,EAE/F,QACE,OAAO,IACX,CACF,CAAC,EACH,GACF,CAEJ,CAAC,EAEKC,GAAoB7B,EAKxB,CAAC,CAAE,UAAA8B,EAAY,GAAI,GAAAL,EAAI,KAAM,CAAE,MAAAM,EAAO,WAAAC,EAAY,SAAAC,EAAU,OAAAC,EAAQ,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,WAAAZ,CAAW,CAAE,IAAM,CACjH,MAAMa,EAAWzC,EAAyB,IAAI,EACxC0C,EAAS1C,EAAuB,IAAI,EACpC,CAAE,IAAK2C,EAAW,OAAAC,CAAO,EAAIxC,EAAU,EACvC,CAACyC,EAAWC,CAAY,EAAI/C,EAAS,EAAK,EAC1C,CAACgD,EAAWC,CAAY,EAAIjD,EAAS,EAAK,EAC1CkD,EAAajD,EAAuB,IAAI,EAExCkD,EACJ,OAAOjB,GAAU,SAAWA,EAAQA,GAASlB,EAAqB,CAAE,KAAMkB,EAAO,WAAYf,CAAe,CAAC,EAC/G,OAAOgB,GAAe,UAElBA,GAAcnB,EAAqB,CAAE,KAAMmB,EAAY,WAAYhB,CAAe,CAAC,EAEvF,KAAM,CAACiC,EAAKC,CAAM,EAAIrD,EAAS,CAAC,EAC1B,CAAC0B,EAAU4B,CAAW,EAAItD,EAAS,EAAK,EACxCuD,EAAatC,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAEhEf,EAAU,IAAM,CACdoD,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,MAAMC,EAAwBpD,EAAS,IAAM,CAC3C,GAAIuC,EAAO,QAAS,CAClB,MAAMc,EAAOd,EAAO,QAAQ,sBAAsB,EAC5Ce,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CP,EAAOQ,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACF,EAAG,GAAI,EAEP,OAAA3D,EAAU,IAAM,CACV2C,GAAU,CAACC,IACbJ,EAAS,SAAS,KAAK,EACvBK,EAAa,EAAI,EAErB,EAAG,CAACF,EAAQC,CAAS,CAAC,EAEtB5C,EAAU,KACRsD,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAELtD,EAAU,IAAM,CACd,MAAM4D,EAAS,OAAO,OAAO,OAC7B/C,GACG,SAAS,CACR,cAAe,CACb,QAAS,IAAIa,CAAE,GACf,MAAO,UACP,IAAK,QAAQkC,EAAS,GAAG,YACzB,MAAO,CACT,CACF,CAAC,EAKA,GACC,IAAIlC,CAAE,kBACN,CACE,IAAK,OACL,UAAW,yBACX,SAAU,CACZ,EACA,GACF,CACJ,EAAG,CAACwB,CAAG,CAAC,EAGNtD,EAAAF,EAAA,CACE,UAAAC,EAAC,OACC,GAAI+B,EACJ,UAAWtB,EAAG,gCAAiC2B,EAAW,CACxD,YAAaO,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EACD,IAAKS,EAEL,SAAArD,EAAC,OACC,IAAK+C,EACL,UAAU,wFAEV,SAAA/C,EAAC0B,EAAA,CAAa,OAAO,uCACnB,SAAA1B,EAACW,EAAA,CAAO,UAAU,eAAe,KAAM,CAAE,MAAO2C,GAAc,GAAI,MAAAX,CAAM,EAAG,EAC7E,EACF,EACF,EAEA1C,EAAC,OAAI,IAAK6C,EAAQ,MAAO,CAAE,aAAc,IAAIS,CAAG,IAAK,EAAG,UAAW9C,EAAGsB,EAAI,sBAAsB,EAC9F,UAAA/B,EAAC,OAAI,UAAU,gBACb,SAAAC,EAAC,OAAI,UAAWQ,EAAG,cAAe,0BAA0B,EAazD,UAAAiC,GAAO,KACN1C,EAACqB,GAAA,CACC,SAAUwB,EACV,OAAQhB,GAAYW,GAAQ,IAAMA,GAAQ,IAAMC,GAAK,IACrD,IAAKZ,GAAYU,GAAU,IAAMA,GAAU,IAAMG,GAAO,IACxD,UAAU,qNACV,eAAe,6BACf,MAAK,GACL,KAAM,GACN,YAAW,GACX,QAAS,IAAM,CACbU,EAAa,EAAI,CACnB,EACF,EAEDX,GAAK,MAAQ,CAACC,GAAO,KAAOS,IAC3BnD,EAAC,OACC,IAAK6B,GAAYW,GAAQ,IAAMA,GAAQ,IAAMC,GAAK,IAClD,IAAKA,GAAK,IACV,UAAU,iEACZ,EAEFzC,EAAC,OACC,UAAU,8DACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,EACF,EAEAA,EAAC,OAAI,UAAU,2BAA2B,EAC1CA,EAAC8B,GAAA,CAAO,WAAYE,EAAY,EAChChC,EAAC,OAAI,UAAU,2BAA2B,GAC5C,GACF,CAEJ,CAAC,EAED,IAAOkE,GAAQxD,EAAWyB,EAAiB",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "mobVideo", "mobImg", "img", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "height", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|