meticulous-ui 2.8.0 → 2.8.1

package/components/VideoPlayer/VideoPlayer.js

@@ -1,23 +1,37 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { useRef as t } from "react";
-import { VideoContainer as p, Video as c } from "./styles.js";
-import { useSpacebarToggle as h } from "./useSpacebarToggle.js";
-import V from "./components/Volumebar/Volumebar.js";
-import { useVolumeOverlay as g } from "./useVolumeOverlay.js";
-const j = ({
-  link: s,
-  thumbnail: i,
-  width: m = "600",
-  borderRadius: u = 8,
-  height: l = "auto",
-  ...n
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { useRef as s, useState as V } from "react";
+import { VideoContainer as $, ShimmerOverlay as v, Video as g } from "./styles.js";
+import { useSpacebarToggle as x } from "./useSpacebarToggle.js";
+import R from "./components/Volumebar/Volumebar.js";
+import { useVolumeOverlay as S } from "./useVolumeOverlay.js";
+import b from "../Shimmer/Shimmer.js";
+const D = ({
+  link: i,
+  thumbnail: m,
+  width: a = "600",
+  borderRadius: o = 8,
+  height: d = "auto",
+  hasShimmer: l = !0,
+  ...u
 }) => {
-  const o = t(null), e = t(null), { volume: a, showVolume: d } = g();
-  return h(o, e, d), /* @__PURE__ */ f(p, { ref: e, $width: m, $height: l, ...n, children: [
-    /* @__PURE__ */ r(c, { $borderRadius: u, ref: o, src: s, poster: i, controls: !0, children: "Your browser does not support the video tag." }),
-    /* @__PURE__ */ r(V, { volume: a })
+  const r = s(null), t = s(null), { volume: n, showVolume: f } = S(), [p, c] = V(!1);
+  return x(r, t, f), /* @__PURE__ */ h($, { ref: t, $width: a, $height: d, ...u, children: [
+    l && /* @__PURE__ */ e(v, { $loaded: p, $borderRadius: o, children: /* @__PURE__ */ e(b, { borderRadius: `${o}px` }) }),
+    /* @__PURE__ */ e(
+      g,
+      {
+        $borderRadius: o,
+        ref: r,
+        src: i,
+        poster: m,
+        controls: !0,
+        onLoadedData: () => c(!0),
+        children: "Your browser does not support the video tag."
+      }
+    ),
+    /* @__PURE__ */ e(R, { volume: n })
   ] });
 };
 export {
-  j as default
+  D as default
 };

package/components/VideoPlayer/styles.js

@@ -1,6 +1,14 @@
 import t from "styled-components";
 import o from "../../colors/black.js";
-const c = t.div`
+const r = t.div`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: ${({ $borderRadius: i }) => i}px;
+  opacity: ${({ $loaded: i }) => i ? 0 : 1};
+  transition: opacity 0.35s ease-out;
+  pointer-events: none;
+`, a = t.div`
   position: relative;
   display: inline-block;
   width: ${({ $width: i }) => i}px;
@@ -28,6 +36,7 @@ const c = t.div`
   }
 `;
 export {
+  r as ShimmerOverlay,
   d as Video,
-  c as VideoContainer
+  a as VideoContainer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "license": "MIT",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "main": "./index.js",