@oiz/stzh-components 2.0.0 → 2.1.0-alpha

package/dist/esm/stzh-audio.entry.js

@@ -0,0 +1,4146 @@
+import { r as registerInstance, c as createEvent, h as h$2, a as Host, g as getElement } from './index-2915b467.js';
+import { h as hasSlot } from './utils-68a28fce.js';
+import { f as fetchTranslations } from './translation-utils-2623783f.js';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var t$2;const i$2=window,s$3=i$2.trustedTypes,e$3=s$3?s$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,o$3=`lit$${(Math.random()+"").slice(9)}$`,n$3="?"+o$3,l$2=`<${n$3}>`,h$1=document,r$2=(t="")=>h$1.createComment(t),d$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,c$1=t=>u(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,a$1=/-->/g,f=/>/g,_=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),m=/'/g,p=/"/g,$=/^(?:script|style|textarea|title)$/i,g=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),y=g(1),x=Symbol.for("lit-noChange"),b=Symbol.for("lit-nothing"),T=new WeakMap,A=h$1.createTreeWalker(h$1,129,null,!1),E=(t,i)=>{const s=t.length-1,n=[];let h,r=2===i?"<svg>":"",d=v;for(let i=0;i<s;i++){const s=t[i];let e,u,c=-1,g=0;for(;g<s.length&&(d.lastIndex=g,u=d.exec(s),null!==u);)g=d.lastIndex,d===v?"!--"===u[1]?d=a$1:void 0!==u[1]?d=f:void 0!==u[2]?($.test(u[2])&&(h=RegExp("</"+u[2],"g")),d=_):void 0!==u[3]&&(d=_):d===_?">"===u[0]?(d=null!=h?h:v,c=-1):void 0===u[1]?c=-2:(c=d.lastIndex-u[2].length,e=u[1],d=void 0===u[3]?_:'"'===u[3]?p:m):d===p||d===m?d=_:d===a$1||d===f?d=v:(d=_,h=void 0);const y=d===_&&t[i+1].startsWith("/>")?" ":"";r+=d===v?s+l$2:c>=0?(n.push(e),s.slice(0,c)+"$lit$"+s.slice(c)+o$3+y):s+o$3+(-2===c?(n.push(void 0),i):y);}const u=r+(t[s]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return [void 0!==e$3?e$3.createHTML(u):u,n]};class C{constructor({strings:t,_$litType$:i},e){let l;this.parts=[];let h=0,d=0;const u=t.length-1,c=this.parts,[v,a]=E(t,i);if(this.el=C.createElement(v,e),A.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(l=A.nextNode())&&c.length<u;){if(1===l.nodeType){if(l.hasAttributes()){const t=[];for(const i of l.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(o$3)){const s=a[d++];if(t.push(i),void 0!==s){const t=l.getAttribute(s.toLowerCase()+"$lit$").split(o$3),i=/([.?@])?(.*)/.exec(s);c.push({type:1,index:h,name:i[2],strings:t,ctor:"."===i[1]?M:"?"===i[1]?k:"@"===i[1]?H:S$1});}else c.push({type:6,index:h});}for(const i of t)l.removeAttribute(i);}if($.test(l.tagName)){const t=l.textContent.split(o$3),i=t.length-1;if(i>0){l.textContent=s$3?s$3.emptyScript:"";for(let s=0;s<i;s++)l.append(t[s],r$2()),A.nextNode(),c.push({type:2,index:++h});l.append(t[i],r$2());}}}else if(8===l.nodeType)if(l.data===n$3)c.push({type:2,index:h});else {let t=-1;for(;-1!==(t=l.data.indexOf(o$3,t+1));)c.push({type:7,index:h}),t+=o$3.length-1;}h++;}}static createElement(t,i){const s=h$1.createElement("template");return s.innerHTML=t,s}}function P(t,i,s=t,e){var o,n,l,h;if(i===x)return i;let r=void 0!==e?null===(o=s._$Co)||void 0===o?void 0:o[e]:s._$Cl;const u=d$1(i)?void 0:i._$litDirective$;return (null==r?void 0:r.constructor)!==u&&(null===(n=null==r?void 0:r._$AO)||void 0===n||n.call(r,!1),void 0===u?r=void 0:(r=new u(t),r._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Co)&&void 0!==l?l:h._$Co=[])[e]=r:s._$Cl=r),void 0!==r&&(i=P(t,r._$AS(t,i.values),r,e)),i}class V{constructor(t,i){this.u=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}v(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:h$1).importNode(s,!0);A.currentNode=o;let n=A.nextNode(),l=0,r=0,d=e[0];for(;void 0!==d;){if(l===d.index){let i;2===d.type?i=new N(n,n.nextSibling,this,t):1===d.type?i=new d.ctor(n,d.name,d.strings,this,t):6===d.type&&(i=new I(n,this,t)),this.u.push(i),d=e[++r];}l!==(null==d?void 0:d.index)&&(n=A.nextNode(),l++);}return o}p(t){let i=0;for(const s of this.u)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class N{constructor(t,i,s,e){var o;this.type=2,this._$AH=b,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cm=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cm}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=P(this,t,i),d$1(t)?t===b||null==t||""===t?(this._$AH!==b&&this._$AR(),this._$AH=b):t!==this._$AH&&t!==x&&this.g(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):c$1(t)?this.k(t):this.g(t);}O(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}g(t){this._$AH!==b&&d$1(this._$AH)?this._$AA.nextSibling.data=t:this.T(h$1.createTextNode(t)),this._$AH=t;}$(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=C.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.p(s);else {const t=new V(o,this),i=t.v(this.options);t.p(s),this.T(i),this._$AH=t;}}_$AC(t){let i=T.get(t.strings);return void 0===i&&T.set(t.strings,i=new C(t)),i}k(t){u(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new N(this.O(r$2()),this.O(r$2()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$Cm=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class S$1{constructor(t,i,s,e,o){this.type=1,this._$AH=b,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=b;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=P(this,t,i,0),n=!d$1(t)||t!==this._$AH&&t!==x,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=P(this,e[s+l],i,l),h===x&&(h=this._$AH[l]),n||(n=!d$1(h)||h!==this._$AH[l]),h===b?t=b:t!==b&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.j(t);}j(t){t===b?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class M extends S$1{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===b?void 0:t;}}const R=s$3?s$3.emptyScript:"";class k extends S$1{constructor(){super(...arguments),this.type=4;}j(t){t&&t!==b?this.element.setAttribute(this.name,R):this.element.removeAttribute(this.name);}}class H extends S$1{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=P(this,t,i,0))&&void 0!==s?s:b)===x)return;const e=this._$AH,o=t===b&&e!==b||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==b&&(e===b||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class I{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){P(this,t);}}const z=i$2.litHtmlPolyfillSupport;null==z||z(C,N),(null!==(t$2=i$2.litHtmlVersions)&&void 0!==t$2?t$2:i$2.litHtmlVersions=[]).push("2.5.0");const Z=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new N(i.insertBefore(r$2(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l};
+
+var functionDebounce = debounce;
+
+function debounce(fn, wait, callFirst) {
+  var timeout = null;
+  var debouncedFn = null;
+
+  var clear = function() {
+    if (timeout) {
+      clearTimeout(timeout);
+
+      debouncedFn = null;
+      timeout = null;
+    }
+  };
+
+  var flush = function() {
+    var call = debouncedFn;
+    clear();
+
+    if (call) {
+      call();
+    }
+  };
+
+  var debounceWrapper = function() {
+    if (!wait) {
+      return fn.apply(this, arguments);
+    }
+
+    var context = this;
+    var args = arguments;
+    var callNow = callFirst && !timeout;
+    clear();
+
+    debouncedFn = function() {
+      fn.apply(context, args);
+    };
+
+    timeout = setTimeout(function() {
+      timeout = null;
+
+      if (!callNow) {
+        var call = debouncedFn;
+        debouncedFn = null;
+
+        return call();
+      }
+    }, wait);
+
+    if (callNow) {
+      return debouncedFn();
+    }
+  };
+
+  debounceWrapper.cancel = clear;
+  debounceWrapper.flush = flush;
+
+  return debounceWrapper;
+}
+
+var functionThrottle = throttle;
+
+function throttle(fn, interval, options) {
+  var timeoutId = null;
+  var throttledFn = null;
+  var leading = (options && options.leading);
+  var trailing = (options && options.trailing);
+
+  if (leading == null) {
+    leading = true; // default
+  }
+
+  if (trailing == null) {
+    trailing = !leading; //default
+  }
+
+  if (leading == true) {
+    trailing = false; // forced because there should be invocation per call
+  }
+
+  var cancel = function() {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+
+  var flush = function() {
+    var call = throttledFn;
+    cancel();
+
+    if (call) {
+      call();
+    }
+  };
+
+  var throttleWrapper = function() {
+    var callNow = leading && !timeoutId;
+    var context = this;
+    var args = arguments;
+
+    throttledFn = function() {
+      return fn.apply(context, args);
+    };
+
+    if (!timeoutId) {
+      timeoutId = setTimeout(function() {
+        timeoutId = null;
+
+        if (trailing) {
+          return throttledFn();
+        }
+      }, interval);
+    }
+
+    if (callNow) {
+      callNow = false;
+      return throttledFn();
+    }
+  };
+
+  throttleWrapper.cancel = cancel;
+  throttleWrapper.flush = flush;
+
+  return throttleWrapper;
+}
+
+// src/utils/events.ts
+function listen(target, type, listener, options) {
+  target.addEventListener(type, listener, options);
+  return () => {
+    target.removeEventListener(type, listener, options);
+  };
+}
+var DisposalBin = class {
+  constructor() {
+    this._disposal = this._disposal ?? [];
+  }
+  add(...callbacks) {
+    if (callbacks) {
+      callbacks.forEach((cb) => {
+        this._disposal.push(cb);
+      });
+    }
+  }
+  empty() {
+    this._disposal.forEach((fn) => fn());
+    this._disposal = [];
+  }
+};
+
+// src/events/event-listener.ts
+function eventListener(host, type, listener, options) {
+  let off;
+  function attach() {
+    if (!off) {
+      off = listen(options?.target ?? host, type, listener, options);
+    }
+  }
+  attach();
+  host.addController({
+    hostConnected() {
+      attach();
+    },
+    hostDisconnected() {
+      off?.();
+      off = void 0;
+    }
+  });
+}
+
+// src/events/VdsEvent.ts
+var VdsEvent = class extends CustomEvent {
+  constructor(type, eventInit = {}) {
+    super(type, eventInit);
+    this.triggerEvent = eventInit.triggerEvent;
+    if (!this.hasOwnProperty("originEvent")) {
+      Object.defineProperties(this, {
+        originEvent: {
+          get() {
+            return getOriginEvent(this) ?? this;
+          }
+        },
+        isOriginTrusted: {
+          get() {
+            return getOriginEvent(this)?.isTrusted ?? false;
+          }
+        }
+      });
+    }
+  }
+  get originEvent() {
+    return getOriginEvent(this) ?? this;
+  }
+  get isOriginTrusted() {
+    return this.originEvent?.isTrusted ?? false;
+  }
+};
+function vdsEvent(type, eventInit = {}) {
+  return new VdsEvent(type, eventInit);
+}
+function getOriginEvent(event) {
+  let triggerEvent = event.triggerEvent;
+  while (triggerEvent && triggerEvent.triggerEvent) {
+    triggerEvent = triggerEvent.triggerEvent;
+  }
+  return triggerEvent;
+}
+function appendTriggerEvent(event, triggerEvent) {
+  (getOriginEvent(event) ?? event).triggerEvent = triggerEvent;
+}
+
+// src/context/ContextConsumerController.ts
+var orphanConsumers = /* @__PURE__ */ new Map();
+var ContextConsumerController = class {
+  constructor(_host, initialValue, _options) {
+    this._host = _host;
+    this.initialValue = initialValue;
+    this._options = _options;
+    this._registrationCallbacks = [];
+    _host.addController({
+      hostConnected: () => {
+        this._connect();
+      },
+      hostDisconnected: () => {
+        delete this._host[this.id];
+      }
+    });
+  }
+  get id() {
+    return this._options.id;
+  }
+  get value() {
+    return this._host[this.id] ?? this.initialValue;
+  }
+  get registered() {
+    return this.id in this._host;
+  }
+  _connect() {
+    if (this.id in this._host)
+      return;
+    const setValue = (value) => {
+      this._host[this.id] = value;
+      this._registrationCallbacks?.forEach((fn) => fn(value));
+      this._registrationCallbacks = void 0;
+    };
+    this._host.dispatchEvent(
+      vdsEvent("vds-context-consumer-connect", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          id: this.id,
+          setValue
+        }
+      })
+    );
+    if (!this.registered) {
+      const orphans = orphanConsumers.get(this.id) ?? [];
+      orphans.push({ host: this._host, setValue });
+      orphanConsumers.set(this.id, orphans);
+    }
+  }
+  whenRegistered(callback) {
+    if (this.registered) {
+      callback(this.value);
+      return;
+    }
+    this._registrationCallbacks?.push(callback);
+  }
+};
+function adoptOrphans(id, provider) {
+  const orphans = orphanConsumers.get(id) ?? [];
+  const adoptees = orphans.filter(({ host }) => provider.contains(host));
+  orphanConsumers.set(
+    id,
+    orphans.filter(({ host }) => !provider.contains(host))
+  );
+  return adoptees;
+}
+
+// src/context/ContextProviderController.ts
+var ContextProviderController = class {
+  constructor(_host, _initValue, _options) {
+    this._host = _host;
+    this._initValue = _initValue;
+    this._options = _options;
+    this._stopDisposal = new DisposalBin();
+    this._value = _initValue();
+    _host.addController({
+      hostConnected: this.start.bind(this),
+      hostDisconnected: this.stop.bind(this)
+    });
+  }
+  get id() {
+    return this._options.id;
+  }
+  get value() {
+    return this._value;
+  }
+  start() {
+    const dispose = listen(
+      this._host,
+      "vds-context-consumer-connect",
+      this._handleConsumerConnect.bind(this)
+    );
+    for (const orphan of adoptOrphans(this.id, this._host)) {
+      orphan.setValue(this._value);
+    }
+    this._stopDisposal.add(dispose);
+  }
+  stop() {
+    this._stopDisposal.empty();
+  }
+  _handleConsumerConnect(event) {
+    const consumer = event.detail;
+    if (consumer.id !== this.id)
+      return;
+    event.stopImmediatePropagation();
+    consumer.setValue(this._value);
+  }
+};
+
+// src/context/context.ts
+function createContext(initValue) {
+  const id = Symbol("@vidstack/context");
+  return {
+    id,
+    consume(host) {
+      return new ContextConsumerController(host, initValue(), { id });
+    },
+    provide(host) {
+      return new ContextProviderController(host, initValue, { id });
+    }
+  };
+}
+function isContext(context) {
+  return typeof context?.id === "symbol" && context.id.description === "@vidstack/context";
+}
+
+// src/utils/unit.ts
+function noop(...args) {
+}
+function safeNotEqual(a, b) {
+  return a != a ? b == b : a !== b || a && typeof a === "object" || typeof a === "function";
+}
+function isNull(value) {
+  return value === null;
+}
+function isUndefined(value) {
+  return typeof value === "undefined";
+}
+function isNil(value) {
+  return isNull(value) || isUndefined(value);
+}
+function isNumber(value) {
+  return typeof value === "number" && !Number.isNaN(value);
+}
+function isString(value) {
+  return typeof value === "string";
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
+
+// src/elements/discovery/discover.ts
+var discoverers = /* @__PURE__ */ new Map();
+var discoverables = /* @__PURE__ */ new Map();
+function connect(discoverable2, id, onDisconnect) {
+  for (const { host, callback } of Array.from(discoverers.get(id) ?? [])) {
+    if (host !== discoverable2 && host.contains(discoverable2)) {
+      callback(discoverable2, onDisconnect);
+    }
+  }
+}
+function find(host, id) {
+  return Array.from(discoverables.get(id) ?? []).filter(
+    ({ element }) => host !== element && host.contains(element)
+  );
+}
+function discover(host, id, callback) {
+  const discoverer = { host, callback };
+  host.addController({
+    hostConnected: () => {
+      for (const { element, onDisconnect } of find(host, id)) {
+        callback(element, onDisconnect);
+      }
+      discoverers.set(id, (discoverers.get(id) ?? /* @__PURE__ */ new Set()).add(discoverer));
+    },
+    hostDisconnected: () => {
+      discoverers.get(id)?.delete(discoverer);
+    }
+  });
+}
+function discoverable(host, eventType, options = {}) {
+  const id = options.register;
+  const disconnectDisposal = new DisposalBin();
+  const onDisconnect = (callback) => {
+    disconnectDisposal.add(callback);
+  };
+  const discoverable2 = {
+    element: host,
+    onDisconnect
+  };
+  host.addController({
+    hostConnected() {
+      const event = vdsEvent(eventType, {
+        bubbles: true,
+        composed: true,
+        detail: discoverable2
+      });
+      host.dispatchEvent(event);
+      if (id) {
+        discoverables.set(id, (discoverables.get(id) ?? /* @__PURE__ */ new Set()).add(discoverable2));
+        connect(host, id, onDisconnect);
+      }
+    },
+    hostDisconnected() {
+      disconnectDisposal.empty();
+      if (id) {
+        discoverables.get(id)?.delete(discoverable2);
+      }
+    }
+  });
+}
+
+// src/utils/support.ts
+var IS_CLIENT = typeof window !== "undefined";
+var UA = IS_CLIENT ? window.navigator?.userAgent.toLowerCase() : "";
+var IS_IOS = /iphone|ipad|ipod|ios|CriOS|FxiOS/.test(UA);
+/android/.test(UA);
+IS_CLIENT && /(iPhone|iPod)/gi.test(window.navigator?.platform);
+/firefox/.test(UA);
+var IS_CHROME = IS_CLIENT && !!window.chrome;
+IS_CLIENT && !IS_CHROME && (window.safari || IS_IOS || /(apple|safari)/.test(UA));
+function canOrientScreen() {
+  return IS_CLIENT && !isUndefined(screen.orientation) && isFunction(screen.orientation.lock) && isFunction(screen.orientation.unlock);
+}
+
+// ../../node_modules/.pnpm/fscreen@1.2.0/node_modules/fscreen/dist/fscreen.esm.js
+var key = {
+  fullscreenEnabled: 0,
+  fullscreenElement: 1,
+  requestFullscreen: 2,
+  exitFullscreen: 3,
+  fullscreenchange: 4,
+  fullscreenerror: 5,
+  fullscreen: 6
+};
+var webkit = [
+  "webkitFullscreenEnabled",
+  "webkitFullscreenElement",
+  "webkitRequestFullscreen",
+  "webkitExitFullscreen",
+  "webkitfullscreenchange",
+  "webkitfullscreenerror",
+  "-webkit-full-screen"
+];
+var moz = [
+  "mozFullScreenEnabled",
+  "mozFullScreenElement",
+  "mozRequestFullScreen",
+  "mozCancelFullScreen",
+  "mozfullscreenchange",
+  "mozfullscreenerror",
+  "-moz-full-screen"
+];
+var ms = [
+  "msFullscreenEnabled",
+  "msFullscreenElement",
+  "msRequestFullscreen",
+  "msExitFullscreen",
+  "MSFullscreenChange",
+  "MSFullscreenError",
+  "-ms-fullscreen"
+];
+var document2 = typeof window !== "undefined" && typeof window.document !== "undefined" ? window.document : {};
+var vendor = "fullscreenEnabled" in document2 && Object.keys(key) || webkit[0] in document2 && webkit || moz[0] in document2 && moz || ms[0] in document2 && ms || [];
+var fscreen = {
+  requestFullscreen: function(element) {
+    return element[vendor[key.requestFullscreen]]();
+  },
+  requestFullscreenFunction: function(element) {
+    return element[vendor[key.requestFullscreen]];
+  },
+  get exitFullscreen() {
+    return document2[vendor[key.exitFullscreen]].bind(document2);
+  },
+  get fullscreenPseudoClass() {
+    return ":" + vendor[key.fullscreen];
+  },
+  addEventListener: function(type, handler, options) {
+    return document2.addEventListener(vendor[key[type]], handler, options);
+  },
+  removeEventListener: function(type, handler, options) {
+    return document2.removeEventListener(vendor[key[type]], handler, options);
+  },
+  get fullscreenEnabled() {
+    return Boolean(document2[vendor[key.fullscreenEnabled]]);
+  },
+  set fullscreenEnabled(val) {
+  },
+  get fullscreenElement() {
+    return document2[vendor[key.fullscreenElement]];
+  },
+  set fullscreenElement(val) {
+  },
+  get onfullscreenchange() {
+    return document2[("on" + vendor[key.fullscreenchange]).toLowerCase()];
+  },
+  set onfullscreenchange(handler) {
+    return document2[("on" + vendor[key.fullscreenchange]).toLowerCase()] = handler;
+  },
+  get onfullscreenerror() {
+    return document2[("on" + vendor[key.fullscreenerror]).toLowerCase()];
+  },
+  set onfullscreenerror(handler) {
+    return document2[("on" + vendor[key.fullscreenerror]).toLowerCase()] = handler;
+  }
+};
+var fscreen_esm_default = fscreen;
+
+// src/logger/colors.ts
+var LOCAL_STORAGE_KEY = "@vidstack/log-colors";
+getSavedColors();
+function getSavedColors() {
+  if (IS_CLIENT && !isUndefined(window.localStorage)) {
+    let colors2 = {};
+    try {
+      colors2 = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY) ?? "");
+    } catch {
+    }
+    return new Map(Object.entries(colors2));
+  }
+  return /* @__PURE__ */ new Map();
+}
+
+// src/logger/LogLevel.ts
+Object.freeze({
+  silent: 0,
+  error: 1,
+  warn: 2,
+  info: 3,
+  debug: 4
+});
+Object.freeze({
+  silent: "white",
+  error: "hsl(6, 58%, 50%)",
+  warn: "hsl(51, 58%, 50%)",
+  info: "hsl(219, 58%, 50%)",
+  debug: "hsl(280, 58%, 50%)"
+});
+
+// src/utils/number.ts
+function round(num, decimalPlaces = 2) {
+  return Number(num.toFixed(decimalPlaces));
+}
+function clampNumber(min, value, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function getNumberOfDecimalPlaces(num) {
+  return String(num).split(".")[1]?.length ?? 0;
+}
+
+// src/fullscreen/FullscreenController.ts
+var FullscreenController = class {
+  constructor(_host, _screenOrientationController) {
+    this._host = _host;
+    this._screenOrientationController = _screenOrientationController;
+    this._logger = void 0;
+    this._listenerDisposal = new DisposalBin();
+    _host.addController({
+      hostDisconnected: this._handleHostDisconnected.bind(this)
+    });
+  }
+  async _handleHostDisconnected() {
+    if (this.isFullscreen)
+      await this.exitFullscreen();
+    this._listenerDisposal.empty();
+  }
+  get isSupported() {
+    return this.isSupportedNatively;
+  }
+  get isSupportedNatively() {
+    return fscreen_esm_default.fullscreenEnabled;
+  }
+  get isFullscreen() {
+    return this.isNativeFullscreen;
+  }
+  get isNativeFullscreen() {
+    if (fscreen_esm_default.fullscreenElement === this._host)
+      return true;
+    try {
+      return this._host.matches(
+        fscreen_esm_default.fullscreenPseudoClass
+      );
+    } catch (error) {
+      return false;
+    }
+  }
+  _addFullscreenChangeEventListener(listener) {
+    if (!this.isSupported)
+      return noop;
+    const dispose = listen(fscreen_esm_default, "fullscreenchange", listener);
+    return () => {
+      dispose();
+    };
+  }
+  _addFullscreenErrorEventListener(listener) {
+    if (!this.isSupported)
+      return noop;
+    const dispose = listen(fscreen_esm_default, "fullscreenerror", listener);
+    return () => {
+      dispose();
+    };
+  }
+  async enterFullscreen() {
+    if (this.isFullscreen)
+      return;
+    this._throwIfNoFullscreenSupport();
+    this._listenerDisposal.add(
+      this._addFullscreenChangeEventListener(this._handleFullscreenChange.bind(this))
+    );
+    this._listenerDisposal.add(
+      this._addFullscreenErrorEventListener(this._handleFullscreenError.bind(this))
+    );
+    const response = await this._makeEnterFullscreenRequest();
+    await this._lockScreenOrientation();
+    return response;
+  }
+  async _makeEnterFullscreenRequest() {
+    return fscreen_esm_default.requestFullscreen(this._host);
+  }
+  _handleFullscreenChange(event) {
+    if (!this.isFullscreen)
+      this._listenerDisposal.empty();
+    this._host.dispatchEvent(
+      vdsEvent("vds-fullscreen-change", {
+        bubbles: true,
+        composed: true,
+        detail: this.isFullscreen,
+        triggerEvent: event
+      })
+    );
+  }
+  _handleFullscreenError(event) {
+    this._host.dispatchEvent(
+      vdsEvent("vds-fullscreen-error", {
+        bubbles: true,
+        composed: true,
+        triggerEvent: event
+      })
+    );
+  }
+  async exitFullscreen() {
+    if (!this.isFullscreen)
+      return;
+    this._throwIfNoFullscreenSupport();
+    const response = await this._makeExitFullscreenRequest();
+    await this._unlockScreenOrientation();
+    return response;
+  }
+  async _makeExitFullscreenRequest() {
+    return fscreen_esm_default.exitFullscreen();
+  }
+  _shouldOrientScreen() {
+    return this._screenOrientationController.canOrient && !isUndefined(this.screenOrientationLock);
+  }
+  async _lockScreenOrientation() {
+    if (isUndefined(this.screenOrientationLock) || !this._shouldOrientScreen()) {
+      return;
+    }
+    await this._screenOrientationController.lock(this.screenOrientationLock);
+  }
+  async _unlockScreenOrientation() {
+    if (!this._shouldOrientScreen())
+      return;
+    await this._screenOrientationController.unlock();
+  }
+  _throwIfNoFullscreenSupport() {
+    if (this.isSupported)
+      return;
+    throw Error("Fullscreen API is not enabled or supported in this environment.");
+  }
+};
+
+// src/observers/FocusVisibleController.ts
+var FocusVisibleController = class {
+  constructor(_host) {
+    this._host = _host;
+    const disposal = new DisposalBin();
+    let hadKeyboardEvent = false;
+    disposal.add(
+      listen(document, "pointerdown", () => {
+        hadKeyboardEvent = false;
+      })
+    );
+    eventListener(_host, "keydown", (e) => {
+      if (e.metaKey || e.altKey || e.ctrlKey) {
+        return;
+      }
+      hadKeyboardEvent = true;
+    });
+    eventListener(_host, "focus", (e) => {
+      if (hadKeyboardEvent) {
+        _host.classList.add("focus-visible");
+      }
+    });
+    eventListener(_host, "blur", (e) => {
+      _host.classList.remove("focus-visible");
+    });
+    _host.addController({
+      hostDisconnected: () => {
+        disposal.empty();
+      }
+    });
+  }
+};
+function focusVisiblePolyfill(host) {
+  return new FocusVisibleController(host);
+}
+
+// src/observers/IntersectionController.ts
+var IntersectionController = class {
+  constructor(_host, config = {}, _callback = () => true, _logger = void 0) {
+    this._host = _host;
+    this._callback = _callback;
+    this._logger = _logger;
+    this._skipInitial = false;
+    this._unobservedUpdate = false;
+    const { target, skipInitial, ...intersectionObserverInit } = config;
+    this._target = target ?? void 0;
+    this._skipInitial = skipInitial ?? this._skipInitial;
+    if (!window.IntersectionObserver) {
+      return;
+    }
+    this._observer = new IntersectionObserver((entries) => {
+      const unobservedUpdate = this._unobservedUpdate;
+      this._unobservedUpdate = false;
+      if (this._skipInitial && unobservedUpdate)
+        return;
+      this.handleChanges(entries);
+      this._host.requestUpdate();
+    }, intersectionObserverInit);
+    _host.addController(this);
+  }
+  handleChanges(entries) {
+    this.value = this._callback(entries, this._observer);
+  }
+  hostConnected() {
+    if (this._target) {
+      this.observe(this._target);
+    }
+  }
+  hostDisconnected() {
+    this._disconnect();
+  }
+  async hostUpdated() {
+    const pendingRecords = this._observer.takeRecords();
+    if (pendingRecords.length) {
+      this.handleChanges(pendingRecords);
+    }
+  }
+  observe(target) {
+    this._observer.observe(target);
+    this._unobservedUpdate = true;
+    return () => {
+      this._observer.unobserve(target);
+    };
+  }
+  _disconnect() {
+    this._observer.disconnect();
+  }
+};
+function createIntersectionController(...params) {
+  return new IntersectionController(...params);
+}
+
+// src/utils/promise.ts
+function deferredPromise() {
+  let resolve = noop;
+  let reject = noop;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+// src/queue/RequestQueue.ts
+var RequestQueue = class {
+  constructor() {
+    this._requestQueue = /* @__PURE__ */ new Map();
+    this._requestKeys = [];
+    this._pendingFlush = deferredPromise();
+    this._isServing = false;
+  }
+  get isServing() {
+    return this._isServing;
+  }
+  get size() {
+    return this._requestQueue.size;
+  }
+  async waitForFlush() {
+    if (this._isServing)
+      return;
+    await this._pendingFlush.promise;
+  }
+  queue(key2, callback) {
+    if (this._isServing) {
+      callback();
+      return;
+    }
+    this._requestKeys = [...this._requestKeys.filter((k) => k !== key2), key2];
+    this._requestQueue.set(key2, callback);
+  }
+  serve(key2) {
+    this._requestQueue.get(key2)?.();
+    this._requestQueue.delete(key2);
+  }
+  start() {
+    this._flush();
+    this._isServing = true;
+    if (this._requestQueue.size > 0) {
+      this._flush();
+    }
+  }
+  _flush() {
+    for (const requestKey of this._requestKeys) {
+      this.serve(requestKey);
+    }
+    this._requestKeys = [];
+    this._release();
+  }
+  _empty() {
+    this._requestQueue.clear();
+  }
+  _release() {
+    this._pendingFlush.resolve();
+    this._pendingFlush = deferredPromise();
+  }
+  stop() {
+    this._isServing = false;
+  }
+  destroy() {
+    this.stop();
+    this._empty();
+    this._release();
+  }
+};
+
+// src/queue/host-request-queue.ts
+function hostRequestQueue(host) {
+  const q = new RequestQueue();
+  host.addController({
+    hostConnected: q.start.bind(q),
+    hostDisconnected: q.destroy.bind(q)
+  });
+  return q;
+}
+
+// src/screen-orientation/ScreenOrientationController.ts
+var ScreenOrientationController = class {
+  constructor(_host) {
+    this._host = _host;
+    this._isScreenOrientationLocked = false;
+    this._logger = void 0;
+    this._updateScreenOrientation();
+    this._listenerDisposal = new DisposalBin();
+    _host.addController({
+      hostConnected: this._handleHostConnected.bind(this),
+      hostDisconnected: this._handleHostDisconnected.bind(this)
+    });
+  }
+  async _handleHostConnected() {
+    this._updateScreenOrientation();
+    this._addScreenOrientationEventListeners();
+  }
+  async _handleHostDisconnected() {
+    if (this.canOrient && this._isScreenOrientationLocked)
+      await this.unlock();
+    this._listenerDisposal.empty();
+  }
+  get currentOrientation() {
+    return this._screenOrientation;
+  }
+  get canOrient() {
+    return canOrientScreen();
+  }
+  get isLocked() {
+    return this._isScreenOrientationLocked;
+  }
+  async lock(lockType) {
+    this._throwIfScreenOrientationUnavailable();
+    await screen.orientation.lock(lockType);
+    this._isScreenOrientationLocked = true;
+    this._host.dispatchEvent(
+      vdsEvent("vds-screen-orientation-lock-change", {
+        bubbles: true,
+        composed: true,
+        detail: lockType
+      })
+    );
+  }
+  async unlock() {
+    this._throwIfScreenOrientationUnavailable();
+    await screen.orientation.unlock();
+    this._isScreenOrientationLocked = false;
+    this._host.dispatchEvent(
+      vdsEvent("vds-screen-orientation-lock-change", {
+        bubbles: true,
+        composed: true,
+        detail: screen.orientation.type
+      })
+    );
+  }
+  _addScreenOrientationEventListeners() {
+    if (!this.canOrient)
+      return;
+    this._listenerDisposal.add(this._addScreenOrientationChangeEventListener());
+  }
+  _addScreenOrientationChangeEventListener() {
+    return listen(screen.orientation, "change", this._handleOrientationChange.bind(this));
+  }
+  _handleOrientationChange(event) {
+    this._screenOrientation = window.screen.orientation.type;
+    this._host.dispatchEvent(
+      vdsEvent("vds-screen-orientation-change", {
+        bubbles: true,
+        composed: true,
+        detail: this._screenOrientation,
+        triggerEvent: event
+      })
+    );
+  }
+  _updateScreenOrientation() {
+    this._screenOrientation = IS_CLIENT ? window.screen?.orientation?.type : void 0;
+  }
+  _throwIfScreenOrientationUnavailable() {
+    if (this.canOrient)
+      return;
+    throw Error("Screen orientation API is not available.");
+  }
+};
+
+// src/utils/object.ts
+function keysOf(obj) {
+  return Object.keys(obj);
+}
+
+// src/stores/store-subscription.ts
+function storeSubscription(host, store, onChange) {
+  let consumer;
+  let unsubscribe;
+  const subscribe = () => {
+    unsubscribe = (consumer?.value ?? store).subscribe(onChange);
+  };
+  if (isContext(store)) {
+    consumer = store.consume(host);
+  }
+  host.addController({
+    hostConnected() {
+      if (isContext(store)) {
+        consumer.whenRegistered(subscribe);
+      } else {
+        subscribe();
+      }
+    },
+    hostDisconnected() {
+      unsubscribe?.();
+    }
+  });
+}
+
+// src/stores/stores.ts
+var subscriberQueue = [];
+function readable(value, start) {
+  return {
+    initialValue: value,
+    subscribe: writable(value, start).subscribe
+  };
+}
+function writable(value, start = noop) {
+  let stop;
+  const subscribers = /* @__PURE__ */ new Set();
+  function set(newValue) {
+    if (safeNotEqual(value, newValue)) {
+      value = newValue;
+      if (stop) {
+        const runQueue = !subscriberQueue.length;
+        for (const subscriber of subscribers) {
+          subscriber[1]();
+          subscriberQueue.push(subscriber, value);
+        }
+        if (runQueue) {
+          for (let i = 0; i < subscriberQueue.length; i += 2) {
+            subscriberQueue[i][0](subscriberQueue[i + 1]);
+          }
+          subscriberQueue.length = 0;
+        }
+      }
+    }
+  }
+  function update(updater) {
+    set(updater(value));
+  }
+  function subscribe(run, invalidate = noop) {
+    const subscriber = [run, invalidate];
+    subscribers.add(subscriber);
+    if (subscribers.size === 1) {
+      stop = start(set) || noop;
+    }
+    run(value);
+    return () => {
+      subscribers.delete(subscriber);
+      if (subscribers.size === 0) {
+        stop?.();
+        stop = null;
+      }
+    };
+  }
+  return { initialValue: value, set, update, subscribe };
+}
+function derived(stores, fn, initialValue) {
+  const single = !Array.isArray(stores);
+  const storesArray = single ? [stores] : stores;
+  const auto = fn.length < 2;
+  return readable(initialValue, (set) => {
+    let initialized = false;
+    const values = [];
+    let pending = 0;
+    let cleanup = noop;
+    const sync = () => {
+      if (pending) {
+        return;
+      }
+      cleanup();
+      const result = fn(single ? values[0] : values, set);
+      if (auto) {
+        set(result);
+      } else {
+        cleanup = isFunction(result) ? result : noop;
+      }
+    };
+    const unsubscribers = storesArray.map(
+      (store, i) => store.subscribe(
+        (value) => {
+          values[i] = value;
+          pending &= ~(1 << i);
+          if (initialized) {
+            sync();
+          }
+        },
+        () => {
+          pending |= 1 << i;
+        }
+      )
+    );
+    initialized = true;
+    sync();
+    return function stop() {
+      unsubscribers.forEach((fn2) => fn2());
+      cleanup();
+    };
+  });
+}
+function getStoreValue(store) {
+  let value;
+  store.subscribe((_) => value = _)();
+  return value;
+}
+
+// src/stores/store-record.ts
+function storeRecordSubscription(host, store, key2, onChange) {
+  if (isContext(store)) {
+    const consumer = store.consume(host);
+    let unsubscribe;
+    const subscribe = () => {
+      unsubscribe = consumer.value[key2].subscribe(onChange);
+    };
+    host.addController({
+      hostConnected: () => {
+        consumer.whenRegistered(subscribe);
+      },
+      hostDisconnected: () => {
+        unsubscribe?.();
+      }
+    });
+  } else {
+    return storeSubscription(host, store[key2], onChange);
+  }
+}
+function copyStoreRecords(storeRecordA, storeRecordB) {
+  for (const key2 of keysOf(storeRecordA)) {
+    const storeA = storeRecordA[key2];
+    const storeB = storeRecordB[key2];
+    if (!storeA || !storeB)
+      continue;
+    const valA = getStoreValue(storeA);
+    const valB = getStoreValue(storeB);
+    if (valA !== valB)
+      storeB.set(valA);
+  }
+}
+function unwrapStoreRecord(store) {
+  return new Proxy(store, {
+    get(target, key2) {
+      return getStoreValue(target[key2]);
+    },
+    has(target, key2) {
+      return Reflect.has(target, key2);
+    },
+    ownKeys(target) {
+      return Reflect.ownKeys(target);
+    },
+    getOwnPropertyDescriptor(target, key2) {
+      return Reflect.getOwnPropertyDescriptor(target, key2);
+    }
+  });
+}
+
+// src/utils/array.ts
+function isScalarArrayEqual(arrayA, arrayB) {
+  return arrayA.length === arrayB.length && arrayA.every((value, i) => value === arrayB[i]);
+}
+
+// src/utils/dom.ts
+function raf(callback) {
+  return new Promise((resolve) => {
+    const rafId = window.requestAnimationFrame(async () => {
+      await callback?.();
+      resolve(rafId);
+    });
+  });
+}
+function safelyDefineCustomElement(name, constructor, isClient = IS_CLIENT) {
+  const isElementRegistered = isClient && !isUndefined(window.customElements.get(name));
+  if (!isClient || isElementRegistered)
+    return;
+  window.customElements.define(name, constructor);
+}
+function setAttribute(element, attrName, attrValue) {
+  if (isNil(attrValue) || attrValue === false) {
+    element.removeAttribute(attrName);
+  } else {
+    const value = isString(attrValue) ? attrValue : "";
+    element.setAttribute(attrName, value);
+  }
+}
+function setAttributeIfEmpty(element, attrName, attrValue) {
+  if (!element.hasAttribute(attrName)) {
+    element.setAttribute(attrName, attrValue);
+  }
+}
+function setCSSProperty(element, name, value, prefix = "vds") {
+  element.style.setProperty(`--${prefix}-${name}`, value ? value : null);
+}
+function getSlottedChildren(el, name) {
+  const selector = name ? `slot[name="${name}"]` : "slot:not([name])";
+  const slot = el.shadowRoot?.querySelector(selector);
+  const childNodes = slot?.assignedNodes({ flatten: true }) ?? [];
+  return Array.prototype.filter.call(childNodes, (node) => node.nodeType == Node.ELEMENT_NODE);
+}
+function requestIdleCallback(callback) {
+  const idle = window.requestIdleCallback ?? ((fn) => fn());
+  if (document.readyState === "complete") {
+    idle(callback);
+  } else {
+    window.addEventListener(
+      "load",
+      () => {
+        idle(callback);
+      },
+      { once: true }
+    );
+  }
+}
+
+// src/utils/keyboard.ts
+function isKeyboardEvent(event) {
+  return event?.type.startsWith("key") ?? false;
+}
+function isKeyboardClick(event) {
+  return isKeyboardEvent(event) && (event.key === "Enter" || event.key === " ");
+}
+function camelToKebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+// src/utils/time.ts
+function padNumberWithZeroes(num, expectedLength) {
+  const str = String(num);
+  const actualLength = str.length;
+  const shouldPad = actualLength < expectedLength;
+  if (shouldPad) {
+    const padLength = expectedLength - actualLength;
+    const padding = `0`.repeat(padLength);
+    return `${padding}${num}`;
+  }
+  return str;
+}
+function parseTime(duration) {
+  const hours = Math.trunc(duration / 3600);
+  const minutes = Math.trunc(duration % 3600 / 60);
+  const seconds = Math.trunc(duration % 60);
+  const fraction = Number((duration - Math.trunc(duration)).toPrecision(3));
+  return {
+    ["hours" /* Hours */]: hours,
+    ["minutes" /* Minutes */]: minutes,
+    ["seconds" /* Seconds */]: seconds,
+    ["fraction" /* Fraction */]: fraction
+  };
+}
+function formatTime(duration, shouldPadHours = false, shouldAlwaysShowHours = false) {
+  const { hours, minutes, seconds } = parseTime(duration);
+  const paddedHours = shouldPadHours ? padNumberWithZeroes(hours, 2) : hours;
+  const paddedMinutes = padNumberWithZeroes(minutes, 2);
+  const paddedSeconds = padNumberWithZeroes(seconds, 2);
+  if (hours > 0 || shouldAlwaysShowHours) {
+    return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;
+  }
+  return `${minutes}:${paddedSeconds}`;
+}
+function formatSpokenTime(duration) {
+  const spokenParts = [];
+  const { hours, minutes, seconds } = parseTime(duration);
+  const pluralize = (num, word) => num === 1 ? word : `${word}s`;
+  if (hours > 0) {
+    spokenParts.push(`${hours} ${pluralize(hours, "hour")}`);
+  }
+  if (minutes > 0) {
+    spokenParts.push(`${minutes} ${pluralize(minutes, "minute")}`);
+  }
+  if (seconds > 0 || spokenParts.length === 0) {
+    spokenParts.push(`${seconds} ${pluralize(seconds, "second")}`);
+  }
+  return spokenParts.join(", ");
+}
+function rafThrottle(func) {
+  let rafId;
+  const pending = () => !isUndefined(rafId);
+  const cancel = () => {
+    if (isUndefined(rafId))
+      return;
+    window.cancelAnimationFrame(rafId);
+    rafId = void 0;
+  };
+  function throttled(...args) {
+    if (pending())
+      return;
+    rafId = window.requestAnimationFrame(() => {
+      func.apply(this, args);
+      rafId = void 0;
+    });
+  }
+  throttled.cancel = cancel;
+  throttled.pending = pending;
+  return throttled;
+}
+
+// src/media/provider/media-provider-context.ts
+var mediaProviderElementContext = createContext(
+  () => writable(void 0)
+);
+
+// src/media/MediaType.ts
+function rangeCheck(fnName, index, maxIndex) {
+  if (!isNumber(index) || index < 0 || index > maxIndex) {
+    throw new Error(
+      `Failed to execute '${fnName}' on 'TimeRanges': The index provided (${index}) is non-numeric or out of bounds (0-${maxIndex}).`
+    );
+  }
+}
+function getRange(fnName, valueIndex, ranges, rangeIndex) {
+  rangeCheck(fnName, rangeIndex, ranges.length - 1);
+  return ranges[rangeIndex][valueIndex];
+}
+function createTimeRangesObj(ranges) {
+  if (isUndefined(ranges) || ranges.length === 0) {
+    const throwEmptyError = () => {
+      throw new Error("This TimeRanges object is empty");
+    };
+    return {
+      length: 0,
+      start: throwEmptyError,
+      end: throwEmptyError
+    };
+  }
+  return {
+    length: ranges.length,
+    start: getRange.bind(null, "start", 0, ranges),
+    end: getRange.bind(null, "end", 1, ranges)
+  };
+}
+function createTimeRanges(start, end) {
+  if (isArray(start)) {
+    return createTimeRangesObj(start);
+  } else if (isUndefined(start) || isUndefined(end)) {
+    return createTimeRangesObj();
+  }
+  return createTimeRangesObj([[start, end]]);
+}
+
+// src/media/store.ts
+var MEDIA_STORE_DEFAULTS = {
+  autoplay: false,
+  autoplayError: void 0,
+  buffered: createTimeRanges(),
+  duration: 0,
+  bufferedAmount: 0,
+  canLoad: false,
+  canPlay: false,
+  canFullscreen: false,
+  controls: false,
+  poster: "",
+  currentSrc: "",
+  currentTime: 0,
+  ended: false,
+  error: void 0,
+  fullscreen: false,
+  userIdle: false,
+  loop: false,
+  mediaType: "unknown" /* Unknown */,
+  muted: false,
+  paused: true,
+  played: createTimeRanges(),
+  playing: false,
+  playsinline: false,
+  seekable: createTimeRanges(),
+  seekableAmount: 0,
+  seeking: false,
+  src: [],
+  started: false,
+  viewType: "unknown" /* Unknown */,
+  volume: 1,
+  waiting: false
+};
+function createMediaStore() {
+  const store = {};
+  for (const prop of keysOf(MEDIA_STORE_DEFAULTS)) {
+    store[prop] = writable(MEDIA_STORE_DEFAULTS[prop]);
+  }
+  return store;
+}
+var DO_NOT_RESET_ON_SRC_CHANGE = /* @__PURE__ */ new Set([
+  "autoplay",
+  "canFullscreen",
+  "canLoad",
+  "controls",
+  "currentSrc",
+  "loop",
+  "muted",
+  "playsinline",
+  "poster",
+  "src",
+  "viewType",
+  "volume"
+]);
+function softResetMediaStore(store) {
+  keysOf(store).forEach((prop) => {
+    if (!DO_NOT_RESET_ON_SRC_CHANGE.has(prop)) {
+      store[prop].set(store[prop].initialValue);
+    }
+  });
+}
+function resetMediaStore(store) {
+  for (const prop of keysOf(MEDIA_STORE_DEFAULTS)) {
+    store[prop].set(MEDIA_STORE_DEFAULTS[prop]);
+  }
+}
+var mediaStoreContext = createContext(createMediaStore);
+function mediaStoreSubscription(host, property, onChange) {
+  return storeRecordSubscription(host, mediaStoreContext, property, onChange);
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=window,e$2=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),n$2=new WeakMap;class o$2{constructor(t,e,n){if(this._$cssResult$=!0,n!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$2&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=n$2.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n$2.set(s,t));}return t}toString(){return this.cssText}}const r$1=t=>new o$2("string"==typeof t?t:t+"",void 0,s$2),i$1=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,s,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[n+1]),t[0]);return new o$2(n,t,s$2)},S=(s,n)=>{e$2?s.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((e=>{const n=document.createElement("style"),o=t$1.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=e.cssText,s.appendChild(n);}));},c=e$2?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$1(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */var s$1;const e$1=window,r=e$1.trustedTypes,h=r?r.emptyScript:"",o$1=e$1.reactiveElementPolyfillSupport,n$1={toAttribute(t,i){switch(i){case Boolean:t=t?h:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},a=(t,i)=>i!==t&&(i==i||t==t),l$1={attribute:!0,type:String,converter:n$1,reflect:!1,hasChanged:a};class d extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u();}static addInitializer(t){var i;this.finalize(),(null!==(i=this.h)&&void 0!==i?i:this.h=[]).push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e));})),t}static createProperty(t,i=l$1){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l$1}static finalize(){if(this.hasOwnProperty("finalized"))return !1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(c(i));}else void 0!==i&&s.push(c(i));return s}static _$Ep(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1);}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return S(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$EO(t,i,s=l$1){var e;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const h=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:n$1).toAttribute(i,s.type);this._$El=t,null==h?this.removeAttribute(r):this.setAttribute(r,h),this._$El=null;}}_$AK(t,i){var s;const e=this.constructor,r=e._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=e.getPropertyOptions(r),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:n$1;this._$El=r,this[r]=h.fromAttribute(i,t.type),this._$El=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||a)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej());}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek();}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return !0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek();}updated(t){}firstUpdated(t){}}d.finalized=!0,d.elementProperties=new Map,d.elementStyles=[],d.shadowRootOptions={mode:"open"},null==o$1||o$1({ReactiveElement:d}),(null!==(s$1=e$1.reactiveElementVersions)&&void 0!==s$1?s$1:e$1.reactiveElementVersions=[]).push("1.5.0");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */var l,o;class s extends d{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Z(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1);}render(){return x}}s.finalized=!0,s._$litElement$=!0,null===(l=globalThis.litElementHydrateSupport)||void 0===l||l.call(globalThis,{LitElement:s});const n=globalThis.litElementPolyfillSupport;null==n||n({LitElement:s});(null!==(o=globalThis.litElementVersions)&&void 0!==o?o:globalThis.litElementVersions=[]).push("3.2.2");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const i=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i);}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this));},finisher(n){n.createProperty(e.key,i);}};function e(e){return (n,t)=>void 0!==t?((i,e,n)=>{e.constructor.createProperty(n,i);})(e,n,t):i(e,n)}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function t(t){return e({...t,state:!0})}
+
+var mediaProviderDiscoveryId = Symbol("@vidstack/media-provider-discovery");
+var MediaProviderElement = class extends s {
+  constructor() {
+    super();
+    this._disconnectDisposal = new DisposalBin();
+    this._logger = void 0;
+    this.loading = "visible";
+    this._attemptingAutoplay = false;
+    this.controllerQueue = new RequestQueue();
+    this._store = createMediaStore();
+    this._state = unwrapStoreRecord(this._store);
+    this.connectedQueue = hostRequestQueue(this);
+    this.mediaQueue = new RequestQueue();
+    this.screenOrientationController = new ScreenOrientationController(this);
+    this.fullscreenController = new FullscreenController(this, this.screenOrientationController);
+    discoverable(this, "vds-media-provider-connect", { register: mediaProviderDiscoveryId });
+    const intersectionController = createIntersectionController(
+      this,
+      { target: this, threshold: 0 },
+      (entries) => {
+        if (!/(visible|lazy)/.test(this.loading)) {
+          intersectionController.hostDisconnected();
+          return;
+        }
+        if (entries[0]?.isIntersecting) {
+          this.startLoadingMedia();
+          intersectionController.hostDisconnected();
+        }
+      }
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._logMediaEvents();
+    window.requestAnimationFrame(() => {
+      if (isUndefined(this.canLoadPoster)) {
+        this.canLoadPoster = true;
+      }
+    });
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.dispatchEvent(
+      vdsEvent("vds-fullscreen-support-change", {
+        detail: this.canFullscreen
+      })
+    );
+    if (this.canLoad || this.loading === "eager") {
+      window?.requestAnimationFrame(() => {
+        this.startLoadingMedia();
+      });
+    } else if (this.loading === "idle") {
+      requestIdleCallback(() => {
+        this.startLoadingMedia();
+      });
+    }
+  }
+  render() {
+    return y`<slot @slotchange="${this.handleDefaultSlotChange}"></slot>`;
+  }
+  disconnectedCallback() {
+    this._updateMediaStoreOnDisconnect(this._store);
+    this.mediaQueue.destroy();
+    this._disconnectDisposal.empty();
+    super.disconnectedCallback();
+    raf(() => {
+      raf(() => {
+        if (!this.isConnected)
+          this.destroy();
+      });
+    });
+  }
+  _updateMediaStoreOnDisconnect(store) {
+    store.paused.set(true);
+    store.playing.set(false);
+    store.seeking.set(false);
+    store.waiting.set(false);
+    store.fullscreen.set(false);
+  }
+  destroy() {
+    if (this.isConnected)
+      this.disconnectedCallback();
+    this.dispatchEvent(vdsEvent("vds-destroy"));
+  }
+  _logMediaEvents() {
+  }
+  get volume() {
+    return this._getVolume();
+  }
+  set volume(newVolume) {
+    this.mediaQueue.queue("volume", () => {
+      const oldVol = this.volume;
+      const newVol = clampNumber(0, newVolume, 1);
+      if (oldVol !== newVol) {
+        this._setVolume(newVol);
+        this.requestUpdate("volume", oldVol);
+      }
+    });
+  }
+  get paused() {
+    return this._getPaused();
+  }
+  set paused(newPaused) {
+    this.mediaQueue.queue("paused", () => {
+      if (this.paused === newPaused)
+        return;
+      try {
+        if (!newPaused) {
+          this.play();
+        } else {
+          this.pause();
+        }
+        this.requestUpdate("paused", !newPaused);
+      } catch (e) {
+        this._logger?.error("paused-change-fail", e);
+      }
+    });
+  }
+  get currentTime() {
+    return this._getCurrentTime();
+  }
+  set currentTime(newTime) {
+    this.mediaQueue.queue("current-time", () => {
+      const oldTime = this.currentTime;
+      if (oldTime !== newTime) {
+        this._setCurrentTime(newTime);
+        this.requestUpdate("currentTime", oldTime);
+      }
+    });
+  }
+  get muted() {
+    return this._getMuted();
+  }
+  set muted(newMuted) {
+    this.mediaQueue.queue("muted", () => {
+      const oldMuted = this.muted;
+      if (oldMuted !== newMuted) {
+        this._setMuted(newMuted);
+        this.requestUpdate("muted", oldMuted);
+      }
+    });
+  }
+  get poster() {
+    return this.state.poster;
+  }
+  set poster(newPoster) {
+    const oldPoster = this.poster;
+    if (oldPoster !== newPoster) {
+      this.dispatchEvent(vdsEvent("vds-poster-change", { detail: newPoster }));
+      this.requestUpdate("poster", oldPoster);
+    }
+  }
+  get loop() {
+    return this.state.loop;
+  }
+  set loop(newLoop) {
+    const oldLoop = this.loop;
+    if (oldLoop !== newLoop) {
+      this.dispatchEvent(vdsEvent("vds-loop-change", { detail: newLoop }));
+      this.requestUpdate("loop", oldLoop);
+    }
+  }
+  get controls() {
+    return this.state.controls;
+  }
+  set controls(newControls) {
+    const oldControls = this.controls;
+    if (oldControls !== newControls) {
+      this.dispatchEvent(vdsEvent("vds-controls-change", { detail: newControls }));
+      this.requestUpdate("controls", oldControls);
+    }
+  }
+  get canLoad() {
+    return this.state.canLoad;
+  }
+  startLoadingMedia() {
+    if (this.state.canPlay)
+      return;
+    this.dispatchEvent(vdsEvent("vds-can-load"));
+  }
+  _throwIfNotReadyForPlayback() {
+    if (!this.state.canPlay) {
+      throw Error(`Media is not ready - wait for \`vds-can-play\` event.`);
+    }
+  }
+  async _resetPlaybackIfEnded() {
+    if (!this.state.ended || this.state.currentTime === 0)
+      return;
+    return this._setCurrentTime(0);
+  }
+  _throwIfNotVideoView() {
+    if (this.state.viewType !== "video" /* Video */) {
+      throw Error("Player is currently not in a video view.");
+    }
+  }
+  async _handleMediaReady({ event, duration }) {
+    if (this.state.canPlay)
+      return;
+    this.dispatchEvent(
+      vdsEvent("vds-can-play", {
+        triggerEvent: event,
+        detail: { duration }
+      })
+    );
+    this.mediaQueue.start();
+    await this._attemptAutoplay();
+  }
+  _handleCurrentSrcChange(currentSrc, triggerEvent) {
+    if (this.state.currentSrc === currentSrc)
+      return;
+    this.mediaQueue.stop();
+    this.dispatchEvent(
+      vdsEvent("vds-current-src-change", {
+        detail: currentSrc,
+        triggerEvent
+      })
+    );
+  }
+  get autoplay() {
+    return this.state.autoplay;
+  }
+  set autoplay(newAutoplay) {
+    if (this.autoplay !== newAutoplay) {
+      this.dispatchEvent(vdsEvent("vds-autoplay-change", { detail: newAutoplay }));
+      this.requestUpdate("autoplay", !newAutoplay);
+    }
+    this._attemptAutoplay();
+  }
+  get _canAttemptAutoplay() {
+    return this.state.canPlay && this.state.autoplay && !this.state.started;
+  }
+  async _attemptAutoplay() {
+    if (!this._canAttemptAutoplay)
+      return;
+    this._attemptingAutoplay = true;
+    try {
+      await this.play();
+      this.dispatchEvent(vdsEvent("vds-autoplay", { detail: { muted: this.muted } }));
+    } catch (error) {
+      this.dispatchEvent(
+        vdsEvent("vds-autoplay-fail", {
+          detail: {
+            muted: this.muted,
+            error
+          }
+        })
+      );
+      this.requestUpdate();
+    }
+    this._attemptingAutoplay = false;
+  }
+  get controller() {
+    return this._controller;
+  }
+  get logLevel() {
+    return this._controller?.logLevel ?? "silent";
+  }
+  set logLevel(level) {
+  }
+  get idleDelay() {
+    return this._controller?.idleDelay ?? 0;
+  }
+  set idleDelay(delay) {
+    this.controllerQueue.queue("idle-delay", () => {
+      this._controller.idleDelay = delay;
+    });
+  }
+  attachMediaController(controller, onDisconnect) {
+    this._controller = controller;
+    this._store = controller._store;
+    this._state = controller.state;
+    this.controllerQueue.start();
+    onDisconnect(() => {
+      this.controllerQueue.destroy();
+      this._store = createMediaStore();
+      this._state = unwrapStoreRecord(this._store);
+      if (this._controller) {
+        copyStoreRecords(this._controller._store, this._store);
+        this._updateMediaStoreOnDisconnect(this._controller._store);
+      }
+      this._controller = void 0;
+    });
+  }
+  dispatchEvent(event) {
+    if (!this._controller && event.type.startsWith("vds-") && event.type !== "vds-destroy") {
+      this.controllerQueue.queue(event.type, () => {
+        super.dispatchEvent(event);
+      });
+      return false;
+    }
+    return super.dispatchEvent(event);
+  }
+  store() {
+    return this._store;
+  }
+  get state() {
+    return this._state;
+  }
+  get canFullscreen() {
+    return this.fullscreenController.isSupported;
+  }
+  get fullscreen() {
+    return this.fullscreenController.isFullscreen;
+  }
+  get fullscreenOrientation() {
+    return this.fullscreenController.screenOrientationLock;
+  }
+  set fullscreenOrientation(lockType) {
+    const prevLockType = this.fullscreenController.screenOrientationLock;
+    if (prevLockType !== lockType) {
+      this.fullscreenController.screenOrientationLock = lockType;
+      this.requestUpdate("fullscreen-orientation", prevLockType);
+    }
+  }
+  enterFullscreen() {
+    return this.fullscreenController.enterFullscreen();
+  }
+  exitFullscreen() {
+    return this.fullscreenController.exitFullscreen();
+  }
+};
+__decorateClass([
+  e({ type: Number })
+], MediaProviderElement.prototype, "volume", 1);
+__decorateClass([
+  e({ type: Boolean })
+], MediaProviderElement.prototype, "paused", 1);
+__decorateClass([
+  e({ type: Number })
+], MediaProviderElement.prototype, "currentTime", 1);
+__decorateClass([
+  e({ type: Boolean })
+], MediaProviderElement.prototype, "muted", 1);
+__decorateClass([
+  e()
+], MediaProviderElement.prototype, "poster", 1);
+__decorateClass([
+  e({ type: Boolean })
+], MediaProviderElement.prototype, "loop", 1);
+__decorateClass([
+  e({ type: Boolean })
+], MediaProviderElement.prototype, "controls", 1);
+__decorateClass([
+  t()
+], MediaProviderElement.prototype, "canLoadPoster", 2);
+__decorateClass([
+  e({ attribute: "loading" })
+], MediaProviderElement.prototype, "loading", 2);
+__decorateClass([
+  e({ type: Boolean })
+], MediaProviderElement.prototype, "autoplay", 1);
+__decorateClass([
+  e({ attribute: "log-level" })
+], MediaProviderElement.prototype, "logLevel", 1);
+__decorateClass([
+  e({ attribute: "idle-delay", type: Number })
+], MediaProviderElement.prototype, "idleDelay", 1);
+__decorateClass([
+  e({ attribute: "fullscreen-orientation" })
+], MediaProviderElement.prototype, "fullscreenOrientation", 1);
+
+var UserIdleController = class {
+  constructor(_host, _mediaStore) {
+    this._host = _host;
+    this._mediaStore = _mediaStore;
+    this._idle = false;
+    this._mediaPaused = false;
+    this._idlingPaused = false;
+    this._disposal = new DisposalBin();
+    this.delay = 2e3;
+    _host.addController(this);
+  }
+  get paused() {
+    return this._idlingPaused || this._mediaPaused;
+  }
+  set paused(paused) {
+    this._idlingPaused = paused;
+    this._handleIdleChange();
+  }
+  hostConnected() {
+    this._disposal.add(
+      this._mediaStore.paused.subscribe(($paused) => {
+        this._mediaPaused = $paused;
+        this._handleIdleChange();
+      })
+    );
+    const startIdleTimerEvents = ["pointerdown", "pointermove", "focus", "keydown"];
+    startIdleTimerEvents.forEach((eventType) => {
+      const off = listen(this._host, eventType, this._handleIdleChange.bind(this));
+      this._disposal.add(off);
+    });
+  }
+  hostDisconnected() {
+    this._disposal.empty();
+    this._stopIdleTimer();
+  }
+  _handleIdleChange() {
+    if (this.paused) {
+      this._stopIdleTimer();
+    } else {
+      this._startIdleTimer();
+    }
+  }
+  _startIdleTimer() {
+    this._stopIdleTimer();
+    this._idleTimeout = window.setTimeout(() => {
+      this._dispatchIdleChange(!this.paused);
+    }, this.delay);
+  }
+  _stopIdleTimer() {
+    window.clearTimeout(this._idleTimeout);
+    this._dispatchIdleChange(false);
+  }
+  _dispatchIdleChange(isIdle) {
+    if (this._idle !== isIdle) {
+      this._host.dispatchEvent(vdsEvent("vds-user-idle-change", { detail: isIdle }));
+      this._idle = isIdle;
+    }
+  }
+};
+var MediaController = class {
+  constructor(_host) {
+    this._host = _host;
+    this._disconnectDisposal = new DisposalBin();
+    this.providerQueue = new RequestQueue();
+    this.providerDisposal = new DisposalBin();
+    this._logController = void 0;
+    this._logger = void 0;
+    this._providerContext = mediaProviderElementContext.provide(this._host);
+    this._mediaStoreProvider = mediaStoreContext.provide(this._host);
+    this.state = unwrapStoreRecord(this._store);
+    this._userIdleController = new UserIdleController(this._host, this._store);
+    this._handleIdleChange = eventListener(this._host, "vds-user-idle-change", (event) => {
+      this._store.userIdle.set(event.detail);
+      this._satisfyMediaRequest("userIdle", event);
+    });
+    this._pendingMediaRequests = {
+      loading: [],
+      play: [],
+      pause: [],
+      volume: [],
+      fullscreen: [],
+      seeked: [],
+      seeking: [],
+      userIdle: []
+    };
+    this._handleStartLoadingRequest = eventListener(
+      this._host,
+      "vds-start-loading",
+      this._createMediaRequestHandler("loading", (event) => {
+        if (this.state.canLoad)
+          return;
+        this._pendingMediaRequests.loading.push(event);
+        this._provider.startLoadingMedia();
+      })
+    );
+    this._handleMuteRequest = eventListener(
+      this._host,
+      "vds-mute-request",
+      this._createMediaRequestHandler("muted", (event) => {
+        if (this.state.muted)
+          return;
+        this._pendingMediaRequests.volume.push(event);
+        this.provider.muted = true;
+      })
+    );
+    this._handleUnmuteRequest = eventListener(
+      this._host,
+      "vds-unmute-request",
+      this._createMediaRequestHandler("muted", (event) => {
+        if (!this.state.muted)
+          return;
+        this._pendingMediaRequests.volume.push(event);
+        this.provider.muted = false;
+        if (this.state.volume === 0) {
+          this._pendingMediaRequests.volume.push(event);
+          this.provider.volume = 0.25;
+        }
+      })
+    );
+    this._handlePlayRequest = eventListener(
+      this._host,
+      "vds-play-request",
+      this._createMediaRequestHandler("paused", (event) => {
+        if (!this.state.paused)
+          return;
+        this._pendingMediaRequests.play.push(event);
+        this.provider.paused = false;
+      })
+    );
+    this._handlePauseRequest = eventListener(
+      this._host,
+      "vds-pause-request",
+      this._createMediaRequestHandler("paused", (event) => {
+        if (this.state.paused)
+          return;
+        this._pendingMediaRequests.pause.push(event);
+        this.provider.paused = true;
+      })
+    );
+    this._isSeekingRequestPending = false;
+    this._handleSeekingRequest = eventListener(
+      this._host,
+      "vds-seeking-request",
+      this._createMediaRequestHandler("seeking", (event) => {
+        this._stopWaiting();
+        this._pendingMediaRequests.seeking.push(event);
+        this._isSeekingRequestPending = true;
+        this._store.seeking.set(true);
+      })
+    );
+    this._handleSeekRequest = eventListener(
+      this._host,
+      "vds-seek-request",
+      this._createMediaRequestHandler("seeking", (event) => {
+        if (this.store.ended) {
+          this._isReplay = true;
+        }
+        this._pendingMediaRequests.seeked.push(event);
+        this._isSeekingRequestPending = false;
+        let time = event.detail;
+        if (this.state.duration - event.detail < 0.25) {
+          time = this.state.duration;
+        }
+        this.provider.currentTime = time;
+      })
+    );
+    this._handleVolumeChangeRequest = eventListener(
+      this._host,
+      "vds-volume-change-request",
+      this._createMediaRequestHandler("volume", (event) => {
+        const volume = event.detail;
+        if (this.state.volume === volume)
+          return;
+        this._pendingMediaRequests.volume.push(event);
+        this.provider.volume = volume;
+        if (volume > 0 && this.state.muted) {
+          this._pendingMediaRequests.volume.push(event);
+          this.provider.muted = false;
+        }
+      })
+    );
+    this._handleEnterFullscreenRequest = eventListener(
+      this._host,
+      "vds-enter-fullscreen-request",
+      this._createMediaRequestHandler("fullscreen", async (event) => {
+        if (this.state.fullscreen)
+          return;
+        const target = event.detail ?? "media";
+        if (target === "media" && this._host.canFullscreen) {
+          this._pendingMediaRequests.fullscreen.push(event);
+          await this._host.enterFullscreen?.();
+        } else if (this.provider) {
+          this._pendingMediaRequests.fullscreen.push(event);
+          await this.provider.enterFullscreen();
+        }
+      })
+    );
+    this._handleExitFullscreenRequest = eventListener(
+      this._host,
+      "vds-exit-fullscreen-request",
+      this._createMediaRequestHandler("fullscreen", async (event) => {
+        if (!this.state.fullscreen)
+          return;
+        const target = event.detail ?? "media";
+        if (target === "media" && this._host.canFullscreen) {
+          this._pendingMediaRequests.fullscreen.push(event);
+          await this._host.exitFullscreen?.();
+        } else if (this.provider) {
+          this._pendingMediaRequests.fullscreen.push(event);
+          await this.provider.exitFullscreen();
+        }
+      })
+    );
+    this._handleResumeIdlingRequest = eventListener(
+      this._host,
+      "vds-resume-user-idle-request",
+      (event) => {
+        if (!this._mediaRequestEventGateway(event))
+          return;
+        this._pendingMediaRequests.userIdle.push(event);
+        this._userIdleController.paused = false;
+      }
+    );
+    this._handlePauseIdlingRequest = eventListener(
+      this._host,
+      "vds-pause-user-idle-request",
+      (event) => {
+        if (!this._mediaRequestEventGateway(event))
+          return;
+        this._pendingMediaRequests.userIdle.push(event);
+        this._userIdleController.paused = true;
+      }
+    );
+    this._handleShowPosterRequest = eventListener(
+      this._host,
+      "vds-show-poster-request",
+      this._createMediaRequestHandler("poster", () => {
+        this._provider.canLoadPoster = true;
+      })
+    );
+    this._handleHidePosterRequest = eventListener(
+      this._host,
+      "vds-hide-poster-request",
+      this._createMediaRequestHandler("poster", () => {
+        this._provider.canLoadPoster = false;
+      })
+    );
+    this._handleLoopRequest = this._createMediaRequestHandler("loop", () => {
+      window.requestAnimationFrame(async () => {
+        try {
+          this._isLooping = true;
+          this._isReplay = true;
+          await this._provider.play();
+        } catch (e) {
+          this._isReplay = false;
+          this._isLooping = false;
+        }
+      });
+    });
+    this._handleFullscreenChange = eventListener(
+      this._host,
+      "vds-fullscreen-change",
+      (event) => {
+        this._store.fullscreen.set(event.detail);
+        if (event.target !== this._host)
+          return;
+        this._satisfyMediaRequest("fullscreen", event);
+        this._provider?.dispatchEvent(
+          vdsEvent("vds-fullscreen-change", {
+            detail: event.detail,
+            triggerEvent: event
+          })
+        );
+      }
+    );
+    this._handleFullscreenError = eventListener(
+      this._host,
+      "vds-fullscreen-error",
+      (event) => {
+        if (event.target !== this._host)
+          return;
+        this._satisfyMediaRequest("fullscreen", event);
+        this._provider?.dispatchEvent(
+          vdsEvent("vds-fullscreen-error", {
+            detail: event.detail,
+            triggerEvent: event
+          })
+        );
+      }
+    );
+    this._isReplay = false;
+    this._isLooping = false;
+    this._firingWaiting = false;
+    this._mediaEvents = [];
+    this._handleSeeking = functionThrottle(
+      (event) => {
+        this._mediaEvents.push(event);
+        this._store.seeking.set(true);
+        this._store.currentTime.set(event.detail);
+        this._satisfyMediaRequest("seeking", event);
+      },
+      150,
+      { leading: true }
+    );
+    this._fireWaiting = functionDebounce(() => {
+      if (!this._originalWaitingEvent)
+        return;
+      this._firingWaiting = true;
+      const event = vdsEvent("vds-waiting", this._originalWaitingEvent);
+      this._mediaEvents.push(event);
+      this._store.waiting.set(true);
+      this._store.playing.set(false);
+      this._provider?.dispatchEvent(event);
+      this._originalWaitingEvent = void 0;
+      this._firingWaiting = false;
+    }, 300);
+    this._skipInitialSrcChange = true;
+    discover(_host, mediaProviderDiscoveryId, (provider, onDisconnect) => {
+      this.attachMediaProvider(provider, onDisconnect);
+    });
+    _host.addController({
+      hostConnected: () => {
+        if (!this.state.canPlay) {
+          this._host.setAttribute("aria-busy", "true");
+        }
+      },
+      hostDisconnected: () => {
+        this._clearMediaStateTracking();
+        this._clearPendingMediaRequests();
+        this.providerQueue.destroy();
+        this.providerDisposal.empty();
+        this._skipInitialSrcChange = true;
+        this._disconnectDisposal.empty();
+      }
+    });
+  }
+  get logLevel() {
+    return this._logController?.logLevel ?? "silent";
+  }
+  set logLevel(level) {
+  }
+  get provider() {
+    return this._provider;
+  }
+  attachMediaProvider(provider, onDisconnect) {
+    if (!isNil(this.provider) || this.provider === provider)
+      return;
+    this._handleMediaProviderDisconnect();
+    this._provider = provider;
+    this._providerContext.value.set(provider);
+    copyStoreRecords(this._provider._store, this._store);
+    this._attachMediaEventListeners();
+    provider.attachMediaController(this, (cb) => this._disconnectDisposal.add(cb));
+    this._flushMediaProviderConnectedQueue();
+    onDisconnect(this._handleMediaProviderDisconnect.bind(this));
+  }
+  _handleMediaProviderDisconnect() {
+    if (isNil(this.provider))
+      return;
+    this._stopWaiting();
+    this.providerQueue.destroy();
+    this.providerDisposal.empty();
+    this._provider = void 0;
+    this._providerContext.value.set(void 0);
+    resetMediaStore(this._store);
+    this._store.viewType.set("unknown" /* Unknown */);
+  }
+  _flushMediaProviderConnectedQueue() {
+    this.providerQueue.start();
+    this.providerDisposal.add(() => {
+      this.providerQueue.stop();
+    });
+  }
+  get store() {
+    return this._mediaStoreProvider.value;
+  }
+  get _store() {
+    return this._mediaStoreProvider.value;
+  }
+  get idleDelay() {
+    return this._userIdleController.delay;
+  }
+  set idleDelay(delay) {
+    this._userIdleController.delay = delay;
+  }
+  _clearPendingMediaRequests() {
+    keysOf(this._pendingMediaRequests).forEach((key) => {
+      this._pendingMediaRequests[key] = [];
+    });
+  }
+  _satisfyMediaRequest(type, event) {
+    const requestEvent = this._pendingMediaRequests[type].shift();
+    if (requestEvent) {
+      event.requestEvent = requestEvent;
+      appendTriggerEvent(event, requestEvent);
+    }
+  }
+  _mediaRequestEventGateway(event) {
+    event.stopPropagation();
+    return true;
+  }
+  _createMediaRequestHandler(queueKey, callback) {
+    return (event) => {
+      if (!this._mediaRequestEventGateway(event))
+        return;
+      if (this._provider) {
+        callback(event);
+        return;
+      }
+      this.providerQueue.queue(queueKey, () => {
+        callback(event);
+      });
+    };
+  }
+  _attachMediaEventListeners() {
+    if (!this._provider)
+      return;
+    const mediaEventListeners = {
+      "vds-can-load": this._handleCanLoad,
+      "vds-load-start": this._handleLoadStart,
+      "vds-loaded-data": this._handleLoadedData,
+      "vds-loaded-metadata": this._handleLoadedMetadata,
+      "vds-can-play": this._handleCanPlay,
+      "vds-can-play-through": this._handleCanPlayThrough,
+      "vds-current-src-change": this._handleCurrentSrcChange,
+      "vds-autoplay": this._handleAutoplay,
+      "vds-autoplay-fail": this._handleAutoplayFail,
+      "vds-loop-request": this._handleLoopRequest,
+      "vds-play": this._handlePlay,
+      "vds-play-fail": this._handlePlayFail,
+      "vds-playing": this._handlePlaying,
+      "vds-pause": this._handlePause,
+      "vds-time-update": this._handleTimeUpdate,
+      "vds-volume-change": this._handleVolumeChange,
+      "vds-seeking": this._handleSeeking,
+      "vds-seeked": this._handleSeeked,
+      "vds-waiting": this._handleWaiting,
+      "vds-ended": this._handleEnded,
+      "vds-autoplay-change": this._handleAutoplayChange,
+      "vds-error": this._handleError,
+      "vds-fullscreen-support-change": this._handleFullscreenSupportChange,
+      "vds-poster-change": this._handlePosterChange,
+      "vds-loop-change": this._handleLoopChange,
+      "vds-playsinline-change": this._handlePlaysinlineChange,
+      "vds-controls-change": this._handleControlsChange,
+      "vds-media-type-change": this._handleMediaTypeChange,
+      "vds-view-type-change": this._handleViewTypeChange,
+      "vds-duration-change": this._handleDurationChange,
+      "vds-progress": this._handleProgress,
+      "vds-src-change": this._handleSrcChange
+    };
+    for (const eventType of keysOf(mediaEventListeners)) {
+      const handler = mediaEventListeners[eventType].bind(this);
+      this.providerDisposal.add(listen(this._provider, eventType, handler));
+    }
+  }
+  _clearMediaStateTracking() {
+    this._isReplay = false;
+    this._isLooping = false;
+    this._firingWaiting = false;
+    this._originalWaitingEvent = void 0;
+    this._mediaEvents = [];
+  }
+  _findLastMediaEvent(eventType) {
+    return this._mediaEvents[this._mediaEvents.map((e) => e.type).lastIndexOf(eventType)];
+  }
+  _handleCanLoad(event) {
+    this._store.canLoad.set(true);
+    this._mediaEvents.push(event);
+    this._satisfyMediaRequest("loading", event);
+  }
+  _updateMetadata(metadata) {
+    this._store.currentSrc.set(metadata.currentSrc);
+    this._store.mediaType.set(metadata.mediaType);
+    this._store.viewType.set(metadata.viewType);
+  }
+  _handleLoadStart(event) {
+    this._updateMetadata(event.detail);
+    this._mediaEvents.push(event);
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-src-change"));
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-can-load"));
+  }
+  _handleLoadedData(event) {
+    this._mediaEvents.push(event);
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-load-start"));
+  }
+  _handleLoadedMetadata(event) {
+    this._updateMetadata(event.detail);
+    this._mediaEvents.push(event);
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-load-start"));
+  }
+  _handleCanPlay(event) {
+    this._mediaEvents.push(event);
+    if (event.triggerEvent?.type !== "loadedmetadata") {
+      appendTriggerEvent(event, this._findLastMediaEvent("vds-loaded-metadata"));
+    }
+    this._store.canPlay.set(true);
+    this._store.duration.set(event.detail.duration);
+    this._host.setAttribute("aria-busy", "false");
+  }
+  _handleCanPlayThrough(event) {
+    this._store.canPlay.set(true);
+    this._store.duration.set(event.detail.duration);
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-can-play"));
+  }
+  _handleAutoplay(event) {
+    this._mediaEvents.push(event);
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-play"));
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-can-play"));
+    this._store.autoplayError.set(void 0);
+  }
+  _handleAutoplayFail(event) {
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-play-fail"));
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-can-play"));
+    this._store.autoplayError.set(event.detail);
+    this._clearMediaStateTracking();
+  }
+  _handlePlay(event) {
+    if (this._isLooping || !this.state.paused) {
+      event.stopImmediatePropagation();
+      return;
+    }
+    this._mediaEvents.push(event);
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-waiting"));
+    this._satisfyMediaRequest("play", event);
+    this._store.paused.set(false);
+    this._store.autoplayError.set(void 0);
+    if (this.state.ended || this._isReplay) {
+      this._isReplay = false;
+      this._store.ended.set(false);
+      const replayEvent = vdsEvent("vds-replay", {
+        triggerEvent: event
+      });
+      this._provider?.dispatchEvent(replayEvent);
+    }
+  }
+  _handlePlayFail(event) {
+    this._mediaEvents.push(event);
+    this._stopWaiting();
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-play"));
+    this._store.paused.set(true);
+    this._store.playing.set(false);
+    this._satisfyMediaRequest("play", event);
+    this._clearMediaStateTracking();
+  }
+  _handlePlaying(event) {
+    this._mediaEvents.push(event);
+    const playEvent = this._findLastMediaEvent("vds-play");
+    if (playEvent) {
+      appendTriggerEvent(event, this._findLastMediaEvent("vds-waiting"));
+      appendTriggerEvent(event, playEvent);
+    } else {
+      appendTriggerEvent(event, this._findLastMediaEvent("vds-seeked"));
+    }
+    this._stopWaiting();
+    this._clearMediaStateTracking();
+    this._store.paused.set(false);
+    this._store.playing.set(true);
+    this._store.seeking.set(false);
+    this._store.ended.set(false);
+    if (this._isLooping) {
+      event.stopImmediatePropagation();
+      this._isLooping = false;
+      return;
+    }
+    if (!this.state.started) {
+      this._store.started.set(true);
+      this._provider?.dispatchEvent(vdsEvent("vds-started", { triggerEvent: event }));
+    }
+  }
+  _handlePause(event) {
+    if (this._isLooping) {
+      event.stopImmediatePropagation();
+      return;
+    }
+    appendTriggerEvent(event, this._findLastMediaEvent("vds-seeked"));
+    this._satisfyMediaRequest("pause", event);
+    this._store.paused.set(true);
+    this._store.playing.set(false);
+    this._store.seeking.set(false);
+    this._stopWaiting();
+    this._clearMediaStateTracking();
+  }
+  _handleTimeUpdate(event) {
+    const { currentTime, played } = event.detail;
+    this._store.currentTime.set(currentTime);
+    this._store.played.set(played);
+    this._store.waiting.set(false);
+  }
+  _handleVolumeChange(event) {
+    this._store.volume.set(event.detail.volume);
+    this._store.muted.set(event.detail.muted || event.detail.volume === 0);
+    this._satisfyMediaRequest("volume", event);
+  }
+  _handleSeeked(event) {
+    if (this._isSeekingRequestPending) {
+      this._store.seeking.set(true);
+      event.stopImmediatePropagation();
+    } else if (this.state.seeking) {
+      this._mediaEvents.push(event);
+      appendTriggerEvent(event, this._findLastMediaEvent("vds-waiting"));
+      appendTriggerEvent(event, this._findLastMediaEvent("vds-seeking"));
+      if (this.state.paused) {
+        this._stopWaiting();
+      }
+      this._store.seeking.set(false);
+      if (event.detail !== this.state.duration) {
+        this._store.ended.set(false);
+      }
+      this._store.currentTime.set(event.detail);
+      this._satisfyMediaRequest("seeked", event);
+    }
+  }
+  _stopWaiting() {
+    this._fireWaiting.cancel();
+    this._store.waiting.set(false);
+  }
+  _handleWaiting(event) {
+    if (this._firingWaiting)
+      return;
+    event.stopImmediatePropagation();
+    this._originalWaitingEvent = event;
+    this._fireWaiting();
+  }
+  _handleEnded(event) {
+    if (this._isLooping) {
+      event.stopImmediatePropagation();
+      return;
+    }
+    this._stopWaiting();
+    this._store.paused.set(true);
+    this._store.playing.set(false);
+    this._store.seeking.set(false);
+    this._store.ended.set(true);
+    this._clearMediaStateTracking();
+  }
+  _handleAutoplayChange(event) {
+    this._store.autoplay.set(event.detail);
+  }
+  _handleCurrentSrcChange(event) {
+    this._store.currentSrc.set(event.detail);
+    if (this._skipInitialSrcChange) {
+      this._skipInitialSrcChange = false;
+      return;
+    }
+    this._clearMediaStateTracking();
+    softResetMediaStore(this._store);
+    this._host.setAttribute("aria-busy", "true");
+  }
+  _handleError(event) {
+    this._store.error.set(event.detail);
+  }
+  _handleFullscreenSupportChange(event) {
+    this._store.canFullscreen.set(event.detail);
+  }
+  _handlePosterChange(event) {
+    this._store.poster.set(event.detail);
+  }
+  _handleLoopChange(event) {
+    this._store.loop.set(event.detail);
+  }
+  _handlePlaysinlineChange(event) {
+    this._store.playsinline.set(event.detail);
+  }
+  _handleControlsChange(event) {
+    this._store.controls.set(event.detail);
+  }
+  _handleMediaTypeChange(event) {
+    this._store.mediaType.set(event.detail);
+  }
+  _handleDurationChange(event) {
+    const duration = event.detail;
+    this._store.duration.set(!isNaN(duration) ? duration : 0);
+  }
+  _handleProgress(event) {
+    const { buffered, seekable } = event.detail;
+    const bufferedAmount = buffered.length === 0 ? 0 : buffered.end(buffered.length - 1);
+    const seekableAmount = seekable.length === 0 ? 0 : seekable.end(seekable.length - 1);
+    this._store.buffered.set(buffered);
+    this._store.bufferedAmount.set(bufferedAmount);
+    this._store.seekable.set(seekable);
+    this._store.seekableAmount.set(seekableAmount);
+  }
+  _handleSrcChange(event) {
+    this._store.src.set(event.detail);
+  }
+  _handleViewTypeChange(event) {
+    this._store.viewType.set(event.detail);
+  }
+};
+var MediaStyleController = class {
+  constructor(_host, _store, _mediaProps) {
+    this._host = _host;
+    this._store = _store;
+    this._mediaProps = _mediaProps;
+    this._disposal = new DisposalBin();
+    this._host.addController({
+      hostConnected: this._hostConnected.bind(this),
+      hostDisconnected: this._hostDisconnected.bind(this)
+    });
+  }
+  _hostConnected() {
+    requestIdleCallback(() => {
+      for (const propName of this._mediaProps) {
+        const store = this._store[propName];
+        if (store) {
+          const attrName = this._getMediaAttrName(propName);
+          const unsub = store.subscribe(($v) => {
+            window?.requestAnimationFrame(() => {
+              this._handleValueChange(propName, attrName, $v);
+            });
+          });
+          this._disposal.add(unsub);
+        }
+      }
+    });
+  }
+  _hostDisconnected() {
+    for (const propName of this._mediaProps) {
+      this._handleDisconnect(propName, this._getMediaAttrName(propName));
+    }
+    this._disposal.empty();
+  }
+  _getMediaAttrName(propName) {
+    return camelToKebabCase(propName);
+  }
+};
+
+// src/media/style/MediaAttrsController.ts
+var MediaAttrsController = class extends MediaStyleController {
+  _handleValueChange(_, attrName, value) {
+    window.requestAnimationFrame(() => {
+      setAttribute(
+        this._host,
+        attrName,
+        isString(value) || isNumber(value) ? String(value) : !!value
+      );
+    });
+  }
+  _handleDisconnect(_, attrName) {
+    this._host.removeAttribute(attrName);
+  }
+};
+function bindMediaPropsToAttrs(...params) {
+  return new MediaAttrsController(...params);
+}
+var MediaCssPropsController = class extends MediaStyleController {
+  _handleValueChange(_, attrName, value) {
+    window.requestAnimationFrame(() => {
+      this._host.style.setProperty(
+        this._getCssPropName(attrName),
+        isString(value) || isNumber(value) ? String(value) : null
+      );
+    });
+  }
+  _getCssPropName(attrName) {
+    return `--vds-${attrName}`;
+  }
+  _handleDisconnect(_, attrName) {
+    this._host.style.setProperty(this._getCssPropName(attrName), null);
+  }
+};
+function bindMediaPropsToCssProps(...params) {
+  return new MediaCssPropsController(...params);
+}
+
+// src/media/MediaElement.ts
+var mediaDiscoveryId = Symbol("@vidstack/media-discovery");
+var MediaElement = class extends s {
+  constructor() {
+    super();
+    this.controller = new MediaController(this);
+    this.__mediaFullscreen = false;
+    this.__mediaIsVideoView = false;
+    this.__mediaPlaysinline = false;
+    this.screenOrientationController = new ScreenOrientationController(this);
+    this.fullscreenController = new FullscreenController(this, this.screenOrientationController);
+    discoverable(this, "vds-media-connect", { register: mediaDiscoveryId });
+    mediaStoreSubscription(this, "fullscreen", ($fullscreen) => {
+      this.__mediaFullscreen = $fullscreen;
+    });
+    mediaStoreSubscription(this, "viewType", ($viewType) => {
+      this.__mediaIsVideoView = $viewType === "video" /* Video */;
+    });
+    mediaStoreSubscription(this, "playsinline", ($playsinline) => {
+      this.__mediaPlaysinline = $playsinline;
+    });
+    this._bindMediaAttributes();
+    this._bindMediaCSSProperties();
+  }
+  static get styles() {
+    return [
+      i$1`:host{display:inline-block;position:relative;contain:content}:host([hidden]){display:none}`
+    ];
+  }
+  get provider() {
+    return this.controller.provider;
+  }
+  update(changedProperties) {
+    setAttribute(this, "hide-ui", this._shouldHideMediaUI());
+    super.update(changedProperties);
+  }
+  render() {
+    return y`<slot></slot>`;
+  }
+  get canFullscreen() {
+    return this.fullscreenController.isSupported;
+  }
+  get fullscreen() {
+    return this.fullscreenController.isFullscreen;
+  }
+  get fullscreenOrientation() {
+    return this.fullscreenController.screenOrientationLock;
+  }
+  set fullscreenOrientation(lockType) {
+    const prevLockType = this.fullscreenController.screenOrientationLock;
+    if (prevLockType !== lockType) {
+      this.fullscreenController.screenOrientationLock = lockType;
+      this.requestUpdate("fullscreen-orientation", prevLockType);
+    }
+  }
+  enterFullscreen() {
+    return this.fullscreenController.enterFullscreen();
+  }
+  exitFullscreen() {
+    return this.fullscreenController.exitFullscreen();
+  }
+  _bindMediaAttributes() {
+    bindMediaPropsToAttrs(this, this.controller.store, [
+      "autoplay",
+      "autoplayError",
+      "canLoad",
+      "canPlay",
+      "canFullscreen",
+      "ended",
+      "error",
+      "fullscreen",
+      "userIdle",
+      "loop",
+      "mediaType",
+      "muted",
+      "paused",
+      "playing",
+      "playsinline",
+      "seeking",
+      "started",
+      "viewType",
+      "waiting"
+    ]);
+  }
+  _bindMediaCSSProperties() {
+    bindMediaPropsToCssProps(this, this.controller.store, [
+      "bufferedAmount",
+      "currentTime",
+      "duration",
+      "seekableAmount"
+    ]);
+  }
+  _shouldHideMediaUI() {
+    return IS_IOS && this.__mediaIsVideoView && (!this.__mediaPlaysinline || this.__mediaFullscreen);
+  }
+};
+__decorateClass([
+  t()
+], MediaElement.prototype, "__mediaFullscreen", 2);
+__decorateClass([
+  t()
+], MediaElement.prototype, "__mediaIsVideoView", 2);
+__decorateClass([
+  t()
+], MediaElement.prototype, "__mediaPlaysinline", 2);
+__decorateClass([
+  e({ attribute: "fullscreen-orientation" })
+], MediaElement.prototype, "fullscreenOrientation", 1);
+
+safelyDefineCustomElement("vds-media", MediaElement);
+
+var AUDIO_EXTENSIONS = /\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i;
+var VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v|avi)($|\?)/i;
+function getMediaTypeFromExt(src) {
+  if (AUDIO_EXTENSIONS.test(src))
+    return "audio" /* Audio */;
+  if (VIDEO_EXTENSIONS.test(src))
+    return "video" /* Video */;
+  return "unknown" /* Unknown */;
+}
+var Html5MediaElement = class extends MediaProviderElement {
+  constructor() {
+    super(...arguments);
+    this.preload = "metadata";
+    this._timeRAF = void 0;
+    this._hasMediaElementConnected = false;
+    this._mediaElementDisposal = new DisposalBin();
+    this._isMediaWaiting = false;
+    this._ignoreNextAbortEvent = false;
+    this._ignoreNextEmptiedEvent = false;
+  }
+  get mediaElement() {
+    return this._mediaElement;
+  }
+  disconnectedCallback() {
+    this._isMediaWaiting = false;
+    super.disconnectedCallback();
+    this._cancelTimeUpdates();
+  }
+  destroy() {
+    if (this.mediaElement) {
+      this.mediaElement.pause();
+      this.mediaElement.src = "";
+      this.mediaElement.innerHTML = "";
+      this.mediaElement.load();
+    }
+    super.destroy();
+  }
+  _cancelTimeUpdates() {
+    if (isNumber(this._timeRAF))
+      window.cancelAnimationFrame(this._timeRAF);
+    this._timeRAF = void 0;
+  }
+  _requestTimeUpdates() {
+    if (!isUndefined(this._timeRAF))
+      return;
+    this._requestTimeUpdate();
+  }
+  _requestTimeUpdate() {
+    const newTime = this.mediaElement?.currentTime ?? 0;
+    if (this.state.currentTime !== newTime) {
+      this._updateCurrentTime(newTime);
+    }
+    this._timeRAF = window.requestAnimationFrame(() => {
+      if (isUndefined(this._timeRAF))
+        return;
+      this._requestTimeUpdate();
+    });
+  }
+  _updateCurrentTime(newTime, triggerEvent) {
+    this.dispatchEvent(
+      vdsEvent("vds-time-update", {
+        detail: {
+          currentTime: Math.min(newTime, this.mediaElement?.duration ?? 0),
+          played: this.mediaElement.played
+        },
+        triggerEvent
+      })
+    );
+  }
+  handleDefaultSlotChange() {
+    this._handleMediaElementDisconnect();
+    this._handleMediaElementConnect();
+  }
+  get _canMediaElementConnect() {
+    return this.canLoad && !isNil(this.mediaElement) && !this._hasMediaElementConnected;
+  }
+  _findSlottedMediaElement() {
+    const mediaElement = getSlottedChildren(this)[0];
+    const tagName = mediaElement?.tagName ?? "";
+    if (!/^(audio|video)$/i.test(tagName)) ;
+    this._mediaElement = mediaElement ?? void 0;
+  }
+  _handleMediaElementConnect() {
+    window.requestAnimationFrame(() => {
+      this._findSlottedMediaElement();
+      if (!this._canMediaElementConnect)
+        return;
+      const mediaEl = this.mediaElement;
+      if (mediaEl.hasAttribute("loop")) {
+        this.loop = true;
+      }
+      mediaEl.removeAttribute("loop");
+      mediaEl.removeAttribute("poster");
+      setAttribute(mediaEl, "controls", this.controls);
+      if (!this.state.canFullscreen && this.fullscreenController.isSupported) {
+        this.dispatchEvent(
+          vdsEvent("vds-fullscreen-support-change", {
+            detail: this.canFullscreen
+          })
+        );
+      }
+      this._attachMediaEventListeners();
+      this._observePlaysinline();
+      this._observeMediaSources();
+      if (this.canLoadPoster && this.poster.length > 0 && mediaEl.getAttribute("poster") !== this.poster) {
+        mediaEl.setAttribute("poster", this.poster);
+      }
+      this._startPreloadingMedia();
+      this._hasMediaElementConnected = true;
+      this._disconnectDisposal.add(this._handleMediaElementDisconnect.bind(this));
+    });
+  }
+  _handleMediaElementDisconnect() {
+    this._cancelTimeUpdates();
+    window.requestAnimationFrame(() => {
+      this._mediaElementDisposal.empty();
+      this._mediaElement = void 0;
+    });
+    if (this._hasMediaElementConnected && false) {
+      this._logger?.infoGroup("Media element disconnected").labelledLog("Media Element", this.mediaElement).dispatch();
+    }
+    this._hasMediaElementConnected = false;
+  }
+  startLoadingMedia() {
+    super.startLoadingMedia();
+    this._handleMediaElementConnect();
+  }
+  _startPreloadingMedia() {
+    if (this.state.canPlay)
+      return;
+    this.mediaElement.setAttribute("preload", this.preload);
+    const isNetworkActive = this.mediaElement.networkState >= 1;
+    this._ignoreNextAbortEvent = isNetworkActive;
+    this._ignoreNextEmptiedEvent = isNetworkActive;
+    this.mediaElement.load();
+    setTimeout(() => {
+      this._ignoreNextAbortEvent = false;
+      this._ignoreNextEmptiedEvent = false;
+    }, 0);
+  }
+  _observePlaysinline() {
+    const isPlayingInline = () => this.mediaElement.hasAttribute("playsinline");
+    this._handlePlaysinlineChange(isPlayingInline());
+    const observer = new MutationObserver(() => this._handlePlaysinlineChange(isPlayingInline()));
+    observer.observe(this.mediaElement, { attributeFilter: ["playsinline"] });
+    this._mediaElementDisposal.add(() => observer.disconnect());
+  }
+  _handlePlaysinlineChange(playsinline) {
+    this.dispatchEvent(vdsEvent("vds-playsinline-change", { detail: playsinline }));
+  }
+  _observeMediaSources() {
+    this._handleSrcChange(this._getMediaSources());
+    const observer = new MutationObserver(() => this._handleSrcChange(this._getMediaSources()));
+    observer.observe(this.mediaElement, { attributeFilter: ["src"], subtree: true });
+    this._mediaElementDisposal.add(() => observer.disconnect());
+  }
+  _handleSrcChange(sources) {
+    const prevSources = this.state.src;
+    if (!isScalarArrayEqual(prevSources, sources)) {
+      this.dispatchEvent(vdsEvent("vds-src-change", { detail: sources }));
+    }
+  }
+  _getMediaSources() {
+    const resources = [
+      this.mediaElement?.src,
+      ...Array.from(this.mediaElement?.querySelectorAll("source") ?? []).map(
+        (source) => source.src
+      )
+    ].filter(Boolean);
+    return Array.from(new Set(resources));
+  }
+  _getMediaMetadata() {
+    return {
+      src: this.state.src,
+      currentSrc: this.mediaElement.currentSrc,
+      duration: this.mediaElement.duration || 0,
+      poster: this.mediaElement.poster,
+      mediaType: this._getMediaType(),
+      viewType: this.state.viewType
+    };
+  }
+  _attachMediaEventListeners() {
+    if (isNil(this.mediaElement))
+      return;
+    const mediaEventListeners = {
+      abort: this._handleAbort,
+      canplay: this._handleCanPlay,
+      canplaythrough: this._handleCanPlayThrough,
+      durationchange: this._handleDurationChange,
+      emptied: this._handleEmptied,
+      ended: this._handleEnded,
+      error: this._handleError,
+      loadeddata: this._handleLoadedData,
+      loadedmetadata: this._handleLoadedMetadata,
+      loadstart: this._handleLoadStart,
+      pause: this._handlePause,
+      play: this._handlePlay,
+      playing: this._handlePlaying,
+      progress: this._handleProgress,
+      ratechange: this._handleRateChange,
+      seeked: this._handleSeeked,
+      seeking: this._handleSeeking,
+      stalled: this._handleStalled,
+      suspend: this._handleSuspend,
+      volumechange: this._handleVolumeChange,
+      waiting: this._handleWaiting
+    };
+    keysOf(mediaEventListeners).forEach((type) => {
+      const handler = mediaEventListeners[type].bind(this);
+      const off = listen(this.mediaElement, type, async (event) => {
+        await handler(event);
+      });
+      this._mediaElementDisposal.add(off);
+    });
+  }
+  _handleAbort(event) {
+    if (this._ignoreNextAbortEvent)
+      return;
+    this.dispatchEvent(vdsEvent("vds-abort", { triggerEvent: event }));
+    this._handleCurrentSrcChange("", event);
+  }
+  _handleCanPlay(event) {
+    this._handleMediaReady({ event, duration: this.mediaElement.duration });
+  }
+  _handleCanPlayThrough(event) {
+    if (this.state.started)
+      return;
+    this.dispatchEvent(
+      vdsEvent("vds-can-play-through", {
+        triggerEvent: event,
+        detail: { duration: this.mediaElement.duration }
+      })
+    );
+  }
+  _handleLoadStart(event) {
+    this._handleCurrentSrcChange(this.mediaElement.currentSrc, event);
+    if (this.mediaElement.currentSrc === "") {
+      this._handleAbort();
+      return;
+    }
+    this.dispatchEvent(
+      vdsEvent("vds-load-start", {
+        triggerEvent: event,
+        detail: this._getMediaMetadata()
+      })
+    );
+  }
+  _handleEmptied(event) {
+    if (this._ignoreNextEmptiedEvent)
+      return;
+    this.dispatchEvent(vdsEvent("vds-emptied", { triggerEvent: event }));
+  }
+  _handleLoadedData(event) {
+    this.dispatchEvent(vdsEvent("vds-loaded-data", { triggerEvent: event }));
+  }
+  _handleLoadedMetadata(event) {
+    this.dispatchEvent(
+      vdsEvent("vds-volume-change", {
+        detail: {
+          volume: this.mediaElement.volume,
+          muted: this.mediaElement.muted
+        }
+      })
+    );
+    this.dispatchEvent(
+      vdsEvent("vds-loaded-metadata", {
+        triggerEvent: event,
+        detail: this._getMediaMetadata()
+      })
+    );
+  }
+  _determineMediaType(event) {
+    this.dispatchEvent(
+      vdsEvent("vds-media-type-change", {
+        detail: this._getMediaType(),
+        triggerEvent: event
+      })
+    );
+  }
+  _handlePlay(event) {
+    const playEvent = vdsEvent("vds-play", { triggerEvent: event });
+    playEvent.autoplay = this._attemptingAutoplay;
+    this.dispatchEvent(playEvent);
+  }
+  _handlePause(event) {
+    if (this.mediaElement.readyState === 1 && !this._isMediaWaiting) {
+      return;
+    }
+    this._isMediaWaiting = false;
+    this._cancelTimeUpdates();
+    this.dispatchEvent(vdsEvent("vds-pause", { triggerEvent: event }));
+  }
+  _handlePlaying(event) {
+    this._isMediaWaiting = false;
+    const playingEvent = vdsEvent("vds-playing", { triggerEvent: event });
+    this.dispatchEvent(playingEvent);
+    this._requestTimeUpdates();
+  }
+  _handleDurationChange(event) {
+    if (this.mediaElement.ended) {
+      this._updateCurrentTime(this.mediaElement.duration, event);
+    }
+    this.dispatchEvent(
+      vdsEvent("vds-duration-change", {
+        detail: this.mediaElement.duration,
+        triggerEvent: event
+      })
+    );
+  }
+  _handleProgress(event) {
+    this.dispatchEvent(
+      vdsEvent("vds-progress", {
+        triggerEvent: event,
+        detail: {
+          buffered: this.mediaElement.buffered,
+          seekable: this.mediaElement.seekable
+        }
+      })
+    );
+  }
+  _handleRateChange(event) {
+    throw Error("Not implemented");
+  }
+  _handleSeeking(event) {
+    this.dispatchEvent(
+      vdsEvent("vds-seeking", {
+        detail: this.mediaElement.currentTime,
+        triggerEvent: event
+      })
+    );
+  }
+  _handleSeeked(event) {
+    const seekedEvent = vdsEvent("vds-seeked", {
+      detail: this.mediaElement.currentTime,
+      triggerEvent: event
+    });
+    this.dispatchEvent(seekedEvent);
+    const currentTime = this.mediaElement.currentTime;
+    if (Math.trunc(currentTime) === Math.trunc(this.mediaElement.duration) && getNumberOfDecimalPlaces(this.mediaElement.duration) > getNumberOfDecimalPlaces(currentTime)) {
+      this._updateCurrentTime(this.mediaElement.duration, event);
+      if (!this.mediaElement.ended) {
+        try {
+          this.play();
+        } catch (e) {
+        }
+      }
+    }
+  }
+  _handleStalled(event) {
+    this.dispatchEvent(vdsEvent("vds-stalled", { triggerEvent: event }));
+    if (this.mediaElement.readyState < 3) {
+      this._isMediaWaiting = true;
+      this.dispatchEvent(vdsEvent("vds-waiting", { triggerEvent: event }));
+    }
+  }
+  _handleVolumeChange(event) {
+    this.dispatchEvent(
+      vdsEvent("vds-volume-change", {
+        detail: {
+          volume: this.mediaElement.volume,
+          muted: this.mediaElement.muted
+        },
+        triggerEvent: event
+      })
+    );
+  }
+  _handleWaiting(event) {
+    if (this.mediaElement.readyState < 3) {
+      this._isMediaWaiting = true;
+      this.dispatchEvent(vdsEvent("vds-waiting", { triggerEvent: event }));
+    }
+  }
+  _handleSuspend(event) {
+    const suspendEvent = vdsEvent("vds-suspend", { triggerEvent: event });
+    this.dispatchEvent(suspendEvent);
+  }
+  _handleEnded(event) {
+    this._cancelTimeUpdates();
+    this._updateCurrentTime(this.mediaElement.duration, event);
+    const endEvent = vdsEvent("vds-end", { triggerEvent: event });
+    this.dispatchEvent(endEvent);
+    if (this.state.loop) {
+      this._handleLoop();
+    } else {
+      this.dispatchEvent(vdsEvent("vds-ended", { triggerEvent: event }));
+    }
+  }
+  _handleLoop() {
+    const hasCustomControls = isNil(this.controls);
+    if (hasCustomControls) {
+      this.mediaElement.controls = false;
+    }
+    this.dispatchEvent(vdsEvent("vds-loop-request"));
+  }
+  _handleError(event) {
+    const mediaError = this.mediaElement.error;
+    if (!mediaError)
+      return;
+    this.dispatchEvent(
+      vdsEvent("vds-error", {
+        detail: {
+          message: mediaError.message,
+          code: mediaError.code,
+          mediaError
+        },
+        triggerEvent: event
+      })
+    );
+  }
+  _getPaused() {
+    return this.mediaElement?.paused ?? true;
+  }
+  _getVolume() {
+    return this.mediaElement?.volume ?? 1;
+  }
+  _setVolume(newVolume) {
+    this.mediaElement.volume = newVolume;
+  }
+  _getCurrentTime() {
+    return this.mediaElement?.currentTime ?? 0;
+  }
+  _setCurrentTime(newTime) {
+    if (this.mediaElement.currentTime !== newTime) {
+      this.mediaElement.currentTime = newTime;
+    }
+  }
+  _getMuted() {
+    return this.mediaElement?.muted ?? false;
+  }
+  _setMuted(isMuted) {
+    this.mediaElement.muted = isMuted;
+  }
+  async play() {
+    try {
+      this._throwIfNotReadyForPlayback();
+      await this._resetPlaybackIfEnded();
+      return this.mediaElement?.play();
+    } catch (error) {
+      const playErrorEvent = vdsEvent("vds-play-fail");
+      playErrorEvent.autoplay = this._attemptingAutoplay;
+      playErrorEvent.error = error;
+      throw error;
+    }
+  }
+  async pause() {
+    return this.mediaElement?.pause();
+  }
+  _getMediaType() {
+    return getMediaTypeFromExt(this.state.currentSrc);
+  }
+};
+__decorateClass([
+  e()
+], Html5MediaElement.prototype, "preload", 2);
+
+var AudioElement = class extends Html5MediaElement {
+  static get styles() {
+    return [
+      i$1`:host{display:inline-block}:host([hidden]){display:none}`
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(
+      vdsEvent("vds-view-type-change", {
+        detail: "audio" /* Audio */
+      })
+    );
+  }
+};
+
+safelyDefineCustomElement("vds-audio", AudioElement);
+
+var toggleButtonElementStyles = i$1`:host{display:table;contain:content;user-select:none;cursor:pointer;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host(:focus){outline:0}:host(:focus-visible){outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host(.focus-visible){outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}`;
+
+// src/ui/toggle-button/ToggleButtonElement.ts
+var ToggleButtonElement = class extends s {
+  constructor() {
+    super();
+    this.pressed = false;
+    this.disabled = false;
+    this._handleButtonClickCapture = eventListener(
+      this,
+      "click",
+      (event) => {
+        if (this.disabled) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        }
+      },
+      { capture: true }
+    );
+    focusVisiblePolyfill(this);
+    ["pointerup", "keydown"].forEach((eventType) => {
+      eventListener(this, eventType, (event) => {
+        if (this.disabled || isKeyboardEvent(event) && !isKeyboardClick(event)) {
+          return;
+        }
+        this._handleButtonClick(event);
+      });
+    });
+  }
+  static get styles() {
+    return [toggleButtonElementStyles];
+  }
+  static get parts() {
+    return [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    setAttributeIfEmpty(this, "tabindex", "0");
+    setAttributeIfEmpty(this, "role", "button");
+    this._updateAriaPressedAttr();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("pressed")) {
+      this._updateAriaPressedAttr();
+    }
+  }
+  _updateAriaPressedAttr() {
+    setAttribute(this, "aria-pressed", this.pressed ? "true" : "false");
+  }
+  render() {
+    return this._renderDefaultSlot();
+  }
+  _renderDefaultSlot() {
+    return y`<slot></slot>`;
+  }
+  _handleButtonClick(event) {
+    this.pressed = !this.pressed;
+  }
+};
+__decorateClass([
+  e({ type: Boolean })
+], ToggleButtonElement.prototype, "pressed", 2);
+__decorateClass([
+  e({ type: Boolean, reflect: true })
+], ToggleButtonElement.prototype, "disabled", 2);
+
+// src/media/interact/MediaRemoteControl.ts
+var MediaRemoteControl = class {
+  constructor(_host) {
+    if (_host) {
+      this._target = _host;
+      this._createLogger(_host);
+      this._requests = hostRequestQueue(_host);
+    } else {
+      this._requests = new RequestQueue();
+    }
+  }
+  startLoading(triggerEvent) {
+    this._dispatchRequest("vds-start-loading", { triggerEvent });
+  }
+  play(triggerEvent) {
+    this._dispatchRequest("vds-play-request", { triggerEvent });
+  }
+  pause(triggerEvent) {
+    this._dispatchRequest("vds-pause-request", { triggerEvent });
+  }
+  mute(triggerEvent) {
+    this._dispatchRequest("vds-mute-request", { triggerEvent });
+  }
+  unmute(triggerEvent) {
+    this._dispatchRequest("vds-unmute-request", { triggerEvent });
+  }
+  enterFullscreen(target, triggerEvent) {
+    this._dispatchRequest("vds-enter-fullscreen-request", {
+      triggerEvent,
+      detail: target
+    });
+  }
+  exitFullscreen(target, triggerEvent) {
+    this._dispatchRequest("vds-exit-fullscreen-request", {
+      triggerEvent,
+      detail: target
+    });
+  }
+  seeking(time, triggerEvent) {
+    this._dispatchRequest("vds-seeking-request", {
+      detail: time,
+      triggerEvent
+    });
+  }
+  seek(time, triggerEvent) {
+    this._dispatchRequest("vds-seek-request", {
+      detail: time,
+      triggerEvent
+    });
+  }
+  changeVolume(volume, triggerEvent) {
+    this._dispatchRequest("vds-volume-change-request", {
+      detail: volume,
+      triggerEvent
+    });
+  }
+  resumeUserIdle(triggerEvent) {
+    this._dispatchRequest("vds-resume-user-idle-request", { triggerEvent });
+  }
+  pauseUserIdle(triggerEvent) {
+    this._dispatchRequest("vds-pause-user-idle-request", { triggerEvent });
+  }
+  showPoster(triggerEvent) {
+    this._dispatchRequest("vds-show-poster-request", { triggerEvent });
+  }
+  hidePoster(triggerEvent) {
+    this._dispatchRequest("vds-hide-poster-request", { triggerEvent });
+  }
+  setTarget(target) {
+    if (this._target === target)
+      return;
+    this._target = target;
+    if (target) {
+      this._createLogger(target);
+      this._requests.start();
+    } else {
+      this._requests.stop();
+    }
+  }
+  _dispatchRequest(type, eventInit) {
+    this._requests.queue(type, () => {
+      const request = vdsEvent(type, {
+        ...eventInit,
+        bubbles: true,
+        composed: true
+      });
+      this._target?.dispatchEvent(request);
+    });
+  }
+  _createLogger(target) {
+  }
+};
+
+var PlayButtonElement = class extends ToggleButtonElement {
+  constructor() {
+    super();
+    this._mediaRemote = new MediaRemoteControl(this);
+    mediaStoreSubscription(this, "paused", ($paused) => {
+      this.pressed = !$paused;
+      setAttribute(this, "paused", $paused);
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    setAttributeIfEmpty(this, "aria-label", "Play");
+  }
+  _handleButtonClick(event) {
+    if (this.disabled)
+      return;
+    if (this.pressed) {
+      this._mediaRemote.pause(event);
+    } else {
+      this._mediaRemote.play(event);
+    }
+  }
+};
+
+safelyDefineCustomElement("vds-play-button", PlayButtonElement);
+
+var MuteButtonElement = class extends ToggleButtonElement {
+  constructor() {
+    super();
+    this._mediaRemote = new MediaRemoteControl(this);
+    this._volume = 1;
+    this._muted = false;
+    mediaStoreSubscription(this, "volume", ($volume) => {
+      this._volume = $volume;
+      this._handleMutedChange();
+    });
+    mediaStoreSubscription(this, "muted", ($muted) => {
+      this._muted = $muted;
+      this._handleMutedChange();
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    setAttributeIfEmpty(this, "aria-label", "Mute");
+  }
+  _handleMutedChange() {
+    const muted = this._muted || this._volume === 0;
+    this.pressed = muted;
+    setAttribute(this, "muted", muted);
+  }
+  _handleButtonClick(event) {
+    if (this.disabled)
+      return;
+    if (this.pressed) {
+      this._mediaRemote.unmute(event);
+    } else {
+      this._mediaRemote.mute(event);
+    }
+  }
+};
+
+safelyDefineCustomElement("vds-mute-button", MuteButtonElement);
+
+// src/ui/slider/store.ts
+function createSliderStore() {
+  const dragging = writable(false);
+  const pointing = writable(false);
+  return {
+    value: writable(50),
+    pointerValue: writable(0),
+    min: writable(0),
+    max: writable(100),
+    dragging,
+    pointing,
+    interactive: derived([dragging, pointing], ([$dragging, $pointing]) => $dragging || $pointing)
+  };
+}
+var sliderStoreContext = createContext(createSliderStore);
+
+var sliderElementStyles = i$1`*{box-sizing:border-box;touch-action:none}:host{display:block;contain:layout;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host(:focus){outline:0}:host(:focus-visible){outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host(.focus-visible){outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}`;
+
+// src/ui/slider/SliderElement.ts
+var SliderKeyDirection = /* @__PURE__ */ ((SliderKeyDirection2) => {
+  SliderKeyDirection2[SliderKeyDirection2["Left"] = -1] = "Left";
+  SliderKeyDirection2[SliderKeyDirection2["ArrowLeft"] = -1] = "ArrowLeft";
+  SliderKeyDirection2[SliderKeyDirection2["Up"] = -1] = "Up";
+  SliderKeyDirection2[SliderKeyDirection2["ArrowUp"] = -1] = "ArrowUp";
+  SliderKeyDirection2[SliderKeyDirection2["Right"] = 1] = "Right";
+  SliderKeyDirection2[SliderKeyDirection2["ArrowRight"] = 1] = "ArrowRight";
+  SliderKeyDirection2[SliderKeyDirection2["Down"] = 1] = "Down";
+  SliderKeyDirection2[SliderKeyDirection2["ArrowDown"] = 1] = "ArrowDown";
+  return SliderKeyDirection2;
+})(SliderKeyDirection || {});
+var SliderElement = class extends s {
+  constructor() {
+    super();
+    this._sliderStoreProvider = sliderStoreContext.provide(this);
+    this.disabled = false;
+    this.value = 50;
+    this._step = 1;
+    this._keyboardStep = 1;
+    this.shiftKeyMultiplier = 5;
+    this.customValueText = false;
+    this._mediaRemote = new MediaRemoteControl(this);
+    this._disconnectDisposal = new DisposalBin();
+    this._handlePointerEnter = eventListener(this, "pointerenter", () => {
+      if (this.disabled)
+        return;
+      this.setAttribute("pointing", "");
+      this.store.pointing.set(true);
+    });
+    this._handlePointerMove = eventListener(this, "pointermove", (event) => {
+      if (this.disabled || this.isDragging)
+        return;
+      const value = this._getValueBasedOnThumbPosition(event);
+      this.store.pointerValue.set(value);
+      this._dispatchPointerValueChange(event);
+    });
+    this._handlePointerLeave = eventListener(this, "pointerleave", () => {
+      if (this.disabled)
+        return;
+      this.removeAttribute("pointing");
+      this.store.pointing.set(false);
+    });
+    this._handlePointerDown = eventListener(this, "pointerdown", (event) => {
+      if (this.disabled)
+        return;
+      this._startDragging(event);
+      this._onDrag(event);
+    });
+    this._handleKeydown = eventListener(this, "keydown", (event) => {
+      if (this.disabled)
+        return;
+      const { key, shiftKey } = event;
+      const isValidKey = Object.keys(SliderKeyDirection).includes(key);
+      if (!isValidKey)
+        return;
+      const modifiedStep = !shiftKey ? this.keyboardStep : this.keyboardStep * this.shiftKeyMultiplier;
+      const direction = Number(SliderKeyDirection[key]);
+      const diff = modifiedStep * direction;
+      const steps = (this.value + diff) / this.step;
+      const value = this.step * steps;
+      this.value = this._getClampedValue(value);
+      this._dispatchValueChange(event);
+    });
+    this._handleFillValueChange = eventListener(
+      this,
+      "vds-slider-value-change",
+      this._updateFillCSSProps.bind(this)
+    );
+    this._handlePointerValueChange = eventListener(
+      this,
+      "vds-slider-pointer-value-change",
+      this._updatePointerCSSProps.bind(this)
+    );
+    this._onDrag = rafThrottle((event) => {
+      if (this.disabled || !this.isDragging)
+        return;
+      const value = this._getValueBasedOnThumbPosition(event);
+      this.store.pointerValue.set(value);
+      this._dispatchPointerValueChange(event);
+    });
+    this._handleDocumentPointerUp = eventListener(
+      this,
+      "pointerup",
+      (event) => {
+        if (this.disabled || !this.isDragging)
+          return;
+        this._stopDragging(event);
+      },
+      { target: document }
+    );
+    this._handleDocumentTouchMove = eventListener(
+      this,
+      "touchmove",
+      (event) => {
+        if (this.disabled || !this.isDragging)
+          return;
+        event.preventDefault();
+      },
+      { target: document, passive: false }
+    );
+    this._handleDocumentPointerMove = eventListener(
+      this,
+      "pointermove",
+      (event) => {
+        if (this.disabled || !this.isDragging)
+          return;
+        this._onDrag(event);
+      },
+      { target: document }
+    );
+    this._lastDispatchedValue = this.value;
+    this._dispatchValueChange = rafThrottle((event) => {
+      if (this.value === this._lastDispatchedValue)
+        return;
+      this.dispatchEvent(
+        vdsEvent("vds-slider-value-change", {
+          detail: this.value,
+          triggerEvent: event
+        })
+      );
+      this._lastDispatchedValue = this.value;
+    });
+    this._lastDispatchedPointerValue = this.pointerValue;
+    this._dispatchPointerValueChange = rafThrottle((event) => {
+      if (this.pointerValue === this._lastDispatchedPointerValue)
+        return;
+      const events = [
+        "vds-slider-pointer-value-change",
+        this.isDragging && "vds-slider-drag-value-change"
+      ];
+      events.forEach((eventType) => {
+        if (eventType) {
+          this.dispatchEvent(
+            vdsEvent(eventType, {
+              detail: this.pointerValue,
+              triggerEvent: event
+            })
+          );
+        }
+      });
+      this._lastDispatchedPointerValue = this.pointerValue;
+    });
+    focusVisiblePolyfill(this);
+  }
+  static get styles() {
+    return [sliderElementStyles];
+  }
+  static get parts() {
+    return [];
+  }
+  get store() {
+    return this._sliderStoreProvider.value;
+  }
+  get min() {
+    return getStoreValue(this.store.min);
+  }
+  set min(newMin) {
+    this.store.min.set(newMin);
+  }
+  get max() {
+    return getStoreValue(this.store.max);
+  }
+  set max(newMax) {
+    this.store.max.set(newMax);
+  }
+  get step() {
+    return this._step;
+  }
+  set step(newStep) {
+    this._step = newStep;
+  }
+  get keyboardStep() {
+    return this._keyboardStep;
+  }
+  set keyboardStep(newStep) {
+    this._keyboardStep = newStep;
+  }
+  get isDragging() {
+    return getStoreValue(this.store.dragging);
+  }
+  get fillRate() {
+    const range = this.max - this.min, offset = this.value - this.min;
+    return range > 0 ? offset / range : 0;
+  }
+  get fillPercent() {
+    return this.fillRate * 100;
+  }
+  get pointerValue() {
+    return getStoreValue(this.store.pointerValue);
+  }
+  get pointerRate() {
+    const range = this.max - this.min, offset = this.pointerValue - this.min;
+    return range > 0 ? offset / range : 0;
+  }
+  get pointerPercent() {
+    return this.pointerRate * 100;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._setupAriaAttrs();
+    this._updateFillCSSProps();
+    this._updatePointerCSSProps();
+    this._disconnectDisposal.add(
+      this.store.interactive.subscribe(($interactive) => {
+        setAttribute(this, "interactive", $interactive);
+      })
+    );
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("value") || changedProperties.has("min") || changedProperties.has("max")) {
+      this.value = this._getClampedValue(this.value);
+      this.store.value.set(this.value);
+      this._updateFillCSSProps();
+      this._dispatchValueChange();
+    }
+    if (changedProperties.has("disabled") && this.disabled) {
+      this.store.dragging.set(false);
+      this.store.pointing.set(false);
+      this.removeAttribute("dragging");
+      this.removeAttribute("pointing");
+      this.removeAttribute("interactive");
+      setAttribute(this, "aria-disabled", this.disabled);
+    }
+    if (!this.customValueText) {
+      this._updateAriaValueAttrs();
+    }
+    super.willUpdate(changedProperties);
+  }
+  disconnectedCallback() {
+    this._onDrag.cancel();
+    this._disconnectDisposal.empty();
+    super.disconnectedCallback();
+  }
+  _updateFillCSSProps() {
+    setCSSProperty(this, "fill-value", `${this.value}`);
+    setCSSProperty(this, "fill-rate", `${this.fillRate}`);
+    setCSSProperty(this, "fill-percent", `${this.fillPercent}%`);
+  }
+  _updatePointerCSSProps() {
+    setCSSProperty(this, "pointer-value", `${this.pointerValue}`);
+    setCSSProperty(this, "pointer-rate", `${this.pointerRate}`);
+    setCSSProperty(this, "pointer-percent", `${this.pointerPercent}%`);
+  }
+  render() {
+    return this._renderSlider();
+  }
+  _renderSlider() {
+    return y`${this._renderDefaultSlot()}`;
+  }
+  _renderDefaultSlot() {
+    return y`<slot></slot>`;
+  }
+  _setupAriaAttrs() {
+    setAttributeIfEmpty(this, "role", "slider");
+    setAttributeIfEmpty(this, "tabindex", "0");
+    setAttributeIfEmpty(this, "aria-orientation", "horizontal");
+    setAttributeIfEmpty(this, "autocomplete", "off");
+  }
+  _updateAriaValueAttrs() {
+    this.setAttribute("aria-valuemin", this._getValueMin());
+    this.setAttribute("aria-valuenow", this._getValueNow());
+    this.setAttribute("aria-valuemax", this._getValueMax());
+    this.setAttribute("aria-valuetext", this._getValueText());
+  }
+  _getValueMin() {
+    return String(this.min);
+  }
+  _getValueNow() {
+    return String(this.value);
+  }
+  _getValueMax() {
+    return String(this.max);
+  }
+  _getValueText() {
+    return `${round(this.value / this.max * 100, 2)}%`;
+  }
+  _startDragging(event) {
+    if (this.isDragging)
+      return;
+    this.store.dragging.set(true);
+    this.setAttribute("dragging", "");
+    const value = this._getValueBasedOnThumbPosition(event);
+    this.store.pointerValue.set(value);
+    this._dispatchPointerValueChange(event);
+    this.dispatchEvent(
+      vdsEvent("vds-slider-drag-start", {
+        triggerEvent: event,
+        detail: this.value
+      })
+    );
+    this._mediaRemote.pauseUserIdle(event);
+  }
+  _stopDragging(event) {
+    if (!this.isDragging)
+      return;
+    this.store.dragging.set(false);
+    this._dispatchValueChange.cancel();
+    this.removeAttribute("dragging");
+    const value = this._getValueBasedOnThumbPosition(event);
+    this.value = value;
+    this.store.pointerValue.set(value);
+    this._dispatchValueChange(event);
+    this._dispatchPointerValueChange(event);
+    this.dispatchEvent(
+      vdsEvent("vds-slider-drag-end", {
+        triggerEvent: event,
+        detail: this.value
+      })
+    );
+    this._mediaRemote.resumeUserIdle(event);
+  }
+  _getClampedValue(value) {
+    return clampNumber(this.min, round(value, getNumberOfDecimalPlaces(this.step)), this.max);
+  }
+  _getValueFromRate(rate) {
+    const boundRate = clampNumber(0, rate, 1);
+    const range = this.max - this.min;
+    const fill = range * boundRate;
+    const stepRatio = Math.round(fill / this.step);
+    const steps = this.step * stepRatio;
+    return this.min + steps;
+  }
+  _getValueBasedOnThumbPosition(event) {
+    const thumbClientX = event.clientX;
+    const { left: trackLeft, width: trackWidth } = this.getBoundingClientRect();
+    const thumbPositionRate = (thumbClientX - trackLeft) / trackWidth;
+    return this._getValueFromRate(thumbPositionRate);
+  }
+};
+__decorateClass([
+  e({ type: Number })
+], SliderElement.prototype, "min", 1);
+__decorateClass([
+  e({ type: Number })
+], SliderElement.prototype, "max", 1);
+__decorateClass([
+  e({ reflect: true, type: Boolean })
+], SliderElement.prototype, "disabled", 2);
+__decorateClass([
+  e({ type: Number })
+], SliderElement.prototype, "value", 2);
+__decorateClass([
+  e({ type: Number })
+], SliderElement.prototype, "step", 1);
+__decorateClass([
+  e({ attribute: "keyboard-step", type: Number })
+], SliderElement.prototype, "keyboardStep", 1);
+__decorateClass([
+  e({ attribute: "shift-key-multiplier", type: Number })
+], SliderElement.prototype, "shiftKeyMultiplier", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "custom-value-text" })
+], SliderElement.prototype, "customValueText", 2);
+
+var timeSliderElementStyles = i$1``;
+
+// src/ui/time-slider/TimeSliderElement.ts
+var TimeSliderElement = class extends SliderElement {
+  constructor() {
+    super();
+    this._step = 0.1;
+    this.value = 0;
+    this.valueText = "{currentTime} out of {duration}";
+    this.pauseWhileDragging = false;
+    this.seekingRequestThrottle = 100;
+    this.__mediaDuration = 0;
+    this.__mediaPaused = true;
+    this._handleSliderDragStart = eventListener(
+      this,
+      "vds-slider-drag-start",
+      (event) => {
+        this._togglePlaybackWhileDragging(event);
+      }
+    );
+    this._handleSliderValueChange = eventListener(
+      this,
+      "vds-slider-value-change",
+      (event) => {
+        if (isKeyboardEvent(event.originEvent)) {
+          this._dispatchSeekingRequest.cancel();
+          this._mediaRemote.seek(this.value, event);
+        }
+      }
+    );
+    this._handleSliderDragValueChange = eventListener(
+      this,
+      "vds-slider-drag-value-change",
+      (event) => {
+        this._dispatchSeekingRequest(event);
+      }
+    );
+    this._handleSliderDragEnd = eventListener(this, "vds-slider-drag-end", (event) => {
+      this._dispatchSeekingRequest.cancel();
+      this._mediaRemote.seek(this.value, event);
+      this._togglePlaybackWhileDragging(event);
+    });
+    this._dispatchSeekingRequest = functionThrottle((event) => {
+      this._mediaRemote.seeking(this.value, event);
+    }, this.seekingRequestThrottle);
+    this._wasPlayingBeforeDragStart = false;
+    mediaStoreSubscription(this, "currentTime", ($currentTime) => {
+      this.value = $currentTime;
+    });
+    mediaStoreSubscription(this, "duration", ($duration) => {
+      this.__mediaDuration = $duration;
+      this.requestUpdate("max");
+    });
+    mediaStoreSubscription(this, "paused", ($paused) => {
+      this.__mediaPaused = $paused;
+    });
+  }
+  static get styles() {
+    return [super.styles, timeSliderElementStyles];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    setAttributeIfEmpty(this, "aria-label", "Media time");
+  }
+  get min() {
+    return 0;
+  }
+  set min(_) {
+  }
+  get max() {
+    return this.__mediaDuration;
+  }
+  set max(_) {
+  }
+  update(changedProperties) {
+    if (changedProperties.has("disabled") && this.disabled) {
+      this._dispatchSeekingRequest.cancel();
+    }
+    super.update(changedProperties);
+  }
+  disconnectedCallback() {
+    this._dispatchSeekingRequest.cancel();
+    super.disconnectedCallback();
+  }
+  _getValueMin() {
+    return "0%";
+  }
+  _getValueNow() {
+    return `${Math.round(this.fillPercent)}%`;
+  }
+  _getValueText() {
+    return this.valueText.replace("{currentTime}", formatSpokenTime(this.value)).replace("{duration}", formatSpokenTime(this.__mediaDuration));
+  }
+  _getValueMax() {
+    return "100%";
+  }
+  _togglePlaybackWhileDragging(event) {
+    if (!this.pauseWhileDragging)
+      return;
+    if (this.isDragging && !this.__mediaPaused) {
+      this._wasPlayingBeforeDragStart = true;
+      this._mediaRemote.pause(event);
+    } else if (this._wasPlayingBeforeDragStart && !this.isDragging && this.__mediaPaused) {
+      this._wasPlayingBeforeDragStart = false;
+      this._mediaRemote.play(event);
+    }
+  }
+};
+__decorateClass([
+  e({ attribute: false, state: true })
+], TimeSliderElement.prototype, "value", 2);
+__decorateClass([
+  e({ attribute: false })
+], TimeSliderElement.prototype, "min", 1);
+__decorateClass([
+  e({ attribute: false })
+], TimeSliderElement.prototype, "max", 1);
+__decorateClass([
+  e({ attribute: "value-text" })
+], TimeSliderElement.prototype, "valueText", 2);
+__decorateClass([
+  e({ attribute: "pause-while-dragging", type: Boolean })
+], TimeSliderElement.prototype, "pauseWhileDragging", 2);
+__decorateClass([
+  e({ attribute: "seeking-request-throttle", type: Number })
+], TimeSliderElement.prototype, "seekingRequestThrottle", 2);
+__decorateClass([
+  t()
+], TimeSliderElement.prototype, "__mediaDuration", 2);
+__decorateClass([
+  t()
+], TimeSliderElement.prototype, "__mediaPaused", 2);
+
+safelyDefineCustomElement("vds-time-slider", TimeSliderElement);
+
+var VolumeSliderElement = class extends SliderElement {
+  constructor() {
+    super();
+    this.value = 100;
+    this._handleSliderValueChange = eventListener(
+      this,
+      "vds-slider-value-change",
+      this._changeVolume.bind(this)
+    );
+    this._handleSliderDragValueChange = eventListener(
+      this,
+      "vds-slider-drag-value-change",
+      this._changeVolume.bind(this)
+    );
+    mediaStoreSubscription(this, "volume", ($volume) => {
+      this.value = $volume * 100;
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    setAttributeIfEmpty(this, "aria-label", "Media volume");
+  }
+  get min() {
+    return 0;
+  }
+  set min(_) {
+  }
+  get max() {
+    return 100;
+  }
+  set max(_) {
+  }
+  _changeVolume(event) {
+    const newVolume = event.detail;
+    const mediaVolume = round(newVolume / 100, 3);
+    this._mediaRemote.changeVolume(mediaVolume, event);
+  }
+};
+__decorateClass([
+  e({ attribute: false })
+], VolumeSliderElement.prototype, "min", 1);
+__decorateClass([
+  e({ attribute: false })
+], VolumeSliderElement.prototype, "max", 1);
+__decorateClass([
+  e({ attribute: false, state: true })
+], VolumeSliderElement.prototype, "value", 2);
+
+safelyDefineCustomElement("vds-volume-slider", VolumeSliderElement);
+
+var SliderValueTextElement = class extends s {
+  constructor() {
+    super(...arguments);
+    this._disposal = new DisposalBin();
+    this._sliderStoreConsumer = sliderStoreContext.consume(this);
+    this.__value = 0;
+    this.type = "current";
+    this.showHours = false;
+    this.padHours = false;
+    this.decimalPlaces = 2;
+  }
+  static get styles() {
+    return [
+      i$1`:host{display:inline-block;contain:content}:host([hidden]){display:none}`
+    ];
+  }
+  get _sliderStore() {
+    return this._sliderStoreConsumer.value;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleTypeChange();
+  }
+  update(changedProperties) {
+    if (changedProperties.has("type") || changedProperties.has("format")) {
+      this._handleTypeChange();
+    }
+    super.update(changedProperties);
+  }
+  disconnectedCallback() {
+    this._disposal.empty();
+    super.disconnectedCallback();
+  }
+  render() {
+    return y`${this._getValueText()}`;
+  }
+  _handleTypeChange() {
+    this._disposal.empty();
+    const valueStore = this._sliderStore[this.type === "current" ? "value" : "pointerValue"];
+    const store = this.format === "percent" ? this._createPercentStore(valueStore) : valueStore;
+    const unsub = store.subscribe(($value) => {
+      this.__value = $value;
+    });
+    this._disposal.add(unsub);
+  }
+  _createPercentStore(valueStore) {
+    return derived(
+      [valueStore, this._sliderStore.min, this._sliderStore.max],
+      ([$value, $min, $max]) => {
+        const range = $max - $min;
+        return $value / range * 100;
+      }
+    );
+  }
+  _getValueText() {
+    switch (this.format) {
+      case "percent":
+        return this._getPercentFormat();
+      case "time":
+        return this._getTimeFormat();
+      default:
+        return `${this.__value}`;
+    }
+  }
+  _getPercentFormat() {
+    return `${round(this.__value, this.decimalPlaces)}%`;
+  }
+  _getTimeFormat() {
+    return formatTime(this.__value, this.padHours, this.showHours);
+  }
+};
+__decorateClass([
+  t()
+], SliderValueTextElement.prototype, "__value", 2);
+__decorateClass([
+  e()
+], SliderValueTextElement.prototype, "type", 2);
+__decorateClass([
+  e()
+], SliderValueTextElement.prototype, "format", 2);
+__decorateClass([
+  e({ attribute: "show-hours", type: Boolean })
+], SliderValueTextElement.prototype, "showHours", 2);
+__decorateClass([
+  e({ attribute: "pad-hours", type: Boolean })
+], SliderValueTextElement.prototype, "padHours", 2);
+__decorateClass([
+  e({ attribute: "decimal-places", type: Number })
+], SliderValueTextElement.prototype, "decimalPlaces", 2);
+
+safelyDefineCustomElement("vds-slider-value-text", SliderValueTextElement);
+
+var TimeElement = class extends s {
+  constructor() {
+    super(...arguments);
+    this._disposal = new DisposalBin();
+    this._mediaStoreConsumer = mediaStoreContext.consume(this);
+    this.__seconds = 0;
+    this.type = "current";
+    this.showHours = false;
+    this.padHours = false;
+    this.remainder = false;
+  }
+  static get styles() {
+    return [
+      i$1`:host{display:inline-block;contain:content}:host([hidden]){display:none}`
+    ];
+  }
+  get _mediaStore() {
+    return this._mediaStoreConsumer.value;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleTypeChange();
+  }
+  update(changedProperties) {
+    if (changedProperties.has("type") || changedProperties.has("remainder")) {
+      this._handleTypeChange();
+    }
+    super.update(changedProperties);
+  }
+  disconnectedCallback() {
+    this._disposal.empty();
+    super.disconnectedCallback();
+  }
+  render() {
+    return y`${this._getFormattedTime()}`;
+  }
+  _handleTypeChange() {
+    this._disposal.empty();
+    const store = this._getTypeStore();
+    const unsub = (this.remainder ? this._createRemainderStore(store) : store).subscribe(
+      ($seconds) => {
+        this.__seconds = $seconds;
+      }
+    );
+    this._disposal.add(unsub);
+  }
+  _getTypeStore() {
+    switch (this.type) {
+      case "buffered":
+        return this._mediaStore.bufferedAmount;
+      case "seekable":
+        return this._mediaStore.seekableAmount;
+      case "duration":
+        return this._mediaStore.duration;
+      default:
+        return this._mediaStore.currentTime;
+    }
+  }
+  _createRemainderStore(secondsStore) {
+    return derived(
+      [secondsStore, this._mediaStore.duration],
+      ([$seconds, $duration]) => Math.max(0, $duration - $seconds)
+    );
+  }
+  _getFormattedTime() {
+    return formatTime(this.__seconds, this.padHours, this.showHours);
+  }
+};
+__decorateClass([
+  t()
+], TimeElement.prototype, "__seconds", 2);
+__decorateClass([
+  e()
+], TimeElement.prototype, "type", 2);
+__decorateClass([
+  e({ attribute: "show-hours", type: Boolean })
+], TimeElement.prototype, "showHours", 2);
+__decorateClass([
+  e({ attribute: "pad-hours", type: Boolean })
+], TimeElement.prototype, "padHours", 2);
+__decorateClass([
+  e({ type: Boolean })
+], TimeElement.prototype, "remainder", 2);
+
+safelyDefineCustomElement("vds-time", TimeElement);
+
+const stzhAudioCss = ".sc-stzh-audio-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-audio-h{display:none}.sc-stzh-audio-h *.sc-stzh-audio,.sc-stzh-audio-h *.sc-stzh-audio::before,.sc-stzh-audio-h *.sc-stzh-audio::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-audio.sc-stzh-audio{display:block;contain:none}.stzh-audio__audio.sc-stzh-audio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-audio__controls.sc-stzh-audio{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.stzh-audio__controls-top.sc-stzh-audio{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--stzh-space-small)}.stzh-audio__controls-bottom.sc-stzh-audio{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-audio__controls.sc-stzh-audio,.stzh-audio__transcript.sc-stzh-audio{border:0.0625rem solid var(--stzh-color-grey25);padding:var(--stzh-space-medium) var(--stzh-space-xlarge)}.stzh-audio__controls.sc-stzh-audio{padding-bottom:var(--stzh-space-xsmall)}.stzh-audio__button.sc-stzh-audio{width:2.5rem;height:2.5rem;display:grid;place-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:var(--stzh-button-border-radius);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color;transition-property:color, background-color;color:var(--stzh-color-grey55)}.stzh-audio__button.is-play.sc-stzh-audio,.stzh-audio__button.is-mute.sc-stzh-audio,.stzh-audio__button.is-transcript.sc-stzh-audio{margin-right:var(--stzh-space-xsmall)}.stzh-audio__button.is-active.sc-stzh-audio{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-audio__button.sc-stzh-audio:hover{color:var(--stzh-color-white);background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-audio__transcript.sc-stzh-audio{border-top:none}.stzh-audio__loader-overlay.sc-stzh-audio{display:grid;place-items:center;position:absolute;z-index:3;top:0;left:0;width:100%;height:100%;background-color:var(--stzh-color-white);opacity:0;visibility:hidden}.stzh-audio__time.sc-stzh-audio{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));display:-ms-inline-flexbox;display:inline-flex;margin-right:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.stzh-audio__time.sc-stzh-audio{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}@media screen and (max-width: 599px){.stzh-audio__time.sc-stzh-audio{margin-right:auto}}.stzh-audio__time-separator.sc-stzh-audio{margin:0 var(--stzh-space-xxsmall)}.stzh-audio__slider.sc-stzh-audio{--height:1.1875rem;--thumb-width:0.8125rem;--track-height:0.3125rem;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:var(--height);border-radius:var(--stzh-button-border-radius)}.stzh-audio__slider.is-time.sc-stzh-audio{-ms-flex-positive:1;flex-grow:1}.stzh-audio__slider.is-volume.sc-stzh-audio{width:20%;min-width:5rem;max-width:6.875rem;display:none}@media screen and (min-width: 600px){.stzh-audio__slider.is-volume.sc-stzh-audio{display:-ms-flexbox;display:flex;margin-right:auto}}.stzh-audio__slider-track.sc-stzh-audio{width:100%;height:var(--track-height);position:absolute;top:50%;left:0;z-index:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);border-radius:0.25rem;background-color:var(--stzh-color-grey25)}.stzh-audio__slider-track.is-fill.sc-stzh-audio{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-transform-origin:left center;transform-origin:left center;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:calc(var(--vds-fill-rate) * 100%);z-index:1}.stzh-audio__slider-thumb-container.sc-stzh-audio{position:absolute;top:0;left:var(--vds-fill-percent);width:var(--thumb-width);height:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:2}.stzh-audio__slider[dragging].sc-stzh-audio .stzh-audio__slider-thumb-container.sc-stzh-audio{left:var(--vds-pointer-percent)}.stzh-audio__slider-thumb.sc-stzh-audio{position:absolute;top:50%;left:0;width:var(--thumb-width);height:var(--thumb-width);border-radius:50%;background-color:var(--stzh-color-white);-webkit-box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.25);box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.25);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.stzh-audio__media-preview-container.sc-stzh-audio{--width:2.625rem;--width-half:calc(var(--width) / 2);--top:-1.5rem;--left-clamp:max(var(--width-half), var(--vds-pointer-percent));--right-clamp:calc(100% - var(--width-half));--left:min(var(--left-clamp), var(--right-clamp));display:grid;place-items:center;position:absolute;width:var(--width);top:var(--top);left:var(--left);width:var(--width);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:var(--stzh-z-index-popover);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);border-radius:var(--stzh-tooltip-border-radius);background-color:var(--stzh-color-white)}@supports ((-webkit-filter: var(--stzh-tooltip-drop-shadow)) or (filter: var(--stzh-tooltip-drop-shadow))){.stzh-audio__media-preview-container.sc-stzh-audio{-webkit-box-shadow:none;box-shadow:none;-webkit-filter:var(--stzh-tooltip-drop-shadow);filter:var(--stzh-tooltip-drop-shadow)}}.stzh-audio__slider[pointing].sc-stzh-audio .stzh-audio__media-preview-container.sc-stzh-audio{opacity:1}.stzh-audio__slider-text.sc-stzh-audio{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-audio[hide-ui].sc-stzh-audio .stzh-audio__controls.sc-stzh-audio{opacity:0;visibility:hidden}.stzh-audio[autoplay-error].sc-stzh-audio .stzh-audio__controls.sc-stzh-audio{opacity:1}.stzh-audio.sc-stzh-audio:not([can-play]) .stzh-audio__loader-overlay.sc-stzh-audio,.stzh-audio[waiting].sc-stzh-audio .stzh-audio__loader-overlay.sc-stzh-audio{opacity:0.8;visibility:visible}.stzh-audio[paused].sc-stzh-audio .stzh-audio__paused.sc-stzh-audio{display:none}.stzh-audio.sc-stzh-audio:not([paused]) .stzh-audio__played.sc-stzh-audio{display:none}.stzh-audio[muted].sc-stzh-audio .stzh-audio__muted.sc-stzh-audio{display:none}.stzh-audio.sc-stzh-audio:not([muted]) .stzh-audio__unmuted.sc-stzh-audio{display:none}";
+
+const StzhAudio = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhPlay = createEvent(this, "stzhPlay", 7);
+    this.stzhPlaying = createEvent(this, "stzhPlaying", 7);
+    this.stzhPause = createEvent(this, "stzhPause", 7);
+    this.stzhReplay = createEvent(this, "stzhReplay", 7);
+    this.stzhEnd = createEvent(this, "stzhEnd", 7);
+    this.stzhEnded = createEvent(this, "stzhEnded", 7);
+    this.stzhError = createEvent(this, "stzhError", 7);
+    this.localization = undefined;
+    this.src = "";
+    this.preload = "none";
+    this.transcript = "";
+    this.transcriptShown = false;
+  }
+  async play() {
+    this.vsdAudioElement.play();
+  }
+  async pause() {
+    this.vsdAudioElement.pause();
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "audio");
+    }
+  }
+  render() {
+    const hasTranscript = !!this.transcript || hasSlot(this.element, "transcript");
+    const classes = {
+      "stzh-audio": true
+    };
+    return (h$2(Host, null, h$2("vds-media", { class: classes }, h$2("vds-audio", { class: "stzh-audio__audio", ref: (el) => (this.vsdAudioElement = el), "onVds-play": () => { this.stzhPlay.emit({ component: "stzh-audio" }); }, "onVds-playing": () => { this.stzhPlaying.emit({ component: "stzh-audio" }); }, "onVds-end": () => { this.stzhEnd.emit({ component: "stzh-audio" }); }, "onVds-ended": () => { this.stzhEnded.emit({ component: "stzh-audio" }); }, "onVds-replay": () => { this.stzhReplay.emit({ component: "stzh-audio" }); }, "onVds-error": (e) => { this.stzhError.emit({ component: "stzh-audio", originalEvent: e }); } }, h$2("audio", { preload: this.preload, src: this.src }, h$2("slot", null))), h$2("div", { class: "stzh-audio__controls" }, h$2("div", { class: "stzh-audio__loader-overlay" }, h$2("stzh-loader", { class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), h$2("div", { class: "stzh-audio__controls-top" }, h$2("vds-time-slider", { class: "stzh-audio__slider is-time" }, h$2("div", { class: "stzh-audio__slider-track" }), h$2("div", { class: "stzh-audio__slider-track is-fill" }), h$2("div", { class: "stzh-audio__slider-thumb-container" }, h$2("div", { class: "stzh-audio__slider-thumb" })), h$2("div", { class: "stzh-audio__media-preview-container" }, h$2("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), h$2("div", { class: "stzh-audio__controls-bottom" }, h$2("stzh-tooltip", null, h$2("vds-play-button", { class: "stzh-audio__button is-play" }, h$2("stzh-icon", { class: "stzh-audio__played", name: "play" }), h$2("stzh-icon", { class: "stzh-audio__paused", name: "close" })), h$2("span", { slot: "content" }, h$2("span", { class: "stzh-audio__played" }, this.localization.play), h$2("span", { class: "stzh-audio__paused" }, this.localization.pause))), h$2("div", { class: "stzh-audio__time" }, h$2("vds-time", { type: "current" }), h$2("span", { class: "stzh-audio__time-separator" }, "/"), h$2("vds-time", { type: "duration" })), h$2("stzh-tooltip", null, h$2("vds-mute-button", { class: "stzh-audio__button is-mute" }, h$2("stzh-icon", { class: "stzh-audio__muted", name: "volume-medium" }), h$2("stzh-icon", { class: "stzh-audio__unmuted", name: "silent-mode" })), h$2("span", { slot: "content" }, h$2("span", { class: "stzh-audio__muted" }, this.localization.mute), h$2("span", { class: "stzh-audio__unmuted" }, this.localization.unmute))), h$2("vds-volume-slider", { class: "stzh-audio__slider is-volume" }, h$2("div", { class: "stzh-audio__slider-track" }), h$2("div", { class: "stzh-audio__slider-track is-fill" }), h$2("div", { class: "stzh-audio__slider-thumb-container" }, h$2("div", { class: "stzh-audio__slider-thumb" })), h$2("div", { class: "stzh-audio__media-preview-container" }, h$2("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "percent" }))), hasTranscript &&
+      h$2("stzh-tooltip", { content: this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript }, h$2("button", { class: {
+          "stzh-audio__button is-transcript": true,
+          "is-active": this.transcriptShown
+        }, onClick: () => this.transcriptShown = !this.transcriptShown }, h$2("stzh-icon", { name: "transcript" }))), h$2("stzh-tooltip", { content: this.localization.download }, h$2("a", { class: "stzh-audio__button is-download", href: this.src, download: "" }, h$2("stzh-icon", { name: "download" }))))), h$2("div", { class: "stzh-audio__transcript", hidden: !this.transcriptShown }, h$2("stzh-text", null, this.transcript ? this.transcript : h$2("slot", { name: "transcript" }))))));
+  }
+  get element() { return getElement(this); }
+};
+StzhAudio.style = stzhAudioCss;
+
+export { StzhAudio as stzh_audio };