@maveio/components 0.0.134 → 0.0.136

package/dist/components/player.js

@@ -1,4 +1,4 @@
-export { a as Player } from '../chunk-IBHRHICY.js';
+export { a as Player } from '../chunk-SULQSPXB.js';
 import '../chunk-RI4GXRVA.js';
 import '../chunk-ETMAVITN.js';
 import '../chunk-CF5QCOBL.js';

package/dist/components/pop.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkZWYDT7XS_cjs = require('../chunk-ZWYDT7XS.cjs');
+var chunkRGIEUAZX_cjs = require('../chunk-RGIEUAZX.cjs');
 require('../chunk-5NKBIUPL.cjs');
-require('../chunk-7QGZJLGA.cjs');
+require('../chunk-XYDVFCDI.cjs');
 require('../chunk-R4VWICJL.cjs');
 require('../chunk-KYW5ANCP.cjs');
 require('../chunk-UEEYC5OJ.cjs');
@@ -22,9 +22,9 @@ require('../chunk-5Y5M5ND5.cjs');
 
 Object.defineProperty(exports, 'Pop', {
 	enumerable: true,
-	get: function () { return chunkZWYDT7XS_cjs.a; }
+	get: function () { return chunkRGIEUAZX_cjs.a; }
 });
 Object.defineProperty(exports, 'checkPop', {
 	enumerable: true,
-	get: function () { return chunkZWYDT7XS_cjs.b; }
+	get: function () { return chunkRGIEUAZX_cjs.b; }
 });

package/dist/components/pop.js

@@ -1,6 +1,6 @@
-export { a as Pop, b as checkPop } from '../chunk-EUSLOKEH.js';
+export { a as Pop, b as checkPop } from '../chunk-DZBAEURG.js';
 import '../chunk-WE5NUDRY.js';
-import '../chunk-IBHRHICY.js';
+import '../chunk-SULQSPXB.js';
 import '../chunk-RI4GXRVA.js';
 import '../chunk-ETMAVITN.js';
 import '../chunk-CF5QCOBL.js';

package/dist/index.cjs

@@ -9,10 +9,10 @@ var chunkWO7KHPV5_cjs = require('./chunk-WO7KHPV5.cjs');
 require('./chunk-OLR7D3Q6.cjs');
 var chunk4AO3OKPN_cjs = require('./chunk-4AO3OKPN.cjs');
 var chunkBTPWX6DH_cjs = require('./chunk-BTPWX6DH.cjs');
-var chunkVZOV2E6B_cjs = require('./chunk-VZOV2E6B.cjs');
-var chunkZWYDT7XS_cjs = require('./chunk-ZWYDT7XS.cjs');
+var chunk7N6UCPZY_cjs = require('./chunk-7N6UCPZY.cjs');
+var chunkRGIEUAZX_cjs = require('./chunk-RGIEUAZX.cjs');
 require('./chunk-5NKBIUPL.cjs');
-var chunk7QGZJLGA_cjs = require('./chunk-7QGZJLGA.cjs');
+var chunkXYDVFCDI_cjs = require('./chunk-XYDVFCDI.cjs');
 require('./chunk-R4VWICJL.cjs');
 require('./chunk-KYW5ANCP.cjs');
 require('./chunk-UEEYC5OJ.cjs');
