npm - @oneplatformdev/ui - Versions diffs - 0.1.99-beta.279 → 0.1.99-beta.281 - Mend

@oneplatformdev/ui 0.1.99-beta.279 → 0.1.99-beta.281

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.

Files changed (5) hide show

package/Dropzone/DropzoneSinglePickPreview.d.ts.map +1 -1
package/Dropzone/DropzoneSinglePickPreview.js +77 -65
package/Dropzone/DropzoneSinglePickPreview.js.map +1 -1
package/package.json +4 -4
package/styles.css +1 -1

package/Dropzone/DropzoneSinglePickPreview.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropzoneSinglePickPreview.d.ts","sourceRoot":"","sources":["../../src/Dropzone/DropzoneSinglePickPreview.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAOrD,OAAO,wCAAwC,CAAC;AAChD,OAAO,iDAAiD,CAAC;AACzD,OAAO,yDAAyD,CAAC;AACjE,OAAO,iCAAiC,CAAC;~~AAGzC~~,eAAO,MAAM,mBAAmB,GAAI,UAAU,MAAM,GAAG,IAAI,GAAG,IAAI,KAAG,MAYpE,CAAC;AAqCF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,iBAAiB,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,yBAAyB,GAAI,kEAMvC,sBAAsB,~~4CAqLxB~~,CAAC"}
1	+ {"version":3,"file":"DropzoneSinglePickPreview.d.ts","sourceRoot":"","sources":["../../src/Dropzone/DropzoneSinglePickPreview.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAOrD,OAAO,wCAAwC,CAAC;AAChD,OAAO,iDAAiD,CAAC;AACzD,OAAO,yDAAyD,CAAC;AACjE,OAAO,iCAAiC,CAAC;AAgBzC,eAAO,MAAM,mBAAmB,GAAI,UAAU,MAAM,GAAG,IAAI,GAAG,IAAI,KAAG,MAYpE,CAAC;AAqCF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,iBAAiB,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,yBAAyB,GAAI,kEAMvC,sBAAsB,4CAsLxB,CAAC"}

package/Dropzone/DropzoneSinglePickPreview.js CHANGED Viewed

@@ -1,16 +1,27 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { useState as x, useMemo as i, useRef as F, useEffect as I } from "react";
-import { isVideoUrl as C, isFile as R } from "./DropzoneUtils.js";
-import { X as U, FileIcon as M, Video as V, PencilIcon as B, Trash2 as D } from "lucide-react";
-import { MediaPlayer as O, MediaProvider as T, Poster as W } from "@vidstack/react";
-import { DefaultVideoLayout as Y, defaultLayoutIcons as $ } from "@vidstack/react/player/layouts/default";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useState as v, useMemo as a, useRef as k, useEffect as E } from "react";
+import { isVideoUrl as R, isFile as C } from "./DropzoneUtils.js";
+import { X as U, FileIcon as M, Video as B, PencilIcon as V, Trash2 as Y } from "lucide-react";
+import { MediaPlayer as T, MediaProvider as O, Poster as D } from "@vidstack/react";
+import { DefaultVideoLayout as W, defaultLayoutIcons as $ } from "@vidstack/react/player/layouts/default";
 import { Button as q } from "../Button/Button.js";
 import "@vidstack/react/player/styles/base.css";
 import "@vidstack/react/player/styles/default/theme.css";
 import "@vidstack/react/player/styles/default/layouts/video.css";
 /* empty css                              */
 import { ButtonIcon as A } from "../ButtonIcon/ButtonIcon.js";
