@linktr.ee/messaging-react 1.26.1 → 1.27.0

package/dist/Creator-B6M8dB0U.js

@@ -0,0 +1,87 @@
+import { jsxs as n, jsx as e, Fragment as u } from "react/jsx-runtime";
+import { CheckCircleIcon as N, EyeSlashIcon as v, EyeIcon as k } from "@phosphor-icons/react";
+import o from "classnames";
+import { useState as w } from "react";
+import { g as C, r as f, M as _ } from "./MediaPlayer-DsjlYGGH.js";
+const b = ({ onClose: a }) => /* @__PURE__ */ e(
+  "button",
+  {
+    type: "button",
+    onClick: a,
+    className: "absolute right-3 top-3 z-40 flex size-8 items-center justify-center rounded-full bg-black/60 text-white",
+    "aria-label": "Close preview",
+    children: /* @__PURE__ */ e(k, { className: "size-4", weight: "fill" })
+  }
+), y = ({ thumbnail: a, mimeType: s, canExpand: t, onExpand: l }) => /* @__PURE__ */ n(
+  "button",
+  {
+    type: "button",
+    disabled: !t,
+    className: o("relative aspect-video block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none", { "cursor-pointer": t, "cursor-default": !t }),
+    onClick: l,
+    "aria-label": t ? "Expand attachment preview" : void 0,
+    children: [
+      a ? /* @__PURE__ */ e("img", { src: a, alt: "", className: "absolute inset-0 h-full w-full object-cover" }) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: f(s, { className: "size-12 text-black/20", weight: "regular" }) }),
+      t && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute right-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white", children: /* @__PURE__ */ e(v, { className: "size-4", weight: "fill" }) })
+    ]
+  }
+), z = (a, s, t, l) => a === "document" ? t ?? l : s, j = ({ source: a, mimeType: s, sourceType: t, poster: l, thumbnail: c, title: i, onCollapse: r }) => {
+  if (t === "video" || t === "audio")
+    return /* @__PURE__ */ n("div", { className: "relative", children: [
+      /* @__PURE__ */ e(
+        _,
+        {
+          source: a,
+          mimeType: s,
+          poster: l ?? c,
+          autoPlay: !0,
+          loop: !0,
+          controls: !1,
+          showProgress: !0,
+          onContainerClick: r,
+          muted: t === "video"
+        }
+      ),
+      /* @__PURE__ */ e(b, { onClose: r })
+    ] });
+  const d = z(t, a, l, c);
+  return /* @__PURE__ */ n("div", { className: "relative", children: [
+    /* @__PURE__ */ e("button", { type: "button", className: "block w-full cursor-pointer border-0 p-0 text-left appearance-none", onClick: r, "aria-label": "Close preview", children: /* @__PURE__ */ e("img", { src: d, alt: i ?? "", className: "block w-full" }) }),
+    /* @__PURE__ */ e(b, { onClose: r })
+  ] });
+}, E = ({ title: a, placeholderTitle: s, mimeType: t, detail: l, paymentStatus: c, displayAmountText: i, isPlaceholderAmount: r }) => /* @__PURE__ */ n("div", { className: "px-4 pb-3 pt-3", children: [
+  /* @__PURE__ */ e("p", { className: o("mb-1.5 truncate text-base font-medium", { "text-black/30": !a, "text-black": !!a }), children: a || s }),
+  /* @__PURE__ */ n("div", { className: "flex items-center gap-1", children: [
+    f(t, { className: "size-5 shrink-0 text-black/55", weight: "regular" }),
+    l && /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: l }),
+    c === "paid" ? /* @__PURE__ */ n(u, { children: [
+      /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: "•" }),
+      /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[#008236]", children: "Purchased" }),
+      /* @__PURE__ */ e(N, { className: "size-4 text-[#008236]", weight: "bold" })
+    ] }) : i && /* @__PURE__ */ n(u, { children: [
+      /* @__PURE__ */ e("span", { className: o("text-xs font-medium", { "text-black/30": r, "text-black/55": !r }), children: "•" }),
+      /* @__PURE__ */ e("span", { className: o("text-xs font-medium", { "text-black/30": r, "text-black/55": !r }), children: i })
+    ] })
+  ] })
+] }), H = ({
+  title: a,
+  mimeType: s = "application/octet-stream",
+  thumbnail: t,
+  poster: l,
+  source: c,
+  detail: i,
+  amountText: r,
+  placeholderTitle: d = "Attachment title",
+  placeholderAmountText: m,
+  paymentStatus: h
+}) => {
+  const x = C(s), [g, p] = w(!1);
+  return /* @__PURE__ */ n("div", { className: "w-[280px] overflow-hidden rounded-3xl bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)]", children: [
+    g && c ? /* @__PURE__ */ e(j, { source: c, mimeType: s, sourceType: x, poster: l, thumbnail: t, title: a, onCollapse: () => p(!1) }) : /* @__PURE__ */ e(y, { thumbnail: t, mimeType: s, canExpand: x === "document" ? !!(c && (l || t)) : !!c, onExpand: () => p(!0) }),
+    /* @__PURE__ */ e(E, { title: a, placeholderTitle: d, mimeType: s, detail: i, paymentStatus: h, displayAmountText: m ?? r, isPlaceholderAmount: !!m })
+  ] });
+};
+export {
+  H as default
+};
+//# sourceMappingURL=Creator-B6M8dB0U.js.map

