@anker-in/headless-ui 1.3.54 → 1.3.55
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var F=Object.create;var a=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var W=(e,i)=>{for(var t in i)a(e,t,{get:i[t],enumerable:!0})},f=(e,i,t,r)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of J(i))!U.call(e,o)&&o!==t&&a(e,o,{get:()=>i[o],enumerable:!(r=G(i,o))||r.enumerable});return e};var X=(e,i,t)=>(t=e!=null?F(K(e)):{},f(i||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),Y=e=>f(a({},"__esModule",{value:!0}),e);var _={};W(_,{default:()=>Z});module.exports=Y(_);var u=require("react/jsx-runtime"),d=X(require("react")),s=require("react-responsive"),M=require("../../components/index.js"),l=require("../../helpers/index.js");const m=d.default.forwardRef(({pcImage:e,desktopImage:i,laptopImage:t,padImage:r,mobileImage:o,className:v,videoClassName:x,imgClassName:T,muted:P=!0,loop:w=!0,playsInline:h=!0,autoPlay:b=!0,poster:N,videoRef:E,onVideoPlay:L,onVideoPause:R,onVideoEnded:q,...V},j)=>{const k=(0,s.useMediaQuery)({query:"(max-width: 767px)"}),H=(0,s.useMediaQuery)({query:"(min-width: 768px) and (max-width: 1024px)"}),$=(0,s.useMediaQuery)({query:"(min-width: 1025px) and (max-width: 1439px)"}),z=(0,s.useMediaQuery)({query:"(min-width: 1440px) and (max-width: 1919px)"}),C=(0,s.useMediaQuery)({query:"(min-width: 1920px)"}),[D,S]=d.default.useState(!1);d.default.useEffect(()=>{S(!0)},[]);const p=[e,i,t,r,o],A=p.some(c=>c?.mimeType==="video/mp4"),n=(C?e:z?i:$?t:H?r:o)||e||i||t||r||o,y=n?.mimeType==="video/mp4"?n.url:void 0,B=N||(n?.mimeType!=="video/mp4"?n?.url:void 0),O=p.find(c=>c?.alt)?.alt||"",Q=[o?.url&&`${o.url} 768`,r?.url&&`${r.url} 1025`,t?.url&&`${t.url} 1440`,i?.url&&`${i.url} 1920`,e?.url].filter(Boolean).reverse().join(" , ");return(0,u.jsx)("div",{ref:j,className:(0,l.cn)("media-wrapper",v),...V,children:A?D&&(0,u.jsx)("video",{ref:E,src:y,poster:B,className:(0,l.cn)("size-full object-cover",x),muted:P,loop:w,playsInline:h,autoPlay:b,"aria-label":O,onPlay:L,onPause:R,onEnded:q},y):(0,u.jsx)(M.Picture,{className:"size-full",imgClassName:(0,l.cn)("size-full object-cover",T),alt:e?.alt||i?.alt||t?.alt||r?.alt||o?.alt||"",source:Q})})});m.displayName="Media";var Z=m;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Media/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Picture } from '../../components/index.js'\nimport type { Media as MediaType } from '../../types/props.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface MediaProps extends React.HTMLAttributes<HTMLDivElement> {\n /** PC\u7AEF\u5A92\u4F53\uFF08\u22651920px\uFF09 */\n pcImage?: MediaType\n /** \u5927\u684C\u9762\u5A92\u4F53\uFF08\u22651440px\uFF09 */\n desktopImage?: MediaType\n /** \u5C0F\u684C\u9762\u5A92\u4F53\uFF08\u22651025px\uFF09 */\n laptopImage?: MediaType\n /** \u5E73\u677F\u7AEF\u5A92\u4F53\uFF08\u2265768px\uFF09 */\n padImage?: MediaType\n /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08<768px\uFF09 */\n mobileImage?: MediaType\n /** \u89C6\u9891\u7C7B\u540D */\n videoClassName?: string\n /** \u56FE\u7247\u7C7B\u540D */\n imgClassName?: string\n /** \u662F\u5426\u9759\u97F3\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n muted?: boolean\n /** \u662F\u5426\u5FAA\u73AF\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n loop?: boolean\n /** \u662F\u5426\u5185\u8054\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n playsInline?: boolean\n /** \u662F\u5426\u81EA\u52A8\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n autoPlay?: boolean\n /** \u89C6\u9891\u9884\u89C8\u56FE */\n poster?: string\n /** \u89C6\u9891 ref\uFF08\u7528\u4E8E\u5916\u90E8\u63A7\u5236\u64AD\u653E/\u6682\u505C\uFF09 */\n videoRef?: React.RefObject<HTMLVideoElement>\n /** \u89C6\u9891\u64AD\u653E\u56DE\u8C03 */\n onVideoPlay?: () => void\n /** \u89C6\u9891\u6682\u505C\u56DE\u8C03 */\n onVideoPause?: () => void\n /** \u89C6\u9891\u7ED3\u675F\u56DE\u8C03 */\n onVideoEnded?: () => void\n}\n\n/**\n * Media - \u667A\u80FD\u5A92\u4F53\u7EC4\u4EF6\n *\n * @description \u6839\u636E\u5A92\u4F53\u7C7B\u578B\u81EA\u52A8\u9009\u62E9\u4F7F\u7528 video \u6807\u7B7E\u6216 Picture \u7EC4\u4EF6\n * \u652F\u6301\u54CD\u5E94\u5F0F\u5A92\u4F53\u6E90\uFF0C\u5982\u679C\u4EFB\u610F\u5A92\u4F53\u7C7B\u578B\u662F\u89C6\u9891\uFF0C\u5219\u4F7F\u7528 video \u6807\u7B7E\u6E32\u67D3\n */\nconst Media = React.forwardRef<HTMLDivElement, MediaProps>(\n (\n {\n pcImage,\n desktopImage,\n laptopImage,\n padImage,\n mobileImage,\n className,\n videoClassName,\n imgClassName,\n muted = true,\n loop = true,\n playsInline = true,\n autoPlay = true,\n poster,\n videoRef,\n onVideoPlay,\n onVideoPause,\n onVideoEnded,\n ...props\n },\n ref\n ) => {\n const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n const isPad = useMediaQuery({ query: '(min-width: 768px) and (max-width: 1024px)' })\n const isLaptop = useMediaQuery({ query: '(min-width: 1025px) and (max-width: 1439px)' })\n const isDesktop = useMediaQuery({ query: '(min-width: 1440px) and (max-width: 1919px)' })\n const isPc = useMediaQuery({ query: '(min-width: 1920px)' })\n\n const allImages = [pcImage, desktopImage, laptopImage, padImage, mobileImage]\n const hasVideo = allImages.some(media => media?.mimeType === 'video/mp4')\n\n const currentMedia = isPc\n ? pcImage\n : isDesktop\n ? desktopImage\n : isLaptop\n ? laptopImage\n : isPad\n ? padImage\n : mobileImage\n\n const fallbackMedia = currentMedia || pcImage || desktopImage || laptopImage || padImage || mobileImage\n\n const videoSrc = fallbackMedia?.mimeType === 'video/mp4' ? fallbackMedia.url : undefined\n const imagePoster = poster || (fallbackMedia?.mimeType !== 'video/mp4' ? fallbackMedia?.url : undefined)\n\n const pictureSource = [\n mobileImage?.url && `${mobileImage.url} 768`,\n padImage?.url && `${padImage.url} 1025`,\n laptopImage?.url && `${laptopImage.url} 1440`,\n desktopImage?.url && `${desktopImage.url} 1920`,\n pcImage?.url,\n ]\n .filter(Boolean)\n .reverse()\n .join(' , ')\n\n return (\n <div ref={ref} className={cn('media-wrapper', className)} {...props}>\n {hasVideo ? (\n <video\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Media_exports", "__export", "Media_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_helpers", "Media", "React", "pcImage", "desktopImage", "laptopImage", "padImage", "mobileImage", "className", "videoClassName", "imgClassName", "muted", "loop", "playsInline", "autoPlay", "poster", "videoRef", "onVideoPlay", "onVideoPause", "onVideoEnded", "props", "ref", "isMobile", "isPad", "isLaptop", "isDesktop", "isPc", "
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Picture } from '../../components/index.js'\nimport type { Media as MediaType } from '../../types/props.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface MediaProps extends React.HTMLAttributes<HTMLDivElement> {\n /** PC\u7AEF\u5A92\u4F53\uFF08\u22651920px\uFF09 */\n pcImage?: MediaType\n /** \u5927\u684C\u9762\u5A92\u4F53\uFF08\u22651440px\uFF09 */\n desktopImage?: MediaType\n /** \u5C0F\u684C\u9762\u5A92\u4F53\uFF08\u22651025px\uFF09 */\n laptopImage?: MediaType\n /** \u5E73\u677F\u7AEF\u5A92\u4F53\uFF08\u2265768px\uFF09 */\n padImage?: MediaType\n /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08<768px\uFF09 */\n mobileImage?: MediaType\n /** \u89C6\u9891\u7C7B\u540D */\n videoClassName?: string\n /** \u56FE\u7247\u7C7B\u540D */\n imgClassName?: string\n /** \u662F\u5426\u9759\u97F3\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n muted?: boolean\n /** \u662F\u5426\u5FAA\u73AF\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n loop?: boolean\n /** \u662F\u5426\u5185\u8054\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n playsInline?: boolean\n /** \u662F\u5426\u81EA\u52A8\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n autoPlay?: boolean\n /** \u89C6\u9891\u9884\u89C8\u56FE */\n poster?: string\n /** \u89C6\u9891 ref\uFF08\u7528\u4E8E\u5916\u90E8\u63A7\u5236\u64AD\u653E/\u6682\u505C\uFF09 */\n videoRef?: React.RefObject<HTMLVideoElement>\n /** \u89C6\u9891\u64AD\u653E\u56DE\u8C03 */\n onVideoPlay?: () => void\n /** \u89C6\u9891\u6682\u505C\u56DE\u8C03 */\n onVideoPause?: () => void\n /** \u89C6\u9891\u7ED3\u675F\u56DE\u8C03 */\n onVideoEnded?: () => void\n}\n\n/**\n * Media - \u667A\u80FD\u5A92\u4F53\u7EC4\u4EF6\n *\n * @description \u6839\u636E\u5A92\u4F53\u7C7B\u578B\u81EA\u52A8\u9009\u62E9\u4F7F\u7528 video \u6807\u7B7E\u6216 Picture \u7EC4\u4EF6\n * \u652F\u6301\u54CD\u5E94\u5F0F\u5A92\u4F53\u6E90\uFF0C\u5982\u679C\u4EFB\u610F\u5A92\u4F53\u7C7B\u578B\u662F\u89C6\u9891\uFF0C\u5219\u4F7F\u7528 video \u6807\u7B7E\u6E32\u67D3\n */\nconst Media = React.forwardRef<HTMLDivElement, MediaProps>(\n (\n {\n pcImage,\n desktopImage,\n laptopImage,\n padImage,\n mobileImage,\n className,\n videoClassName,\n imgClassName,\n muted = true,\n loop = true,\n playsInline = true,\n autoPlay = true,\n poster,\n videoRef,\n onVideoPlay,\n onVideoPause,\n onVideoEnded,\n ...props\n },\n ref\n ) => {\n const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n const isPad = useMediaQuery({ query: '(min-width: 768px) and (max-width: 1024px)' })\n const isLaptop = useMediaQuery({ query: '(min-width: 1025px) and (max-width: 1439px)' })\n const isDesktop = useMediaQuery({ query: '(min-width: 1440px) and (max-width: 1919px)' })\n const isPc = useMediaQuery({ query: '(min-width: 1920px)' })\n\n const [mounted, setMounted] = React.useState(false)\n React.useEffect(() => {\n setMounted(true)\n }, [])\n\n const allImages = [pcImage, desktopImage, laptopImage, padImage, mobileImage]\n const hasVideo = allImages.some(media => media?.mimeType === 'video/mp4')\n\n const currentMedia = isPc\n ? pcImage\n : isDesktop\n ? desktopImage\n : isLaptop\n ? laptopImage\n : isPad\n ? padImage\n : mobileImage\n\n const fallbackMedia = currentMedia || pcImage || desktopImage || laptopImage || padImage || mobileImage\n\n const videoSrc = fallbackMedia?.mimeType === 'video/mp4' ? fallbackMedia.url : undefined\n const imagePoster = poster || (fallbackMedia?.mimeType !== 'video/mp4' ? fallbackMedia?.url : undefined)\n const ariaLabel = allImages.find(media => media?.alt)?.alt || ''\n\n const pictureSource = [\n mobileImage?.url && `${mobileImage.url} 768`,\n padImage?.url && `${padImage.url} 1025`,\n laptopImage?.url && `${laptopImage.url} 1440`,\n desktopImage?.url && `${desktopImage.url} 1920`,\n pcImage?.url,\n ]\n .filter(Boolean)\n .reverse()\n .join(' , ')\n\n return (\n <div ref={ref} className={cn('media-wrapper', className)} {...props}>\n {hasVideo ? (\n mounted && (\n <video\n key={videoSrc}\n ref={videoRef}\n src={videoSrc}\n poster={imagePoster}\n className={cn('size-full object-cover', videoClassName)}\n muted={muted}\n loop={loop}\n playsInline={playsInline}\n autoPlay={autoPlay}\n aria-label={ariaLabel}\n onPlay={onVideoPlay}\n onPause={onVideoPause}\n onEnded={onVideoEnded}\n />\n )\n ) : (\n <Picture\n className=\"size-full\"\n imgClassName={cn('size-full object-cover', imgClassName)}\n alt={pcImage?.alt || desktopImage?.alt || laptopImage?.alt || padImage?.alt || mobileImage?.alt || ''}\n source={pictureSource}\n />\n )}\n </div>\n )\n }\n)\n\nMedia.displayName = 'Media'\n\nexport default Media\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsHY,IAAAI,EAAA,6BApHZC,EAAkB,oBAClBC,EAA8B,4BAC9BC,EAAwB,qCAExBC,EAAmB,kCA2CnB,MAAMC,EAAQ,EAAAC,QAAM,WAClB,CACE,CACE,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,YAAAC,EAAc,GACd,SAAAC,EAAW,GACX,OAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAQ,iBAAc,CAAE,MAAO,4CAA6C,CAAC,EAC7EC,KAAW,iBAAc,CAAE,MAAO,6CAA8C,CAAC,EACjFC,KAAY,iBAAc,CAAE,MAAO,6CAA8C,CAAC,EAClFC,KAAO,iBAAc,CAAE,MAAO,qBAAsB,CAAC,EAErD,CAACC,EAASC,CAAU,EAAI,EAAA1B,QAAM,SAAS,EAAK,EAClD,EAAAA,QAAM,UAAU,IAAM,CACpB0B,EAAW,EAAI,CACjB,EAAG,CAAC,CAAC,EAEL,MAAMC,EAAY,CAAC1B,EAASC,EAAcC,EAAaC,EAAUC,CAAW,EACtEuB,EAAWD,EAAU,KAAKE,GAASA,GAAO,WAAa,WAAW,EAYlEC,GAVeN,EACjBvB,EACAsB,EACErB,EACAoB,EACEnB,EACAkB,EACEjB,EACAC,IAE4BJ,GAAWC,GAAgBC,GAAeC,GAAYC,EAEtF0B,EAAWD,GAAe,WAAa,YAAcA,EAAc,IAAM,OACzEE,EAAcnB,IAAWiB,GAAe,WAAa,YAAcA,GAAe,IAAM,QACxFG,EAAYN,EAAU,KAAKE,GAASA,GAAO,GAAG,GAAG,KAAO,GAExDK,EAAgB,CACpB7B,GAAa,KAAO,GAAGA,EAAY,GAAG,OACtCD,GAAU,KAAO,GAAGA,EAAS,GAAG,QAChCD,GAAa,KAAO,GAAGA,EAAY,GAAG,QACtCD,GAAc,KAAO,GAAGA,EAAa,GAAG,QACxCD,GAAS,GACX,EACG,OAAO,OAAO,EACd,QAAQ,EACR,KAAK,KAAK,EAEb,SACE,OAAC,OAAI,IAAKkB,EAAK,aAAW,MAAG,gBAAiBb,CAAS,EAAI,GAAGY,EAC3D,SAAAU,EACCH,MACE,OAAC,SAEC,IAAKX,EACL,IAAKiB,EACL,OAAQC,EACR,aAAW,MAAG,yBAA0BzB,CAAc,EACtD,MAAOE,EACP,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,aAAYqB,EACZ,OAAQlB,EACR,QAASC,EACT,QAASC,GAZJc,CAaP,KAGF,OAAC,WACC,UAAU,YACV,gBAAc,MAAG,yBAA0BvB,CAAY,EACvD,IAAKP,GAAS,KAAOC,GAAc,KAAOC,GAAa,KAAOC,GAAU,KAAOC,GAAa,KAAO,GACnG,OAAQ6B,EACV,EAEJ,CAEJ,CACF,EAEAnC,EAAM,YAAc,QAEpB,IAAOP,EAAQO",
|
|
6
|
+
"names": ["Media_exports", "__export", "Media_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_helpers", "Media", "React", "pcImage", "desktopImage", "laptopImage", "padImage", "mobileImage", "className", "videoClassName", "imgClassName", "muted", "loop", "playsInline", "autoPlay", "poster", "videoRef", "onVideoPlay", "onVideoPause", "onVideoEnded", "props", "ref", "isMobile", "isPad", "isLaptop", "isDesktop", "isPc", "mounted", "setMounted", "allImages", "hasVideo", "media", "fallbackMedia", "videoSrc", "imagePoster", "ariaLabel", "pictureSource"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as u}from"react/jsx-runtime";import d from"react";import{useMediaQuery as s}from"react-responsive";import{Picture as B}from"../../components/index.js";import{cn as l}from"../../helpers/index.js";const y=d.forwardRef(({pcImage:r,desktopImage:e,laptopImage:i,padImage:t,mobileImage:o,className:f,videoClassName:m,imgClassName:M,muted:v=!0,loop:x=!0,playsInline:T=!0,autoPlay:P=!0,poster:w,videoRef:h,onVideoPlay:b,onVideoPause:N,onVideoEnded:E,...L},R)=>{const O=s({query:"(max-width: 767px)"}),q=s({query:"(min-width: 768px) and (max-width: 1024px)"}),V=s({query:"(min-width: 1025px) and (max-width: 1439px)"}),j=s({query:"(min-width: 1440px) and (max-width: 1919px)"}),H=s({query:"(min-width: 1920px)"}),[$,z]=d.useState(!1);d.useEffect(()=>{z(!0)},[]);const c=[r,e,i,t,o],C=c.some(a=>a?.mimeType==="video/mp4"),n=(H?r:j?e:V?i:q?t:o)||r||e||i||t||o,p=n?.mimeType==="video/mp4"?n.url:void 0,D=w||(n?.mimeType!=="video/mp4"?n?.url:void 0),S=c.find(a=>a?.alt)?.alt||"",A=[o?.url&&`${o.url} 768`,t?.url&&`${t.url} 1025`,i?.url&&`${i.url} 1440`,e?.url&&`${e.url} 1920`,r?.url].filter(Boolean).reverse().join(" , ");return u("div",{ref:R,className:l("media-wrapper",f),...L,children:C?$&&u("video",{ref:h,src:p,poster:D,className:l("size-full object-cover",m),muted:v,loop:x,playsInline:T,autoPlay:P,"aria-label":S,onPlay:b,onPause:N,onEnded:E},p):u(B,{className:"size-full",imgClassName:l("size-full object-cover",M),alt:r?.alt||e?.alt||i?.alt||t?.alt||o?.alt||"",source:A})})});y.displayName="Media";var U=y;export{U as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Media/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Picture } from '../../components/index.js'\nimport type { Media as MediaType } from '../../types/props.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface MediaProps extends React.HTMLAttributes<HTMLDivElement> {\n /** PC\u7AEF\u5A92\u4F53\uFF08\u22651920px\uFF09 */\n pcImage?: MediaType\n /** \u5927\u684C\u9762\u5A92\u4F53\uFF08\u22651440px\uFF09 */\n desktopImage?: MediaType\n /** \u5C0F\u684C\u9762\u5A92\u4F53\uFF08\u22651025px\uFF09 */\n laptopImage?: MediaType\n /** \u5E73\u677F\u7AEF\u5A92\u4F53\uFF08\u2265768px\uFF09 */\n padImage?: MediaType\n /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08<768px\uFF09 */\n mobileImage?: MediaType\n /** \u89C6\u9891\u7C7B\u540D */\n videoClassName?: string\n /** \u56FE\u7247\u7C7B\u540D */\n imgClassName?: string\n /** \u662F\u5426\u9759\u97F3\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n muted?: boolean\n /** \u662F\u5426\u5FAA\u73AF\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n loop?: boolean\n /** \u662F\u5426\u5185\u8054\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n playsInline?: boolean\n /** \u662F\u5426\u81EA\u52A8\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n autoPlay?: boolean\n /** \u89C6\u9891\u9884\u89C8\u56FE */\n poster?: string\n /** \u89C6\u9891 ref\uFF08\u7528\u4E8E\u5916\u90E8\u63A7\u5236\u64AD\u653E/\u6682\u505C\uFF09 */\n videoRef?: React.RefObject<HTMLVideoElement>\n /** \u89C6\u9891\u64AD\u653E\u56DE\u8C03 */\n onVideoPlay?: () => void\n /** \u89C6\u9891\u6682\u505C\u56DE\u8C03 */\n onVideoPause?: () => void\n /** \u89C6\u9891\u7ED3\u675F\u56DE\u8C03 */\n onVideoEnded?: () => void\n}\n\n/**\n * Media - \u667A\u80FD\u5A92\u4F53\u7EC4\u4EF6\n *\n * @description \u6839\u636E\u5A92\u4F53\u7C7B\u578B\u81EA\u52A8\u9009\u62E9\u4F7F\u7528 video \u6807\u7B7E\u6216 Picture \u7EC4\u4EF6\n * \u652F\u6301\u54CD\u5E94\u5F0F\u5A92\u4F53\u6E90\uFF0C\u5982\u679C\u4EFB\u610F\u5A92\u4F53\u7C7B\u578B\u662F\u89C6\u9891\uFF0C\u5219\u4F7F\u7528 video \u6807\u7B7E\u6E32\u67D3\n */\nconst Media = React.forwardRef<HTMLDivElement, MediaProps>(\n (\n {\n pcImage,\n desktopImage,\n laptopImage,\n padImage,\n mobileImage,\n className,\n videoClassName,\n imgClassName,\n muted = true,\n loop = true,\n playsInline = true,\n autoPlay = true,\n poster,\n videoRef,\n onVideoPlay,\n onVideoPause,\n onVideoEnded,\n ...props\n },\n ref\n ) => {\n const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n const isPad = useMediaQuery({ query: '(min-width: 768px) and (max-width: 1024px)' })\n const isLaptop = useMediaQuery({ query: '(min-width: 1025px) and (max-width: 1439px)' })\n const isDesktop = useMediaQuery({ query: '(min-width: 1440px) and (max-width: 1919px)' })\n const isPc = useMediaQuery({ query: '(min-width: 1920px)' })\n\n const allImages = [pcImage, desktopImage, laptopImage, padImage, mobileImage]\n const hasVideo = allImages.some(media => media?.mimeType === 'video/mp4')\n\n const currentMedia = isPc\n ? pcImage\n : isDesktop\n ? desktopImage\n : isLaptop\n ? laptopImage\n : isPad\n ? padImage\n : mobileImage\n\n const fallbackMedia = currentMedia || pcImage || desktopImage || laptopImage || padImage || mobileImage\n\n const videoSrc = fallbackMedia?.mimeType === 'video/mp4' ? fallbackMedia.url : undefined\n const imagePoster = poster || (fallbackMedia?.mimeType !== 'video/mp4' ? fallbackMedia?.url : undefined)\n\n const pictureSource = [\n mobileImage?.url && `${mobileImage.url} 768`,\n padImage?.url && `${padImage.url} 1025`,\n laptopImage?.url && `${laptopImage.url} 1440`,\n desktopImage?.url && `${desktopImage.url} 1920`,\n pcImage?.url,\n ]\n .filter(Boolean)\n .reverse()\n .join(' , ')\n\n return (\n <div ref={ref} className={cn('media-wrapper', className)} {...props}>\n {hasVideo ? (\n <video\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "React", "useMediaQuery", "Picture", "cn", "Media", "pcImage", "desktopImage", "laptopImage", "padImage", "mobileImage", "className", "videoClassName", "imgClassName", "muted", "loop", "playsInline", "autoPlay", "poster", "videoRef", "onVideoPlay", "onVideoPause", "onVideoEnded", "props", "ref", "isMobile", "isPad", "isLaptop", "isDesktop", "isPc", "
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Picture } from '../../components/index.js'\nimport type { Media as MediaType } from '../../types/props.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface MediaProps extends React.HTMLAttributes<HTMLDivElement> {\n /** PC\u7AEF\u5A92\u4F53\uFF08\u22651920px\uFF09 */\n pcImage?: MediaType\n /** \u5927\u684C\u9762\u5A92\u4F53\uFF08\u22651440px\uFF09 */\n desktopImage?: MediaType\n /** \u5C0F\u684C\u9762\u5A92\u4F53\uFF08\u22651025px\uFF09 */\n laptopImage?: MediaType\n /** \u5E73\u677F\u7AEF\u5A92\u4F53\uFF08\u2265768px\uFF09 */\n padImage?: MediaType\n /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08<768px\uFF09 */\n mobileImage?: MediaType\n /** \u89C6\u9891\u7C7B\u540D */\n videoClassName?: string\n /** \u56FE\u7247\u7C7B\u540D */\n imgClassName?: string\n /** \u662F\u5426\u9759\u97F3\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n muted?: boolean\n /** \u662F\u5426\u5FAA\u73AF\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n loop?: boolean\n /** \u662F\u5426\u5185\u8054\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n playsInline?: boolean\n /** \u662F\u5426\u81EA\u52A8\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n autoPlay?: boolean\n /** \u89C6\u9891\u9884\u89C8\u56FE */\n poster?: string\n /** \u89C6\u9891 ref\uFF08\u7528\u4E8E\u5916\u90E8\u63A7\u5236\u64AD\u653E/\u6682\u505C\uFF09 */\n videoRef?: React.RefObject<HTMLVideoElement>\n /** \u89C6\u9891\u64AD\u653E\u56DE\u8C03 */\n onVideoPlay?: () => void\n /** \u89C6\u9891\u6682\u505C\u56DE\u8C03 */\n onVideoPause?: () => void\n /** \u89C6\u9891\u7ED3\u675F\u56DE\u8C03 */\n onVideoEnded?: () => void\n}\n\n/**\n * Media - \u667A\u80FD\u5A92\u4F53\u7EC4\u4EF6\n *\n * @description \u6839\u636E\u5A92\u4F53\u7C7B\u578B\u81EA\u52A8\u9009\u62E9\u4F7F\u7528 video \u6807\u7B7E\u6216 Picture \u7EC4\u4EF6\n * \u652F\u6301\u54CD\u5E94\u5F0F\u5A92\u4F53\u6E90\uFF0C\u5982\u679C\u4EFB\u610F\u5A92\u4F53\u7C7B\u578B\u662F\u89C6\u9891\uFF0C\u5219\u4F7F\u7528 video \u6807\u7B7E\u6E32\u67D3\n */\nconst Media = React.forwardRef<HTMLDivElement, MediaProps>(\n (\n {\n pcImage,\n desktopImage,\n laptopImage,\n padImage,\n mobileImage,\n className,\n videoClassName,\n imgClassName,\n muted = true,\n loop = true,\n playsInline = true,\n autoPlay = true,\n poster,\n videoRef,\n onVideoPlay,\n onVideoPause,\n onVideoEnded,\n ...props\n },\n ref\n ) => {\n const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n const isPad = useMediaQuery({ query: '(min-width: 768px) and (max-width: 1024px)' })\n const isLaptop = useMediaQuery({ query: '(min-width: 1025px) and (max-width: 1439px)' })\n const isDesktop = useMediaQuery({ query: '(min-width: 1440px) and (max-width: 1919px)' })\n const isPc = useMediaQuery({ query: '(min-width: 1920px)' })\n\n const [mounted, setMounted] = React.useState(false)\n React.useEffect(() => {\n setMounted(true)\n }, [])\n\n const allImages = [pcImage, desktopImage, laptopImage, padImage, mobileImage]\n const hasVideo = allImages.some(media => media?.mimeType === 'video/mp4')\n\n const currentMedia = isPc\n ? pcImage\n : isDesktop\n ? desktopImage\n : isLaptop\n ? laptopImage\n : isPad\n ? padImage\n : mobileImage\n\n const fallbackMedia = currentMedia || pcImage || desktopImage || laptopImage || padImage || mobileImage\n\n const videoSrc = fallbackMedia?.mimeType === 'video/mp4' ? fallbackMedia.url : undefined\n const imagePoster = poster || (fallbackMedia?.mimeType !== 'video/mp4' ? fallbackMedia?.url : undefined)\n const ariaLabel = allImages.find(media => media?.alt)?.alt || ''\n\n const pictureSource = [\n mobileImage?.url && `${mobileImage.url} 768`,\n padImage?.url && `${padImage.url} 1025`,\n laptopImage?.url && `${laptopImage.url} 1440`,\n desktopImage?.url && `${desktopImage.url} 1920`,\n pcImage?.url,\n ]\n .filter(Boolean)\n .reverse()\n .join(' , ')\n\n return (\n <div ref={ref} className={cn('media-wrapper', className)} {...props}>\n {hasVideo ? (\n mounted && (\n <video\n key={videoSrc}\n ref={videoRef}\n src={videoSrc}\n poster={imagePoster}\n className={cn('size-full object-cover', videoClassName)}\n muted={muted}\n loop={loop}\n playsInline={playsInline}\n autoPlay={autoPlay}\n aria-label={ariaLabel}\n onPlay={onVideoPlay}\n onPause={onVideoPause}\n onEnded={onVideoEnded}\n />\n )\n ) : (\n <Picture\n className=\"size-full\"\n imgClassName={cn('size-full object-cover', imgClassName)}\n alt={pcImage?.alt || desktopImage?.alt || laptopImage?.alt || padImage?.alt || mobileImage?.alt || ''}\n source={pictureSource}\n />\n )}\n </div>\n )\n }\n)\n\nMedia.displayName = 'Media'\n\nexport default Media\n"],
|
|
5
|
+
"mappings": "aAsHY,cAAAA,MAAA,oBApHZ,OAAOC,MAAW,QAClB,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,WAAAC,MAAe,4BAExB,OAAS,MAAAC,MAAU,yBA2CnB,MAAMC,EAAQJ,EAAM,WAClB,CACE,CACE,QAAAK,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,YAAAC,EAAc,GACd,SAAAC,EAAW,GACX,OAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAWvB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDwB,EAAQxB,EAAc,CAAE,MAAO,4CAA6C,CAAC,EAC7EyB,EAAWzB,EAAc,CAAE,MAAO,6CAA8C,CAAC,EACjF0B,EAAY1B,EAAc,CAAE,MAAO,6CAA8C,CAAC,EAClF2B,EAAO3B,EAAc,CAAE,MAAO,qBAAsB,CAAC,EAErD,CAAC4B,EAASC,CAAU,EAAI9B,EAAM,SAAS,EAAK,EAClDA,EAAM,UAAU,IAAM,CACpB8B,EAAW,EAAI,CACjB,EAAG,CAAC,CAAC,EAEL,MAAMC,EAAY,CAAC1B,EAASC,EAAcC,EAAaC,EAAUC,CAAW,EACtEuB,EAAWD,EAAU,KAAKE,GAASA,GAAO,WAAa,WAAW,EAYlEC,GAVeN,EACjBvB,EACAsB,EACErB,EACAoB,EACEnB,EACAkB,EACEjB,EACAC,IAE4BJ,GAAWC,GAAgBC,GAAeC,GAAYC,EAEtF0B,EAAWD,GAAe,WAAa,YAAcA,EAAc,IAAM,OACzEE,EAAcnB,IAAWiB,GAAe,WAAa,YAAcA,GAAe,IAAM,QACxFG,EAAYN,EAAU,KAAKE,GAASA,GAAO,GAAG,GAAG,KAAO,GAExDK,EAAgB,CACpB7B,GAAa,KAAO,GAAGA,EAAY,GAAG,OACtCD,GAAU,KAAO,GAAGA,EAAS,GAAG,QAChCD,GAAa,KAAO,GAAGA,EAAY,GAAG,QACtCD,GAAc,KAAO,GAAGA,EAAa,GAAG,QACxCD,GAAS,GACX,EACG,OAAO,OAAO,EACd,QAAQ,EACR,KAAK,KAAK,EAEb,OACEN,EAAC,OAAI,IAAKwB,EAAK,UAAWpB,EAAG,gBAAiBO,CAAS,EAAI,GAAGY,EAC3D,SAAAU,EACCH,GACE9B,EAAC,SAEC,IAAKmB,EACL,IAAKiB,EACL,OAAQC,EACR,UAAWjC,EAAG,yBAA0BQ,CAAc,EACtD,MAAOE,EACP,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,aAAYqB,EACZ,OAAQlB,EACR,QAASC,EACT,QAASC,GAZJc,CAaP,EAGFpC,EAACG,EAAA,CACC,UAAU,YACV,aAAcC,EAAG,yBAA0BS,CAAY,EACvD,IAAKP,GAAS,KAAOC,GAAc,KAAOC,GAAa,KAAOC,GAAU,KAAOC,GAAa,KAAO,GACnG,OAAQ6B,EACV,EAEJ,CAEJ,CACF,EAEAlC,EAAM,YAAc,QAEpB,IAAOmC,EAAQnC",
|
|
6
|
+
"names": ["jsx", "React", "useMediaQuery", "Picture", "cn", "Media", "pcImage", "desktopImage", "laptopImage", "padImage", "mobileImage", "className", "videoClassName", "imgClassName", "muted", "loop", "playsInline", "autoPlay", "poster", "videoRef", "onVideoPlay", "onVideoPause", "onVideoEnded", "props", "ref", "isMobile", "isPad", "isLaptop", "isDesktop", "isPc", "mounted", "setMounted", "allImages", "hasVideo", "media", "fallbackMedia", "videoSrc", "imagePoster", "ariaLabel", "pictureSource", "Media_default"]
|
|
7
7
|
}
|