@maveio/components 0.0.151 → 0.0.153

package/dist/themes/dolphin.js

@@ -67,11 +67,12 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
                   </svg>
                 </div>
               </media-play-button>
+              <media-loading-indicator loading-delay="0"></media-loading-indicator>
               <media-time-range></media-time-range>
               <media-time-display showduration></media-time-display>
               <div style="flex-grow: 1;"></div>
               <media-playback-rate-button></media-playback-rate-button>
-              <media-captions-button>
+              <media-captions-menu-button>
                 <div slot="off">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -100,8 +101,8 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
                     />
                   </svg>
                 </div>
-              </media-captions-button>
-              <media-captions-selectmenu></media-captions-selectmenu>
+              </media-captions-menu-button>
+              <media-captions-menu hidden anchor="auto"></media-captions-menu>
               <media-mute-button>
                 <div slot="high">
                   <svg
@@ -231,7 +232,6 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
 
       media-controller {
         --media-tooltip-display: none;
-        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -288,13 +288,13 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
       }
 
       media-mute-button {
-        display: var(--media-volume-display, inline-flex);
+        display: var(--media-mute-button-display, inline-flex);
       }
 
       media-play-button,
       media-fullscreen-button,
       media-mute-button,
-      media-captions-button {
+      media-captions-menu-button {
         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);
@@ -304,7 +304,7 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
       media-play-button:hover,
       media-fullscreen-button:hover,
       media-mute-button:hover,
-      media-captions-button:hover {
+      media-captions-menu-button:hover {
         --media-primary-color: rgba(255, 255, 255, 1);
         transform: scale(1.3);
       }
@@ -316,48 +316,44 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
         padding-top: 7px;
       }
 
-      media-captions-button {
-        display: none;
-        pointer-events: none;
-      }
-
-      media-captions-button[mediacaptionlist] {
-        display: flex;
-      }
-
-      media-captions-button[mediasubtitleslist] {
-        display: flex;
-      }
-
-      media-captions-button div {
+      media-captions-menu-button div {
         width: 26px;
         padding-top: 6px;
       }
 
       media-play-button svg,
-      media-captions-button svg,
+      media-captions-menu-button svg,
       media-fullscreen-button svg,
       media-mute-button svg {
         width: 23px;
         height: 23px;
       }
 
-      media-captions-selectmenu {
-        z-index: 10;
-        margin-left: -35px;
+      media-loading-indicator {
+        position: absolute;
+        pointer-events: none;
+        transform: scale(0.9);
+        top: -3px;
+        left: 0px;
       }
 
-      media-captions-selectmenu::part(listbox) {
-        margin-left: -34px;
-        transform: scale(0.9);
+      media-controller[medialoading]:not([mediapaused]) media-play-button {
+        opacity: 0;
       }
 
-      media-captions-selectmenu::part(option) {
-        border-radius: 12px;
+      media-captions-menu {
+        position: absolute;
+        bottom: calc(100% + 8px);
+        min-width: 120px;
+        transform-origin: bottom right;
       }
 
-      media-captions-selectmenu::part(button) {
-        opacity: 0;
+      media-captions-menu::part(menu-item) {
+        border-radius: 8px;
+      }
+
+      media-captions-menu::part(menu-item):hover {
+        background: rgba(0, 0, 0, 0.15);
       }
 
       media-controller[mediapaused] div[slot='centered-chrome'] media-play-button {
@@ -456,8 +452,8 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
         display: var(--playbackrate-display, flex);
       }
 
-      media-captions-selectmenu,
-      media-captions-button[mediasubtitleslist] {
+      media-captions-menu,
+      media-captions-menu-button[mediasubtitleslist] {
         display: var(--captions-display, flex);
       }
     `,customElements.define(`theme-${t}`,e);}export{r as build};

package/dist/themes/loader.cjs

@@ -1 +1 @@
-'use strict';var chunkKTP5LV2E_cjs=require('../chunk-KTP5LV2E.cjs');require('../chunk-COWZ7GYF.cjs'),require('../chunk-5NSCV6C2.cjs'),require('../chunk-IPA5Q26W.cjs');Object.defineProperty(exports,"ThemeLoader",{enumerable:true,get:function(){return chunkKTP5LV2E_cjs.a}});
+'use strict';var chunkMB72HBHH_cjs=require('../chunk-MB72HBHH.cjs');require('../chunk-COWZ7GYF.cjs'),require('../chunk-5NSCV6C2.cjs'),require('../chunk-IPA5Q26W.cjs');Object.defineProperty(exports,"ThemeLoader",{enumerable:true,get:function(){return chunkMB72HBHH_cjs.a}});

package/dist/themes/loader.d.cts

@@ -1,8 +1,11 @@
 declare class ThemeLoader {
     private static instance;
     private themes;
+    currentTheme: string;
     private constructor();
-    static get(name: string, path?: string, injectCSS?: boolean): Promise<ThemeLoader>;
+    static get(name: string, path?: string): Promise<ThemeLoader>;
+    static external(path: string): Promise<ThemeLoader>;
+    static getTheme(): string;
 }
 
 export { ThemeLoader };

package/dist/themes/loader.d.ts

@@ -1,8 +1,11 @@
 declare class ThemeLoader {
     private static instance;
     private themes;
+    currentTheme: string;
     private constructor();
-    static get(name: string, path?: string, injectCSS?: boolean): Promise<ThemeLoader>;
+    static get(name: string, path?: string): Promise<ThemeLoader>;
+    static external(path: string): Promise<ThemeLoader>;
+    static getTheme(): string;
 }
 
 export { ThemeLoader };

package/dist/themes/loader.js

@@ -1 +1 @@
-export{a as ThemeLoader}from'../chunk-MAOTHFPC.js';import'../chunk-TIOUPJWD.js';import'../chunk-A4GZBQEB.js';import'../chunk-NDDFZTBA.js';
+export{a as ThemeLoader}from'../chunk-NV7C4TBM.js';import'../chunk-TIOUPJWD.js';import'../chunk-A4GZBQEB.js';import'../chunk-NDDFZTBA.js';

package/dist/themes/synthwave.cjs

@@ -135,7 +135,7 @@
             <div style="flex-grow: 1;"></div>
             <media-time-display showduration></media-time-display>
             <media-playback-rate-button></media-playback-rate-button>
-            <media-captions-button>
+            <media-captions-menu-button>
               <div slot="off">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -164,8 +164,8 @@
                   />
                 </svg>
               </div>
-            </media-captions-button>
-            <media-captions-selectmenu></media-captions-selectmenu>
+            </media-captions-menu-button>
+            <media-captions-menu hidden anchor="auto"></media-captions-menu>
             <media-fullscreen-button>
               <div slot="enter">
                 <svg
@@ -232,7 +232,6 @@
 
       media-controller {
         --media-tooltip-display: none;
-        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -264,6 +263,10 @@
         padding-top: 3px;
       }
 
+      media-controller[medialoading]:not([mediapaused]) media-play-button {
+        opacity: 0;
+      }
+
       media-control-bar {
         width: 100%;
         height: 48px;
@@ -302,27 +305,23 @@
       }
 
       media-mute-button {
-        display: var(--media-volume-display, inline-flex);
+        display: var(--media-mute-button-display, inline-flex);
       }
 
       media-play-button,
       media-fullscreen-button,
       media-mute-button,
-      media-captions-button {
+      media-captions-menu-button {
         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;
       }
 
-      media-controller[medialoading] media-play-button {
-        opacity: 0;
-      }
-
       media-play-button:hover,
       media-fullscreen-button:hover,
       media-mute-button:hover,
-      media-captions-button:hover {
+      media-captions-menu-button:hover {
         --media-primary-color: rgba(255, 255, 255, 1);
         transform: scale(1.3);
       }
@@ -334,49 +333,32 @@
         padding-top: 7px;
       }
 
-      media-captions-button {
-        display: none;
-        margin-right: -7px;
-        pointer-events: none;
-      }
-
-      media-captions-button[mediacaptionlist] {
-        display: flex;
-      }
-
-      media-captions-button[mediasubtitleslist] {
-        display: flex;
-      }
-
-      media-captions-button div {
+      media-captions-menu-button div {
         width: 26px;
         padding-top: 6px;
       }
 
       media-play-button svg,
-      media-captions-button svg,
+      media-captions-menu-button svg,
       media-fullscreen-button svg,
       media-mute-button svg {
         width: 23px;
         height: 23px;
       }
 
-      media-captions-selectmenu {
-        z-index: 10;
-        margin-left: -35px;
-      }
-
-      media-captions-selectmenu::part(listbox) {
-        transform: scale(0.9);
-        margin-left: -8px;
+      media-captions-menu {
+        position: absolute;
+        bottom: calc(100% + 8px);
+        min-width: 120px;
+        transform-origin: bottom right;
       }
 
-      media-captions-selectmenu::part(option) {
-        border-radius: 12px;
+      media-captions-menu::part(menu-item) {
+        border-radius: 8px;
       }
 
-      media-captions-selectmenu::part(button) {
-        opacity: 0;
+      media-captions-menu::part(menu-item):hover {
+        background: rgba(0, 0, 0, 0.15);
       }
 
       media-controller[mediapaused] div[slot='centered-chrome'] media-play-button {
@@ -476,8 +458,8 @@
         display: var(--playbackrate-display, flex);
       }
 
-      media-captions-selectmenu,
-      media-captions-button[mediasubtitleslist] {
+      media-captions-menu,
+      media-captions-menu-button[mediasubtitleslist] {
         display: var(--captions-display, flex);
       }
 

package/dist/themes/synthwave.js

@@ -135,7 +135,7 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
             <div style="flex-grow: 1;"></div>
             <media-time-display showduration></media-time-display>
             <media-playback-rate-button></media-playback-rate-button>
-            <media-captions-button>
+            <media-captions-menu-button>
               <div slot="off">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -164,8 +164,8 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
                   />
                 </svg>
               </div>
-            </media-captions-button>
-            <media-captions-selectmenu></media-captions-selectmenu>
+            </media-captions-menu-button>
+            <media-captions-menu hidden anchor="auto"></media-captions-menu>
             <media-fullscreen-button>
               <div slot="enter">
                 <svg
@@ -232,7 +232,6 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
 
       media-controller {
         --media-tooltip-display: none;
-        overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
@@ -264,6 +263,10 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
         padding-top: 3px;
       }
 
+      media-controller[medialoading]:not([mediapaused]) media-play-button {
+        opacity: 0;
+      }
+
       media-control-bar {
         width: 100%;
         height: 48px;
@@ -302,27 +305,23 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
       }
 
       media-mute-button {
-        display: var(--media-volume-display, inline-flex);
+        display: var(--media-mute-button-display, inline-flex);
       }
 
       media-play-button,
       media-fullscreen-button,
       media-mute-button,
-      media-captions-button {
+      media-captions-menu-button {
         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;
       }
 
-      media-controller[medialoading] media-play-button {
-        opacity: 0;
-      }
-
       media-play-button:hover,
       media-fullscreen-button:hover,
       media-mute-button:hover,
-      media-captions-button:hover {
+      media-captions-menu-button:hover {
         --media-primary-color: rgba(255, 255, 255, 1);
         transform: scale(1.3);
       }
@@ -334,49 +333,32 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
         padding-top: 7px;
       }
 
-      media-captions-button {
-        display: none;
-        margin-right: -7px;
-        pointer-events: none;
-      }
-
-      media-captions-button[mediacaptionlist] {
-        display: flex;
-      }
-
-      media-captions-button[mediasubtitleslist] {
-        display: flex;
-      }
-
-      media-captions-button div {
+      media-captions-menu-button div {
         width: 26px;
         padding-top: 6px;
       }
 
       media-play-button svg,
-      media-captions-button svg,
+      media-captions-menu-button svg,
       media-fullscreen-button svg,
       media-mute-button svg {
         width: 23px;
         height: 23px;
       }
 
-      media-captions-selectmenu {
-        z-index: 10;
-        margin-left: -35px;
-      }
-
-      media-captions-selectmenu::part(listbox) {
-        transform: scale(0.9);
-        margin-left: -8px;
+      media-captions-menu {
+        position: absolute;
+        bottom: calc(100% + 8px);
+        min-width: 120px;
+        transform-origin: bottom right;
       }
 
-      media-captions-selectmenu::part(option) {
-        border-radius: 12px;
+      media-captions-menu::part(menu-item) {
+        border-radius: 8px;
       }
 
-      media-captions-selectmenu::part(button) {
-        opacity: 0;
+      media-captions-menu::part(menu-item):hover {
+        background: rgba(0, 0, 0, 0.15);
       }
 
       media-controller[mediapaused] div[slot='centered-chrome'] media-play-button {
@@ -476,8 +458,8 @@ import'../chunk-NDDFZTBA.js';function r(t,i,a,o){class e extends i{render(){retu
         display: var(--playbackrate-display, flex);
       }
 
-      media-captions-selectmenu,
-      media-captions-button[mediasubtitleslist] {
+      media-captions-menu,
+      media-captions-menu-button[mediasubtitleslist] {
         display: var(--captions-display, flex);
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maveio/components",
-  "version": "0.0.151",
+  "version": "0.0.153",
   "description": "privacy friendly (🇪🇺), iframe-less, video UI elements for videos hosted on mave.io",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -28,7 +28,7 @@
   "scripts": {
     "ts-types": "tsc",
     "build": "tsup",
-    "build:watch": "tsup --watch --sourcemap",
+    "build:watch": "NODE_ENV=development tsup --watch --sourcemap",
     "build:prod": "NODE_ENV=production npm run build --no-sourcemap",
     "localize": "lit-localize extract && ./node_modules/.bin/lit-localize build",
     "prepublishOnly": "npm run build:prod",
@@ -37,7 +37,7 @@
     "lint:fix": "eslint ./src --ext .ts,.tsx --quiet --fix --ixgnore-path ./.gitignore",
     "lint:format": "prettier  --loglevel warn --write \"./**/*.{ts,tsx,css,md,json}\" ",
     "lint": "yarn lint:format && yarn lint:fix",
-    "serve": "vite --open examples/index.html",
+    "serve": "live-server --port=5173 --host=localhost --open=examples/index.html --watch=dist,examples --wait=200",
     "start": "concurrently \"npm run build:watch\" \"npm run serve\""
   },
   "publishConfig": {
@@ -65,11 +65,11 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "jest": "^29.4.3",
+    "live-server": "^1.2.2",
     "prettier": "^2.8.4",
     "ts-jest": "^29.0.5",
     "tsup": "^8.4.0",
-    "typescript": "^5.2",
-    "vite": "^6.3.3"
+    "typescript": "^5.2"
   },
   "author": "mave.io",
   "license": "AGPL-3.0-or-later",
@@ -99,10 +99,10 @@
     "@lit/task": "^1.0.0",
     "@lottiefiles/lottie-player": "^2.0.2",
     "@maveio/metrics": "^0.1.5",
-    "hls.js": "^1.5.15",
+    "hls.js": "^1.6.7",
     "lit": "^3.1.2",
-    "media-chrome": "^2.2.4",
-    "phoenix": "^1.7.11",
+    "media-chrome": "^4.12.0",
+    "phoenix": "^1.7.21",
     "react": "^18.2.0",
     "tus-js-client": "^4.2.3"
   },