@maveio/components 0.0.169 → 0.0.170

package/dist/themes/loader.cjs

@@ -1 +1 @@
-'use strict';var chunk2EIQ3VMA_cjs=require('../chunk-2EIQ3VMA.cjs');require('../chunk-J7OISSKU.cjs'),require('../chunk-2E5GLLOS.cjs'),require('../chunk-NPP5B5PV.cjs'),require('../chunk-JHSFSCC2.cjs');Object.defineProperty(exports,"ThemeLoader",{enumerable:true,get:function(){return chunk2EIQ3VMA_cjs.a}});
+'use strict';var chunkCZUMF7SR_cjs=require('../chunk-CZUMF7SR.cjs');require('../chunk-J7OISSKU.cjs'),require('../chunk-2E5GLLOS.cjs'),require('../chunk-NPP5B5PV.cjs'),require('../chunk-JHSFSCC2.cjs');Object.defineProperty(exports,"ThemeLoader",{enumerable:true,get:function(){return chunkCZUMF7SR_cjs.a}});

package/dist/themes/loader.js

@@ -1 +1 @@
-export{a as ThemeLoader}from'../chunk-WTS6WHUH.js';import'../chunk-P6SBZPDR.js';import'../chunk-5PIHL662.js';import'../chunk-YPCQNE3R.js';import'../chunk-KA24PL7V.js';
+export{a as ThemeLoader}from'../chunk-RWRHU74Q.js';import'../chunk-P6SBZPDR.js';import'../chunk-5PIHL662.js';import'../chunk-YPCQNE3R.js';import'../chunk-KA24PL7V.js';

package/dist/themes/synthwave.cjs

@@ -30,6 +30,7 @@
             </media-play-button>
           </div>
           <div
+            class="mave-gradient-bottom"
             style="position: absolute; bottom: 0; width: 100%; height: 25%; background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); pointer-events: none;"
           ></div>
           <media-control-bar>
@@ -135,7 +136,7 @@
             <div style="flex-grow: 1;"></div>
             <media-time-display showduration></media-time-display>
             <media-playback-rate-button></media-playback-rate-button>
-            <media-captions-menu-button>
+            <mave-captions-menu-button id="mave-captions">
               <div slot="off">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -164,8 +165,8 @@
                   />
                 </svg>
               </div>
-            </media-captions-menu-button>
-            <media-captions-menu hidden anchor="auto"></media-captions-menu>
+            </mave-captions-menu-button>
+            <media-captions-menu hidden anchor="mave-captions"></media-captions-menu>
             <mave-audio-track-menu
               hidden
               anchor="mave-audio-tracks"
@@ -188,6 +189,38 @@
                 </svg>
               </div>
             </mave-audio-track-menu-button>
+            <media-settings-menu-button id="mave-settings">
+              <div slot="icon">
+                <svg
+                  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>
+              </div>
+            </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>
             <media-fullscreen-button>
               <div slot="enter">
                 <svg
@@ -232,6 +265,7 @@
         overflow: hidden;
         position: relative;
         direction: ltr !important;
+        container-type: inline-size;
       }
 
       img,