@@ -52,15 +52,15 @@ Object.defineProperty(exports, 'Image', {
 });
 Object.defineProperty(exports, 'List', {
 	enumerable: true,
-	get: function () { return chunkVZOV2E6B_cjs.a; }
+	get: function () { return chunk7N6UCPZY_cjs.a; }
 });
 Object.defineProperty(exports, 'Pop', {
 	enumerable: true,
-	get: function () { return chunkZWYDT7XS_cjs.a; }
+	get: function () { return chunkRGIEUAZX_cjs.a; }
 });
 Object.defineProperty(exports, 'Player', {
 	enumerable: true,
-	get: function () { return chunk7QGZJLGA_cjs.a; }
+	get: function () { return chunkXYDVFCDI_cjs.a; }
 });
 Object.defineProperty(exports, 'setConfig', {
 	enumerable: true,

package/dist/index.js

@@ -7,10 +7,10 @@ export { a as Clip } from './chunk-5KN6H4Y2.js';
 import './chunk-AEKWMZ2I.js';
 export { a as Files } from './chunk-PXHPOLJ3.js';
 export { a as Image } from './chunk-ZFM2N7YP.js';
-export { a as List } from './chunk-BOQSEQQE.js';
-export { a as Pop } from './chunk-EUSLOKEH.js';
+export { a as List } from './chunk-RUMHES5I.js';
+export { a as Pop } from './chunk-DZBAEURG.js';
 import './chunk-WE5NUDRY.js';
-export { a as Player } from './chunk-IBHRHICY.js';
+export { a as Player } from './chunk-SULQSPXB.js';
 import './chunk-RI4GXRVA.js';
 import './chunk-ETMAVITN.js';
 import './chunk-CF5QCOBL.js';

package/dist/react.cjs

@@ -9,10 +9,10 @@ var chunkWO7KHPV5_cjs = require('./chunk-WO7KHPV5.cjs');
 require('./chunk-OLR7D3Q6.cjs');
 var chunk4AO3OKPN_cjs = require('./chunk-4AO3OKPN.cjs');
 var chunkBTPWX6DH_cjs = require('./chunk-BTPWX6DH.cjs');
-var chunkVZOV2E6B_cjs = require('./chunk-VZOV2E6B.cjs');
-var chunkZWYDT7XS_cjs = require('./chunk-ZWYDT7XS.cjs');
+var chunk7N6UCPZY_cjs = require('./chunk-7N6UCPZY.cjs');
+var chunkRGIEUAZX_cjs = require('./chunk-RGIEUAZX.cjs');
 require('./chunk-5NKBIUPL.cjs');
-var chunk7QGZJLGA_cjs = require('./chunk-7QGZJLGA.cjs');
+var chunkXYDVFCDI_cjs = require('./chunk-XYDVFCDI.cjs');
 require('./chunk-R4VWICJL.cjs');
 require('./chunk-KYW5ANCP.cjs');
 require('./chunk-UEEYC5OJ.cjs');
@@ -34,7 +34,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var t__default = /*#__PURE__*/_interopDefault(t);
 
-var g=react.createComponent({tagName:"mave-clip",elementClass:chunkWO7KHPV5_cjs.a,react:t__default.default}),v=react.createComponent({tagName:"mave-list",elementClass:chunkVZOV2E6B_cjs.a,react:t__default.default}),P=react.createComponent({tagName:"mave-player",elementClass:chunk7QGZJLGA_cjs.a,react:t__default.default}),y=react.createComponent({tagName:"mave-upload",elementClass:chunkCQGY626F_cjs.a,react:t__default.default}),I=react.createComponent({tagName:"mave-files",elementClass:chunk4AO3OKPN_cjs.a,react:t__default.default}),T=react.createComponent({tagName:"mave-img",elementClass:chunkBTPWX6DH_cjs.a,react:t__default.default}),u=react.createComponent({tagName:"mave-text",elementClass:chunkA3PLFLYH_cjs.a,react:t__default.default}),b=react.createComponent({tagName:"mave-pop",elementClass:chunkZWYDT7XS_cjs.a,react:t__default.default});
+var g=react.createComponent({tagName:"mave-clip",elementClass:chunkWO7KHPV5_cjs.a,react:t__default.default}),v=react.createComponent({tagName:"mave-list",elementClass:chunk7N6UCPZY_cjs.a,react:t__default.default}),P=react.createComponent({tagName:"mave-player",elementClass:chunkXYDVFCDI_cjs.a,react:t__default.default}),y=react.createComponent({tagName:"mave-upload",elementClass:chunkCQGY626F_cjs.a,react:t__default.default}),I=react.createComponent({tagName:"mave-files",elementClass:chunk4AO3OKPN_cjs.a,react:t__default.default}),T=react.createComponent({tagName:"mave-img",elementClass:chunkBTPWX6DH_cjs.a,react:t__default.default}),u=react.createComponent({tagName:"mave-text",elementClass:chunkA3PLFLYH_cjs.a,react:t__default.default}),b=react.createComponent({tagName:"mave-pop",elementClass:chunkRGIEUAZX_cjs.a,react:t__default.default});
 
 Object.defineProperty(exports, 'setConfig', {
 	enumerable: true,

package/dist/react.js

@@ -7,10 +7,10 @@ import { a } from './chunk-5KN6H4Y2.js';
 import './chunk-AEKWMZ2I.js';
 import { a as a$4 } from './chunk-PXHPOLJ3.js';
 import { a as a$5 } from './chunk-ZFM2N7YP.js';
-import { a as a$1 } from './chunk-BOQSEQQE.js';
-import { a as a$7 } from './chunk-EUSLOKEH.js';
+import { a as a$1 } from './chunk-RUMHES5I.js';
+import { a as a$7 } from './chunk-DZBAEURG.js';
 import './chunk-WE5NUDRY.js';
-import { a as a$2 } from './chunk-IBHRHICY.js';
+import { a as a$2 } from './chunk-SULQSPXB.js';
 import './chunk-RI4GXRVA.js';
 import './chunk-ETMAVITN.js';
 import './chunk-CF5QCOBL.js';

package/dist/themes/default.cjs

@@ -244,7 +244,13 @@ function r(t,i,a,o){class e extends i{render(){return a`
         direction: ltr !important;
       }
 
+      img,
+      video {
+        overflow: hidden;
+      }
+
       ::slotted(video) {
+        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -255,6 +261,7 @@ function r(t,i,a,o){class e extends i{render(){return a`
       }
 
       media-controller {
+        overflow: hidden;
         display: flex;
         background: transparent;
         --media-font-family: system-ui, sans-serif;

package/dist/themes/default.js

@@ -242,7 +242,13 @@ function r(t,i,a,o){class e extends i{render(){return a`
         direction: ltr !important;
       }
 
+      img,
+      video {
+        overflow: hidden;
+      }
+
       ::slotted(video) {
+        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -253,6 +259,7 @@ function r(t,i,a,o){class e extends i{render(){return a`
       }
 
       media-controller {
+        overflow: hidden;
         display: flex;
         background: transparent;
         --media-font-family: system-ui, sans-serif;

package/dist/themes/dolphin.cjs

@@ -2,7 +2,7 @@
 
 require('../chunk-5Y5M5ND5.cjs');
 
-function n(e,i,a,o){class t extends i{render(){return a`
+function n(t,i,a,o){class e extends i{render(){return a`
         <div class="subtitles">
           <div id="subtitles_text">subtitles</div>
         </div>
@@ -203,7 +203,7 @@ function n(e,i,a,o){class t extends i{render(){return a`
             </media-control-bar>
           </div>
         </media-controller>
-      `}}t.styles=o`
+      `}}e.styles=o`
       :host {
         all: initial !important;
         width: 100%;
@@ -215,7 +215,13 @@ function n(e,i,a,o){class t extends i{render(){return a`
         direction: ltr !important;
       }
 
+      img,
+      video {
+        overflow: hidden;
+      }
+
       ::slotted(video) {
+        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -228,6 +234,7 @@ function n(e,i,a,o){class t extends i{render(){return a`
       }
 
       media-controller {
+        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -236,12 +243,12 @@ function n(e,i,a,o){class t extends i{render(){return a`
         --media-font-family: 'Inter', system-ui, sans-serif;
         --media-background-color: transparent;
 
-        --media-primary-color: rgba(255,255,255,0.94);
-        --media-secondary-color: rgba(255,255,255,0.94);
+        --media-primary-color: rgba(255, 255, 255, 0.94);
+        --media-secondary-color: rgba(255, 255, 255, 0.94);
 
         --media-control-padding: 8px;
         --media-control-background: transparent;
-        --media-option-hover-background: rgba(0,0,0,0.25);
+        --media-option-hover-background: rgba(0, 0, 0, 0.25);
 
         --media-preview-time-margin: 0;
 
@@ -256,12 +263,9 @@ function n(e,i,a,o){class t extends i{render(){return a`
         padding: 0 0 0 3px;
         z-index: 20;
 
-        background: var(
-          --primary-color,
-          rgba(0,0,0,0.25)
-        );
+        background: var(--primary-color, rgba(0, 0, 0, 0.25));
 
-        transform: translate3d(0,0,0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
+        transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
 
         --media-range-track-height: 5px;
         --media-control-hover-background: transparent;
@@ -294,7 +298,7 @@ function n(e,i,a,o){class t extends i{render(){return a`
       media-fullscreen-button,
       media-mute-button,
       media-captions-button {
-        transform: translate3d(0,0,0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
+        transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 100ms;
@@ -304,7 +308,7 @@ function n(e,i,a,o){class t extends i{render(){return a`
       media-fullscreen-button:hover,
       media-mute-button:hover,
       media-captions-button:hover {
-        --media-primary-color: rgba(255,255,255,1);
+        --media-primary-color: rgba(255, 255, 255, 1);
         transform: scale(1.3);
       }
 
@@ -393,11 +397,11 @@ function n(e,i,a,o){class t extends i{render(){return a`
         font-family: 'Inter', system-ui, sans-serif;
       }
 
-      .subtitles>div {
+      .subtitles > div {
         display: flex;
         align-items: center;
         justify-content: center;
-        color: rgba(255,255,255,1);
+        color: rgba(255, 255, 255, 1);
         height: 120px;
         width: 70%;
         text-shadow: rgba(0, 0, 0, 0.7) 0px 1px 4px;
@@ -438,9 +442,10 @@ function n(e,i,a,o){class t extends i{render(){return a`
         display: var(--playbackrate-display, flex);
       }
 
-      media-captions-selectmenu, media-captions-button[mediasubtitleslist] {
+      media-captions-selectmenu,
+      media-captions-button[mediasubtitleslist] {
         display: var(--captions-display, flex);
       }
-    `,customElements.define(`theme-${e}`,t);}
+    `,customElements.define(`theme-${t}`,e);}
 
 exports.build = n;

package/dist/themes/dolphin.js

@@ -1,6 +1,6 @@
 import '../chunk-ZFZIJ4A5.js';
 
-function n(e,i,a,o){class t extends i{render(){return a`
+function n(t,i,a,o){class e extends i{render(){return a`
         <div class="subtitles">
           <div id="subtitles_text">subtitles</div>
         </div>
@@ -201,7 +201,7 @@ function n(e,i,a,o){class t extends i{render(){return a`
             </media-control-bar>
           </div>
         </media-controller>
-      `}}t.styles=o`
+      `}}e.styles=o`
       :host {
         all: initial !important;
         width: 100%;
@@ -213,7 +213,13 @@ function n(e,i,a,o){class t extends i{render(){return a`
         direction: ltr !important;
       }
 
+      img,
+      video {
+        overflow: hidden;
+      }
+
       ::slotted(video) {
+        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -226,6 +232,7 @@ function n(e,i,a,o){class t extends i{render(){return a`
       }
 
       media-controller {
+        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -234,12 +241,12 @@ function n(e,i,a,o){class t extends i{render(){return a`
         --media-font-family: 'Inter', system-ui, sans-serif;
         --media-background-color: transparent;
 
-        --media-primary-color: rgba(255,255,255,0.94);
-        --media-secondary-color: rgba(255,255,255,0.94);
+        --media-primary-color: rgba(255, 255, 255, 0.94);
+        --media-secondary-color: rgba(255, 255, 255, 0.94);
 
         --media-control-padding: 8px;
         --media-control-background: transparent;
-        --media-option-hover-background: rgba(0,0,0,0.25);
+        --media-option-hover-background: rgba(0, 0, 0, 0.25);
 
         --media-preview-time-margin: 0;
 
@@ -254,12 +261,9 @@ function n(e,i,a,o){class t extends i{render(){return a`
         padding: 0 0 0 3px;
         z-index: 20;
 
-        background: var(
-          --primary-color,
-          rgba(0,0,0,0.25)
-        );
+        background: var(--primary-color, rgba(0, 0, 0, 0.25));
 
-        transform: translate3d(0,0,0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
+        transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
 
         --media-range-track-height: 5px;
         --media-control-hover-background: transparent;
@@ -292,7 +296,7 @@ function n(e,i,a,o){class t extends i{render(){return a`
       media-fullscreen-button,
       media-mute-button,
       media-captions-button {
-        transform: translate3d(0,0,0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
+        transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 100ms;
@@ -302,7 +306,7 @@ function n(e,i,a,o){class t extends i{render(){return a`
       media-fullscreen-button:hover,
       media-mute-button:hover,
       media-captions-button:hover {
-        --media-primary-color: rgba(255,255,255,1);
+        --media-primary-color: rgba(255, 255, 255, 1);
         transform: scale(1.3);
       }
 
@@ -391,11 +395,11 @@ function n(e,i,a,o){class t extends i{render(){return a`
         font-family: 'Inter', system-ui, sans-serif;
       }
 
-      .subtitles>div {
+      .subtitles > div {
         display: flex;
         align-items: center;
         justify-content: center;
-        color: rgba(255,255,255,1);
+        color: rgba(255, 255, 255, 1);
         height: 120px;
         width: 70%;
         text-shadow: rgba(0, 0, 0, 0.7) 0px 1px 4px;
@@ -436,9 +440,10 @@ function n(e,i,a,o){class t extends i{render(){return a`
         display: var(--playbackrate-display, flex);
       }
 
-      media-captions-selectmenu, media-captions-button[mediasubtitleslist] {
+      media-captions-selectmenu,
+      media-captions-button[mediasubtitleslist] {
         display: var(--captions-display, flex);
       }
-    `,customElements.define(`theme-${e}`,t);}
+    `,customElements.define(`theme-${t}`,e);}
 
 export { n as build };

package/dist/themes/synthwave.cjs

@@ -133,7 +133,9 @@ function r(t,i,a,o){class e extends i{render(){return a`
                 </svg>
               </div>
             </media-mute-button>
-            <media-loading-indicator loadingdelay="0"></media-loading-indicator>
+            <div class="mave-loader">
+              <media-loading-indicator loading-delay="0"></media-loading-indicator>
+            </div>
             <div style="flex-grow: 1;"></div>
             <media-time-display showduration></media-time-display>
             <media-playback-rate-button></media-playback-rate-button>
@@ -214,7 +216,13 @@ function r(t,i,a,o){class e extends i{render(){return a`
         direction: ltr !important;
       }
 
+      img,
+      video {
+        overflow: hidden;
+      }
+
       ::slotted(video) {
+        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -227,6 +235,7 @@ function r(t,i,a,o){class e extends i{render(){return a`
       }
 
       media-controller {
+        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -238,12 +247,12 @@ function r(t,i,a,o){class e extends i{render(){return a`
         --media-font-family: 'Inter', system-ui, sans-serif;
         --media-background-color: transparent;
 
-        --media-primary-color: rgba(255,255,255,0.94);
-        --media-secondary-color: rgba(255,255,255,0.94);
+        --media-primary-color: rgba(255, 255, 255, 0.94);
+        --media-secondary-color: rgba(255, 255, 255, 0.94);
 
         --media-control-padding: 8px;
         --media-control-background: transparent;
-        --media-option-hover-background: rgba(0,0,0,0.25);
+        --media-option-hover-background: rgba(0, 0, 0, 0.25);
 
         --media-preview-time-margin: 0 0 8px 0;
 
@@ -264,12 +273,9 @@ function r(t,i,a,o){class e extends i{render(){return a`
         padding: 0 8px;
         z-index: 10;
         user-select: none;
-        transform: translate3d(0,0,0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
+        transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
 
-        background: var(
-          --primary-color,
-          transparent
-        );
+        background: var(--primary-color, transparent);
 
         --media-control-hover-background: transparent;
       }
@@ -306,7 +312,7 @@ function r(t,i,a,o){class e extends i{render(){return a`
       media-fullscreen-button,
       media-mute-button,
       media-captions-button {
-        transform: translate3d(0,0,0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
+        transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 100ms;
@@ -320,7 +326,7 @@ function r(t,i,a,o){class e extends i{render(){return a`
       media-fullscreen-button:hover,
       media-mute-button:hover,
       media-captions-button:hover {
-        --media-primary-color: rgba(255,255,255,1);
+        --media-primary-color: rgba(255, 255, 255, 1);
         transform: scale(1.3);
       }
 
@@ -410,11 +416,11 @@ function r(t,i,a,o){class e extends i{render(){return a`
         font-family: 'Inter', system-ui, sans-serif;
       }
 
-      .subtitles>div {
+      .subtitles > div {
         display: flex;
         align-items: center;
         justify-content: center;
-        color: rgba(255,255,255,1);
+        color: rgba(255, 255, 255, 1);
         height: 100px;
         width: 70%;
         text-shadow: rgba(0, 0, 0, 0.7) 0px 1px 4px;
@@ -456,9 +462,29 @@ function r(t,i,a,o){class e extends i{render(){return a`
         display: var(--playbackrate-display, flex);
       }
 
-      media-captions-selectmenu, media-captions-button[mediasubtitleslist] {
+      media-captions-selectmenu,
+      media-captions-button[mediasubtitleslist] {
         display: var(--captions-display, flex);
       }
+
+      .mave-loader {
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 0 0 0 0;
+        pointer-events: none;
+      }
+
+      .mave-loader media-loading-indicator {
+        width: 72px;
+        height: 72px;
+      }
+
+      .mave-loader media-loading-indicator svg {
+        width: 80px;
+        height: 80px;
+      }
     `,customElements.define(`theme-${t}`,e);}
 
 exports.build = r;

package/dist/themes/synthwave.js

@@ -131,7 +131,9 @@ function r(t,i,a,o){class e extends i{render(){return a`
                 </svg>
               </div>
             </media-mute-button>
-            <media-loading-indicator loadingdelay="0"></media-loading-indicator>
+            <div class="mave-loader">
+              <media-loading-indicator loading-delay="0"></media-loading-indicator>
+            </div>
             <div style="flex-grow: 1;"></div>
             <media-time-display showduration></media-time-display>
             <media-playback-rate-button></media-playback-rate-button>
@@ -212,7 +214,13 @@ function r(t,i,a,o){class e extends i{render(){return a`
         direction: ltr !important;
       }
 
+      img,
+      video {
+        overflow: hidden;
+      }
+
       ::slotted(video) {
+        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -225,6 +233,7 @@ function r(t,i,a,o){class e extends i{render(){return a`
       }
 
       media-controller {
+        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -236,12 +245,12 @@ function r(t,i,a,o){class e extends i{render(){return a`
         --media-font-family: 'Inter', system-ui, sans-serif;
         --media-background-color: transparent;
 
-        --media-primary-color: rgba(255,255,255,0.94);
-        --media-secondary-color: rgba(255,255,255,0.94);
+        --media-primary-color: rgba(255, 255, 255, 0.94);
+        --media-secondary-color: rgba(255, 255, 255, 0.94);
 
         --media-control-padding: 8px;
         --media-control-background: transparent;
-        --media-option-hover-background: rgba(0,0,0,0.25);
+        --media-option-hover-background: rgba(0, 0, 0, 0.25);
 
         --media-preview-time-margin: 0 0 8px 0;
 
@@ -262,12 +271,9 @@ function r(t,i,a,o){class e extends i{render(){return a`
         padding: 0 8px;
         z-index: 10;
         user-select: none;
-        transform: translate3d(0,0,0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
+        transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
 
-        background: var(
-          --primary-color,
-          transparent
-        );
+        background: var(--primary-color, transparent);
 
         --media-control-hover-background: transparent;
       }
@@ -304,7 +310,7 @@ function r(t,i,a,o){class e extends i{render(){return a`
       media-fullscreen-button,
       media-mute-button,
       media-captions-button {
-        transform: translate3d(0,0,0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
+        transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 100ms;
@@ -318,7 +324,7 @@ function r(t,i,a,o){class e extends i{render(){return a`
       media-fullscreen-button:hover,
       media-mute-button:hover,
       media-captions-button:hover {
-        --media-primary-color: rgba(255,255,255,1);
+        --media-primary-color: rgba(255, 255, 255, 1);
         transform: scale(1.3);
       }
 
@@ -408,11 +414,11 @@ function r(t,i,a,o){class e extends i{render(){return a`
         font-family: 'Inter', system-ui, sans-serif;
       }
 
-      .subtitles>div {
+      .subtitles > div {
         display: flex;
         align-items: center;
         justify-content: center;
-        color: rgba(255,255,255,1);
+        color: rgba(255, 255, 255, 1);
         height: 100px;
         width: 70%;
         text-shadow: rgba(0, 0, 0, 0.7) 0px 1px 4px;
@@ -454,9 +460,29 @@ function r(t,i,a,o){class e extends i{render(){return a`
         display: var(--playbackrate-display, flex);
       }
 
-      media-captions-selectmenu, media-captions-button[mediasubtitleslist] {
+      media-captions-selectmenu,
+      media-captions-button[mediasubtitleslist] {
         display: var(--captions-display, flex);
       }
+
+      .mave-loader {
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 0 0 0 0;
+        pointer-events: none;
+      }
+
+      .mave-loader media-loading-indicator {
+        width: 72px;
+        height: 72px;
+      }
+
+      .mave-loader media-loading-indicator svg {
+        width: 80px;
+        height: 80px;
+      }
     `,customElements.define(`theme-${t}`,e);}
 
 export { r as build };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maveio/components",
-  "version": "0.0.134",
+  "version": "0.0.136",
   "description": "privacy friendly (🇪🇺), iframe-less, video UI elements for videos hosted on mave.io",
   "main": "dist/index.cjs",
   "module": "dist/index.js",