@banou/media-player 0.4.1 → 0.4.3

package/build/index.js

@@ -1,6 +1,6 @@
 import * as ce from "react";
 import fr, { forwardRef as mr, useContext as Ie, createContext as pr, useState as Z, useEffect as z, useCallback as nt, useRef as Ne, useMemo as pe } from "react";
-import { css as ee } from "@emotion/react";
+import { css as Q } from "@emotion/react";
 import { createActorContext as hr } from "@xstate/react";
 import { fromCallback as Gt, setup as vr, enqueueActions as Er, assign as Y, sendTo as X } from "xstate";
 import qt from "p-queue";
@@ -68,7 +68,7 @@ function Or() {
           return "Profiler";
         case _:
           return "StrictMode";
-        case Q:
+        case ee:
           return "Suspense";
         case ue:
           return "SuspenseList";
@@ -275,7 +275,7 @@ function Or() {
       }
       if (typeof i == "string") return s(i);
       switch (i) {
-        case Q:
+        case ee:
           return s("Suspense");
         case ue:
           return s("SuspenseList");
@@ -347,7 +347,7 @@ function Or() {
       }), Object.freeze && (Object.freeze(i.props), Object.freeze(i)), i;
     }
     function p(i, S, T, O, B, U) {
-      if (typeof i == "string" || typeof i == "function" || i === A || i === W || i === _ || i === Q || i === ue || i === lt || typeof i == "object" && i !== null && (i.$$typeof === we || i.$$typeof === Te || i.$$typeof === H || i.$$typeof === D || i.$$typeof === F || i.$$typeof === dt || i.getModuleId !== void 0)) {
+      if (typeof i == "string" || typeof i == "function" || i === A || i === W || i === _ || i === ee || i === ue || i === lt || typeof i == "object" && i !== null && (i.$$typeof === we || i.$$typeof === Te || i.$$typeof === H || i.$$typeof === D || i.$$typeof === F || i.$$typeof === dt || i.getModuleId !== void 0)) {
         var P = S.children;
         if (P !== void 0)
           if (O)
@@ -435,7 +435,7 @@ Check the render method of \`` + T + "`."), S || (i = e(i)) && (S = `
 
 Check the top-level render call using <` + i + ">."), S;
     }
-    var R = fr, C = Symbol.for("react.transitional.element"), m = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), _ = Symbol.for("react.strict_mode"), W = Symbol.for("react.profiler"), D = Symbol.for("react.consumer"), H = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), Q = Symbol.for("react.suspense"), ue = Symbol.for("react.suspense_list"), Te = Symbol.for("react.memo"), we = Symbol.for("react.lazy"), lt = Symbol.for("react.offscreen"), je = Symbol.iterator, Ye = Symbol.for("react.client.reference"), oe = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Re = Object.prototype.hasOwnProperty, ie = Object.assign, dt = Symbol.for("react.client.reference"), Ae = Array.isArray, fe = 0, ze, Fe, Ve, We, Be, Ge, qe;
+    var R = fr, C = Symbol.for("react.transitional.element"), m = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), _ = Symbol.for("react.strict_mode"), W = Symbol.for("react.profiler"), D = Symbol.for("react.consumer"), H = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), ee = Symbol.for("react.suspense"), ue = Symbol.for("react.suspense_list"), Te = Symbol.for("react.memo"), we = Symbol.for("react.lazy"), lt = Symbol.for("react.offscreen"), je = Symbol.iterator, Ye = Symbol.for("react.client.reference"), oe = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Re = Object.prototype.hasOwnProperty, ie = Object.assign, dt = Symbol.for("react.client.reference"), Ae = Array.isArray, fe = 0, ze, Fe, Ve, We, Be, Ge, qe;
     r.__reactDisabledLog = !0;
     var w, he, le = !1, ve = new (typeof WeakMap == "function" ? WeakMap : Map)(), dr = Symbol.for("react.client.reference"), Tt, wt = {}, Rt = {}, At = {};
     Pe.Fragment = A, Pe.jsx = function(i, S, T, O, B) {
@@ -1192,7 +1192,7 @@ function ln() {
         }
       }
     }
