@maveio/components 0.0.168 → 0.0.170

package/dist/themes/default.cjs

@@ -1,4 +1,4 @@
-'use strict';require('../chunk-JHSFSCC2.cjs');function r(t,i,a,o){class e extends i{render(){return a`
+'use strict';require('../chunk-JHSFSCC2.cjs');function r(t,a,i,o){class e extends a{render(){return i`
         <media-controller novolumepref>
           <slot name="media" slot="media"></slot>
           <slot name="poster" slot="poster"></slot>
@@ -87,8 +87,8 @@
               <media-preview-time-display slot="preview"></media-preview-time-display>
             </media-time-range>
             <media-playback-rate-button></media-playback-rate-button>
-            <media-captions-menu hidden anchor="auto"></media-captions-menu>
-            <media-captions-menu-button class="small-button">
+            <media-captions-menu hidden anchor="mave-captions"></media-captions-menu>
+            <mave-captions-menu-button id="mave-captions" class="small-button">
               <svg
                 slot="off"
                 xmlns="http://www.w3.org/2000/svg"
@@ -115,7 +115,7 @@
                   clip-rule="evenodd"
                 />
               </svg>
-            </media-captions-menu-button>
+            </mave-captions-menu-button>
             <mave-audio-track-menu
               hidden
               anchor="mave-audio-tracks"
@@ -137,6 +137,37 @@
                 <path d="M14 15v-3"></path>
               </svg>
             </mave-audio-track-menu-button>
+            <media-settings-menu-button id="mave-settings" class="small-button">
+              <svg
+                slot="icon"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <circle cx="5" cy="12" r="2"></circle>
+                <circle cx="12" cy="12" r="2"></circle>
+                <circle cx="19" cy="12" r="2"></circle>
+              </svg>
+            </media-settings-menu-button>
+            <media-settings-menu hidden anchor="mave-settings">
+              <media-settings-menu-item style="display: var(--playbackrate-display, flex);">
+                <span>Playback speed</span>
+                <media-playback-rate-menu slot="submenu" hidden></media-playback-rate-menu>
+              </media-settings-menu-item>
+              <media-settings-menu-item
+                style="display: var(--mave-captions-menu-button-display, flex);"
+              >
+                <span>Captions</span>
+                <media-captions-menu slot="submenu" hidden></media-captions-menu>
+              </media-settings-menu-item>
+              <media-settings-menu-item
+                style="display: var(--media-audio-track-menu-button-display, none);"
+              >
+                <span>Audio tracks</span>
+                <mave-audio-track-menu slot="submenu" hidden></mave-audio-track-menu>
+              </media-settings-menu-item>
+            </media-settings-menu>
             <div class="media-volume-wrapper">
               <media-mute-button class="small-button">
                 <svg
@@ -259,6 +290,7 @@
         overflow: hidden;
         background: transparent;
         direction: ltr !important;
+        container-type: inline-size;
       }
 
       img,
@@ -282,6 +314,7 @@
         display: flex;
         background: transparent;
         --media-font-family: system-ui, sans-serif;
+        container-type: inline-size;
         width: var(--width, 100%);
         height: var(--height, 100%);
         max-height: 100vh;
@@ -294,9 +327,17 @@
         --media-control-background: transparent;
         --media-control-hover-background: transparent;
 
+        --media-primary-color: var(--mave-control-fg, rgba(238, 238, 238, 1));
+
         --media-range-track-height: 1px;
-        --media-range-track-background: rgba(255, 255, 255, 0.1);
-        --media-range-track-pointer-background: rgba(255, 255, 255, 0.25);
+        --media-range-track-background: var(
+          --mave-control-fg-weak,
+          rgba(255, 255, 255, 0.1)
+        );
+        --media-range-track-pointer-background: var(
+          --mave-control-fg-muted,
+          rgba(255, 255, 255, 0.25)
+        );
 
         --media-range-thumb-background: transparent;
         --media-range-thumb-width: 20px;
@@ -314,6 +355,16 @@
         --media-option-hover-background: rgba(0, 0, 0, 0.15);
       }
 
+      media-controller svg[stroke],
+      media-controller svg [stroke] {
+        stroke: currentColor;
+      }
+
+      media-controller svg[fill]:not([fill='none']),
+      media-controller svg [fill]:not([fill='none']) {
+        fill: currentColor;
+      }
+
       media-controller[mediapaused] media-control-bar {
         opacity: 1;
       }
@@ -327,7 +378,7 @@
       }
 
       media-loading-indicator {
-        --media-icon-color: rgba(255, 255, 255, 1);
+        --media-icon-color: var(--mave-control-fg, rgba(255, 255, 255, 1));
       }
 
       media-control-bar media-loading-indicator {
@@ -444,7 +495,7 @@
       media-time-range:hover {
         opacity: 1;
         --media-range-thumb-transform: scale(1);
-        --media-range-thumb-background: #fff;
+        --media-range-thumb-background: var(--mave-control-fg, #fff);
       }
 
       media-time-range span {
@@ -455,7 +506,7 @@
         height: 100%;
         --media-range-thumb-width: 16px;
         --media-range-thumb-height: 16px;
-        --media-range-thumb-background: #fff;
+        --media-range-thumb-background: var(--mave-control-fg, #fff);
         --media-range-thumb-transform: scale(1);
       }
 
@@ -490,12 +541,15 @@
         bottom: 0;
         pointer-events: none;
         background: var(
-          --primary-color,
-          linear-gradient(
-            180deg,
-            rgba(0, 0, 0, 0) 0%,
-            rgba(0, 0, 0, 0.25) 60%,
-            rgba(0, 0, 0, 0.5) 100%
+          --mave-control-bg,
+          var(
+            --primary-color,
+            linear-gradient(
+              180deg,
+              rgba(0, 0, 0, 0) 0%,
+              rgba(0, 0, 0, 0.25) 60%,
+              rgba(0, 0, 0, 0.5) 100%
+            )
           )
         );
       }
@@ -505,14 +559,17 @@
         justify-content: center;
         align-items: center;
         border-radius: 1000px;
-        background-color: var(--primary-color);
+        background-color: var(
+          --mave-control-bg,
+          var(--primary-color, rgba(0, 0, 0, 0.45))
+        );
         padding: 12px;
       }
 
       div[slot='centered-chrome'] media-play-button {
         width: 72px;
         height: 72px;
-        --media-icon-color: white;
+        --media-icon-color: var(--mave-control-fg, white);
       }
 
       div[slot='centered-chrome'] media-play-button svg {
@@ -553,7 +610,7 @@
       media-volume-range {
         border-radius: 9999px;
         padding: 0 8px 0 8px;
-        background: var(--primary-color, rgba(0, 0, 0, 0.25));
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.25)));
         --media-range-track-width: 80px;
         backdrop-filter: blur(12px);
       }
