@banou/media-player 0.5.0 → 0.5.1

package/README.md

@@ -1,3 +1,6 @@
 ## Media Player
 
 A player that somehow manages to playback MKV files
+
+
+Todo: add support for multi audio tracks

package/build/index.js

@@ -161,15 +161,15 @@ function Nr() {
           throw Error();
         } catch (w) {
           var T = w.stack.trim().match(/\n( *(at )?)/);
-          R = T && T[1] || "", he = -1 < w.stack.indexOf(`
+          R = T && T[1] || "", ve = -1 < w.stack.indexOf(`
     at`) ? " (<anonymous>)" : -1 < w.stack.indexOf("@") ? "@unknown:0:0" : "";
         }
       return `
-` + R + i + he;
+` + R + i + ve;
     }
     function c(i, T) {
       if (!i || le) return "";
-      var w = ve.get(i);
+      var w = Ee.get(i);
       if (w !== void 0) return w;
       le = !0, w = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
       var N = null;
@@ -227,10 +227,10 @@ function Nr() {
           "name",
           { value: "DetermineComponentFrameRoot" }
         );
-        var P = G.DetermineComponentFrameRoot(), ae = P[0], Ee = P[1];
-        if (ae && Ee) {
+        var P = G.DetermineComponentFrameRoot(), ae = P[0], ge = P[1];
+        if (ae && ge) {
           var q = ae.split(`
-`), me = Ee.split(`
+`), me = ge.split(`
 `);
           for (P = D = 0; D < q.length && !q[D].includes(
             "DetermineComponentFrameRoot"
@@ -253,7 +253,7 @@ function Nr() {
                       " at new ",
                       " at "
                     );
-                    return i.displayName && Pe.includes("<anonymous>") && (Pe = Pe.replace("<anonymous>", i.displayName)), typeof i == "function" && ve.set(i, Pe), Pe;
+                    return i.displayName && Pe.includes("<anonymous>") && (Pe = Pe.replace("<anonymous>", i.displayName)), typeof i == "function" && Ee.set(i, Pe), Pe;
                   }
                 while (1 <= D && 0 <= P);
               break;
@@ -262,7 +262,7 @@ function Nr() {
       } finally {
         le = !1, oe.H = N, a(), Error.prepareStackTrace = w;
       }
-      return q = (q = i ? i.displayName || i.name : "") ? s(q) : "", typeof i == "function" && ve.set(i, q), q;
+      return q = (q = i ? i.displayName || i.name : "") ? s(q) : "", typeof i == "function" && Ee.set(i, q), q;
     }
     function d(i) {
       if (i == null) return "";
@@ -324,7 +324,7 @@ function Nr() {
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), i = this.props.ref, i !== void 0 ? i : null;
     }
-    function S(i, T, w, N, G, D) {
+    function x(i, T, w, N, G, D) {
       return w = D.ref, i = {
         $$typeof: A,
         type: i,
@@ -386,13 +386,13 @@ React keys must be passed directly to JSX without using spread:
       }
       if (P = null, w !== void 0 && (r(w), P = "" + w), m(T) && (r(T.key), P = "" + T.key), "key" in T) {
         w = {};
-        for (var Ee in T)
-          Ee !== "key" && (w[Ee] = T[Ee]);
+        for (var ge in T)
+          ge !== "key" && (w[ge] = T[ge]);
       } else w = T;
       return P && g(
         w,
         typeof i == "function" ? i.displayName || i.name || "Unknown" : i
-      ), S(i, P, D, G, p(), w);
+      ), x(i, P, D, G, p(), w);
     }
     function y(i, T) {
       if (typeof i == "object" && i && i.$$typeof !== fr) {
@@ -435,9 +435,9 @@ Check the render method of \`` + w + "`."), T || (i = e(i)) && (T = `
 
 Check the top-level render call using <` + i + ">."), T;
     }
-    var x = mr, A = Symbol.for("react.transitional.element"), f = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), U = Symbol.for("react.consumer"), B = Symbol.for("react.context"), V = Symbol.for("react.forward_ref"), ee = Symbol.for("react.suspense"), ue = Symbol.for("react.suspense_list"), Re = Symbol.for("react.memo"), Ae = Symbol.for("react.lazy"), dt = Symbol.for("react.offscreen"), Ye = Symbol.iterator, ze = Symbol.for("react.client.reference"), oe = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, _e = Object.prototype.hasOwnProperty, ie = Object.assign, ft = Symbol.for("react.client.reference"), Ce = Array.isArray, fe = 0, Fe, Ve, We, Be, Ge, Xe, qe;
+    var S = mr, A = Symbol.for("react.transitional.element"), f = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), U = Symbol.for("react.consumer"), B = Symbol.for("react.context"), V = Symbol.for("react.forward_ref"), ee = Symbol.for("react.suspense"), ue = Symbol.for("react.suspense_list"), Re = Symbol.for("react.memo"), Ae = Symbol.for("react.lazy"), dt = Symbol.for("react.offscreen"), Ye = Symbol.iterator, ze = Symbol.for("react.client.reference"), oe = S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, _e = Object.prototype.hasOwnProperty, ie = Object.assign, ft = Symbol.for("react.client.reference"), Ce = Array.isArray, fe = 0, Fe, Ve, We, Be, Ge, Xe, qe;
     n.__reactDisabledLog = !0;
-    var R, he, le = !1, ve = new (typeof WeakMap == "function" ? WeakMap : Map)(), fr = Symbol.for("react.client.reference"), Tt, wt = {}, Rt = {}, At = {};
+    var R, ve, le = !1, Ee = new (typeof WeakMap == "function" ? WeakMap : Map)(), fr = Symbol.for("react.client.reference"), Tt, wt = {}, Rt = {}, At = {};
     Ne.Fragment = _, Ne.jsx = function(i, T, w, N, G) {
       return h(i, T, w, !1, N, G);
     }, Ne.jsxs = function(i, T, w, N, G) {
@@ -524,9 +524,9 @@ function Ze(e, t) {
 function Fr(e, t) {
   return e.map(t).join("");
 }
-var st = 1, ye = 1, Qt = 0, J = 0, j = 0, Te = "";
+var st = 1, xe = 1, Qt = 0, J = 0, j = 0, Te = "";
 function ct(e, t, r, n, o, a, s) {
-  return { value: e, root: t, parent: r, type: n, props: o, children: a, line: st, column: ye, length: s, return: "" };
+  return { value: e, root: t, parent: r, type: n, props: o, children: a, line: st, column: xe, length: s, return: "" };
 }
 function Me(e, t) {
   return jr(ct("", null, null, "", null, null, 0), e, { length: -e.length }, t);
@@ -535,10 +535,10 @@ function Vr() {
   return j;
 }
 function Wr() {
-  return j = J > 0 ? W(Te, --J) : 0, ye--, j === 10 && (ye = 1, st--), j;
+  return j = J > 0 ? W(Te, --J) : 0, xe--, j === 10 && (xe = 1, st--), j;
 }
 function Z() {
-  return j = J < Qt ? W(Te, J++) : 0, ye++, j === 10 && (ye = 1, st++), j;
+  return j = J < Qt ? W(Te, J++) : 0, xe++, j === 10 && (xe = 1, st++), j;
 }
 function ne() {
   return W(Te, J);
@@ -588,7 +588,7 @@ function Ue(e) {
   return 0;
 }
 function er(e) {
-  return st = ye = 1, Qt = te(Te = e), J = 0, [];
+  return st = xe = 1, Qt = te(Te = e), J = 0, [];
 }
 function tr(e) {
   return Te = "", e;
@@ -643,7 +643,7 @@ function Hr(e) {
   return tr(rt("", null, null, null, [""], e = er(e), 0, [0], e));
 }
 function rt(e, t, r, n, o, a, s, c, d) {
-  for (var p = 0, m = 0, g = s, b = 0, S = 0, h = 0, y = 1, u = 1, l = 1, v = 0, x = "", A = o, f = a, _ = n, C = x; u; )
+  for (var p = 0, m = 0, g = s, b = 0, x = 0, h = 0, y = 1, u = 1, l = 1, v = 0, S = "", A = o, f = a, _ = n, C = S; u; )
     switch (h = v, v = Z()) {
       // (
       case 40:
@@ -693,14 +693,14 @@ function rt(e, t, r, n, o, a, s, c, d) {
             u = 0;
           // ;
           case 59 + m:
-            l == -1 && (C = I(C, /\f/g, "")), S > 0 && te(C) - g && Ze(S > 32 ? Mt(C + ";", n, r, g - 1) : Mt(I(C, " ", "") + ";", n, r, g - 2), d);
+            l == -1 && (C = I(C, /\f/g, "")), x > 0 && te(C) - g && Ze(x > 32 ? Mt(C + ";", n, r, g - 1) : Mt(I(C, " ", "") + ";", n, r, g - 2), d);
             break;
           // @ ;
           case 59:
             C += ";";
           // { rule/at-rule
           default:
-            if (Ze(_ = Nt(C, t, r, p, m, o, c, x, A = [], f = [], g), a), v === 123)
+            if (Ze(_ = Nt(C, t, r, p, m, o, c, S, A = [], f = [], g), a), v === 123)
               if (m === 0)
                 rt(C, t, _, _, A, a, g, c, f);
               else
@@ -710,17 +710,17 @@ function rt(e, t, r, n, o, a, s, c, d) {
                   case 108:
                   case 109:
                   case 115:
-                    rt(e, _, _, n && Ze(Nt(e, _, _, 0, 0, o, c, x, o, A = [], g), f), o, f, g, c, n ? A : f);
+                    rt(e, _, _, n && Ze(Nt(e, _, _, 0, 0, o, c, S, o, A = [], g), f), o, f, g, c, n ? A : f);
                     break;
                   default:
                     rt(C, _, _, _, [""], f, 0, c, f);
                 }
         }
-        p = m = S = 0, y = l = 1, x = C = "", g = s;
+        p = m = x = 0, y = l = 1, S = C = "", g = s;
         break;
       // :
       case 58:
-        g = 1 + te(C), S = h;
+        g = 1 + te(C), x = h;
       default:
         if (y < 1) {
           if (v == 123)
@@ -739,7 +739,7 @@ function rt(e, t, r, n, o, a, s, c, d) {
             break;
           // @
           case 64:
-            ne() === 45 && (C += tt(Z())), b = ne(), m = g = te(x = C += qr(et())), v++;
+            ne() === 45 && (C += tt(Z())), b = ne(), m = g = te(S = C += qr(et())), v++;
             break;
           // -
           case 45:
@@ -749,9 +749,9 @@ function rt(e, t, r, n, o, a, s, c, d) {
   return a;
 }
 function Nt(e, t, r, n, o, a, s, c, d, p, m) {
-  for (var g = o - 1, b = o === 0 ? a : [""], S = xt(b), h = 0, y = 0, u = 0; h < n; ++h)
-    for (var l = 0, v = $e(e, g + 1, g = Dr(y = s[h])), x = e; l < S; ++l)
-      (x = Zt(y > 0 ? b[l] + " " + v : I(v, /&\f/g, b[l]))) && (d[u++] = x);
+  for (var g = o - 1, b = o === 0 ? a : [""], x = xt(b), h = 0, y = 0, u = 0; h < n; ++h)
+    for (var l = 0, v = $e(e, g + 1, g = Dr(y = s[h])), S = e; l < x; ++l)
+      (S = Zt(y > 0 ? b[l] + " " + v : I(v, /&\f/g, b[l]))) && (d[u++] = S);
   return ct(e, t, r, o === 0 ? bt : c, d, p, m);
 }
 function Kr(e, t, r) {
@@ -760,7 +760,7 @@ function Kr(e, t, r) {
 function Mt(e, t, r, n) {
   return ct(e, t, r, yt, $e(e, 0, n), $e(e, n + 1, -1), n);
 }
-function ge(e, t) {
+function be(e, t) {
   for (var r = "", n = xt(e), o = 0; o < n; o++)
     r += t(e[o], o, e, t) || "";
   return r;
@@ -775,11 +775,11 @@ function Jr(e, t, r, n) {
     case Kt:
       return "";
     case Jt:
-      return e.return = e.value + "{" + ge(e.children, n) + "}";
+      return e.return = e.value + "{" + be(e.children, n) + "}";
     case bt:
       e.value = e.props.join(",");
   }
-  return te(r = ge(e.children, n)) ? e.return = e.value + "{" + r + "}" : "";
+  return te(r = be(e.children, n)) ? e.return = e.value + "{" + r + "}" : "";
 }
 function Zr(e) {
   var t = xt(e);
@@ -996,7 +996,7 @@ var sn = function(t, r, n, o) {
       t.return = rr(t.value, t.length);
       break;
     case Jt:
-      return ge([Me(t, {
+      return be([Me(t, {
         value: I(t.value, "@", "@" + M)
       })], o);
     case bt:
@@ -1005,12 +1005,12 @@ var sn = function(t, r, n, o) {
           // :read-(only|write)
           case ":read-only":
           case ":read-write":
-            return ge([Me(t, {
+            return be([Me(t, {
               props: [I(a, /:(read-\w+)/, ":" + it + "$1")]
             })], o);
           // :placeholder
           case "::placeholder":
-            return ge([Me(t, {
+            return be([Me(t, {
               props: [I(a, /:(plac\w+)/, ":" + M + "input-$1")]
             }), Me(t, {
               props: [I(a, /:(plac\w+)/, ":" + it + "$1")]
@@ -1045,11 +1045,11 @@ var sn = function(t, r, n, o) {
   {
     var m, g = [Jr, Qr(function(y) {
       m.insert(y);
-    })], b = Zr(p.concat(o, g)), S = function(u) {
-      return ge(Hr(u), b);
+    })], b = Zr(p.concat(o, g)), x = function(u) {
+      return be(Hr(u), b);
     };
-    d = function(u, l, v, x) {
-      m = v, S(u ? u + "{" + l.styles + "}" : l.styles), x && (h.inserted[l.name] = !0);
+    d = function(u, l, v, S) {
+      m = v, x(u ? u + "{" + l.styles + "}" : l.styles), S && (h.inserted[l.name] = !0);
     };
   }
   var h = {
@@ -1081,8 +1081,8 @@ var Lt;
 function ln() {
   if (Lt) return L;
   Lt = 1;
-  var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, r = e ? Symbol.for("react.portal") : 60106, n = e ? Symbol.for("react.fragment") : 60107, o = e ? Symbol.for("react.strict_mode") : 60108, a = e ? Symbol.for("react.profiler") : 60114, s = e ? Symbol.for("react.provider") : 60109, c = e ? Symbol.for("react.context") : 60110, d = e ? Symbol.for("react.async_mode") : 60111, p = e ? Symbol.for("react.concurrent_mode") : 60111, m = e ? Symbol.for("react.forward_ref") : 60112, g = e ? Symbol.for("react.suspense") : 60113, b = e ? Symbol.for("react.suspense_list") : 60120, S = e ? Symbol.for("react.memo") : 60115, h = e ? Symbol.for("react.lazy") : 60116, y = e ? Symbol.for("react.block") : 60121, u = e ? Symbol.for("react.fundamental") : 60117, l = e ? Symbol.for("react.responder") : 60118, v = e ? Symbol.for("react.scope") : 60119;
-  function x(f) {
+  var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, r = e ? Symbol.for("react.portal") : 60106, n = e ? Symbol.for("react.fragment") : 60107, o = e ? Symbol.for("react.strict_mode") : 60108, a = e ? Symbol.for("react.profiler") : 60114, s = e ? Symbol.for("react.provider") : 60109, c = e ? Symbol.for("react.context") : 60110, d = e ? Symbol.for("react.async_mode") : 60111, p = e ? Symbol.for("react.concurrent_mode") : 60111, m = e ? Symbol.for("react.forward_ref") : 60112, g = e ? Symbol.for("react.suspense") : 60113, b = e ? Symbol.for("react.suspense_list") : 60120, x = e ? Symbol.for("react.memo") : 60115, h = e ? Symbol.for("react.lazy") : 60116, y = e ? Symbol.for("react.block") : 60121, u = e ? Symbol.for("react.fundamental") : 60117, l = e ? Symbol.for("react.responder") : 60118, v = e ? Symbol.for("react.scope") : 60119;
+  function S(f) {
     if (typeof f == "object" && f !== null) {
       var _ = f.$$typeof;
       switch (_) {
@@ -1100,7 +1100,7 @@ function ln() {
                 case c:
                 case m:
                 case h:
-                case S:
+                case x:
                 case s:
                   return f;
                 default:
@@ -1113,35 +1113,35 @@ function ln() {
     }
   }
   function A(f) {
-    return x(f) === p;
+    return S(f) === p;
   }
-  return L.AsyncMode = d, L.ConcurrentMode = p, L.ContextConsumer = c, L.ContextProvider = s, L.Element = t, L.ForwardRef = m, L.Fragment = n, L.Lazy = h, L.Memo = S, L.Portal = r, L.Profiler = a, L.StrictMode = o, L.Suspense = g, L.isAsyncMode = function(f) {
-    return A(f) || x(f) === d;
+  return L.AsyncMode = d, L.ConcurrentMode = p, L.ContextConsumer = c, L.ContextProvider = s, L.Element = t, L.ForwardRef = m, L.Fragment = n, L.Lazy = h, L.Memo = x, L.Portal = r, L.Profiler = a, L.StrictMode = o, L.Suspense = g, L.isAsyncMode = function(f) {
+    return A(f) || S(f) === d;
   }, L.isConcurrentMode = A, L.isContextConsumer = function(f) {
-    return x(f) === c;
+    return S(f) === c;
   }, L.isContextProvider = function(f) {
-    return x(f) === s;
+    return S(f) === s;
   }, L.isElement = function(f) {
     return typeof f == "object" && f !== null && f.$$typeof === t;
   }, L.isForwardRef = function(f) {
-    return x(f) === m;
+    return S(f) === m;
   }, L.isFragment = function(f) {
-    return x(f) === n;
+    return S(f) === n;
   }, L.isLazy = function(f) {
-    return x(f) === h;
+    return S(f) === h;
   }, L.isMemo = function(f) {
-    return x(f) === S;
+    return S(f) === x;
   }, L.isPortal = function(f) {
-    return x(f) === r;
+    return S(f) === r;
   }, L.isProfiler = function(f) {
-    return x(f) === a;
+    return S(f) === a;
   }, L.isStrictMode = function(f) {
-    return x(f) === o;
+    return S(f) === o;
   }, L.isSuspense = function(f) {
-    return x(f) === g;
+    return S(f) === g;
   }, L.isValidElementType = function(f) {
-    return typeof f == "string" || typeof f == "function" || f === n || f === p || f === a || f === o || f === g || f === b || typeof f == "object" && f !== null && (f.$$typeof === h || f.$$typeof === S || f.$$typeof === s || f.$$typeof === c || f.$$typeof === m || f.$$typeof === u || f.$$typeof === l || f.$$typeof === v || f.$$typeof === y);
-  }, L.typeOf = x, L;
+    return typeof f == "string" || typeof f == "function" || f === n || f === p || f === a || f === o || f === g || f === b || typeof f == "object" && f !== null && (f.$$typeof === h || f.$$typeof === x || f.$$typeof === s || f.$$typeof === c || f.$$typeof === m || f.$$typeof === u || f.$$typeof === l || f.$$typeof === v || f.$$typeof === y);
+  }, L.typeOf = S, L;
 }
 var k = {};
 /** @license React v16.13.1
@@ -1155,15 +1155,15 @@ var k = {};
 var kt;
 function dn() {
   return kt || (kt = 1, process.env.NODE_ENV !== "production" && function() {
-    var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, r = e ? Symbol.for("react.portal") : 60106, n = e ? Symbol.for("react.fragment") : 60107, o = e ? Symbol.for("react.strict_mode") : 60108, a = e ? Symbol.for("react.profiler") : 60114, s = e ? Symbol.for("react.provider") : 60109, c = e ? Symbol.for("react.context") : 60110, d = e ? Symbol.for("react.async_mode") : 60111, p = e ? Symbol.for("react.concurrent_mode") : 60111, m = e ? Symbol.for("react.forward_ref") : 60112, g = e ? Symbol.for("react.suspense") : 60113, b = e ? Symbol.for("react.suspense_list") : 60120, S = e ? Symbol.for("react.memo") : 60115, h = e ? Symbol.for("react.lazy") : 60116, y = e ? Symbol.for("react.block") : 60121, u = e ? Symbol.for("react.fundamental") : 60117, l = e ? Symbol.for("react.responder") : 60118, v = e ? Symbol.for("react.scope") : 60119;
-    function x(R) {
+    var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, r = e ? Symbol.for("react.portal") : 60106, n = e ? Symbol.for("react.fragment") : 60107, o = e ? Symbol.for("react.strict_mode") : 60108, a = e ? Symbol.for("react.profiler") : 60114, s = e ? Symbol.for("react.provider") : 60109, c = e ? Symbol.for("react.context") : 60110, d = e ? Symbol.for("react.async_mode") : 60111, p = e ? Symbol.for("react.concurrent_mode") : 60111, m = e ? Symbol.for("react.forward_ref") : 60112, g = e ? Symbol.for("react.suspense") : 60113, b = e ? Symbol.for("react.suspense_list") : 60120, x = e ? Symbol.for("react.memo") : 60115, h = e ? Symbol.for("react.lazy") : 60116, y = e ? Symbol.for("react.block") : 60121, u = e ? Symbol.for("react.fundamental") : 60117, l = e ? Symbol.for("react.responder") : 60118, v = e ? Symbol.for("react.scope") : 60119;
+    function S(R) {
       return typeof R == "string" || typeof R == "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-      R === n || R === p || R === a || R === o || R === g || R === b || typeof R == "object" && R !== null && (R.$$typeof === h || R.$$typeof === S || R.$$typeof === s || R.$$typeof === c || R.$$typeof === m || R.$$typeof === u || R.$$typeof === l || R.$$typeof === v || R.$$typeof === y);
+      R === n || R === p || R === a || R === o || R === g || R === b || typeof R == "object" && R !== null && (R.$$typeof === h || R.$$typeof === x || R.$$typeof === s || R.$$typeof === c || R.$$typeof === m || R.$$typeof === u || R.$$typeof === l || R.$$typeof === v || R.$$typeof === y);
     }
     function A(R) {
       if (typeof R == "object" && R !== null) {
-        var he = R.$$typeof;
-        switch (he) {
+        var ve = R.$$typeof;
+        switch (ve) {
           case t:
             var le = R.type;
             switch (le) {
@@ -1175,24 +1175,24 @@ function dn() {
               case g:
                 return le;
               default:
-                var ve = le && le.$$typeof;
-                switch (ve) {
+                var Ee = le && le.$$typeof;
+                switch (Ee) {
                   case c:
                   case m:
                   case h:
-                  case S:
+                  case x:
                   case s:
-                    return ve;
+                    return Ee;
                   default:
-                    return he;
+                    return ve;
                 }
             }
           case r:
-            return he;
+            return ve;
         }
       }
     }
-    var f = d, _ = p, C = c, F = s, U = t, B = m, V = n, ee = h, ue = S, Re = r, Ae = a, dt = o, Ye = g, ze = !1;
+    var f = d, _ = p, C = c, F = s, U = t, B = m, V = n, ee = h, ue = x, Re = r, Ae = a, dt = o, Ye = g, ze = !1;
     function oe(R) {
       return ze || (ze = !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.")), _e(R) || A(R) === d;
     }
@@ -1218,7 +1218,7 @@ function dn() {
       return A(R) === h;
     }
     function We(R) {
-      return A(R) === S;
+      return A(R) === x;
     }
     function Be(R) {
       return A(R) === r;
@@ -1232,7 +1232,7 @@ function dn() {
     function qe(R) {
       return A(R) === g;
     }
-    k.AsyncMode = f, k.ConcurrentMode = _, k.ContextConsumer = C, k.ContextProvider = F, k.Element = U, k.ForwardRef = B, k.Fragment = V, k.Lazy = ee, k.Memo = ue, k.Portal = Re, k.Profiler = Ae, k.StrictMode = dt, k.Suspense = Ye, k.isAsyncMode = oe, k.isConcurrentMode = _e, k.isContextConsumer = ie, k.isContextProvider = ft, k.isElement = Ce, k.isForwardRef = fe, k.isFragment = Fe, k.isLazy = Ve, k.isMemo = We, k.isPortal = Be, k.isProfiler = Ge, k.isStrictMode = Xe, k.isSuspense = qe, k.isValidElementType = x, k.typeOf = A;
+    k.AsyncMode = f, k.ConcurrentMode = _, k.ContextConsumer = C, k.ContextProvider = F, k.Element = U, k.ForwardRef = B, k.Fragment = V, k.Lazy = ee, k.Memo = ue, k.Portal = Re, k.Profiler = Ae, k.StrictMode = dt, k.Suspense = Ye, k.isAsyncMode = oe, k.isConcurrentMode = _e, k.isContextConsumer = ie, k.isContextProvider = ft, k.isElement = Ce, k.isForwardRef = fe, k.isFragment = Fe, k.isLazy = Ve, k.isMemo = We, k.isPortal = Be, k.isProfiler = Ge, k.isStrictMode = Xe, k.isSuspense = qe, k.isValidElementType = S, k.typeOf = A;
   }()), k;
 }
 var $t;
@@ -1282,17 +1282,17 @@ function mn() {
     return e.isMemo(h) ? o : a[h.$$typeof] || t;
   }
   var c = Object.defineProperty, d = Object.getOwnPropertyNames, p = Object.getOwnPropertySymbols, m = Object.getOwnPropertyDescriptor, g = Object.getPrototypeOf, b = Object.prototype;
-  function S(h, y, u) {
+  function x(h, y, u) {
     if (typeof y != "string") {
       if (b) {
         var l = g(y);
-        l && l !== b && S(h, l, u);
+        l && l !== b && x(h, l, u);
       }
       var v = d(y);
       p && (v = v.concat(p(y)));
-      for (var x = s(h), A = s(y), f = 0; f < v.length; ++f) {
+      for (var S = s(h), A = s(y), f = 0; f < v.length; ++f) {
         var _ = v[f];
-        if (!r[_] && !(u && u[_]) && !(A && A[_]) && !(x && x[_])) {
+        if (!r[_] && !(u && u[_]) && !(A && A[_]) && !(S && S[_])) {
           var C = m(y, _);
           try {
             c(h, _, C);
@@ -1303,7 +1303,7 @@ function mn() {
     }
     return h;
   }
-  return mt = S, mt;
+  return mt = x, mt;
 }
 mn();
 var pn = !0;
@@ -1576,7 +1576,9 @@ var An = function(t) {
 const On = Xt(({ sendBack: e, receive: t, input: r }) => {
   const { videoElement: n } = r;
   t((b) => {
-    b.type === "PLAY" && (n.play(), o()), b.type === "PAUSE" && (n.pause(), o()), b.type === "SET_TIME" && (n.currentTime = b.value, c()), b.type === "SET_VOLUME" && (n.volume = b.volume, n.muted = b.muted, d()), b.type === "SET_PLAYBACK_RATE" && (n.playbackRate = b.playbackRate, p());
+    b.type === "PLAY" && n.play().then(() => o()).catch((x) => {
+      console.error(x);
+    }), b.type === "PAUSE" && (n.pause(), a()), b.type === "SET_TIME" && (n.currentTime = b.value, c()), b.type === "SET_VOLUME" && (n.volume = b.volume, n.muted = b.muted, d()), b.type === "SET_PLAYBACK_RATE" && (n.playbackRate = b.playbackRate, p());
   });
   const o = () => e({ type: "PLAYING" }), a = () => e({ type: "PAUSED" }), s = () => e({ type: "ENDED" }), c = () => e({ type: "TIME_UPDATE", currentTime: n.currentTime }), d = () => e({ type: "VOLUME_UPDATE", muted: n.muted, volume: n.volume }), p = () => e({ type: "PLAYBACK_RATE_UPDATE", playbackRate: n.playbackRate }), m = () => e({ type: "SEEKING", currentTime: n.currentTime }), g = () => e({ type: "DURATION_UPDATE", duration: n.duration });
   return n.addEventListener("play", o), n.addEventListener("pause", a), n.addEventListener("ended", s), n.addEventListener("timeupdate", c), n.addEventListener("volumechange", d), n.addEventListener("ratechange", p), n.addEventListener("seeking", m), n.addEventListener("durationchange", g), () => {
@@ -1624,7 +1626,7 @@ const On = Xt(({ sendBack: e, receive: t, input: r }) => {
   a.addEventListener("error", p);
   const m = new MediaSource(), g = URL.createObjectURL(m);
   a.src = g;
-  const b = () => a.currentTime + (s ?? Mn), S = () => a.currentTime + (c ?? In), h = () => a.currentTime + (d ?? Ln);
+  const b = () => a.currentTime + (s ?? Mn), x = () => a.currentTime + (c ?? In), h = () => a.currentTime + (d ?? Ln);
   let y;
   const u = await new Promise(
     (U) => m.addEventListener(
@@ -1642,12 +1644,12 @@ const On = Xt(({ sendBack: e, receive: t, input: r }) => {
     )
   );
   if (!y) throw new Error("No header buffer");
-  const { appendBuffer: l, unbufferRange: v, updateTimestampOffset: x } = Nn(u);
+  const { appendBuffer: l, unbufferRange: v, updateTimestampOffset: S } = Nn(u);
   l(y), t(async (U) => {
-    U.type === "DATA" ? await l(U.data) : U.type === "TIMESTAMP_OFFSET" && await x(U.timestampOffset);
+    U.type === "DATA" ? await l(U.data) : U.type === "TIMESTAMP_OFFSET" && await S(U.timestampOffset);
   });
   const A = async () => {
-    const U = b(), B = S(), V = zt(u);
+    const U = b(), B = x(), V = zt(u);
     for (const { start: ee, end: ue } of V)
       ee < U && await v(
         ee,
@@ -1677,10 +1679,10 @@ const On = Xt(({ sendBack: e, receive: t, input: r }) => {
       o = void 0, g.then(c).catch((h) => {
         console.error(h), d(h);
       });
-      let b, S;
+      let b, x;
       n = new Promise((h, y) => {
-        b = h, S = y;
-      }), r = g.then(a(m, b, S)).catch((h) => (console.error(h), a(s, b, S)(h)));
+        b = h, x = y;
+      }), r = g.then(a(m, b, x)).catch((h) => (console.error(h), a(s, b, x)(h)));
     }, e - (m - s)), p;
   };
   return (...s) => {
@@ -1704,12 +1706,12 @@ const On = Xt(({ sendBack: e, receive: t, input: r }) => {
     read: m
   }), b = await g.init();
   b.indexes && e({ type: "INDEXES", indexes: b.indexes }), b.attachments?.length && e({ type: "NEW_ATTACHMENTS", attachments: b.attachments }), b.subtitles?.length && e({ type: "NEW_SUBTITLE_FRAGMENTS", subtitles: b.subtitles }), e({ type: "METADATA", ...b });
-  let S = !1, h = [];
+  let x = !1, h = [];
   const y = $n(100, async () => {
-    if (!(h.length || S))
+    if (!(h.length || x))
       try {
         const { data: u, subtitles: l, finished: v } = await g.read();
-        v && (S = !0), l.length && e({ type: "NEW_SUBTITLE_FRAGMENTS", subtitles: l }), e({ type: "DATA", data: u });
+        v && (x = !0), l.length && e({ type: "NEW_SUBTITLE_FRAGMENTS", subtitles: l }), e({ type: "DATA", data: u });
       } catch (u) {
         if (u.message === "Cancelled") return;
         console.error(u);
@@ -1719,17 +1721,17 @@ const On = Xt(({ sendBack: e, receive: t, input: r }) => {
     if (u.type === "NEED_DATA")
       y();
     else if (u.type === "SEEKING") {
-      S = !1;
+      x = !1;
       const { currentTime: l } = u, v = { currentTime: l };
       h = [...h, v];
       try {
-        const { data: x, pts: A } = await g.seek(l).finally(() => {
+        const { data: S, pts: A } = await g.seek(l).finally(() => {
           h = h.filter((f) => f !== v);
         });
-        e({ type: "TIMESTAMP_OFFSET", timestampOffset: A }), e({ type: "DATA", data: x });
-      } catch (x) {
-        if (x.message === "Cancelled") return;
-        console.error(x);
+        e({ type: "TIMESTAMP_OFFSET", timestampOffset: A }), e({ type: "DATA", data: S });
+      } catch (S) {
+        if (S.message === "Cancelled") return;
+        console.error(S);
       }
     }
   }), () => {
@@ -1804,12 +1806,12 @@ ${d}`),
   const { publicPath: a, subtitlesRendererOptions: s, videoElement: c, canvasElement: d } = r;
   let p = [], m;
   const g = /* @__PURE__ */ new Map();
-  let b = [], S;
+  let b = [], x;
   return t((h) => {
     if (h.type === "SELECT_SUBTITLE_STREAM") {
-      if (S = h.streamIndex, e({ type: "SELECTED_SUBTITLE_STREAM_UPDATED", streamIndex: h.streamIndex }), !m) return;
+      if (x = h.streamIndex, e({ type: "SELECTED_SUBTITLE_STREAM_UPDATED", streamIndex: h.streamIndex }), !m) return;
       m.freeTrack(), b = [];
-      const y = g.get(S);
+      const y = g.get(x);
       if (!y)
         throw new Error("newSubtitleStreams is undefined");
       const u = Le(y.header.content), l = {
@@ -1822,20 +1824,20 @@ ${d}`),
         }
       }, v = _t(l);
       m.setTrack(v), m.setCurrentTime(c.paused, c.currentTime, c.playbackRate);
-      for (const x in y.header.parsed.styles) {
-        const A = y.header.parsed.styles.style[Number(x)];
+      for (const S in y.header.parsed.styles) {
+        const A = y.header.parsed.styles.style[Number(S)];
         A && Wt(m, A);
       }
-      for (const x of y?.dialogues ?? [])
+      for (const S of y?.dialogues ?? [])
         b.filter((f) => f.type === "dialogue").find(
-          (f) => f.streamIndex === x.streamIndex && f.index === x.index
-        ) || S !== x.streamIndex || (m?.createEvent(x.assEvent), b.push(x));
+          (f) => f.streamIndex === S.streamIndex && f.index === S.index
+        ) || x !== S.streamIndex || (m?.createEvent(S.assEvent), b.push(S));
     }
     if (h.type === "NEW_SUBTITLE_FRAGMENTS") {
       const y = h.subtitles.map((u) => {
         if (u.type === "header") {
           const l = Dn(u);
-          return g.set(u.streamIndex, { header: l, dialogues: [] }), S === void 0 && (S = u.streamIndex, e({ type: "SELECTED_SUBTITLE_STREAM_UPDATED", streamIndex: u.streamIndex })), e({ type: "SUBTITLE_STREAMS_UPDATED", subtitlesStreams: [...g.values()] }), l;
+          return g.set(u.streamIndex, { header: l, dialogues: [] }), x === void 0 && (x = u.streamIndex, e({ type: "SELECTED_SUBTITLE_STREAM_UPDATED", streamIndex: u.streamIndex })), e({ type: "SUBTITLE_STREAMS_UPDATED", subtitlesStreams: [...g.values()] }), l;
         } else {
           const l = g.get(u.streamIndex)?.header;
           if (!l)
@@ -1848,7 +1850,7 @@ ${d}`),
         if (u.type === "dialogue") {
           if (b.filter((v) => v.type === "dialogue").find(
             (v) => v.streamIndex === u.streamIndex && v.index === u.index
-          ) || S !== u.streamIndex)
+          ) || x !== u.streamIndex)
             continue;
           m?.createEvent(u.assEvent), b.push(u);
         } else if (u.type === "header") {
@@ -1861,11 +1863,11 @@ ${d}`),
                 LayoutResX: "",
                 LayoutResY: ""
               }
-            }, x = _t(v);
+            }, S = _t(v);
             m = new br({
               video: c,
               canvas: d,
-              subContent: x,
+              subContent: S,
               workerUrl: s.workerUrl,
               modernWasmUrl: s.wasmUrl,
               fonts: p.filter(Boolean).map(([A, f]) => f),
@@ -1909,17 +1911,17 @@ ${d}`),
       );
     }).sort((f, _) => f.timestamp - _.timestamp).forEach((f) => l(f));
   });
-  const S = await Ht({
+  const x = await Ht({
     publicPath: s,
     workerUrl: c,
     bufferSize: d,
     length: p,
     read: m
-  }), h = await S.init(), y = new qt({ concurrency: 1 });
+  }), h = await x.init(), y = new qt({ concurrency: 1 });
   let u = [];
   const l = (v) => y.add(async () => {
     if (u.find((U) => U.index.index === v.index)) return;
-    const x = await S.readKeyframe(v.timestamp), A = new Blob([x], { type: "image/png" }), f = URL.createObjectURL(A), _ = h.indexes.at(v.index + 1), C = _ ? _.timestamp - v.timestamp : h.info.input.duration - v.timestamp, F = {
+    const S = await x.readKeyframe(v.timestamp), A = new Blob([S], { type: "image/png" }), f = URL.createObjectURL(A), _ = h.indexes.at(v.index + 1), C = _ ? _.timestamp - v.timestamp : h.info.input.duration - v.timestamp, F = {
       blob: A,
       url: f,
       timestamp: v.timestamp,
@@ -1929,7 +1931,7 @@ ${d}`),
     u.push(F), e({ type: "NEW_THUMBNAIL", thumbnail: F });
   });
   return g(), () => {
-    S.destroy();
+    x.destroy();
   };
 }), Fn = Er({
   types: {},
@@ -2130,6 +2132,53 @@ ${d}`),
   if (!e) throw new Error("Media actor not found");
   if (!r) throw new Error("Duration not found");
   r === n ? (e.send({ type: "SET_TIME", value: 0 }), e.send({ type: "PLAY" })) : t ? e.send({ type: "PLAY" }) : e.send({ type: "PAUSE" });
+}, he = {
+  headings: {
+    small: `
+      font-weight: 500;
+      font-size: 1.8rem;
+      line-height: 1.9rem;
+      @media (min-width: 960px) {
+        font-size: 1.8rem;
+        line-height: 2.2rem;
+      }
+      @media (min-width: 2560px) {
+        font-size: 2.2rem;
+        line-height: 2.6rem;
+      }
+    `
+  },
+  bMedium: {
+    bold: `
+      font-weight: 600;
+      font-size: 1.2rem;
+      line-height: 1.7rem;
+      @media (min-width: 960px) {
+        font-size: 1.4rem;
+        line-height: 2rem;
+      }
+    `,
+    regular: `
+      font-weight: 400;
+      font-size: 1.2rem;
+      line-height: 1.7rem;
+      @media (min-width: 960px) {
+        font-size: 1.4rem;
+        line-height: 2rem;
+      }
+    `
+  },
+  bSmall: {
+    regular: `
+      font-weight: 400;
+      font-size: 1rem;
+      line-height: 1.4rem;
+      @media (min-width: 960px) {
+        font-size: 1.2rem;
+        line-height: 1.7rem;
+      }
+    `
+  }
 }, Vn = K`
   top: unset !important;
   left: unset !important;
@@ -2142,14 +2191,15 @@ ${d}`),
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
-  margin-left: 2.5rem;
-  margin-top: 2.5rem;
-  font-size: 2rem;
+  padding: 2.4rem;
+  ${he.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
   pointer-events: none;
+
+  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
+  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
 `, Bn = K`
   position: absolute;
   top: 0;
@@ -2174,7 +2224,14 @@ ${d}`),
       canvasElement: o
     });
   }, [o]), /* @__PURE__ */ $(cr, { children: [
-    n.title && !n.hideUI ? /* @__PURE__ */ E("div", { css: Wn, children: n.title }) : void 0,
+    n.title ? /* @__PURE__ */ E(
+      "div",
+      {
+        css: Wn,
+        style: { ...n.hideUI ? { opacity: "0", pointerEvents: "none" } : {} },
+        children: n.title
+      }
+    ) : void 0,
     r === void 0 && e ? /* @__PURE__ */ E("div", { css: Bn, children: e }) : void 0,
     /* @__PURE__ */ E("canvas", { ref: s, css: Vn })
   ] });
@@ -2184,38 +2241,6 @@ ${d}`),
 }, St = (e) => {
   const t = Math.max(ur, Math.min(gt, e));
   return Math.pow(t, gt / lr);
-}, xe = {
-  bMedium: {
-    bold: `
-      font-weight: 600;
-      font-size: 1.2rem;
-      line-height: 1.7rem;
-      @media (min-width: 960px) {
-        font-size: 1.4rem;
-        line-height: 2rem;
-      }
-    `,
-    regular: `
-      font-weight: 400;
-      font-size: 1.2rem;
-      line-height: 1.7rem;
-      @media (min-width: 960px) {
-        font-size: 1.4rem;
-        line-height: 2rem;
-      }
-    `
-  },
-  bSmall: {
-    regular: `
-      font-weight: 400;
-      font-size: 1rem;
-      line-height: 1.4rem;
-      @media (min-width: 960px) {
-        font-size: 1.2rem;
-        line-height: 1.7rem;
-      }
-    `
-  }
 }, Xn = (e) => K`
   display: flex;
   justify-content: flex-end;
@@ -2226,7 +2251,7 @@ ${d}`),
   z-index: 3;
 
   * {
-    ${xe.bSmall.regular}
+    ${he.bSmall.regular}
   }
 
   ${e === "sm" && K`
@@ -2238,7 +2263,7 @@ ${d}`),
   ${e === "lg" && K`
     padding: 1.2rem!important;
   `}
-`, be = ({
+`, ye = ({
   id: e,
   toolTipText: t,
   text: r,
@@ -2334,7 +2359,7 @@ ${d}`),
     justify-content: center;
 
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${xe.bMedium.bold}
+    ${he.bMedium.bold}
 
     position: absolute;
     top: -2.5rem;
@@ -2406,14 +2431,14 @@ ${d}`),
   }
 `, Kn = () => {
   const e = O.useActorRef(), t = O.useSelector((l) => l.context.media.currentTime), r = O.useSelector((l) => l.context.media.duration), n = O.useSelector((l) => l.context.indexes), o = O.useSelector((l) => l.context.thumbnails), a = Se(we), s = Ie(null), { scrub: c, value: d } = qn({ ref: s }), [p, m] = Q(void 0), g = (l) => {
-    const x = l.nativeEvent.offsetX / l.currentTarget.offsetWidth * (r ?? 0);
-    m(x);
+    const S = l.nativeEvent.offsetX / l.currentTarget.offsetWidth * (r ?? 0);
+    m(S);
   }, b = () => {
     s.current && m(void 0);
-  }, S = pe(
+  }, x = pe(
     () => a.downloadedRanges?.map((l, v) => {
       if (!a.size || !r) return null;
-      const x = n.filter((B) => l.startByteOffset <= B.pos && B.pos <= l.endByteOffset), A = x.at(0), f = x.at(-1);
+      const S = n.filter((B) => l.startByteOffset <= B.pos && B.pos <= l.endByteOffset), A = S.at(0), f = S.at(-1);
       if (!A || !f) return null;
       const _ = A.timestamp / r, C = f.timestamp / r, F = Number((C - _).toFixed(2)), U = _ * 100;
       return /* @__PURE__ */ E("div", { className: "loaded-part", style: { transform: `scaleX(${F})`, marginLeft: `${U}%` } }, v);
@@ -2421,8 +2446,8 @@ ${d}`),
     [r, n.length, a.downloadedRanges?.map(({ startByteOffset: l, endByteOffset: v }) => `${l}/${v}`).join(",")]
   ), h = pe(() => {
     if (!p || p < 0) return;
-    const l = Math.floor(p / 3600), v = Math.floor((p - l * 3600) / 60), x = Math.floor(p - l * 3600 - v * 60);
-    return `${l > 0 ? `${l}:` : ""}${v < 10 ? "0" : ""}${v}:${x < 10 ? "0" : ""}${x}`;
+    const l = Math.floor(p / 3600), v = Math.floor((p - l * 3600) / 60), S = Math.floor(p - l * 3600 - v * 60);
+    return `${l > 0 ? `${l}:` : ""}${v < 10 ? "0" : ""}${v}:${S < 10 ? "0" : ""}${S}`;
   }, [p]);
   z(() => {
     if (!e || d === void 0 || !r) return;
@@ -2454,7 +2479,7 @@ ${d}`),
           }
         ) : void 0,
         /* @__PURE__ */ E("div", { className: "progress" }),
-        /* @__PURE__ */ E("div", { className: "loaded", children: S }),
+        /* @__PURE__ */ E("div", { className: "loaded", children: x }),
         /* @__PURE__ */ E("div", { className: "hover" }),
         /* @__PURE__ */ E("div", { className: "play-container", children: /* @__PURE__ */ E("div", { className: "play", style: { transform: `scaleX(${y})` } }) }),
         /* @__PURE__ */ E("div", { className: "chapters" }),
@@ -2496,7 +2521,7 @@ position: relative;
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${xe.bMedium.regular}
+  ${he.bMedium.regular}
 
   z-index: 4;
 
@@ -2531,7 +2556,7 @@ position: relative;
 
       .secondary {
         color: #eee;
-        ${xe.bSmall.regular}
+        ${he.bSmall.regular}
       }
     }
   }
@@ -2562,12 +2587,12 @@ position: relative;
     [r.length]
   ), b = (h) => () => {
     e.send({ type: "SELECT_SUBTITLE_STREAM", streamIndex: h.streamIndex }), p();
-  }, S = (h) => () => {
+  }, x = (h) => () => {
     c(h);
   };
   return /* @__PURE__ */ $("div", { css: Qn, ref: d, children: [
     /* @__PURE__ */ E(
-      be,
+      ye,
       {
         id: "settings",
         disabled: o,
@@ -2584,28 +2609,28 @@ position: relative;
       }
     ),
     o && s === 0 && /* @__PURE__ */ $("div", { className: "popover", children: [
-      /* @__PURE__ */ $("div", { onClick: S(
+      /* @__PURE__ */ $("div", { onClick: x(
         2
         /* Advanced */
       ), children: [
         /* @__PURE__ */ E("span", { children: "Advanced" }),
         /* @__PURE__ */ E("div", { children: /* @__PURE__ */ E(Ke, {}) })
       ] }),
-      /* @__PURE__ */ $("div", { onClick: S(
+      /* @__PURE__ */ $("div", { onClick: x(
         3
         /* SelectNewSources */
       ), children: [
         /* @__PURE__ */ E("div", { children: "Select new sources" }),
         /* @__PURE__ */ E("div", { children: /* @__PURE__ */ E(Ke, {}) })
       ] }),
-      /* @__PURE__ */ $("div", { onClick: S(
+      /* @__PURE__ */ $("div", { onClick: x(
         4
         /* Subtitles */
       ), children: [
         /* @__PURE__ */ E("div", { children: "Subtitles" }),
         /* @__PURE__ */ E("div", { children: /* @__PURE__ */ E(Ke, {}) })
       ] }),
-      /* @__PURE__ */ $("div", { onClick: S(
+      /* @__PURE__ */ $("div", { onClick: x(
         1
         /* PlaybackRate */
       ), children: [
@@ -2617,7 +2642,7 @@ position: relative;
       ] })
     ] }),
     o && s === 1 && /* @__PURE__ */ $("div", { className: "popover", children: [
-      /* @__PURE__ */ $("div", { onClick: S(
+      /* @__PURE__ */ $("div", { onClick: x(
         0
         /* Default */
       ), children: [
@@ -2662,14 +2687,14 @@ position: relative;
         ] })
       ] })
     ] }),
-    o && s === 2 && /* @__PURE__ */ E("div", { className: "popover", children: /* @__PURE__ */ $("div", { onClick: S(
+    o && s === 2 && /* @__PURE__ */ E("div", { className: "popover", children: /* @__PURE__ */ $("div", { onClick: x(
       0
       /* Default */
     ), children: [
       /* @__PURE__ */ E("div", { children: "Back" }),
       /* @__PURE__ */ E("div", {})
     ] }) }),
-    o && s === 3 && /* @__PURE__ */ E("div", { className: "popover", children: /* @__PURE__ */ $("div", { onClick: S(
+    o && s === 3 && /* @__PURE__ */ E("div", { className: "popover", children: /* @__PURE__ */ $("div", { onClick: x(
       0
       /* Default */
     ), children: [
@@ -2688,7 +2713,7 @@ position: relative;
         },
         h.streamIndex
       )),
-      /* @__PURE__ */ $("div", { onClick: S(
+      /* @__PURE__ */ $("div", { onClick: x(
         0
         /* Default */
       ), children: [
@@ -2759,12 +2784,12 @@ position: relative;
       u && u.removeEventListener("wheel", g);
     };
   }, [e]);
-  const b = e * 100, S = "#fff", h = "#3A3A3A", y = pe(
+  const b = e * 100, x = "#fff", h = "#3A3A3A", y = pe(
     () => Math.round(n ? 0 : St(r) * 100),
     [r]
   );
   return /* @__PURE__ */ E(
-    be,
+    ye,
     {
       id: "volume-slider",
       text: /* @__PURE__ */ E(
@@ -2778,7 +2803,7 @@ position: relative;
             {
               style: {
                 background: `linear-gradient(to right, 
-                ${S} 0% ${b}%, 
+                ${x} 0% ${b}%, 
                 ${h} ${b}% 100%
               )`
               },
@@ -2826,7 +2851,7 @@ position: relative;
       border-radius: 4px;
 
       .volume-value {
-        ${xe.bMedium.regular};
+        ${he.bMedium.regular};
         color: #ffffff;
       }
     }
@@ -2848,7 +2873,7 @@ position: relative;
   });
   return /* @__PURE__ */ $("div", { css: oo, children: [
     /* @__PURE__ */ E(
-      be,
+      ye,
       {
         id: "sound",
         text: /* @__PURE__ */ E(
@@ -2963,7 +2988,7 @@ position: relative;
 
     .left {
       .time {
-        ${xe.bMedium.regular}
+        ${he.bMedium.regular}
       }
     }
     .right {
@@ -2994,11 +3019,11 @@ position: relative;
       document.removeEventListener("fullscreenchange", u);
     };
   }, []);
-  const S = () => {
+  const x = () => {
     document.fullscreenElement ? document.exitFullscreen() : t.current && t.current.requestFullscreen();
   }, h = ot(({ direction: u, stepSize: l }) => {
     if (!r) return;
-    const v = St(a), x = u === "up" ? l : -l, A = Math.max(0, Math.min(1, v + x)), f = dr(A);
+    const v = St(a), S = u === "up" ? l : -l, A = Math.max(0, Math.min(1, v + S)), f = dr(A);
     r.send({
       type: "SET_VOLUME",
       muted: s,
@@ -3008,7 +3033,7 @@ position: relative;
   z(() => {
     const u = (l) => {
       let v = !0;
-      if (l.key === "f") S();
+      if (l.key === "f") x();
       else if (l.key === "k") nt(r, o, d, c);
       else if (l.key === " ") nt(r, o, d, c);
       else if (l.key === "m")
@@ -3036,7 +3061,7 @@ position: relative;
     /* @__PURE__ */ $("div", { className: "actions", children: [
       /* @__PURE__ */ $("div", { className: "left", children: [
         /* @__PURE__ */ E(
-          be,
+          ye,
           {
             id: "play",
             tooltipPlace: "top-start",
@@ -3059,7 +3084,7 @@ position: relative;
         e,
         /* @__PURE__ */ E(eo, {}),
         /* @__PURE__ */ E(
-          be,
+          ye,
           {
             id: "picture-in-picture",
             text: /* @__PURE__ */ E(
@@ -3074,7 +3099,7 @@ position: relative;
           }
         ),
         /* @__PURE__ */ E(
-          be,
+          ye,
           {
             id: "full-screen",
             tooltipPlace: "top-end",
@@ -3083,7 +3108,7 @@ position: relative;
               {
                 className: "full-screen",
                 type: "button",
-                onClick: S,
+                onClick: x,
                 children: g ? /* @__PURE__ */ E(_r, {}) : /* @__PURE__ */ E(Cr, {})
               }
             ),
@@ -3134,10 +3159,10 @@ position: relative;
       ref: p,
       onMouseMove: (b) => {
         o.update({ ...o, hideUI: !1 }), d.current && clearInterval(d.current);
-        const S = setTimeout(() => {
+        const x = setTimeout(() => {
           o.update({ ...o, hideUI: !0 });
         }, 3e3);
-        d.current = S;
+        d.current = x;
       },
       onMouseOut: (b) => {
         b.currentTarget.parentElement !== b.relatedTarget && b.relatedTarget !== null || o.update({ ...o, hideUI: !0 });
@@ -3165,7 +3190,7 @@ position: relative;
   width: 100%;
   overflow: hidden;
 `, mo = ({ options: e, videoElement: t, children: r }) => {
-  const n = Se(we), o = O.useActorRef(), a = O.useSelector((u) => u.value), s = O.useSelector((u) => u.context.media.volume), c = O.useSelector((u) => u.context.media.muted), d = O.useSelector((u) => u.context.isReady), p = O.useSelector((u) => u.context.media.duration), [m, g] = Bt("mediaVolume", "1"), [b, S] = Bt("mediaMute", "false"), [h, y] = Q(!0);
+  const n = Se(we), o = O.useActorRef(), a = O.useSelector((u) => u.value), s = O.useSelector((u) => u.context.media.volume), c = O.useSelector((u) => u.context.media.muted), d = O.useSelector((u) => u.context.isReady), p = O.useSelector((u) => u.context.media.duration), [m, g] = Bt("mediaVolume", "1"), [b, x] = Bt("mediaMute", "false"), [h, y] = Q(!0);
   return z(() => {
     o.send({
       type: "MEDIA_SOURCE_OPTIONS",
@@ -3186,12 +3211,12 @@ position: relative;
       (n.downloadedRanges?.map((u) => `${u.startByteOffset}-${u.endByteOffset}`) ?? []).join(",")
     ]
   ), z(() => {
-    const { size: u, read: l, publicPath: v, libavWorkerUrl: x, jassubWasmUrl: A } = e;
-    !l || !u || !v || !x || !A || o.send({
+    const { size: u, read: l, publicPath: v, libavWorkerUrl: S, jassubWasmUrl: A } = e;
+    !l || !u || !v || !S || !A || o.send({
       type: "REMUXER_OPTIONS",
       remuxerOptions: {
         publicPath: v,
-        workerUrl: x,
+        workerUrl: S,
         bufferSize: e.bufferSize ?? lo,
         length: u,
         read: l
@@ -3217,7 +3242,7 @@ position: relative;
       type: "SET_VOLUME",
       muted: b === "true",
       volume: isNaN(Number(m)) ? 1 : Number(m)
-    }), y(!1)) : (g(s.toString()), S(c ? "true" : "false")));
+    }), y(!1)) : (g(s.toString()), x(c ? "true" : "false")));
   }, [d, s, c, h]), z(() => {
     if (a === "OK")
       return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "",
   "type": "module",
   "main": "build/index.js",

package/src/components/overlay.tsx

@@ -5,6 +5,7 @@ import { css } from '@emotion/react'
 
 import { MediaMachineContext } from '../state-machines'
 import { MediaPlayerContext } from '../utils/context'
+import { fonts } from '../utils/fonts'
 
 const style = css`
   top: unset !important;
@@ -20,14 +21,15 @@ const titleStyle = css`
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
-  margin-left: 2.5rem;
-  margin-top: 2.5rem;
-  font-size: 2rem;
+  padding: 2.4rem;
+  ${fonts.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
   pointer-events: none;
+
+  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
+  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
 `
 
 const loadingInformationStyle = css`
@@ -67,8 +69,15 @@ export const Overlay = ({ loadingInformation }: { loadingInformation?: ReactNode
   return (
     <>
       {
-        mediaPlayerContext.title && !mediaPlayerContext.hideUI
-          ? <div css={titleStyle}>{mediaPlayerContext.title}</div>
+        mediaPlayerContext.title
+          ? (
+            <div
+              css={titleStyle}
+              style={{ ...mediaPlayerContext.hideUI ? { opacity: '0', pointerEvents: 'none' } : {} }}
+            >
+              {mediaPlayerContext.title}
+            </div>
+          )
           : undefined
       }
       {

package/src/state-machines/media-properties.ts

@@ -25,12 +25,16 @@ export default fromCallback<MediaPropertiesEvents, MediaPropertiesInput, MediaPr
 
   receive((event) => {
     if (event.type === 'PLAY') {
-      videoElement.play()
-      handlePlay()
+      videoElement
+        .play()
+        .then(() => handlePlay())
+        .catch((error) => {
+          console.error(error)
+        })
     }
     if (event.type === 'PAUSE') {
       videoElement.pause()
-      handlePlay()
+      handlePause()
     }
     if (event.type === 'SET_TIME') {
       videoElement.currentTime = event.value

package/src/utils/fonts.ts

@@ -26,6 +26,10 @@ export const fonts = {
         font-size: 1.8rem;
         line-height: 2.2rem;
       }
+      @media (min-width: 2560px) {
+        font-size: 2.2rem;
+        line-height: 2.6rem;
+      }
     `,
     extraSmall: `
       font-weight: 500;