-    var m = l, A = b, _ = u, W = s, D = t, H = d, F = r, Q = p, ue = y, Te = n, we = a, lt = o, je = g, Ye = !1;
+    var m = l, A = b, _ = u, W = s, D = t, H = d, F = r, ee = p, ue = y, Te = n, we = a, lt = o, je = g, Ye = !1;
     function oe(w) {
       return Ye || (Ye = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), Re(w) || C(w) === l;
     }
@@ -1232,7 +1232,7 @@ function ln() {
     function qe(w) {
       return C(w) === g;
     }
-    L.AsyncMode = m, L.ConcurrentMode = A, L.ContextConsumer = _, L.ContextProvider = W, L.Element = D, L.ForwardRef = H, L.Fragment = F, L.Lazy = Q, L.Memo = ue, L.Portal = Te, L.Profiler = we, L.StrictMode = lt, L.Suspense = je, L.isAsyncMode = oe, L.isConcurrentMode = Re, L.isContextConsumer = ie, L.isContextProvider = dt, L.isElement = Ae, L.isForwardRef = fe, L.isFragment = ze, L.isLazy = Fe, L.isMemo = Ve, L.isPortal = We, L.isProfiler = Be, L.isStrictMode = Ge, L.isSuspense = qe, L.isValidElementType = R, L.typeOf = C;
+    L.AsyncMode = m, L.ConcurrentMode = A, L.ContextConsumer = _, L.ContextProvider = W, L.Element = D, L.ForwardRef = H, L.Fragment = F, L.Lazy = ee, L.Memo = ue, L.Portal = Te, L.Profiler = we, L.StrictMode = lt, L.Suspense = je, L.isAsyncMode = oe, L.isConcurrentMode = Re, L.isContextConsumer = ie, L.isContextProvider = dt, L.isElement = Ae, L.isForwardRef = fe, L.isFragment = ze, L.isLazy = Fe, L.isMemo = Ve, L.isPortal = We, L.isProfiler = Be, L.isStrictMode = Ge, L.isSuspense = qe, L.isValidElementType = R, L.typeOf = C;
   }()), L;
 }
 var $t;
@@ -1633,8 +1633,8 @@ const Pn = Gt(({ sendBack: e, receive: t, input: n }) => {
         let H = !1;
         t((F) => {
           if (!H && F.type === "METADATA") {
-            const Q = d.addSourceBuffer(`video/mp4; codecs="${F.info.input.videoMimeType},${F.info.input.audioMimeType}"`);
-            Q.mode = "segments", d.duration = F.info.input.duration, f = F.data, H = !0, D(Q);
+            const ee = d.addSourceBuffer(`video/mp4; codecs="${F.info.input.videoMimeType},${F.info.input.audioMimeType}"`);
+            ee.mode = "segments", d.duration = F.info.input.duration, f = F.data, H = !0, D(ee);
           }
         });
       },
@@ -1648,9 +1648,9 @@ const Pn = Gt(({ sendBack: e, receive: t, input: n }) => {
   });
   const C = async () => {
     const D = x(), H = y(), F = Yt(c);
-    for (const { start: Q, end: ue } of F)
-      Q < D && await E(
-        Q,
+    for (const { start: ee, end: ue } of F)
+      ee < D && await E(
+        ee,
         D
       ), ue > H && await E(
         H,
@@ -2104,7 +2104,13 @@ ${l}`),
   if (!e) throw new Error("Media actor not found");
   if (!n) throw new Error("Duration not found");
   n === r ? (e.send({ type: "SET_TIME", value: 0 }), e.send({ type: "PLAY" })) : t ? e.send({ type: "PLAY" }) : e.send({ type: "PAUSE" });
-}, Fn = () => {
+}, Fn = Q`
+  top: unset !important;
+  left: unset !important;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+`, Vn = () => {
   const e = $.useActorRef(), [t, n] = Z(), r = nt((o) => {
     n(o);
   }, []);
@@ -2113,7 +2119,7 @@ ${l}`),
       type: "SET_CANVAS_ELEMENT",
       canvasElement: t
     });
-  }, [t]), /* @__PURE__ */ h(sr, { children: /* @__PURE__ */ h("canvas", { ref: r }) });
+  }, [t]), /* @__PURE__ */ h(sr, { children: /* @__PURE__ */ h("canvas", { ref: r, css: Fn }) });
 }, xe = {
   bMedium: {
     bold: `
@@ -2146,7 +2152,7 @@ ${l}`),
       }
     `
   }
-}, Vn = (e) => ee`
+}, Wn = (e) => Q`
   display: flex;
   justify-content: flex-end;
 
@@ -2159,13 +2165,13 @@ ${l}`),
     ${xe.bSmall.regular}
   }
 