@@ -584,7 +641,8 @@
         bottom: calc(100% + 4px);
         min-width: 120px;
         transform-origin: bottom right;
-        background: var(--primary-color, rgba(0, 0, 0, 0.25));
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.25)));
+        --media-menu-background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.25)));
         border-radius: 8px;
         backdrop-filter: blur(12px);
       }
@@ -597,22 +655,39 @@
         background: rgba(0, 0, 0, 0.15);
       }
 
-      media-captions-menu-button {
+      media-settings-menu {
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.25)));
+        --media-menu-background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.25)));
+        --media-settings-menu-background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.25)));
+        border-radius: 8px;
+        backdrop-filter: blur(12px);
+        min-width: 160px;
+      }
+
+      media-settings-menu[hidden] {
+        display: none;
+      }
+
+      media-settings-menu-item {
+        --media-menu-item-hover-background: rgba(0, 0, 0, 0.15);
+      }
+
+      mave-captions-menu-button {
         margin-right: -2px;
       }
 
-      media-captions-menu-button svg {
+      mave-captions-menu-button svg {
       }
 
-      media-captions-menu-button.small-button {
+      mave-captions-menu-button.small-button {
         display: none;
       }
 
-      media-captions-menu-button[mediacaptionlist].small-button {
+      mave-captions-menu-button[mediacaptionlist].small-button {
         display: flex;
       }
 
-      media-captions-menu-button[mediasubtitleslist].small-button {
+      mave-captions-menu-button[mediasubtitleslist].small-button {
         display: flex;
       }
 
@@ -622,7 +697,8 @@
         bottom: calc(100% + 4px);
         min-width: 120px;
         transform-origin: bottom right;
-        background: var(--primary-color, rgba(0, 0, 0, 0.25));
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.25)));
+        --media-menu-background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.25)));
         border-radius: 8px;
         backdrop-filter: blur(12px);
       }