package/dist/Creator-B6M8dB0U.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Creator-B6M8dB0U.js","sources":["../src/components/LockedAttachment/components/Creator.tsx"],"sourcesContent":["import { CheckCircleIcon, EyeIcon, EyeSlashIcon } from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useState } from 'react'\n\nimport type { LockedAttachmentBaseProps, PaymentStatus } from '../types'\nimport { renderTypeIcon } from '../utils/icons'\nimport { getSourceType, type AttachmentSourceType } from '../utils/mimeType'\n\nimport MediaPlayer from './MediaPlayer'\n\nexport interface CreatorCardProps extends LockedAttachmentBaseProps {\n  title?: string\n  placeholderTitle?: string\n  placeholderAmountText?: string\n}\n\nconst CloseButton = ({ onClose }: { onClose: () => void }) => (\n  <button\n    type=\"button\"\n    onClick={onClose}\n    className=\"absolute right-3 top-3 z-40 flex size-8 items-center justify-center rounded-full bg-black/60 text-white\"\n    aria-label=\"Close preview\"\n  >\n    <EyeIcon className=\"size-4\" weight=\"fill\" />\n  </button>\n)\n\ninterface CollapsedThumbnailProps {\n  thumbnail?: string\n  mimeType: string\n  canExpand: boolean\n  onExpand: () => void\n}\n\nconst CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = ({ thumbnail, mimeType, canExpand, onExpand }) => {\n  return (\n    <button\n      type=\"button\"\n      disabled={!canExpand}\n      className={classNames('relative aspect-video block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none', { 'cursor-pointer': canExpand, 'cursor-default': !canExpand })}\n      onClick={onExpand}\n      aria-label={canExpand ? 'Expand attachment preview' : undefined}\n    >\n      {thumbnail\n        ? <img src={thumbnail} alt=\"\" className=\"absolute inset-0 h-full w-full object-cover\" />\n        : <div className=\"absolute inset-0 flex items-center justify-center\">{renderTypeIcon(mimeType, { className: 'size-12 text-black/20', weight: 'regular' })}</div>\n      }\n      {canExpand && (\n        <div className=\"pointer-events-none absolute right-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white\">\n          <EyeSlashIcon className=\"size-4\" weight=\"fill\" />\n        </div>\n      )}\n    </button>\n  )\n}\n\ninterface ExpandedMediaProps {\n  source: string\n  mimeType: string\n  sourceType: AttachmentSourceType\n  poster?: string\n  thumbnail?: string\n  title?: string\n  onCollapse: () => void\n}\n\nconst getExpandedImgSrc = (sourceType: AttachmentSourceType, source: string, poster?: string, thumbnail?: string) =>\n  sourceType === 'document' ? (poster ?? thumbnail) : source\n\nconst ExpandedMedia: React.FC<ExpandedMediaProps> = ({ source, mimeType, sourceType, poster, thumbnail, title, onCollapse }) => {\n  if (sourceType === 'video' || sourceType === 'audio') {\n    return (\n      <div className=\"relative\">\n        <MediaPlayer\n          source={source}\n          mimeType={mimeType}\n          poster={poster ?? thumbnail}\n          autoPlay\n          loop\n          controls={false}\n          showProgress\n          onContainerClick={onCollapse}\n          muted={sourceType === 'video'}\n        />\n        <CloseButton onClose={onCollapse} />\n      </div>\n    )\n  }\n  const imgSrc = getExpandedImgSrc(sourceType, source, poster, thumbnail)\n  return (\n    <div className=\"relative\">\n      <button type=\"button\" className=\"block w-full cursor-pointer border-0 p-0 text-left appearance-none\" onClick={onCollapse} aria-label=\"Close preview\">\n        <img src={imgSrc} alt={title ?? ''} className=\"block w-full\" />\n      </button>\n      <CloseButton onClose={onCollapse} />\n    </div>\n  )\n}\n\ninterface CreatorCardMetaProps {\n  title?: string\n  placeholderTitle: string\n  mimeType: string\n  detail?: string\n  paymentStatus?: PaymentStatus\n  displayAmountText?: string\n  isPlaceholderAmount: boolean\n}\n\nconst CreatorCardMeta: React.FC<CreatorCardMetaProps> = ({ title, placeholderTitle, mimeType, detail, paymentStatus, displayAmountText, isPlaceholderAmount }) => {\n  return (\n    <div className=\"px-4 pb-3 pt-3\">\n      <p className={classNames('mb-1.5 truncate text-base font-medium', { 'text-black/30': !title, 'text-black': !!title })}>\n        {title || placeholderTitle}\n      </p>\n      <div className=\"flex items-center gap-1\">\n        {renderTypeIcon(mimeType, { className: 'size-5 shrink-0 text-black/55', weight: 'regular' })}\n        {detail && <span className=\"text-xs font-medium text-black/55\">{detail}</span>}\n        {paymentStatus === 'paid' ? (\n          <>\n            <span className=\"text-xs font-medium text-black/55\">•</span>\n            <span className=\"text-xs font-medium text-[#008236]\">Purchased</span>\n            <CheckCircleIcon className=\"size-4 text-[#008236]\" weight=\"bold\" />\n          </>\n        ) : displayAmountText && (\n          <>\n            <span className={classNames('text-xs font-medium', { 'text-black/30': isPlaceholderAmount, 'text-black/55': !isPlaceholderAmount })}>•</span>\n            <span className={classNames('text-xs font-medium', { 'text-black/30': isPlaceholderAmount, 'text-black/55': !isPlaceholderAmount })}>{displayAmountText}</span>\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst CreatorCard: React.FC<CreatorCardProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnail,\n  poster,\n  source,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  placeholderAmountText,\n  paymentStatus,\n}) => {\n  const sourceType = getSourceType(mimeType)\n  const [expanded, setExpanded] = useState(false)\n\n  const displayAmountText = placeholderAmountText ?? amountText\n  const isPlaceholderAmount = !!placeholderAmountText\n  const canExpand = sourceType === 'document'\n    ? !!(source && (poster || thumbnail))\n    : !!source\n\n  const collapse = () => setExpanded(false)\n\n  const mediaPreview = expanded && source\n    ? <ExpandedMedia source={source} mimeType={mimeType} sourceType={sourceType} poster={poster} thumbnail={thumbnail} title={title} onCollapse={collapse} />\n    : <CollapsedThumbnail thumbnail={thumbnail} mimeType={mimeType} canExpand={canExpand} onExpand={() => setExpanded(true)} />\n\n  return (\n    <div className=\"w-[280px] overflow-hidden rounded-3xl bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)]\">\n      {mediaPreview}\n      <CreatorCardMeta title={title} placeholderTitle={placeholderTitle} mimeType={mimeType} detail={detail} paymentStatus={paymentStatus} displayAmountText={displayAmountText} isPlaceholderAmount={isPlaceholderAmount} />\n    </div>\n  )\n}\n\nexport default CreatorCard\n"],"names":["CloseButton","onClose","jsx","EyeIcon","CollapsedThumbnail","thumbnail","mimeType","canExpand","onExpand","jsxs","classNames","EyeSlashIcon","getExpandedImgSrc","sourceType","source","poster","ExpandedMedia","title","onCollapse","MediaPlayer","imgSrc","CreatorCardMeta","placeholderTitle","detail","paymentStatus","displayAmountText","isPlaceholderAmount","renderTypeIcon","Fragment","CheckCircleIcon","CreatorCard","amountText","placeholderAmountText","getSourceType","expanded","setExpanded","useState"],"mappings":"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"}