-  ${e === "sm" && ee`
+  ${e === "sm" && Q`
     padding: 0.4rem!important;
   `}
-  ${e === "md" && ee`
+  ${e === "md" && Q`
     padding: 0.6rem!important;
   `}
-  ${e === "lg" && ee`
+  ${e === "lg" && Q`
     padding: 1.2rem!important;
   `}
 `, ge = ({
@@ -2195,13 +2201,13 @@ ${l}`),
   !u && /* @__PURE__ */ h(
     Cr,
     {
-      css: Vn(l),
+      css: Wn(l),
       id: e,
       noArrow: !0,
       children: t
     }
   )
-] }), Wn = ({ ref: e, defaultValue: t }) => {
+] }), Bn = ({ ref: e, defaultValue: t }) => {
   const [n, r] = Z(t), [o, a] = Z(!1), s = (u) => {
     if (a(!0), !e.current) return;
     const { clientX: l } = u, { left: b, right: d } = e.current.getBoundingClientRect();
@@ -2223,7 +2229,7 @@ ${l}`),
     scrub: s,
     setValue: r
   };
-}, Bn = ee`
+}, Gn = Q`
   position: relative;
   height: .4rem;
 
@@ -2280,10 +2286,12 @@ ${l}`),
     bottom: 0;
     height: .4rem;
     width: 100%;
-    div {
-      width: 100%;
+    .loaded-part {
       transform-origin: 0 0;
+      bottom: 0;
       height: .4rem;
+      width: 100%;
+      position: absolute;
       background-color: hsla(0, 100%, 100%, .4);
     }
   }
@@ -2332,14 +2340,8 @@ ${l}`),
       object-fit: cover;
     }
   }
-
-  .loaded-part {
-    transform-origin: 0 0;
-    position: absolute;
-    background-color: hsla(0, 100%, 100%, .4);
-  }
-`, Gn = () => {
-  const e = $.useActorRef(), t = $.useSelector((c) => c.context.media.currentTime), n = $.useSelector((c) => c.context.media.duration), r = $.useSelector((c) => c.context.thumbnails), o = Ie(De), a = Ne(null), { scrub: s, value: u } = Wn({ ref: a }), [l, b] = Z(void 0), d = (c) => {
+`, qn = () => {
+  const e = $.useActorRef(), t = $.useSelector((c) => c.context.media.currentTime), n = $.useSelector((c) => c.context.media.duration), r = $.useSelector((c) => c.context.thumbnails), o = Ie(De), a = Ne(null), { scrub: s, value: u } = Bn({ ref: a }), [l, b] = Z(void 0), d = (c) => {
     const E = c.nativeEvent.offsetX / c.currentTarget.offsetWidth * (n ?? 0);
     b(E);
   }, g = () => {
@@ -2372,7 +2374,7 @@ ${l}`),
   return /* @__PURE__ */ I(
     "div",
     {
-      css: Bn,
+      css: Gn,
       ref: a,
       className: "progress-bar",
       onMouseMove: d,
@@ -2409,7 +2411,7 @@ ${l}`),
   if (e === void 0) return "0:00";
   const t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
   return t > 0 ? `${t}:${n < 10 ? "0" : ""}${n}:${r < 10 ? "0" : ""}${r}` : `${n}:${r < 10 ? "0" : ""}${r}`;
-}, qn = (e, t) => `${Bt(e)} / ${Bt(t)}`, Xn = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-picture-in-picture'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M11%2019h-6a2%202%200%200%201%20-2%20-2v-10a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v4'%20/%3e%3cpath%20d='M14%2014m0%201a1%201%200%200%201%201%20-1h5a1%201%200%200%201%201%201v3a1%201%200%200%201%20-1%201h-5a1%201%200%200%201%20-1%20-1z'%20/%3e%3c/svg%3e", Kn = ee`
+}, Xn = (e, t) => `${Bt(e)} / ${Bt(t)}`, Kn = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-picture-in-picture'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M11%2019h-6a2%202%200%200%201%20-2%20-2v-10a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v4'%20/%3e%3cpath%20d='M14%2014m0%201a1%201%200%200%201%201%20-1h5a1%201%200%200%201%201%201v3a1%201%200%200%201%20-1%201h-5a1%201%200%200%201%20-1%20-1z'%20/%3e%3c/svg%3e", Hn = Q`
 position: relative;
 
 .popover {
@@ -2470,7 +2472,7 @@ position: relative;
     }
   }
 }