@@ -647,8 +723,18 @@
         display: var(--media-audio-track-menu-button-display, none);
       }
 
-      media-captions-menu-button[mediasubtitleslist].small-button svg[slot='on'] {
-        --media-icon-color: white;
+      media-settings-menu-button.small-button {
+        display: none;
+      }
+
+      @supports not (container-type: inline-size) {
+        media-settings-menu-button.small-button {
+          display: flex;
+        }
+      }
+
+      mave-captions-menu-button[mediasubtitleslist].small-button svg[slot='on'] {
+        --media-icon-color: var(--mave-control-fg, white);
       }
 
       .mave-loader {
@@ -766,7 +852,97 @@
       }
 
       media-captions-menu,
-      media-captions-menu-button[mediasubtitleslist].small-button {
+      mave-captions-menu-button[mediasubtitleslist].small-button {
         display: var(--captions-display, flex);
       }
+
+      @container (max-width: 480px) {
+        media-control-bar {
+          position: static;
+          flex-wrap: wrap;
+          gap: 0 2px;
+          padding: 0 4px 2px 2px;
+          z-index: auto;
+        }
+
+        media-captions-menu,
+        media-audio-track-menu,
+        mave-audio-track-menu,
+        media-settings-menu {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          min-width: unset;
+          width: 100%;
+          max-height: none;
+          overflow-y: auto;
+          border-radius: 0;
+          background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.85)));
+          backdrop-filter: blur(16px);
+          transform-origin: bottom center;
+          z-index: 30;
+        }
+
+        .mave-gradient-bottom {
+          height: 50%;
+        }
+
+        media-control-bar > :not(media-time-range) {
+          order: 2;
+          flex: 1 1 0;
+          min-width: 0;
+          width: auto;
+          justify-content: center;
+        }
+
+        media-time-display {
+          position: absolute;
+          top: 8px;
+          left: 8px;
+          font-size: 14px;
+          min-width: 0;
+          margin: 0;
+          padding: 2px 6px !important;
+          background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
+          backdrop-filter: blur(8px);
+          border-radius: 4px;
+          z-index: 10;
+        }
+
+        media-time-range {
+          order: 1;
+          flex-basis: 100%;
+          height: 28px;
+          min-height: 0;
+          margin: 0;
+          opacity: 1;
+          --media-preview-thumbnail-max-width: 0px;
+          --media-preview-thumbnail-max-height: 0px;
+        }
+
+        media-preview-thumbnail {
+          display: none;
+        }
+
+        div[slot='centered-chrome'] {
+          display: none;
+        }
+
+        .media-volume-wrapper {
+          padding-left: 0;
+        }
+
+        .media-volume-wrapper media-mute-button.small-button {
+          flex: 1 1 0;
+          min-width: 0;
+          width: auto;
+        }
+
+        .media-volume-range-wrapper {
+          left: 50%;
+          margin-left: -71px;
+        }
+      }
     `,customElements.define(`theme-${t}`,e);}exports.build=r;