package/dist/MediaPlayer-DsjlYGGH.js

@@ -0,0 +1,539 @@
+import { jsxs as q, jsx as s } from "react/jsx-runtime";
+import { FileIcon as G, ImageIcon as ne, SpeakerHighIcon as re, VideoCameraIcon as le, FileMdIcon as ie, FileTextIcon as oe, FileZipIcon as ce, FilePptIcon as se, FileCsvIcon as ue, FileXlsIcon as de, FileDocIcon as me, FilePdfIcon as fe, CircleNotchIcon as ye, PlayIcon as V, PauseIcon as he } from "@phosphor-icons/react";
+import g, { lazy as b, useRef as H, useEffect as R, useCallback as W, useState as _, Suspense as ve } from "react";
+const Pe = [
+  [/pdf/, "pdf"],
+  [/wordprocessingml|msword|\.doc/, "doc"],
+  [/spreadsheetml|ms-excel|\.xls/, "xls"],
+  [/csv/, "csv"],
+  [/presentationml|ms-powerpoint|\.ppt/, "ppt"],
+  [/zip|x-rar|x-7z|x-tar|x-gzip/, "zip"],
+  [/plain|rtf/, "text"],
+  [/markdown/, "markdown"]
+];
+function J(e) {
+  return e.startsWith("video/") ? "video" : e.startsWith("audio/") ? "audio" : e.startsWith("image/") ? "image" : "document";
+}
+function we(e) {
+  const a = Pe.find(([i]) => i.test(e));
+  return a ? a[1] : "generic";
+}
+const pe = {
+  video: le,
+  audio: re,
+  image: ne,
+  document: G
+}, be = {
+  pdf: fe,
+  doc: me,
+  xls: de,
+  csv: ue,
+  ppt: se,
+  zip: ce,
+  text: oe,
+  markdown: ie,
+  generic: G
+};
+function ge(e) {
+  const a = J(e);
+  return a !== "document" ? pe[a] : be[we(e)];
+}
+function ke(e, a) {
+  return g.createElement(ge(e), a);
+}
+const Q = /\.(m4a|m4b|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i, B = /\.(mp4|og[gv]|webm|mov|m4v)(#t=[,\d+]+)?($|\?)/i, Y = /\.(m3u8)($|\?)/i, Ie = /\.(mpd)($|\?)/i, Ee = /stream\.mux\.com\/(?!\w+\.m3u8)(\w+)/, xe = /(?:youtu\.be\/|youtube(?:-nocookie|education)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=|shorts\/|live\/))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//, _e = /vimeo\.com\/(?!progressive_redirect).+/, Ne = /(?:wistia\.(?:com|net)|wi\.st)\/(?:medias|embed)\/(?:iframe\/)?([^?]+)/, Te = /open\.spotify\.com\/(\w+)\/(\w+)/i, Re = /(?:www\.|go\.)?twitch\.tv\/([a-zA-Z0-9_]+|(videos?\/|\?video=)\d+)($|\?)/, Se = /tiktok\.com\/(?:player\/v1\/|share\/video\/|@[^/]+\/video\/)([0-9]+)/, U = (e, a) => {
+  if (Array.isArray(e)) {
+    for (const i of e)
+      if (typeof i == "string" && U(i, a) || U(i.src, a))
+        return !0;
+    return !1;
+  }
+  return a(e);
+}, p = {
+  html: (e) => U(e, (a) => Q.test(a) || B.test(a)),
+  hls: (e) => U(e, (a) => Y.test(a)),
+  dash: (e) => U(e, (a) => Ie.test(a)),
+  mux: (e) => Ee.test(e),
+  youtube: (e) => xe.test(e),
+  vimeo: (e) => _e.test(e) && !B.test(e) && !Y.test(e),
+  wistia: (e) => Ne.test(e),
+  spotify: (e) => Te.test(e),
+  twitch: (e) => Re.test(e),
+  tiktok: (e) => Se.test(e)
+}, Me = g.forwardRef((e, a) => {
+  const i = Q.test(`${e.src}`) ? "audio" : "video";
+  return /* @__PURE__ */ g.createElement(i, { ...e, ref: a }, e.children);
+});
+var Ae = Me;
+const Ce = [
+  {
+    key: "hls",
+    name: "hls.js",
+    canPlay: p.hls,
+    canEnablePIP: () => !0,
+    player: b(
+      () => import(
+        /* webpackChunkName: 'reactPlayerHls' */
+        "./react-Pea5fum1.js"
+      )
+    )
+  },
+  {
+    key: "dash",
+    name: "dash.js",
+    canPlay: p.dash,
+    canEnablePIP: () => !0,
+    player: b(
+      () => import(
+        /* webpackChunkName: 'reactPlayerDash' */
+        "./react-dS1WBxxz.js"
+      )
+    )
+  },
+  {
+    key: "mux",
+    name: "Mux",
+    canPlay: p.mux,
+    canEnablePIP: () => !0,
+    player: b(
+      () => import(
+        /* webpackChunkName: 'reactPlayerMux' */
+        "./index-Da-xN4Yq.js"
+      )
+    )
+  },
+  {
+    key: "youtube",
+    name: "YouTube",
+    canPlay: p.youtube,
+    player: b(
+      () => import(
+        /* webpackChunkName: 'reactPlayerYouTube' */
+        "./react-RiBbsUDd.js"
+      )
+    )
+  },
+  {
+    key: "vimeo",
+    name: "Vimeo",
+    canPlay: p.vimeo,
+    player: b(
+      () => import(
+        /* webpackChunkName: 'reactPlayerVimeo' */
+        "./react-Cn4WlMcl.js"
+      )
+    )
+  },
+  {
+    key: "wistia",
+    name: "Wistia",
+    canPlay: p.wistia,
+    canEnablePIP: () => !0,
+    player: b(
+      () => import(
+        /* webpackChunkName: 'reactPlayerWistia' */
+        "./react-CwTJArKY.js"
+      )
+    )
+  },
+  {
+    key: "spotify",
+    name: "Spotify",
+    canPlay: p.spotify,
+    canEnablePIP: () => !1,
+    player: b(
+      () => import(
+        /* webpackChunkName: 'reactPlayerSpotify' */
+        "./react-COAP-MIW.js"
+      )
+    )
+  },
+  {
+    key: "twitch",
+    name: "Twitch",
+    canPlay: p.twitch,
+    canEnablePIP: () => !1,
+    player: b(
+      () => import(
+        /* webpackChunkName: 'reactPlayerTwitch' */
+        "./react-BxlQMOfz.js"
+      )
+    )
+  },
+  {
+    key: "tiktok",
+    name: "TikTok",
+    canPlay: p.tiktok,
+    canEnablePIP: () => !1,
+    player: b(
+      () => import(
+        /* webpackChunkName: 'reactPlayerTiktok' */
+        "./react-DkfS_atT.js"
+      )
+    )
+  },
+  {
+    key: "html",
+    name: "html",
+    canPlay: p.html,
+    canEnablePIP: () => !0,
+    player: Ae
+  }
+];
+var K = Ce;
+const Le = {
+  // Falsy values don't need to be defined
+  //
+  // native video attrs
+  // src: undefined,
+  // preload: undefined,
+  // crossOrigin: undefined,
+  // autoPlay: false,
+  // muted: false,
+  // loop: false,
+  // controls: false,
+  // playsInline: false,
+  // disableRemotePlayback: false,
+  width: "320px",
+  height: "180px",
+  // native video props
+  volume: 1,
+  playbackRate: 1,
+  // custom props
+  // playing: undefined,
+  // pip: false,
+  // light: false,
+  // fallback: null,
+  previewTabIndex: 0,
+  previewAriaLabel: "",
+  oEmbedUrl: "https://noembed.com/embed?url={url}"
+}, ee = g.forwardRef((e, a) => {
+  const { playing: i, pip: m } = e, c = e.activePlayer, r = H(null), o = H(!0);
+  R(() => {
+    var n, u;
+    r.current && (r.current.paused && i === !0 && r.current.play(), !r.current.paused && i === !1 && r.current.pause(), r.current.playbackRate = (n = e.playbackRate) != null ? n : 1, r.current.volume = (u = e.volume) != null ? u : 1);
+  }), R(() => {
+    var n, u, d, f, T;
+    if (!(!r.current || !globalThis.document)) {
+      if (m && !document.pictureInPictureElement)
+        try {
+          (u = (n = r.current).requestPictureInPicture) == null || u.call(n);
+        } catch {
+        }
+      if (!m && document.pictureInPictureElement)
+        try {
+          (f = (d = r.current).exitPictureInPicture) == null || f.call(d), (T = document.exitPictureInPicture) == null || T.call(document);
+        } catch {
+        }
+    }
+  }, [m]);
+  const k = (n) => {
+    var u, d;
+    o.current = !0, (u = e.onReady) == null || u.call(e), (d = e.onLoadStart) == null || d.call(e, n);
+  }, S = (n) => {
+    var u, d;
+    o.current && (o.current = !1, (u = e.onStart) == null || u.call(e, n)), (d = e.onPlay) == null || d.call(e, n);
+  };
+  if (!c)
+    return null;
+  const N = {}, P = ["onReady", "onStart"];
+  for (const n in e)
+    n.startsWith("on") && !P.includes(n) && (N[n] = e[n]);
+  return /* @__PURE__ */ g.createElement(
+    c,
+    {
+      ...N,
+      style: e.style,
+      className: e.className,
+      slot: e.slot,
+      ref: W(
+        (n) => {
+          r.current = n, typeof a == "function" ? a(n) : a !== null && (a.current = n);
+        },
+        [a]
+      ),
+      src: e.src,
+      crossOrigin: e.crossOrigin,
+      preload: e.preload,
+      controls: e.controls,
+      muted: e.muted,
+      autoPlay: e.autoPlay,
+      loop: e.loop,
+      playsInline: e.playsInline,
+      disableRemotePlayback: e.disableRemotePlayback,
+      config: e.config,
+      onLoadStart: k,
+      onPlay: S
+    },
+    e.children
+  );
+});
+ee.displayName = "Player";
+var Oe = ee;
+const Fe = b(() => import(
+  /* webpackChunkName: 'reactPlayerPreview' */
+  "./Preview-DqAv16NS.js"
+)), F = [], He = (e, a) => {
+  const i = (c) => {
+    for (const r of [...F, ...e])
+      if (c && r.canPlay(c))
+        return r;
+    return a || null;
+  }, m = g.forwardRef((c, r) => {
+    const o = { ...Le, ...c }, { src: k, slot: S, className: N, style: P, width: n, height: u, fallback: d, wrapper: f } = o, [T, x] = _(!!o.light);
+    R(() => {
+      o.light ? x(!0) : x(!1);
+    }, [o.light]);
+    const z = (h) => {
+      var y;
+      x(!1), (y = o.onClickPreview) == null || y.call(o, h);
+    }, L = (h) => {
+      if (!h) return null;
+      const { light: y, playIcon: w, previewTabIndex: I, oEmbedUrl: v, previewAriaLabel: M } = o;
+      return /* @__PURE__ */ g.createElement(
+        Fe,
+        {
+          src: h,
+          light: y,
+          playIcon: w,
+          previewTabIndex: I,
+          previewAriaLabel: M,
+          oEmbedUrl: v,
+          onClickPreview: z
+        }
+      );
+    }, X = (h) => {
+      var y, w;
+      const I = i(h);
+      if (!I) return null;
+      const { style: v, width: M, height: A, wrapper: E } = o, D = (y = o.config) == null ? void 0 : y[I.key];
+      return /* @__PURE__ */ g.createElement(
+        Oe,
+        {
+          ...o,
+          ref: r,
+          activePlayer: (w = I.player) != null ? w : I,
+          slot: E ? void 0 : S,
+          className: E ? void 0 : N,
+          style: E ? { display: "block", width: "100%", height: "100%" } : { display: "block", width: M, height: A, ...v },
+          config: D
+        }
+      );
+    }, j = f ?? Z, O = d === !1 ? Z : ve;
+    return /* @__PURE__ */ g.createElement(j, { slot: S, className: N, style: { width: n, height: u, ...P } }, /* @__PURE__ */ g.createElement(O, { fallback: d }, T ? L(k) : X(k)));
+  });
+  return m.displayName = "ReactPlayer", m.addCustomPlayer = (c) => {
+    F.push(c);
+  }, m.removeCustomPlayers = () => {
+    F.length = 0;
+  }, m.canPlay = (c) => {
+    if (c) {
+      for (const r of [...F, ...e])
+        if (r.canPlay(c))
+          return !0;
+    }
+    return !1;
+  }, m.canEnablePIP = (c) => {
+    var r;
+    if (c) {
+      for (const o of [...F, ...e])
+        if (o.canPlay(c) && ((r = o.canEnablePIP) != null && r.call(o)))
+          return !0;
+    }
+    return !1;
+  }, m;
+}, Z = ({ children: e }) => e, Ue = K[K.length - 1];
+var ze = He(K, Ue);
+const De = (e, a) => e === "audio" && !a ? "bg-black/5" : "bg-black";
+function $e(e) {
+  var a, i;
+  return "touches" in e ? ((a = e.touches[0]) == null ? void 0 : a.clientX) ?? ((i = e.changedTouches[0]) == null ? void 0 : i.clientX) ?? 0 : e.clientX;
+}
+const qe = ({
+  source: e,
+  mimeType: a,
+  poster: i,
+  autoPlay: m = !1,
+  loop: c = !1,
+  controls: r = !0,
+  showProgress: o = !1,
+  onContainerClick: k,
+  muted: S = !1
+}) => {
+  const N = J(a), [P, n] = _(m), [u, d] = _(0), [f, T] = _(!1), [x, z] = _(!1), [L, X] = _(null), [j, O] = _(!1), [h, y] = _(!1), w = H(null), I = H(null), v = H(null);
+  R(() => {
+    y(!1);
+  }, [e]), R(() => {
+    if (!P) {
+      v.current !== null && (cancelAnimationFrame(v.current), v.current = null);
+      return;
+    }
+    const t = () => {
+      const l = w.current;
+      l && l.duration && !f && d(l.currentTime / l.duration), v.current = requestAnimationFrame(t);
+    };
+    return v.current = requestAnimationFrame(t), () => {
+      v.current !== null && cancelAnimationFrame(v.current);
+    };
+  }, [P, f]), R(() => {
+    const t = w.current;
+    t && (P ? t.play().catch((l) => {
+      n(!1), y(!0);
+    }) : t.pause());
+  }, [P]);
+  const M = W(() => {
+    y(!1), n(!0);
+  }, []), A = W(
+    (t) => {
+      const l = I.current;
+      if (!l) return 0;
+      const C = l.getBoundingClientRect();
+      return Math.max(
+        0,
+        Math.min(1, ($e(t) - C.left) / C.width)
+      );
+    },
+    []
+  ), E = W((t) => {
+    const l = w.current;
+    l && l.duration && (l.currentTime = t * l.duration);
+  }, []), D = (t) => {
+    t.stopPropagation(), T(!0);
+    const l = A(t);
+    d(l), E(l);
+  };
+  R(() => {
+    if (!f) return;
+    const t = (C) => d(A(C)), l = (C) => {
+      T(!1), E(A(C));
+    };
+    return window.addEventListener("mousemove", t), window.addEventListener("mouseup", l), window.addEventListener("touchmove", t, { passive: !0 }), window.addEventListener("touchend", l), () => {
+      window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", l), window.removeEventListener("touchmove", t), window.removeEventListener("touchend", l);
+    };
+  }, [f, A, E]);
+  const te = L ? { aspectRatio: String(L) } : void 0, ae = L ? "" : " aspect-video", $ = Math.round(u * 100);
+  return /* @__PURE__ */ q(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      className: `relative cursor-pointer overflow-hidden ${De(N, i)}${ae}`,
+      style: te,
+      onClick: () => {
+        if (!h) {
+          if (k) {
+            k();
+            return;
+          }
+          r && n((t) => !t);
+        }
+      },
+      onKeyDown: (t) => {
+        if (!(t.key !== "Enter" && t.key !== " ") && (t.preventDefault(), !h)) {
+          if (k) {
+            k();
+            return;
+          }
+          r && n((l) => !l);
+        }
+      },
+      children: [
+        i && /* @__PURE__ */ s("img", { src: i, alt: "", className: "absolute inset-0 h-full w-full object-cover" }),
+        !i && /* @__PURE__ */ s("div", { className: "absolute inset-0 flex items-center justify-center", children: ke(a, { className: "size-12 text-black/20", weight: "regular" }) }),
+        /* @__PURE__ */ s("div", { className: "absolute inset-0", children: /* @__PURE__ */ s(
+          ze,
+          {
+            ref: w,
+            src: e,
+            poster: i,
+            loop: c,
+            muted: S,
+            playsInline: !0,
+            width: "100%",
+            height: "100%",
+            onLoadStart: () => O(!0),
+            onCanPlay: () => O(!1),
+            onWaiting: () => O(!0),
+            onPlay: () => y(!1),
+            onLoadedMetadata: () => {
+              const t = w.current;
+              t && t.videoWidth && t.videoHeight && X(t.videoWidth / t.videoHeight);
+            },
+            onEnded: () => {
+              c || (n(!1), d(0));
+            }
+          }
+        ) }),
+        j && !h && /* @__PURE__ */ s("div", { className: "absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ s(ye, { className: "size-8 animate-spin text-white/80", weight: "bold" }) }),
+        h && !r && /* @__PURE__ */ s(
+          "div",
+          {
+            className: "absolute inset-0 z-30 flex cursor-pointer items-center justify-center bg-black/35",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Play preview",
+            onClick: (t) => {
+              t.stopPropagation(), M();
+            },
+            onKeyDown: (t) => {
+              t.key !== "Enter" && t.key !== " " || (t.preventDefault(), t.stopPropagation(), M());
+            },
+            children: /* @__PURE__ */ s("span", { className: "flex size-16 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm", children: /* @__PURE__ */ s(V, { className: "size-9 translate-x-0.5", weight: "fill" }) })
+          }
+        ),
+        o && !r && /* @__PURE__ */ s("div", { className: "absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent pointer-events-none", children: /* @__PURE__ */ s("div", { className: "h-1 w-full overflow-hidden rounded-full bg-white/30", children: /* @__PURE__ */ s("div", { className: "h-full rounded-full bg-white", style: { width: `${$}%` } }) }) }),
+        r && /* @__PURE__ */ q("div", { className: "absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200", children: [
+          /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              onClick: (t) => {
+                t.stopPropagation(), n((l) => !l);
+              },
+              className: "shrink-0 text-white",
+              "aria-label": P ? "Pause" : "Play",
+              children: P ? /* @__PURE__ */ s(he, { className: "size-5", weight: "fill" }) : /* @__PURE__ */ s(V, { className: "size-5 translate-x-px", weight: "fill" })
+            }
+          ),
+          /* @__PURE__ */ q(
+            "div",
+            {
+              role: "slider",
+              "aria-label": "Playback position",
+              "aria-valuenow": $,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              tabIndex: 0,
+              ref: I,
+              className: "relative flex h-4 w-full cursor-pointer items-center",
+              onMouseDown: D,
+              onTouchStart: D,
+              onClick: (t) => t.stopPropagation(),
+              onMouseEnter: () => z(!0),
+              onMouseLeave: () => z(!1),
+              onKeyDown: (t) => {
+                t.key === "ArrowRight" && E(Math.min(1, u + 0.05)), t.key === "ArrowLeft" && E(Math.max(0, u - 0.05));
+              },
+              children: [
+                /* @__PURE__ */ s("div", { className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${x || f ? "h-1.5" : "h-1"}`, children: /* @__PURE__ */ s("div", { className: "h-full rounded-full bg-white", style: { width: `${$}%` } }) }),
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${x || f ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
+                    style: { left: `${$}%` }
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  qe as M,
+  J as g,
+  ke as r
+};
+//# sourceMappingURL=MediaPlayer-DsjlYGGH.js.map