@anker-in/headless-ui 0.0.55 → 0.0.56
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/YouTubePlayer.d.ts +3 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/YouTubePlayer.js +2 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/YouTubePlayer.js.map +7 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerMulti/types.d.ts +2 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/types.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/types.js.map +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/YouTubePlayer.d.ts +3 -0
- package/dist/esm/biz-components/MediaPlayerMulti/YouTubePlayer.js +2 -0
- package/dist/esm/biz-components/MediaPlayerMulti/YouTubePlayer.js.map +7 -0
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/types.d.ts +2 -0
- package/package.json +3 -2
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var l=Object.create;var u=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var m=(o,r)=>{for(var e in r)u(o,e,{get:r[e],enumerable:!0})},p=(o,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of b(r))!h.call(o,t)&&t!==e&&u(o,t,{get:()=>r[t],enumerable:!(i=y(r,t))||i.enumerable});return o};var n=(o,r,e)=>(e=o!=null?l(f(o)):{},p(r||!o||!o.__esModule?u(e,"default",{value:o,enumerable:!0}):e,o)),T=o=>p(u({},"__esModule",{value:!0}),o);var s={};m(s,{YouTubePlayer:()=>g});module.exports=T(s);var d=require("react/jsx-runtime"),Y=require("react"),a=n(require("react-youtube"));function g({youTubeId:o}){return(0,d.jsx)(a.default,{videoId:o,opts:{playerVars:{autoplay:0,rel:0},width:"100%",height:"100%"}})}
|
|
2
|
+
//# sourceMappingURL=YouTubePlayer.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/MediaPlayerMulti/YouTubePlayer.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport YouTube from 'react-youtube'\n\nexport function YouTubePlayer({ youTubeId }: { youTubeId: string }) {\n // const onReady = event => {\n // // event.target.playVideo();\n // }\n\n return (\n <YouTube\n videoId={youTubeId}\n opts={{\n playerVars: { autoplay: 0, rel: 0 },\n width: '100%',\n height: '100%',\n }}\n />\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GASI,IAAAI,EAAA,6BATJC,EAAkB,iBAClBC,EAAoB,4BAEb,SAASJ,EAAc,CAAE,UAAAK,CAAU,EAA0B,CAKlE,SACE,OAAC,EAAAC,QAAA,CACC,QAASD,EACT,KAAM,CACJ,WAAY,CAAE,SAAU,EAAG,IAAK,CAAE,EAClC,MAAO,OACP,OAAQ,MACV,EACF,CAEJ",
|
|
6
|
+
"names": ["YouTubePlayer_exports", "__export", "YouTubePlayer", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_youtube", "youTubeId", "YouTube"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var D=Object.create;var n=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},v=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of S(t))!Y.call(e,i)&&i!==o&&n(e,i,{get:()=>t[i],enumerable:!(r=j(t,i))||r.enumerable});return e};var w=(e,t,o)=>(o=e!=null?D(H(e)):{},v(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),E=e=>v(n({},"__esModule",{value:!0}),e);var A={};q(A,{default:()=>W});module.exports=E(A);var l=require("react/jsx-runtime"),s=require("react"),y=require("../../helpers/utils.js"),k=require("../../shared/Styles.js"),a=require("../../components/index.js"),p=require("../../components/dialog.js"),N=w(require("../Title/index.js")),M=w(require("../SwiperBox/index.js")),P=require("../../components/container.js"),T=require("./YouTubePlayer.js"),C=require("@payloadcms/richtext-lexical/html"),I=require("../../hooks/useExposure.js");const R="video",U="media_player_multi",Z=({data:e,configuration:t})=>(0,l.jsxs)("div",{className:(0,y.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)(a.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)(a.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)(a.Link,{href:e?.href,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:r},className:i="",key:B,onVideoPlayBtnClick:L},V)=>{const[z,d]=(0,s.useState)(!1),[m,c]=(0,s.useState)(""),[u,f]=(0,s.useState)(""),h=typeof o=="string"?o:o&&(0,C.convertLexicalToHTML)({data:o}),x=(0,s.useRef)(null),b=()=>{c(""),f("")};(0,I.useExposure)(x,{componentType:R,componentName:U,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)(P.Container,{...r||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:i,ref:V,children:[o&&(0,l.jsx)(N.default,{className:"mediaplayermulti-title",data:{title:h||""}}),(0,l.jsx)(M.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+B,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:L,setVisible:d,setVideoUrl:c,setYouTubeId:f}},Slide:Z,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:z,onOpenChange:_=>{d(_),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)(T.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,k.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 { 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 && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\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 title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\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={{
|
|
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_html", "import_useExposure", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "wrapperRef", "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'\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": "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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", "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";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var a=(o,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!p.call(o,r)&&r!==n&&i(o,r,{get:()=>e[r],enumerable:!(t=s(e,r))||t.enumerable});return o};var d=o=>a(i({},"__esModule",{value:!0}),o);var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var a=(o,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!p.call(o,r)&&r!==n&&i(o,r,{get:()=>e[r],enumerable:!(t=s(e,r))||t.enumerable});return o};var d=o=>a(i({},"__esModule",{value:!0}),o);var g={};module.exports=d(g);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentCommonProps, Img, Video, ContainerProps } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n title: string\n name: string\n description: string\n img: Img\n mobileImg?: Img\n video?: Video\n quote?: string\n href?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n data: {\n title?: string\n shape?: 'round' | 'square'\n items: MediaPlayerItemProps[]\n containerProps?: ContainerProps\n }\n onVideoPlayBtnClick?: (jIndex: number) => void\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Img, Video, ContainerProps } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n title: string\n name: string\n description: string\n img: Img\n mobileImg?: Img\n video?: Video\n youTubeId?: string\n isYouTube?: boolean\n quote?: string\n href?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n data: {\n title?: string\n shape?: 'round' | 'square'\n items: MediaPlayerItemProps[]\n containerProps?: ContainerProps\n }\n onVideoPlayBtnClick?: (jIndex: number) => void\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/MediaPlayerMulti/YouTubePlayer.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport YouTube from 'react-youtube'\n\nexport function YouTubePlayer({ youTubeId }: { youTubeId: string }) {\n // const onReady = event => {\n // // event.target.playVideo();\n // }\n\n return (\n <YouTube\n videoId={youTubeId}\n opts={{\n playerVars: { autoplay: 0, rel: 0 },\n width: '100%',\n height: '100%',\n }}\n />\n )\n}\n"],
|
|
5
|
+
"mappings": "AASI,cAAAA,MAAA,oBATJ,MAAkB,QAClB,OAAOC,MAAa,gBAEb,SAASC,EAAc,CAAE,UAAAC,CAAU,EAA0B,CAKlE,OACEH,EAACC,EAAA,CACC,QAASE,EACT,KAAM,CACJ,WAAY,CAAE,SAAU,EAAG,IAAK,CAAE,EAClC,MAAO,OACP,OAAQ,MACV,EACF,CAEJ",
|
|
6
|
+
"names": ["jsx", "YouTube", "YouTubePlayer", "youTubeId"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as l,jsxs as o}from"react/jsx-runtime";import{useState as a,forwardRef as N,useRef as M}from"react";import{cn as P}from"../../helpers/utils.js";import{withStyles as T}from"../../shared/Styles.js";import{Picture as x,Link as C}from"../../components/index.js";import{Dialog as I,DialogContent as B}from"../../components/dialog.js";import L from"../Title/index.js";import V from"../SwiperBox/index.js";import{Container as z}from"../../components/container.js";import{YouTubePlayer as _}from"./YouTubePlayer.js";import{convertLexicalToHTML as D}from"@payloadcms/richtext-lexical/html";import{useExposure as j}from"../../hooks/useExposure.js";const S="video",H="media_player_multi",Y=({data:e,configuration:t})=>o("div",{className:P("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(C,{href:e?.href,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})]})]}),q=N(({data:{items:e=[],shape:t="square",title:i,containerProps:b},className:r="",key:g,onVideoPlayBtnClick:v},w)=>{const[y,s]=a(!1),[n,p]=a(""),[d,m]=a(""),c=typeof i=="string"?i:i&&D({data:i}),u=M(null),f=()=>{p(""),m("")};j(u,{componentType:S,componentName:H,componentTitle:c});const h=e.length;return o("div",{className:r,ref:u,children:[l("div",{className:"mediaplayermulti-box",children:l(z,{...b||{},className:"overflow-hidden",children:o("div",{className:r,ref:w,children:[i&&l(L,{className:"mediaplayermulti-title",data:{title:c||""}}),l(V,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+g,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:v,setVisible:s,setVideoUrl:p,setYouTubeId:m}},Slide:Y,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(I,{open:y,onOpenChange:k=>{s(k),f()},children:o(B,{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(_,{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 Q=T(q);export{Q 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 { 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 && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\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 title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\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={{
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Link", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "convertLexicalToHTML", "useExposure", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "wrapperRef", "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'\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": "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",
|
|
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"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anker-in/headless-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.56",
|
|
4
4
|
"type": "commonjs",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"types": "./dist/cjs/index.d.ts",
|
|
@@ -93,7 +93,6 @@
|
|
|
93
93
|
},
|
|
94
94
|
"dependencies": {
|
|
95
95
|
"@payloadcms/richtext-lexical": "^3.39.1",
|
|
96
|
-
"es-toolkit": "^1.36.0",
|
|
97
96
|
"@radix-ui/react-avatar": "^1.1.9",
|
|
98
97
|
"@radix-ui/react-checkbox": "^1.3.1",
|
|
99
98
|
"@radix-ui/react-dialog": "^1.1.13",
|
|
@@ -111,11 +110,13 @@
|
|
|
111
110
|
"embla-carousel-class-names": "^8.5.2",
|
|
112
111
|
"embla-carousel-react": "^8.6.0",
|
|
113
112
|
"embla-carousel-wheel-gestures": "^8.0.1",
|
|
113
|
+
"es-toolkit": "^1.36.0",
|
|
114
114
|
"fitty": "^2.4.2",
|
|
115
115
|
"postcss": "^8.4.38",
|
|
116
116
|
"react-fast-marquee": "^1.6.5",
|
|
117
117
|
"react-intersection-observer": "^9.4.0",
|
|
118
118
|
"react-responsive": "10.0.1",
|
|
119
|
+
"react-youtube": "^10.1.0",
|
|
119
120
|
"swiper": "^11.1.3",
|
|
120
121
|
"tailwind-merge": "^2.3.0",
|
|
121
122
|
"tailwindcss": "^3.4.3",
|