@@ -255,6 +289,7 @@
       media-controller {
         --media-tooltip-display: none;
         display: flex;
+        container-type: inline-size;
         width: 100%;
         height: 100%;
         max-height: 100vh;
@@ -266,19 +301,35 @@
         --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: var(--mave-control-fg, rgba(255, 255, 255, 0.94));
+        --media-secondary-color: var(--mave-control-fg, 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-range-track-background: var(--mave-control-fg-weak, rgba(255, 255, 255, 0.35));
+        --media-range-track-pointer-background: var(
+          --mave-control-fg-muted,
+          rgba(255, 255, 255, 0.6)
+        );
+
         --media-preview-time-margin: 0 0 8px 0;
 
         --media-preview-thumbnail-max-width: 132px;
         --media-preview-thumbnail-max-height: 88px;
       }
 
+      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-loading-indicator {
         position: absolute;
         left: 6px;
@@ -298,7 +349,7 @@
         user-select: none;
         transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
 
-        background: var(--primary-color, transparent);
+        background: var(--mave-control-bg, var(--primary-color, transparent));
 
         --media-control-hover-background: transparent;
       }
@@ -320,6 +371,14 @@
         --media-range-thumb-width: 4px;
         --media-range-thumb-height: 4px;
         --media-range-thumb-transition: transform 100ms ease-out;
+        --media-text-color: #fff;
+      }
+
+      @media (prefers-contrast: more) {
+        media-time-range {
+          --media-preview-time-background: rgba(0, 0, 0, 0.85);
+          --media-preview-time-text-shadow: none;
+        }
       }
 
       media-time-display {
@@ -334,7 +393,8 @@
       media-play-button,
       media-fullscreen-button,
       media-mute-button,
-      media-captions-menu-button,
+      mave-captions-menu-button,
+      media-settings-menu-button,
       media-audio-track-menu-button,
       mave-audio-track-menu-button {
         transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
@@ -346,20 +406,23 @@
       media-play-button:hover,
       media-fullscreen-button:hover,
       media-mute-button:hover,
-      media-captions-menu-button:hover,
+      mave-captions-menu-button:hover,
+      media-settings-menu-button:hover,
       media-audio-track-menu-button:hover,
       mave-audio-track-menu-button:hover {
-        --media-primary-color: rgba(255, 255, 255, 1);
+        --media-primary-color: var(--mave-control-fg, rgba(255, 255, 255, 1));
         transform: scale(1.3);
       }
 
-      media-captions-menu-button:hover,
+      mave-captions-menu-button:hover,
+      media-settings-menu-button:hover,
       media-audio-track-menu-button:hover,
       mave-audio-track-menu-button:hover {
         transform: scale(1);
       }
 
-      media-captions-menu-button[aria-expanded='true'],
+      mave-captions-menu-button[aria-expanded='true'],
+      media-settings-menu-button[aria-expanded='true'],
       media-audio-track-menu-button[aria-expanded='true'],
       mave-audio-track-menu-button[aria-expanded='true'] {
         transform: scale(1);
@@ -372,7 +435,8 @@
         padding-top: 7px;
       }
 
-      media-captions-menu-button div,
+      mave-captions-menu-button div,
+      media-settings-menu-button div,
       media-audio-track-menu-button div,
       mave-audio-track-menu-button div {
         width: 26px;
@@ -380,7 +444,8 @@
       }
 
       media-play-button svg,
-      media-captions-menu-button svg,
+      mave-captions-menu-button svg,
+      media-settings-menu-button svg,
       media-fullscreen-button svg,
       media-mute-button svg,
       media-audio-track-menu-button svg,
@@ -390,13 +455,15 @@
         transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
       }
 
-      media-captions-menu-button:hover svg,
+      mave-captions-menu-button:hover svg,
+      media-settings-menu-button:hover svg,
       media-audio-track-menu-button:hover svg,
       mave-audio-track-menu-button:hover svg {
         transform: scale(1.3);
       }
 
-      media-captions-menu-button[aria-expanded='true'] svg,
+      mave-captions-menu-button[aria-expanded='true'] svg,
+      media-settings-menu-button[aria-expanded='true'] svg,
       media-audio-track-menu-button[aria-expanded='true'] svg,
       mave-audio-track-menu-button[aria-expanded='true'] svg {
         transform: scale(1);
@@ -407,7 +474,7 @@
         bottom: calc(100% + 8px);
         min-width: 120px;
         transform-origin: bottom right;
-        background: var(--primary-color, rgba(0, 0, 0, 0.5));
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
         border-radius: 8px;
         backdrop-filter: blur(12px);
       }
@@ -420,13 +487,28 @@
         background: rgba(0, 0, 0, 0.15);
       }
 
+      media-settings-menu {
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
+        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);
+      }
+
       media-audio-track-menu,
       mave-audio-track-menu {
         position: absolute;
         bottom: calc(100% + 8px);
         min-width: 120px;
         transform-origin: bottom right;
-        background: var(--primary-color, rgba(0, 0, 0, 0.5));
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
         border-radius: 8px;
         backdrop-filter: blur(12px);
       }
@@ -446,13 +528,34 @@
         display: var(--media-audio-track-menu-button-display, none);
       }
 
+      media-settings-menu-button {
+        display: none;
+      }
+
+      @supports not (container-type: inline-size) {
+        media-settings-menu-button {
+          display: flex;
+        }
+      }
+
       media-controller[mediapaused] div[slot='centered-chrome'] media-play-button {
         opacity: 1;
       }
 
       div[slot='centered-chrome'] media-play-button {
         opacity: 0;
-        --media-control-hover-background: transparent;
+        --media-control-background: var(
+          --mave-control-bg,
+          var(--primary-color, rgba(0, 0, 0, 0.45))
+        );
+        --media-control-hover-background: var(
+          --mave-control-bg,
+          var(--primary-color, rgba(0, 0, 0, 0.45))
+        );
+        border-radius: 999px;
+        padding: 8px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
+        backdrop-filter: blur(6px);
       }
 
       div[slot='centered-chrome'] media-play-button div {
@@ -553,10 +656,80 @@
       }
 
       media-captions-menu,
-      media-captions-menu-button[mediasubtitleslist] {
+      mave-captions-menu-button[mediasubtitleslist] {
         display: var(--captions-display, flex);
       }
 
+      @container (max-width: 480px) {
+        media-control-bar {
+          position: static;
+          padding: 0 2px;
+          transform: none;
+          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)));
+          --media-menu-background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.85)));
+          --media-settings-menu-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 {
+          display: none;
+        }
+
+        media-control-bar > div[style*='flex-grow: 1'] {
+          display: none;
+        }
+
+        media-time-display {
+          position: absolute;
+          top: 8px;
+          left: 8px;
+          font-size: 14px;
+          min-width: 0;
+          margin: 0;
+          padding: 2px 6px;
+          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 {
+          margin: 0;
+          padding: 4px 8px 0;
+          z-index: auto;
+          background: var(--mave-control-bg, var(--primary-color, transparent));
+          --media-preview-thumbnail-max-width: 0px;
+          --media-preview-thumbnail-max-height: 0px;
+        }
+
+        media-preview-thumbnail {
+          display: none;
+        }
+
+        div[slot='centered-chrome'] {
+          display: none;
+        }
+      }
+
       .mave-loader {
         align-items: center;
         justify-content: center;