-`, Hn = () => {
+`, Jn = () => {
   const e = $.useActorRef(), t = $.useSelector((p) => p.context.media.playbackRate), n = $.useSelector((p) => p.context.subtitleStreams), r = $.useSelector((p) => p.context.selectedSubtitleStreamIndex), [o, a] = Z(!1), [s, u] = Z(
     0
     /* Default */
@@ -2499,7 +2501,7 @@ position: relative;
   }, y = (p) => () => {
     u(p);
   };
-  return /* @__PURE__ */ I("div", { css: Kn, ref: l, children: [
+  return /* @__PURE__ */ I("div", { css: Hn, ref: l, children: [
     /* @__PURE__ */ h(
       ge,
       {
@@ -2631,7 +2633,7 @@ position: relative;
       ] })
     ] })
   ] });
-}, Jn = {
+}, Zn = {
   hover: "rgba(255, 255, 255, 0.13)"
 }, cr = 1e-4, bt = 1, ur = 2, lr = (e) => {
   const t = Math.max(cr, Math.min(bt, e));
@@ -2639,7 +2641,7 @@ position: relative;
 }, St = (e) => {
   const t = Math.max(cr, Math.min(bt, e));
   return Math.pow(t, bt / ur);
-}, Zn = ee`
+}, Qn = Q`
   display: flex;
   align-items: center;
 
@@ -2670,7 +2672,7 @@ position: relative;
     width: 10px;
     height: 10px;
   }
-`, Qn = ({ value: e, onChange: t }) => {
+`, eo = ({ value: e, onChange: t }) => {
   const n = $.useSelector((c) => c.context.media.volume), r = $.useSelector((c) => c.context.media.muted), o = Ne(null), [a, s] = Z(!1), u = (c) => {
     if (!o.current) return e;
     const v = o.current.getBoundingClientRect(), E = c - v.left;
@@ -2711,7 +2713,7 @@ position: relative;
         "div",
         {
           ref: o,
-          css: Zn,
+          css: Qn,
           onMouseDown: l,
           children: /* @__PURE__ */ h(
             "div",
@@ -2741,7 +2743,7 @@ position: relative;
       ] })
     }
   );
-}, eo = ee`
+}, to = Q`
   position: relative;
   display: flex;
   align-items: center;
@@ -2780,13 +2782,13 @@ position: relative;
 
     pointer-events: auto;
   }
-`, to = ({ ref: e }) => {
+`, ro = ({ ref: e }) => {
   const t = $.useActorRef(), n = $.useSelector((s) => s.context.media.volume), r = $.useSelector((s) => s.context.media.muted), o = pe(() => St(n), [n]), a = (s, u) => t.send({
     type: "SET_VOLUME",
     muted: u,
     volume: lr(s)
   });
-  return /* @__PURE__ */ I("div", { css: eo, children: [
+  return /* @__PURE__ */ I("div", { css: to, children: [
     /* @__PURE__ */ h(
       ge,
       {
@@ -2805,14 +2807,14 @@ position: relative;
       }
     ),
     /* @__PURE__ */ h("div", { className: "volume-slider-container", children: /* @__PURE__ */ h("div", { className: "volume-slider-background", children: /* @__PURE__ */ h(
-      Qn,
+      eo,
       {
         value: r ? 0 : o,
         onChange: (s) => a(s, !1)
       }
     ) }) })
   ] });
-}, ro = ee`
+}, no = Q`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -2896,7 +2898,7 @@ position: relative;
         cursor: pointer;
 
         :hover {
-          background-color: ${Jn.hover};
+          background-color: ${Zn.hover};
         }
       }
     }
@@ -2924,7 +2926,7 @@ position: relative;
       }
     }
   }