-const J = (e) => {
+const _ = `
+.dropzone-youtube-player:not([data-fullscreen]) .vds-play-button,
+.dropzone-youtube-player[data-fullscreen="false"] .vds-play-button,
+.dropzone-youtube-player:not([data-fullscreen]) .vds-buffering-indicator,
+.dropzone-youtube-player[data-fullscreen="false"] .vds-buffering-indicator,
+.dropzone-youtube-player:not([data-fullscreen]) .vds-loading-indicator,
+.dropzone-youtube-player[data-fullscreen="false"] .vds-loading-indicator,
+.dropzone-youtube-player:not([data-fullscreen]) .vds-spinner,
+.dropzone-youtube-player[data-fullscreen="false"] .vds-spinner {
+  display: none !important;
+}
+`, J = (e) => {
   if (!e) return "";
   switch (!0) {
     case (typeof e == "string" && !!e.trim() && e !== "null"):
@@ -25,8 +36,8 @@ const J = (e) => {
 }, X = (e) => {
   if (!e) return !1;
   try {
-    const c = new URL(e).hostname.toLowerCase();
-    return c.includes("youtube.com") || c.includes("youtu.be");
+    const u = new URL(e).hostname.toLowerCase();
+    return u.includes("youtube.com") || u.includes("youtu.be");
   } catch {
     return !1;
   }
@@ -35,118 +46,119 @@ const J = (e) => {
     const s = new URL(e);
     if (s.hostname.toLowerCase().includes("youtu.be"))
       return s.pathname.replace("/", "").trim();
-    const h = s.searchParams.get("v");
-    if (h) return h.trim();
-    const f = s.pathname.split("/").filter(Boolean), l = f.findIndex((m) => m === "embed");
+    const p = s.searchParams.get("v");
+    if (p) return p.trim();
+    const f = s.pathname.split("/").filter(Boolean), l = f.findIndex((h) => h === "embed");
     return l >= 0 && f[l + 1] ? f[l + 1].trim() : "";
   } catch {
     return "";
   }
-}, ie = ({
+}, ue = ({
   item: e,
   disabled: s,
-  onRemoveClick: c,
-  onReplaceClick: h,
+  onRemoveClick: u,
+  onReplaceClick: p,
   labelReplace: f = "Замінити"
 }) => {
-  const [l, m] = x(""), n = R(e), g = n ? e.name : e, t = i(
+  const [l, h] = v(""), n = C(e), y = n ? e.name : e, t = a(
     () => typeof e == "string" && X(e),
     [e]
-  ), p = i(
-    () => typeof e == "string" && !t && C(e),
+  ), m = a(
+    () => typeof e == "string" && !t && R(e),
     [e, t]
-  ), u = i(
+  ), c = a(
     () => t && typeof e == "string" ? G(e) : "",
     [t, e]
-  ), w = i(() => !t || typeof e != "string" ? "" : u ? `youtube/${u}` : e, [t, e, u]), y = i(
-    () => u ? `https://img.youtube.com/vi/${u}/hqdefault.jpg` : void 0,
-    [u]
-  ), [j, v] = x(!1), [z, N] = x(!0), P = F(null), k = F(null);
-  I(() => {
-    v(!1), N(!0);
-  }, [w]);
-  const S = i(() => n && e.type?.includes("image") || typeof e == "string" && !t && !p, [e, n, t, p]), d = i(() => n && e.type?.includes("video") || t || p, [e, n, t, p]), E = i(() => n ? `${(e.size / (1024 * 1024)).toFixed(0)} MB` : "", [e, n]);
-  return I(() => {
+  ), x = a(() => !t || typeof e != "string" ? "" : c ? `youtube/${c}` : e, [t, e, c]), b = a(
+    () => c ? `https://img.youtube.com/vi/${c}/hqdefault.jpg` : void 0,
+    [c]
+  ), [F, w] = v(!1), [I, N] = v(!0), z = k(null), P = k(null);
+  E(() => {
+    w(!1), N(!0);
+  }, [x]);
+  const S = a(() => n && e.type?.includes("image") || typeof e == "string" && !t && !m, [e, n, t, m]), d = a(() => n && e.type?.includes("video") || t || m, [e, n, t, m]), j = a(() => n ? `${(e.size / (1024 * 1024)).toFixed(0)} MB` : "", [e, n]);
+  return E(() => {
     if (S || d) {
       const r = J(e);
-      if (m(r), n && r)
+      if (h(r), n && r)
         return () => URL.revokeObjectURL(r);
     } else
-      m("");
-  }, [e, n, S, d]), /* @__PURE__ */ a("div", { className: "relative w-full overflow-hidden", children: [
-    d && l ? /* @__PURE__ */ o("div", { className: "w-full rounded-lg overflow-hidden bg-black", onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ o("div", { className: "aspect-video", children: /* @__PURE__ */ a(
-      O,
+      h("");
+  }, [e, n, S, d]), /* @__PURE__ */ i("div", { className: "relative w-full overflow-hidden", children: [
+    t && /* @__PURE__ */ o("style", { children: _ }),
+    d && l ? /* @__PURE__ */ o("div", { className: "w-full rounded-lg overflow-hidden bg-black", onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ o("div", { className: "aspect-video", children: /* @__PURE__ */ i(
+      T,
       {
-        ref: P,
+        ref: z,
         title: n ? e.name : t ? void 0 : typeof e == "string" ? e : void 0,
-        src: t ? w : { src: l, type: n ? e.type : void 0 },
-        poster: t ? y : void 0,
-        className: `h-full w-full bg-black text-white ${t && j ? "dropzone-youtube-player" : ""}`,
+        src: t ? x : { src: l, type: n ? e.type : void 0 },
+        poster: t ? b : void 0,
+        className: `h-full w-full bg-black text-white ${t && F ? "dropzone-youtube-player" : ""}`,
         playsInline: !0,
         onPlay: () => {
-          N(!1), t && v(!0);
+          N(!1), t && w(!0);
         },
         onVolumeChange: (r) => {
           if (!t) return;
-          const b = r.volume === 0 || r.muted;
-          if (k.current === b) return;
-          k.current = b;
-          const L = P.current?.el?.querySelector("iframe");
+          const g = r.volume === 0 || r.muted;
+          if (P.current === g) return;
+          P.current = g;
+          const L = z.current?.el?.querySelector("iframe");
           L?.contentWindow && L.contentWindow.postMessage(
-            JSON.stringify({ event: "command", func: b ? "mute" : "unMute", args: [] }),
+            JSON.stringify({ event: "command", func: g ? "mute" : "unMute", args: [] }),
             "*"
           );
         },
         children: [
-          /* @__PURE__ */ o(T, {}),
-          z && t && y && /* @__PURE__ */ o(
-            W,
+          /* @__PURE__ */ o(O, {}),
+          I && t && b && /* @__PURE__ */ o(
+            D,
             {
               className: "absolute inset-0 h-full w-full object-cover",
-              src: y,
+              src: b,
               alt: typeof e == "string" ? e : ""
             }
           ),
-          /* @__PURE__ */ o(Y, { icons: $ })
+          /* @__PURE__ */ o(W, { icons: $ })
         ]
       }
-    ) }) }) : !d && l ? /* @__PURE__ */ a("div", { className: "relative w-full h-64 sm:h-80 md:h-96 overflow-hidden outline-[#E4E4E7] outline-2 outline-dashed -outline-offset-1 rounded-lg", children: [
-      !s && /* @__PURE__ */ o("div", { className: "absolute top-2 right-2 cursor-pointer bg-white/70 rounded-[4px] p-1 shadow-sm", onClick: c, children: /* @__PURE__ */ o(U, { size: 16, strokeWidth: 2, color: "black" }) }),
+    ) }) }) : !d && l ? /* @__PURE__ */ i("div", { className: "relative w-full h-64 sm:h-80 md:h-96 overflow-hidden outline-[#E4E4E7] outline-2 outline-dashed -outline-offset-1 rounded-lg", children: [
+      !s && /* @__PURE__ */ o("div", { className: "absolute top-2 right-2 cursor-pointer bg-white/70 rounded-[4px] p-1 shadow-sm", onClick: u, children: /* @__PURE__ */ o(U, { size: 16, strokeWidth: 2, color: "black" }) }),
       /* @__PURE__ */ o(
         "img",
         {
           src: l,
-          alt: g?.toString(),
+          alt: y?.toString(),
           className: "w-full h-full object-cover rounded-lg"
         }
       )
-    ] }) : d ? null : /* @__PURE__ */ a("div", { className: "relative w-full h-64 sm:h-80 md:h-96 overflow-hidden outline-[#E4E4E7] outline-2 outline-dashed -outline-offset-1 rounded-lg", children: [
-      !s && /* @__PURE__ */ o("div", { className: "absolute top-2 right-2 cursor-pointer bg-white/70 rounded-[4px] p-1 shadow-sm", onClick: c, children: /* @__PURE__ */ o(U, { size: 16, strokeWidth: 2, color: "black" }) }),
-      /* @__PURE__ */ a("div", { className: "w-full h-full flex flex-col items-center justify-center text-gray-600", children: [
+    ] }) : d ? null : /* @__PURE__ */ i("div", { className: "relative w-full h-64 sm:h-80 md:h-96 overflow-hidden outline-[#E4E4E7] outline-2 outline-dashed -outline-offset-1 rounded-lg", children: [
+      !s && /* @__PURE__ */ o("div", { className: "absolute top-2 right-2 cursor-pointer bg-white/70 rounded-[4px] p-1 shadow-sm", onClick: u, children: /* @__PURE__ */ o(U, { size: 16, strokeWidth: 2, color: "black" }) }),
+      /* @__PURE__ */ i("div", { className: "w-full h-full flex flex-col items-center justify-center text-gray-600", children: [
         /* @__PURE__ */ o(M, { size: 28 }),
-        /* @__PURE__ */ o("span", { className: "text-sm mt-2 break-all px-2 text-center", children: g?.toString() })
+        /* @__PURE__ */ o("span", { className: "text-sm mt-2 break-all px-2 text-center", children: y?.toString() })
       ] })
     ] }),
-    d && !t && /* @__PURE__ */ a(
+    d && !t && /* @__PURE__ */ i(
       "div",
       {
         className: "mt-2 w-full h-auto min-h-14 rounded-[8px] border border-[#E8E9EB] bg-[#FCFCFC] p-2 flex items-center gap-4",
         onClick: (r) => r.stopPropagation(),
         children: [
-          /* @__PURE__ */ o("div", { className: "size-10 rounded-[8px] bg-[#9368FF1F] flex items-center justify-center shrink-0", children: /* @__PURE__ */ o(V, { className: "size-6 text-[#06080D]" }) }),
-          /* @__PURE__ */ a("div", { className: "flex flex-col items-start text-left gap-1 min-w-0 flex-1 justify-start", children: [
-            /* @__PURE__ */ o("span", { className: "w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate text-left", children: g?.toString() }),
-            /* @__PURE__ */ o("span", { className: "w-full text-[12px] font-medium leading-[120%] text-[#363B4E] text-left", children: E })
+          /* @__PURE__ */ o("div", { className: "size-10 rounded-[8px] bg-[#9368FF1F] flex items-center justify-center shrink-0", children: /* @__PURE__ */ o(B, { className: "size-6 text-[#06080D]" }) }),
+          /* @__PURE__ */ i("div", { className: "flex flex-col items-start text-left gap-1 min-w-0 flex-1 justify-start", children: [
+            /* @__PURE__ */ o("span", { className: "w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate text-left", children: y?.toString() }),
+            /* @__PURE__ */ o("span", { className: "w-full text-[12px] font-medium leading-[120%] text-[#363B4E] text-left", children: j })
           ] }),
           !s && /* @__PURE__ */ o(
             q,
             {
               type: "button",
               color: "secondary",
-              startAdornment: B,
+              startAdornment: V,
               size: "md",
               onClick: (r) => {
-                r.stopPropagation(), h?.(r);
+                r.stopPropagation(), p?.(r);
               },
               children: f
             }
@@ -154,11 +166,11 @@ const J = (e) => {
           !s && /* @__PURE__ */ o(
             A,
             {
-              icon: D,
+              icon: Y,
               variant: "outlined",
               size: "md",
               color: "secondary",
-              onClick: c
+              onClick: u
             }
           )
         ]
@@ -167,7 +179,7 @@ const J = (e) => {
   ] });
 };
 export {
-  ie as DropzoneSinglePickPreview,
+  ue as DropzoneSinglePickPreview,
   J as transformImageToSrc
 };
 //# sourceMappingURL=DropzoneSinglePickPreview.js.map

package/Dropzone/DropzoneSinglePickPreview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropzoneSinglePickPreview.js","sources":["../../src/Dropzone/DropzoneSinglePickPreview.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\r\nimport { DropzoneValueItem } from './Dropzone.types';\r\nimport { isFile, isVideoUrl } from './DropzoneUtils';\r\nimport { FileIcon, PencilIcon, Trash2, Video, X } from 'lucide-react';\r\nimport { MediaPlayer, type MediaPlayerInstance, MediaProvider, Poster } from '@vidstack/react';\r\nimport { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';\r\nimport { Button } from '../Button/Button';\r\n\r\nimport '@vidstack/react/player/styles/base.css';\r\nimport '@vidstack/react/player/styles/default/theme.css';\r\nimport '@vidstack/react/player/styles/default/layouts/video.css';\r\nimport './DropzoneSinglePickPreview.css';\r\nimport { ButtonIcon } from \"../ButtonIcon\";\r\n\r\nexport const transformImageToSrc = (preview?: string \| File \| null): string => {\r\n if (!preview) return '';\r\n switch (true) {\r\n case typeof preview === 'string' && !!preview.trim() && preview !== 'null':\r\n return preview;\r\n case preview instanceof File:\r\n return URL.createObjectURL(preview);\r\n case preview instanceof FileList:\r\n return preview[0] ? URL.createObjectURL(preview[0]) : '';\r\n default:\r\n return '';\r\n }\r\n};\r\n\r\nconst isYoutubeUrl = (value?: string \| null) => {\r\n if (!value) return false;\r\n try {\r\n const url = new URL(value);\r\n const hostname = url.hostname.toLowerCase();\r\n return hostname.includes('youtube.com') \|\| hostname.includes('youtu.be');\r\n } catch {\r\n return false;\r\n }\r\n};\r\n\r\nconst extractYoutubeId = (value: string) => {\r\n try {\r\n const url = new URL(value);\r\n const hostname = url.hostname.toLowerCase();\r\n\r\n if (hostname.includes('youtu.be')) {\r\n return url.pathname.replace('/', '').trim();\r\n }\r\n\r\n const searchId = url.searchParams.get('v');\r\n if (searchId) return searchId.trim();\r\n\r\n const pathParts = url.pathname.split('/').filter(Boolean);\r\n const embedIndex = pathParts.findIndex((part) => part === 'embed');\r\n if (embedIndex >= 0 && pathParts[embedIndex + 1]) {\r\n return pathParts[embedIndex + 1].trim();\r\n }\r\n\r\n return '';\r\n } catch {\r\n return '';\r\n }\r\n};\r\n\r\ninterface SinglePickPreviewProps {\r\n item: DropzoneValueItem;\r\n disabled?: boolean;\r\n onRemoveClick: (e: React.MouseEvent<HTMLElement>) => void;\r\n onReplaceClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n labelUploaded?: string;\r\n labelReplace?: string;\r\n}\r\n\r\nexport const DropzoneSinglePickPreview = ({\r\n item,\r\n disabled,\r\n onRemoveClick,\r\n onReplaceClick,\r\n labelReplace = 'Замінити',\r\n}: SinglePickPreviewProps) => {\r\n const [previewUrl, setPreviewUrl] = useState('');\r\n const isFileType = isFile(item);\r\n const fileName = isFileType ? item.name : item;\r\n\r\n const isYoutubeVideo = useMemo(\r\n () => typeof item === 'string' && isYoutubeUrl(item),\r\n [item]\r\n );\r\n const isRemoteVideo = useMemo(\r\n () => typeof item === 'string' && !isYoutubeVideo && isVideoUrl(item),\r\n [item, isYoutubeVideo]\r\n );\r\n const youtubeId = useMemo(\r\n () => (isYoutubeVideo && typeof item === 'string' ? extractYoutubeId(item) : ''),\r\n [isYoutubeVideo, item]\r\n );\r\n const youtubeSource = useMemo(() => {\r\n if (!isYoutubeVideo \|\| typeof item !== 'string') return '';\r\n return youtubeId ? `youtube/${youtubeId}` : item;\r\n }, [isYoutubeVideo, item, youtubeId]);\r\n const youtubeThumbnail = useMemo(\r\n () => (youtubeId ? `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg` : undefined),\r\n [youtubeId]\r\n );\r\n const [youtubeStarted, setYoutubeStarted] = useState(false);\r\n const [showPoster, setShowPoster] = useState(true);\r\n const mediaPlayerRef = useRef<MediaPlayerInstance>(null);\r\n const lastMuteStateRef = useRef<boolean \| null>(null);\r\n\r\n useEffect(() => {\r\n setYoutubeStarted(false);\r\n setShowPoster(true);\r\n }, [youtubeSource]);\r\n\r\n const showImage = useMemo(() => {\r\n return (isFileType && item.type?.includes('image')) \|\| (typeof item === 'string' && !isYoutubeVideo && !isRemoteVideo);\r\n }, [item, isFileType, isYoutubeVideo, isRemoteVideo]);\r\n\r\n const showVideo = useMemo(() => {\r\n return (isFileType && item.type?.includes('video')) \|\| isYoutubeVideo \|\| isRemoteVideo;\r\n }, [item, isFileType, isYoutubeVideo, isRemoteVideo]);\r\n\r\n const fileSize = useMemo(() => {\r\n if (!isFileType) return '';\r\n return `${(item.size / (1024 * 1024)).toFixed(0)} MB`;\r\n }, [item, isFileType]);\r\n\r\n useEffect(() => {\r\n if (showImage \|\| showVideo) {\r\n const nextPreview = transformImageToSrc(item);\r\n setPreviewUrl(nextPreview);\r\n\r\n if (isFileType && nextPreview) {\r\n return () => URL.revokeObjectURL(nextPreview);\r\n }\r\n } else {\r\n setPreviewUrl('');\r\n }\r\n\r\n return undefined;\r\n }, [item, isFileType, showImage, showVideo]);\r\n\r\n return (\r\n <div className=\"relative w-full overflow-hidden\">\r\n {showVideo && previewUrl ? (\r\n <div className=\"w-full rounded-lg overflow-hidden bg-black\" onClick={(event) => event.stopPropagation()}>\r\n <div className=\"aspect-video\">\r\n <MediaPlayer\r\n ref={mediaPlayerRef}\r\n title={isFileType ? (item as File).name : isYoutubeVideo ? undefined : (typeof item === 'string' ? item : undefined)}\r\n src={isYoutubeVideo ? youtubeSource : { src: previewUrl, type: isFileType ? (item as File).type : undefined }}\r\n poster={isYoutubeVideo ? youtubeThumbnail : undefined}\r\n className={`h-full w-full bg-black text-white ${\r\n isYoutubeVideo && youtubeStarted ? 'dropzone-youtube-player' : ''\r\n }`}\r\n playsInline\r\n onPlay={() => {\r\n setShowPoster(false);\r\n if (isYoutubeVideo) setYoutubeStarted(true);\r\n }}\r\n onVolumeChange={(detail) => {\r\n if (!isYoutubeVideo) return;\r\n const shouldMute = detail.volume === 0 \|\| detail.muted;\r\n if (lastMuteStateRef.current === shouldMute) return;\r\n lastMuteStateRef.current = shouldMute;\r\n const iframe = mediaPlayerRef.current?.el?.querySelector('iframe') as HTMLIFrameElement \| null;\r\n if (!iframe?.contentWindow) return;\r\n iframe.contentWindow.postMessage(\r\n JSON.stringify({ event: 'command', func: shouldMute ? 'mute' : 'unMute', args: [] }),\r\n '*'\r\n );\r\n }}\r\n >\r\n <MediaProvider />\r\n {showPoster && isYoutubeVideo && youtubeThumbnail && (\r\n <Poster\r\n className=\"absolute inset-0 h-full w-full object-cover\"\r\n src={youtubeThumbnail}\r\n alt={typeof item === 'string' ? item : ''}\r\n />\r\n )}\r\n <DefaultVideoLayout icons={defaultLayoutIcons} />\r\n </MediaPlayer>\r\n </div>\r\n </div>\r\n ) : !showVideo && previewUrl ? (\r\n <div className=\"relative w-full h-64 sm:h-80 md:h-96 overflow-hidden outline-[#E4E4E7] outline-2 outline-dashed -outline-offset-1 rounded-lg\">\r\n {!disabled && (\r\n <div className=\"absolute top-2 right-2 cursor-pointer bg-white/70 rounded-[4px] p-1 shadow-sm\" onClick={onRemoveClick} >\r\n <X size={16} strokeWidth={2} color=\"black\" />\r\n </div>\r\n )}\r\n <img\r\n src={previewUrl}\r\n alt={fileName?.toString()}\r\n className=\"w-full h-full object-cover rounded-lg\"\r\n />\r\n </div>\r\n ) : !showVideo ? (\r\n <div className=\"relative w-full h-64 sm:h-80 md:h-96 overflow-hidden outline-[#E4E4E7] outline-2 outline-dashed -outline-offset-1 rounded-lg\">\r\n {!disabled && (\r\n <div className=\"absolute top-2 right-2 cursor-pointer bg-white/70 rounded-[4px] p-1 shadow-sm\" onClick={onRemoveClick} >\r\n <X size={16} strokeWidth={2} color=\"black\" />\r\n </div>\r\n )}\r\n <div className=\"w-full h-full flex flex-col items-center justify-center text-gray-600\">\r\n <FileIcon size={28} />\r\n <span className=\"text-sm mt-2 break-all px-2 text-center\">\r\n {fileName?.toString()}\r\n </span>\r\n </div>\r\n </div>\r\n ) : null}\r\n\r\n {showVideo && !isYoutubeVideo && (\r\n <div\r\n className=\"mt-2 w-full h-auto min-h-14 rounded-[8px] border border-[#E8E9EB] bg-[#FCFCFC] p-2 flex items-center gap-4\"\r\n onClick={(event) => event.stopPropagation()}\r\n >\r\n <div className=\"size-10 rounded-[8px] bg-[#9368FF1F] flex items-center justify-center shrink-0\">\r\n <Video className=\"size-6 text-[#06080D]\" />\r\n </div>\r\n\r\n <div className=\"flex flex-col items-start text-left gap-1 min-w-0 flex-1 justify-start\">\r\n <span className=\"w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate text-left\">\r\n {fileName?.toString()}\r\n </span>\r\n <span className=\"w-full text-[12px] font-medium leading-[120%] text-[#363B4E] text-left\">\r\n {fileSize}\r\n </span>\r\n </div>\r\n\r\n {!disabled && (\r\n <Button\r\n type=\"button\"\r\n color=\"secondary\"\r\n startAdornment={PencilIcon}\r\n size=\"md\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n onReplaceClick?.(event);\r\n }}\r\n >\r\n {labelReplace}\r\n </Button>\r\n )}\r\n\r\n {!disabled && (\r\n <ButtonIcon\r\n icon={Trash2}\r\n variant=\"outlined\"\r\n size=\"md\"\r\n color=\"secondary\"\r\n onClick={onRemoveClick}\r\n />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n"],"names":["transformImageToSrc","preview","isYoutubeUrl","value","hostname","extractYoutubeId","url","searchId","pathParts","embedIndex","part","DropzoneSinglePickPreview","item","disabled","onRemoveClick","onReplaceClick","labelReplace","previewUrl","setPreviewUrl","useState","isFileType","isFile","fileName","isYoutubeVideo","useMemo","isRemoteVideo","isVideoUrl","youtubeId","youtubeSource","youtubeThumbnail","youtubeStarted","setYoutubeStarted","showPoster","setShowPoster","mediaPlayerRef","useRef","lastMuteStateRef","useEffect","showImage","showVideo","fileSize","nextPreview","jsxs","jsx","event","MediaPlayer","detail","shouldMute","iframe","MediaProvider","Poster","DefaultVideoLayout","defaultLayoutIcons","X","FileIcon","Video","Button","PencilIcon","ButtonIcon","Trash2"],"mappings":"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"}
1	+ {"version":3,"file":"DropzoneSinglePickPreview.js","sources":["../../src/Dropzone/DropzoneSinglePickPreview.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\r\nimport { DropzoneValueItem } from './Dropzone.types';\r\nimport { isFile, isVideoUrl } from './DropzoneUtils';\r\nimport { FileIcon, PencilIcon, Trash2, Video, X } from 'lucide-react';\r\nimport { MediaPlayer, type MediaPlayerInstance, MediaProvider, Poster } from '@vidstack/react';\r\nimport { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';\r\nimport { Button } from '../Button/Button';\r\n\r\nimport '@vidstack/react/player/styles/base.css';\r\nimport '@vidstack/react/player/styles/default/theme.css';\r\nimport '@vidstack/react/player/styles/default/layouts/video.css';\r\nimport './DropzoneSinglePickPreview.css';\r\nimport { ButtonIcon } from \"../ButtonIcon\";\r\n\r\nconst YOUTUBE_PLAYER_STYLES = `\r\n.dropzone-youtube-player:not([data-fullscreen]) .vds-play-button,\r\n.dropzone-youtube-player[data-fullscreen=\"false\"] .vds-play-button,\r\n.dropzone-youtube-player:not([data-fullscreen]) .vds-buffering-indicator,\r\n.dropzone-youtube-player[data-fullscreen=\"false\"] .vds-buffering-indicator,\r\n.dropzone-youtube-player:not([data-fullscreen]) .vds-loading-indicator,\r\n.dropzone-youtube-player[data-fullscreen=\"false\"] .vds-loading-indicator,\r\n.dropzone-youtube-player:not([data-fullscreen]) .vds-spinner,\r\n.dropzone-youtube-player[data-fullscreen=\"false\"] .vds-spinner {\r\n display: none !important;\r\n}\r\n`;\r\n\r\nexport const transformImageToSrc = (preview?: string \| File \| null): string => {\r\n if (!preview) return '';\r\n switch (true) {\r\n case typeof preview === 'string' && !!preview.trim() && preview !== 'null':\r\n return preview;\r\n case preview instanceof File:\r\n return URL.createObjectURL(preview);\r\n case preview instanceof FileList:\r\n return preview[0] ? URL.createObjectURL(preview[0]) : '';\r\n default:\r\n return '';\r\n }\r\n};\r\n\r\nconst isYoutubeUrl = (value?: string \| null) => {\r\n if (!value) return false;\r\n try {\r\n const url = new URL(value);\r\n const hostname = url.hostname.toLowerCase();\r\n return hostname.includes('youtube.com') \|\| hostname.includes('youtu.be');\r\n } catch {\r\n return false;\r\n }\r\n};\r\n\r\nconst extractYoutubeId = (value: string) => {\r\n try {\r\n const url = new URL(value);\r\n const hostname = url.hostname.toLowerCase();\r\n\r\n if (hostname.includes('youtu.be')) {\r\n return url.pathname.replace('/', '').trim();\r\n }\r\n\r\n const searchId = url.searchParams.get('v');\r\n if (searchId) return searchId.trim();\r\n\r\n const pathParts = url.pathname.split('/').filter(Boolean);\r\n const embedIndex = pathParts.findIndex((part) => part === 'embed');\r\n if (embedIndex >= 0 && pathParts[embedIndex + 1]) {\r\n return pathParts[embedIndex + 1].trim();\r\n }\r\n\r\n return '';\r\n } catch {\r\n return '';\r\n }\r\n};\r\n\r\ninterface SinglePickPreviewProps {\r\n item: DropzoneValueItem;\r\n disabled?: boolean;\r\n onRemoveClick: (e: React.MouseEvent<HTMLElement>) => void;\r\n onReplaceClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n labelUploaded?: string;\r\n labelReplace?: string;\r\n}\r\n\r\nexport const DropzoneSinglePickPreview = ({\r\n item,\r\n disabled,\r\n onRemoveClick,\r\n onReplaceClick,\r\n labelReplace = 'Замінити',\r\n}: SinglePickPreviewProps) => {\r\n const [previewUrl, setPreviewUrl] = useState('');\r\n const isFileType = isFile(item);\r\n const fileName = isFileType ? item.name : item;\r\n\r\n const isYoutubeVideo = useMemo(\r\n () => typeof item === 'string' && isYoutubeUrl(item),\r\n [item]\r\n );\r\n const isRemoteVideo = useMemo(\r\n () => typeof item === 'string' && !isYoutubeVideo && isVideoUrl(item),\r\n [item, isYoutubeVideo]\r\n );\r\n const youtubeId = useMemo(\r\n () => (isYoutubeVideo && typeof item === 'string' ? extractYoutubeId(item) : ''),\r\n [isYoutubeVideo, item]\r\n );\r\n const youtubeSource = useMemo(() => {\r\n if (!isYoutubeVideo \|\| typeof item !== 'string') return '';\r\n return youtubeId ? `youtube/${youtubeId}` : item;\r\n }, [isYoutubeVideo, item, youtubeId]);\r\n const youtubeThumbnail = useMemo(\r\n () => (youtubeId ? `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg` : undefined),\r\n [youtubeId]\r\n );\r\n const [youtubeStarted, setYoutubeStarted] = useState(false);\r\n const [showPoster, setShowPoster] = useState(true);\r\n const mediaPlayerRef = useRef<MediaPlayerInstance>(null);\r\n const lastMuteStateRef = useRef<boolean \| null>(null);\r\n\r\n useEffect(() => {\r\n setYoutubeStarted(false);\r\n setShowPoster(true);\r\n }, [youtubeSource]);\r\n\r\n const showImage = useMemo(() => {\r\n return (isFileType && item.type?.includes('image')) \|\| (typeof item === 'string' && !isYoutubeVideo && !isRemoteVideo);\r\n }, [item, isFileType, isYoutubeVideo, isRemoteVideo]);\r\n\r\n const showVideo = useMemo(() => {\r\n return (isFileType && item.type?.includes('video')) \|\| isYoutubeVideo \|\| isRemoteVideo;\r\n }, [item, isFileType, isYoutubeVideo, isRemoteVideo]);\r\n\r\n const fileSize = useMemo(() => {\r\n if (!isFileType) return '';\r\n return `${(item.size / (1024 * 1024)).toFixed(0)} MB`;\r\n }, [item, isFileType]);\r\n\r\n useEffect(() => {\r\n if (showImage \|\| showVideo) {\r\n const nextPreview = transformImageToSrc(item);\r\n setPreviewUrl(nextPreview);\r\n\r\n if (isFileType && nextPreview) {\r\n return () => URL.revokeObjectURL(nextPreview);\r\n }\r\n } else {\r\n setPreviewUrl('');\r\n }\r\n\r\n return undefined;\r\n }, [item, isFileType, showImage, showVideo]);\r\n\r\n return (\r\n <div className=\"relative w-full overflow-hidden\">\r\n {isYoutubeVideo && <style>{YOUTUBE_PLAYER_STYLES}</style>}\r\n {showVideo && previewUrl ? (\r\n <div className=\"w-full rounded-lg overflow-hidden bg-black\" onClick={(event) => event.stopPropagation()}>\r\n <div className=\"aspect-video\">\r\n <MediaPlayer\r\n ref={mediaPlayerRef}\r\n title={isFileType ? (item as File).name : isYoutubeVideo ? undefined : (typeof item === 'string' ? item : undefined)}\r\n src={isYoutubeVideo ? youtubeSource : { src: previewUrl, type: isFileType ? (item as File).type : undefined }}\r\n poster={isYoutubeVideo ? youtubeThumbnail : undefined}\r\n className={`h-full w-full bg-black text-white ${\r\n isYoutubeVideo && youtubeStarted ? 'dropzone-youtube-player' : ''\r\n }`}\r\n playsInline\r\n onPlay={() => {\r\n setShowPoster(false);\r\n if (isYoutubeVideo) setYoutubeStarted(true);\r\n }}\r\n onVolumeChange={(detail) => {\r\n if (!isYoutubeVideo) return;\r\n const shouldMute = detail.volume === 0 \|\| detail.muted;\r\n if (lastMuteStateRef.current === shouldMute) return;\r\n lastMuteStateRef.current = shouldMute;\r\n const iframe = mediaPlayerRef.current?.el?.querySelector('iframe') as HTMLIFrameElement \| null;\r\n if (!iframe?.contentWindow) return;\r\n iframe.contentWindow.postMessage(\r\n JSON.stringify({ event: 'command', func: shouldMute ? 'mute' : 'unMute', args: [] }),\r\n '*'\r\n );\r\n }}\r\n >\r\n <MediaProvider />\r\n {showPoster && isYoutubeVideo && youtubeThumbnail && (\r\n <Poster\r\n className=\"absolute inset-0 h-full w-full object-cover\"\r\n src={youtubeThumbnail}\r\n alt={typeof item === 'string' ? item : ''}\r\n />\r\n )}\r\n <DefaultVideoLayout icons={defaultLayoutIcons} />\r\n </MediaPlayer>\r\n </div>\r\n </div>\r\n ) : !showVideo && previewUrl ? (\r\n <div className=\"relative w-full h-64 sm:h-80 md:h-96 overflow-hidden outline-[#E4E4E7] outline-2 outline-dashed -outline-offset-1 rounded-lg\">\r\n {!disabled && (\r\n <div className=\"absolute top-2 right-2 cursor-pointer bg-white/70 rounded-[4px] p-1 shadow-sm\" onClick={onRemoveClick} >\r\n <X size={16} strokeWidth={2} color=\"black\" />\r\n </div>\r\n )}\r\n <img\r\n src={previewUrl}\r\n alt={fileName?.toString()}\r\n className=\"w-full h-full object-cover rounded-lg\"\r\n />\r\n </div>\r\n ) : !showVideo ? (\r\n <div className=\"relative w-full h-64 sm:h-80 md:h-96 overflow-hidden outline-[#E4E4E7] outline-2 outline-dashed -outline-offset-1 rounded-lg\">\r\n {!disabled && (\r\n <div className=\"absolute top-2 right-2 cursor-pointer bg-white/70 rounded-[4px] p-1 shadow-sm\" onClick={onRemoveClick} >\r\n <X size={16} strokeWidth={2} color=\"black\" />\r\n </div>\r\n )}\r\n <div className=\"w-full h-full flex flex-col items-center justify-center text-gray-600\">\r\n <FileIcon size={28} />\r\n <span className=\"text-sm mt-2 break-all px-2 text-center\">\r\n {fileName?.toString()}\r\n </span>\r\n </div>\r\n </div>\r\n ) : null}\r\n\r\n {showVideo && !isYoutubeVideo && (\r\n <div\r\n className=\"mt-2 w-full h-auto min-h-14 rounded-[8px] border border-[#E8E9EB] bg-[#FCFCFC] p-2 flex items-center gap-4\"\r\n onClick={(event) => event.stopPropagation()}\r\n >\r\n <div className=\"size-10 rounded-[8px] bg-[#9368FF1F] flex items-center justify-center shrink-0\">\r\n <Video className=\"size-6 text-[#06080D]\" />\r\n </div>\r\n\r\n <div className=\"flex flex-col items-start text-left gap-1 min-w-0 flex-1 justify-start\">\r\n <span className=\"w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate text-left\">\r\n {fileName?.toString()}\r\n </span>\r\n <span className=\"w-full text-[12px] font-medium leading-[120%] text-[#363B4E] text-left\">\r\n {fileSize}\r\n </span>\r\n </div>\r\n\r\n {!disabled && (\r\n <Button\r\n type=\"button\"\r\n color=\"secondary\"\r\n startAdornment={PencilIcon}\r\n size=\"md\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n onReplaceClick?.(event);\r\n }}\r\n >\r\n {labelReplace}\r\n </Button>\r\n )}\r\n\r\n {!disabled && (\r\n <ButtonIcon\r\n icon={Trash2}\r\n variant=\"outlined\"\r\n size=\"md\"\r\n color=\"secondary\"\r\n onClick={onRemoveClick}\r\n />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n"],"names":["YOUTUBE_PLAYER_STYLES","transformImageToSrc","preview","isYoutubeUrl","value","hostname","extractYoutubeId","url","searchId","pathParts","embedIndex","part","DropzoneSinglePickPreview","item","disabled","onRemoveClick","onReplaceClick","labelReplace","previewUrl","setPreviewUrl","useState","isFileType","isFile","fileName","isYoutubeVideo","useMemo","isRemoteVideo","isVideoUrl","youtubeId","youtubeSource","youtubeThumbnail","youtubeStarted","setYoutubeStarted","showPoster","setShowPoster","mediaPlayerRef","useRef","lastMuteStateRef","useEffect","showImage","showVideo","fileSize","nextPreview","jsxs","jsx","event","MediaPlayer","detail","shouldMute","iframe","MediaProvider","Poster","DefaultVideoLayout","defaultLayoutIcons","X","FileIcon","Video","Button","PencilIcon","ButtonIcon","Trash2"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.1.99-beta.279",
+  "version": "0.1.99-beta.281",
   "description": "UI component library for OnePlatform",
   "author": "One Platform Development Team",
   "keywords": [
@@ -109,9 +109,9 @@
     "recharts": "^3.2.0",
     "sonner": "^2.0.7",
     "vaul": "^1.1.2",
-    "@oneplatformdev/hooks": "^0.1.99-beta.279",
-    "@oneplatformdev/tokens": "^0.1.99-beta.279",
-    "@oneplatformdev/utils": "^0.1.99-beta.279"
+    "@oneplatformdev/tokens": "^0.1.99-beta.281",
+    "@oneplatformdev/utils": "^0.1.99-beta.281",
+    "@oneplatformdev/hooks": "^0.1.99-beta.281"
   },
   "scripts": {
     "chromatic": "chromatic"

package/styles.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dropzone-youtube-player:not([data-fullscreen]) .vds-play-button,.dropzone-youtube-player[data-fullscreen=false] .vds-play-button{display:none}.dropzone-youtube-player:not([data-fullscreen]) .vds-buffering-indicator,.dropzone-youtube-player[data-fullscreen=false] .vds-buffering-indicator,.dropzone-youtube-player:not([data-fullscreen]) .vds-loading-indicator,.dropzone-youtube-player[data-fullscreen=false] .vds-loading-indicator,.dropzone-youtube-player:not([data-fullscreen]) .vds-spinner,.dropzone-youtube-player[data-fullscreen=false] .vds-spinner{display:none}
1	+ .dropzone-youtube-player:not([data-fullscreen]) .vds-play-button,.dropzone-youtube-player[data-fullscreen=false] .vds-play-button{display:none!important}.dropzone-youtube-player:not([data-fullscreen]) .vds-buffering-indicator,.dropzone-youtube-player[data-fullscreen=false] .vds-buffering-indicator,.dropzone-youtube-player:not([data-fullscreen]) .vds-loading-indicator,.dropzone-youtube-player[data-fullscreen=false] .vds-loading-indicator,.dropzone-youtube-player:not([data-fullscreen]) .vds-spinner,.dropzone-youtube-player[data-fullscreen=false] .vds-spinner{display:none!important}