@maveio/components 0.0.135 → 0.0.136

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.135",
+  "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",