-`, no = ({
+`, oo = ({
   containerRef: e
 }) => {
   const t = $.useActorRef(), n = Ie(De), r = $.useSelector((f) => f.context.media.paused), o = $.useSelector((f) => f.context.media.volume), a = $.useSelector((f) => f.context.media.muted), s = $.useSelector((f) => f.context.media.currentTime), u = $.useSelector((f) => f.context.media.duration), [l, b] = Z(), [d, g] = Z(!1);
@@ -2973,8 +2975,8 @@ position: relative;
   return z(() => {
     if (l)
       return l.addEventListener("wheel", p, { passive: !1 }), () => l.removeEventListener("wheel", p);
-  }, [l, y]), /* @__PURE__ */ I("div", { css: ro, style: { ...n.hideUI ? { opacity: "0", pointerEvents: "none" } : {} }, children: [
-    /* @__PURE__ */ h(Gn, {}),
+  }, [l, y]), /* @__PURE__ */ I("div", { css: no, style: { ...n.hideUI ? { opacity: "0", pointerEvents: "none" } : {} }, children: [
+    /* @__PURE__ */ h(qn, {}),
     /* @__PURE__ */ I("div", { className: "actions", children: [
       /* @__PURE__ */ I("div", { className: "left", children: [
         /* @__PURE__ */ h(
@@ -2994,11 +2996,11 @@ position: relative;
             toolTipText: /* @__PURE__ */ h("span", { children: u === s ? "Replay (k)" : r ? "Play (k)" : "Pause (k)" })
           }
         ),
-        /* @__PURE__ */ h(to, { ref: b }),
-        /* @__PURE__ */ h("div", { className: "time", children: qn(s, u) })
+        /* @__PURE__ */ h(ro, { ref: b }),
+        /* @__PURE__ */ h("div", { className: "time", children: Xn(s, u) })
       ] }),
       /* @__PURE__ */ I("div", { className: "right", children: [
-        /* @__PURE__ */ h(Hn, {}),
+        /* @__PURE__ */ h(Jn, {}),
         /* @__PURE__ */ h(
           ge,
           {
@@ -3008,7 +3010,7 @@ position: relative;
               {
                 className: "picture-in-picture",
                 type: "button",
-                children: /* @__PURE__ */ h("img", { src: Xn })
+                children: /* @__PURE__ */ h("img", { src: Kn })
               }
             ),
             toolTipText: /* @__PURE__ */ h("span", { children: "Picture in picture" })
@@ -3034,7 +3036,7 @@ position: relative;
       ] })
     ] })
   ] });
-}, oo = ee`
+}, io = Q`
   position: relative;
   background-color: black;
   display: flex;
@@ -3063,12 +3065,12 @@ position: relative;
   &.hide {
     cursor: none;
   }
-`, io = ({ children: e }) => {
+`, ao = ({ children: e }) => {
   const t = $.useActorRef(), n = Ie(De), r = $.useSelector((d) => d.context.media.paused), o = $.useSelector((d) => d.context.media.currentTime), a = $.useSelector((d) => d.context.media.duration), s = Ne(), u = Ne(null);
   return /* @__PURE__ */ I(
     "div",
     {
-      css: oo,
+      css: io,
       ref: u,
       onMouseMove: (d) => {
         n.update({ ...n, hideUI: !1 }), s.current && clearInterval(s.current);
@@ -3082,8 +3084,8 @@ position: relative;
       },
       className: n.hideUI ? "hide" : "",
       children: [
-        /* @__PURE__ */ h(Fn, {}),
-        /* @__PURE__ */ h(no, { containerRef: u }),
+        /* @__PURE__ */ h(Vn, {}),
+        /* @__PURE__ */ h(oo, { containerRef: u }),
         /* @__PURE__ */ h(
           "div",
           {
@@ -3095,13 +3097,13 @@ position: relative;
       ]
     }
   );
-}, ao = 25e5, so = ee`
+}, so = 25e5, co = Q`
   display: flex;
   justify-content: center;
   background-color: #111;
   height: 100%;
   overflow: hidden;
-`, co = ({ options: e, videoElement: t, children: n }) => {
+`, uo = ({ options: e, videoElement: t, children: n }) => {
   const r = Ie(De), o = $.useActorRef(), a = $.useSelector((f) => f.value), s = $.useSelector((f) => f.context.media.volume), u = $.useSelector((f) => f.context.media.muted), l = $.useSelector((f) => f.context.isReady), [b, d] = Wt("mediaVolume", "1"), [g, x] = Wt("mediaMute", "false"), [y, p] = Z(!0);
   return z(
     () => o.send({
@@ -3128,7 +3130,7 @@ position: relative;
       remuxerOptions: {
         publicPath: v,
         workerUrl: E,
-        bufferSize: e.bufferSize ?? ao,
+        bufferSize: e.bufferSize ?? so,
         length: f,
         read: c
       }
@@ -3159,8 +3161,8 @@ position: relative;
       return () => {
         o.send({ type: "DESTROY" });
       };
-  }, [a]), /* @__PURE__ */ h("div", { css: so, children: /* @__PURE__ */ h(io, { children: n }) });
-}, yo = ({ ref: e, ...t }) => {
+  }, [a]), /* @__PURE__ */ h("div", { css: co, children: /* @__PURE__ */ h(ao, { children: n }) });
+}, xo = ({ ref: e, ...t }) => {
   const n = (l) => o({ ...l, update: n }), [r, o] = Z({ update: n }), [a, s] = Z(), u = nt((l) => {
     typeof e == "function" ? e(l) : e && "current" in e && (e.current = l), s(l ?? void 0);
   }, []);
@@ -3172,9 +3174,9 @@ position: relative;
       size: t?.size,
       downloadedRanges: t?.downloadedRanges
     }));
-  }, [a, t?.title, t?.size, t?.downloadedRanges]), /* @__PURE__ */ h(De.Provider, { value: r, children: /* @__PURE__ */ h($.Provider, { children: /* @__PURE__ */ h(co, { options: t, videoElement: a, children: /* @__PURE__ */ h("video", { ref: u, controls: !1 }) }) }) });
+  }, [a, t?.title, t?.size, t?.downloadedRanges]), /* @__PURE__ */ h(De.Provider, { value: r, children: /* @__PURE__ */ h($.Provider, { children: /* @__PURE__ */ h(uo, { options: t, videoElement: a, children: /* @__PURE__ */ h("video", { ref: u, controls: !1 }) }) }) });
 };
 export {
-  co as FKNVideoRoot,
-  yo as default
+  uo as FKNVideoRoot,
+  xo as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "",
   "type": "module",
   "main": "build/index.js",
@@ -39,7 +39,7 @@
     "@xstate/react": "^5.0.1",
     "ass-compiler": "^0.1.15",
     "jassub": "^1.7.18",
-    "libav-wasm": "^0.5.4",
+    "libav-wasm": "^0.5.5",
     "osra": "^0.1.2",
     "p-queue": "^7.3.4",
     "react": "^19.0.0",

package/src/components/overlay.tsx

@@ -1,9 +1,18 @@
 /// <reference types="@emotion/react/types/css-prop" />
 
 import { ClassAttributes, useCallback, useEffect, useState } from 'react'
+import { css } from '@emotion/react'
 
 import { MediaMachineContext } from '../state-machines'
 
+const style = css`
+  top: unset !important;
+  left: unset !important;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+`
+
 export const Overlay = () => {
   const mediaActor = MediaMachineContext.useActorRef()
 
@@ -22,7 +31,7 @@ export const Overlay = () => {
 
   return (
     <>
-      <canvas ref={refFunction}/>
+      <canvas ref={refFunction} css={style}/>
     </>
   )
 }

package/src/components/progress-bar.tsx

@@ -63,10 +63,12 @@ const style = css`
     bottom: 0;
     height: .4rem;
     width: 100%;
-    div {
-      width: 100%;
+    .loaded-part {
       transform-origin: 0 0;
+      bottom: 0;
       height: .4rem;
+      width: 100%;
+      position: absolute;
       background-color: hsla(0, 100%, 100%, .4);
     }
   }
@@ -115,12 +117,6 @@ const style = css`
       object-fit: cover;
     }
   }
-
-  .loaded-part {
-    transform-origin: 0 0;
-    position: absolute;
-    background-color: hsla(0, 100%, 100%, .4);
-  }
 `
 
 export const ProgressBar = () => {