@vonage/vivid 5.15.1 → 5.17.0

package/audio-player/definition.js

@@ -1,453 +1,3 @@
-import { B as Button, b as buttonDefinition } from '../unbundled/definition2.js';
-import { VwcSliderElement as Slider, sliderDefinition } from '../slider/definition.js';
-import { VwcMenuElement as Menu, menuDefinition } from '../menu/definition.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { a as MenuItem, m as menuItemDefinition } from '../unbundled/definition.js';
-import { Observable, attr, when, repeat, html } from '@microsoft/fast-element';
-import { M as MediaSkipBy } from '../unbundled/enums.js';
-import { L as Localized } from '../unbundled/localized.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { g as getPlaybackRatesArray } from '../unbundled/playbackRates.js';
-
-const styles = ":host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const SKIP_DIRECTIONS = {
-  FORWARD: 1,
-  BACKWARD: -1
-};
-function formatTime(time) {
-  if (!time || Number.isNaN(time)) {
-    return "0:00";
-  }
-  const min = Math.floor(time / 60);
-  const sec = Math.floor(time % 60);
-  return min + ":" + (sec < 10 ? "0" + sec : sec);
-}
-const PAUSE = true;
-const PLAY = false;
-const validSkipByConverter = {
-  toView(value) {
-    return value;
-  },
-  fromView(value) {
-    return Object.values(MediaSkipBy).includes(value) ? value : void 0;
-  }
-};
-class AudioPlayer extends Localized(VividElement) {
-  constructor() {
-    super();
-    this.playButtonAriaLabel = null;
-    this.pauseButtonAriaLabel = null;
-    this.sliderAriaLabel = null;
-    this.skipForwardButtonAriaLabel = null;
-    this.skipBackwardButtonAriaLabel = null;
-    this.disabled = false;
-    this.notime = false;
-    this.playbackRates = null;
-    this.#playerEl = new Audio();
-    this.#isProgrammaticSliderUpdate = false;
-    this.durationFallback = false;
-    this.#pausedChanged = (pausing) => {
-      if (pausing === this.paused) {
-        this.#setPausedState();
-        return;
-      }
-      if (!this.paused) {
-        this.#playerEl.pause();
-      } else {
-        this.#updateProgress();
-        this.#playerEl.play();
-      }
-      this.#setPausedState();
-    };
-    this.#updateProgress = () => {
-      Observable.notify(this, "currentTime");
-      const duration = this.duration;
-      const currentTime = this.currentTime;
-      const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
-      const percent = isValid ? currentTime / duration * 100 : 0;
-      if (this.#sliderEl) {
-        this.#isProgrammaticSliderUpdate = true;
-        this.#sliderEl.value = percent.toString();
-        this.#isProgrammaticSliderUpdate = false;
-      }
-      if (isValid && percent === 100) {
-        this.pause();
-      }
-    };
-    this.#updateTotalTime = () => {
-      Observable.notify(this, "duration");
-      if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
-        if (this.durationFallback) {
-          this.#fetchAndCacheAudioBuffer();
-        }
-      }
-    };
-    this.#updateCurrentTimeOnSliderChange = () => {
-      if (!this.paused && this.#sliderEl.isDragging) {
-        this.pause();
-        this.#dragInterval = window.setInterval(() => {
-          if (!this.#sliderEl.isDragging) {
-            clearInterval(this.#dragInterval);
-            this.play();
-          }
-        }, 0);
-      }
-      if (this.#isProgrammaticSliderUpdate) {
-        return;
-      }
-      if (this.#playerEl) {
-        this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
-      }
-    };
-    this.#setPausedState = () => {
-      Observable.notify(this, "paused");
-    };
-  }
-  srcChanged() {
-    if (this.src === void 0) {
-      this.setSrc("");
-    } else {
-      this.setSrc(this.src);
-    }
-  }
-  revokeSrc() {
-    const src = this.getCurrentSrc();
-    if (src && src.startsWith("blob:")) {
-      URL.revokeObjectURL(src);
-    }
-  }
-  getCurrentSrc() {
-    return this.#playerEl.currentSrc || this.#playerEl.src || "";
-  }
-  canPlayType(type) {
-    return this.#playerEl.canPlayType(type) !== "";
-  }
-  setSrc(url, blob) {
-    const prevSrc = this.getCurrentSrc();
-    this.revokeSrc();
-    this.#audioBuffer = void 0;
-    if (this.#fetchAbortController) {
-      this.#fetchAbortController.abort();
-      this.#fetchAbortController = void 0;
-    }
-    const newSrc = blob && (this.canPlayType(blob.type) || !url) ? URL.createObjectURL(blob) : url;
-    if (prevSrc) {
-      this.#playerEl.removeAttribute("src");
-    }
-    if (newSrc || url) {
-      try {
-        this.#playerEl.src = newSrc;
-      } catch (error) {
-        console.log("Falling back to original URL due to error:", error);
-        this.#playerEl.src = url;
-      }
-    }
-  }
-  get playbackRate() {
-    Observable.track(this, "playbackRate");
-    return this.#playerEl.playbackRate;
-  }
-  set playbackRate(value) {
-    this.#playerEl.playbackRate = value;
-    Observable.notify(this, "playbackRate");
-  }
-  get paused() {
-    Observable.track(this, "paused");
-    return this.#playerEl.paused;
-  }
-  set paused(_) {
-  }
-  #audioBuffer;
-  #fetchAbortController;
-  async #fetchAndCacheAudioBuffer() {
-    if (this.#audioBuffer || !this.src) return;
-    this.#fetchAbortController = new AbortController();
-    const signal = this.#fetchAbortController.signal;
-    try {
-      const response = await fetch(this.src, { signal });
-      const blob = await response.blob();
-      this.setSrc(this.src, blob);
-      const arrayBuffer = await blob.arrayBuffer();
-      const audioContext = new window.AudioContext();
-      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-      audioContext.close();
-      this.#audioBuffer = audioBuffer;
-      Observable.notify(this, "duration");
-    } catch (e) {
-      if (e instanceof Error && e.name !== "AbortError") {
-        console.error("Error loading audio:", e);
-      }
-    } finally {
-      this.#fetchAbortController = void 0;
-    }
-  }
-  get duration() {
-    Observable.track(this, "duration");
-    const duration = this.#playerEl.duration;
-    if (Number.isFinite(duration) && duration > 0) {
-      return duration;
-    }
-    if (this.#audioBuffer && this.#audioBuffer.duration > 0) {
-      return this.#audioBuffer.duration;
-    }
-    return duration;
-  }
-  set duration(_) {
-  }
-  get currentTime() {
-    Observable.track(this, "currentTime");
-    return this.#playerEl.currentTime;
-  }
-  set currentTime(value) {
-    this.#playerEl.currentTime = value;
-  }
-  get #sliderEl() {
-    return this.shadowRoot.querySelector(".slider");
-  }
-  #playerEl;
-  #isProgrammaticSliderUpdate;
-  connectedCallback() {
-    super.connectedCallback();
-    this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
-    this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
-    this.#playerEl.addEventListener("durationchange", this.#updateTotalTime);
-    this.#setSliderInteractionListeners();
-    this.#setPausedState();
-    this.#updateProgress();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#setSliderInteractionListeners(false);
-    this.pause();
-    this.#playerEl.removeEventListener("timeupdate", this.#updateProgress);
-    this.#playerEl.removeEventListener("loadedmetadata", this.#updateTotalTime);
-    this.#playerEl.removeEventListener("durationchange", this.#updateTotalTime);
-  }
-  play() {
-    this.#pausedChanged(PLAY);
-  }
-  pause() {
-    this.#pausedChanged(PAUSE);
-  }
-  #setSliderInteractionListeners(add = true) {
-    const action = add ? "addEventListener" : "removeEventListener";
-    if (this.#sliderEl) {
-      this.#sliderEl[action]("change", this.#updateCurrentTimeOnSliderChange);
-    }
-  }
-  #pausedChanged;
-  #updateProgress;
-  #updateTotalTime;
-  #dragInterval;
-  #updateCurrentTimeOnSliderChange;
-  #setPausedState;
-  /**
-   * Skips the current time by the skipBy value
-   *
-   * @param skipDirection - the direction to skip
-   *
-   * @internal
-   */
-  skip(skipDirection) {
-    const currentTime = this.currentTime;
-    const skipValue = parseInt(this.skipBy) * skipDirection;
-    const newTime = currentTime + skipValue;
-    this.currentTime = Math.max(0, Math.min(this.duration, newTime));
-  }
-}
-__decorateClass([
-  attr({ attribute: "play-button-aria-label" })
-], AudioPlayer.prototype, "playButtonAriaLabel");
-__decorateClass([
-  attr({ attribute: "pause-button-aria-label" })
-], AudioPlayer.prototype, "pauseButtonAriaLabel");
-__decorateClass([
-  attr({ attribute: "slider-aria-label" })
-], AudioPlayer.prototype, "sliderAriaLabel");
-__decorateClass([
-  attr({ attribute: "skip-forward-aria-label" })
-], AudioPlayer.prototype, "skipForwardButtonAriaLabel");
-__decorateClass([
-  attr({ attribute: "skip-backward-aria-label" })
-], AudioPlayer.prototype, "skipBackwardButtonAriaLabel");
-__decorateClass([
-  attr
-], AudioPlayer.prototype, "connotation");
-__decorateClass([
-  attr
-], AudioPlayer.prototype, "src");
-__decorateClass([
-  attr({ mode: "boolean" })
-], AudioPlayer.prototype, "disabled");
-__decorateClass([
-  attr({ mode: "boolean" })
-], AudioPlayer.prototype, "notime");
-__decorateClass([
-  attr({
-    attribute: "skip-by",
-    converter: validSkipByConverter
-  })
-], AudioPlayer.prototype, "skipBy");
-__decorateClass([
-  attr({ attribute: "playback-rates" })
-], AudioPlayer.prototype, "playbackRates");
-__decorateClass([
-  attr({ mode: "boolean", attribute: "duration-fallback" })
-], AudioPlayer.prototype, "durationFallback");
-
-const getClasses = ({
-  notime,
-  disabled,
-  duration,
-  skipBy,
-  playbackRates
-}) => classNames(
-  ["disabled", Boolean(disabled) || !duration],
-  [
-    "two-lines",
-    !notime && (Boolean(Number(skipBy)) || Boolean(playbackRates))
-  ],
-  ["playback", Boolean(playbackRates)]
-);
-const isMenuItemChekced = (playbackRate, { parent }) => {
-  return playbackRate === parent.playbackRate;
-};
-function renderButton(context) {
-  const buttonTag = context.tagFor(Button);
-  return html`<${buttonTag} class="pause" @click="${(x) => x.paused ? x.play() : x.pause()}"
-	icon="${(x) => x.paused ? "play-solid" : "pause-solid"}"
-	aria-label="${(x) => x.paused ? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel : x.pauseButtonAriaLabel || x.locale.audioPlayer.pauseButtonLabel}"
-	size='condensed'
-	connotation="${(x) => x.connotation}"
-	?disabled="${(x) => x.disabled || !x.duration}"
-  ></${buttonTag}>`;
-}
-function renderBackwardSkipButtons(context) {
-  const buttonTag = context.tagFor(Button);
-  return html`
-		<${buttonTag} class="skip backward"
-			@click="${(element) => element.skip(SKIP_DIRECTIONS.BACKWARD)}"
-		icon="${(x) => x.skipBy == MediaSkipBy.Five ? "5-sec-backward-line" : x.skipBy == MediaSkipBy.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
-		size='condensed'
-		aria-label="${(x) => x.skipBackwardButtonAriaLabel || x.locale.audioPlayer.skipBackwardButton}"
-		connotation="${(x) => x.connotation}"
-		?disabled="${(x) => x.disabled || !x.duration}"
-		></${buttonTag}>
-	`;
-}
-function renderForwardSkipButtons(context) {
-  const buttonTag = context.tagFor(Button);
-  return html`
-		<${buttonTag} class="skip forward"
-		@click="${(element) => element.skip(SKIP_DIRECTIONS.FORWARD)}"
-		icon="${(x) => x.skipBy == MediaSkipBy.Five ? "5-sec-forward-line" : x.skipBy == MediaSkipBy.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
-		size='condensed'
-		aria-label="${(x) => x.skipForwardButtonAriaLabel || x.locale.audioPlayer.skipForwardButton}"
-		connotation="${(x) => x.connotation}"
-		?disabled="${(x) => x.disabled || !x.duration}"
-		></${buttonTag}>
-	`;
-}
-function renderSlider(context) {
-  const sliderTag = context.tagFor(Slider);
-  return html`
-	<${sliderTag}
-		class="slider"
-		aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
-		max="100"
-		aria-valuetext="${(x) => formatTime(x.currentTime)}"
-		connotation="${(x) => x.connotation}"
-		?disabled="${(x) => x.disabled || !x.duration}"
-		internal-part>
-	</${sliderTag}>`;
-}
-function renderTimestamp() {
-  return html` <div class="time-stamp">
-		<span class="current-time"
-			>${(x) => formatTime(x.currentTime || 0)}</span
-		>
-		${when(
-    (x) => x.duration && x.duration !== Infinity,
-    html`
-				<span>/</span>
-				<span class="total-time">${(x) => formatTime(x?.duration)}</span>
-			`
-  )}
-	</div>`;
-}
-function handlePlaybackRateClick(playbackRate, context) {
-  context.parent.playbackRate = playbackRate;
-  return true;
-}
-const AudioPlayerTemplate = (context) => {
-  const menuTag = context.tagFor(Menu);
-  const buttonTag = context.tagFor(Button);
-  const menuItemTag = context.tagFor(MenuItem);
-  return html` <div class="wrapper">
-		<div class="base ${getClasses}">
-			<div class="controls">
-				${when(
-    (x) => x.skipBy && x.skipBy != MediaSkipBy.Zero,
-    renderBackwardSkipButtons(context)
-  )}
-				${renderButton(context)}
-				${when(
-    (x) => x.skipBy && x.skipBy != MediaSkipBy.Zero,
-    renderForwardSkipButtons(context)
-  )}
-				${when((x) => !x.notime, renderTimestamp())}
-			</div>
-			${renderSlider(context)}
-			${when(
-    (x) => Boolean(x.playbackRates),
-    html`
-			<${menuTag} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
-				<${buttonTag} id="playback-open-button"
-							  class="playback-button"
-							  slot="anchor"
-							  icon="playback-speed-line"
-							  aria-label="play back rates"
-							  size='condensed'
-							  connotation="${(x) => x.connotation}"
-							  ?disabled="${(x) => x.disabled || !x.duration}"
-				></${buttonTag}>
-
-				${repeat(
-      (x) => getPlaybackRatesArray(x.playbackRates),
-      html`<${menuItemTag} @click="${handlePlaybackRateClick}"
-																			 control-type="radio"
-																			 class="playback-rate"
-																			 text="${(x) => x}"
-																			 check-appearance="tick-only"
-																			 ?checked="${isMenuItemChekced}"></${menuItemTag}>`
-    )}
-			</${menuTag}>`
-  )}
-		</div>
-	</div>`;
-};
-
-const audioPlayerDefinition = defineVividComponent(
-  "audio-player",
-  AudioPlayer,
-  AudioPlayerTemplate,
-  [buttonDefinition, sliderDefinition, menuDefinition, menuItemDefinition],
-  {
-    styles
-  }
-);
-const registerAudioPlayer = createRegisterFunction(
-  audioPlayerDefinition
-);
-
+import "../unbundled/definition2.js";
+import { n as registerAudioPlayer, r as AudioPlayer, t as audioPlayerDefinition } from "../unbundled/definition14.js";
 export { AudioPlayer as VwcAudioPlayerElement, audioPlayerDefinition, registerAudioPlayer };

package/audio-player/index.cjs

@@ -1,71 +1,71 @@
-"use strict";const u=require("../bundled/definition3.cjs"),h=require("../bundled/definition5.cjs"),y=require("../bundled/definition6.cjs"),r=require("../bundled/vivid-element.cjs"),m=require("../bundled/definition7.cjs"),c=require("../bundled/enums.cjs"),f=require("../bundled/localized.cjs"),g=require("../bundled/playbackRates.cjs"),d=require("../bundled/when.cjs"),v=require("../bundled/repeat.cjs"),B=require("../bundled/class-names.cjs"),$=':host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:"slider" "controls";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:"slider slider" "controls playback";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}';var w=Object.defineProperty,o=(i,e,t,s)=>{for(var a=void 0,l=i.length-1,p;l>=0;l--)(p=i[l])&&(a=p(e,t,a)||a);return a&&w(e,t,a),a};const k={FORWARD:1,BACKWARD:-1};function b(i){if(!i||Number.isNaN(i))return"0:00";const e=Math.floor(i/60),t=Math.floor(i%60);return e+":"+(t<10?"0"+t:t)}const A=!0,L=!1,T={toView(i){return i},fromView(i){return Object.values(c.MediaSkipBy).includes(i)?i:void 0}};class n extends f.Localized(r.VividElement){constructor(){super(),this.playButtonAriaLabel=null,this.pauseButtonAriaLabel=null,this.sliderAriaLabel=null,this.skipForwardButtonAriaLabel=null,this.skipBackwardButtonAriaLabel=null,this.disabled=!1,this.notime=!1,this.playbackRates=null,this.#t=new Audio,this.#n=!1,this.durationFallback=!1,this.#l=e=>{if(e===this.paused){this.#o();return}this.paused?(this.#r(),this.#t.play()):this.#t.pause(),this.#o()},this.#r=()=>{r.Observable.notify(this,"currentTime");const e=this.duration,t=this.currentTime,s=Number.isFinite(e)&&e>0&&Number.isFinite(t)&&t>=0,a=s?t/e*100:0;this.#e&&(this.#n=!0,this.#e.value=a.toString(),this.#n=!1),s&&a===100&&this.pause()},this.#s=()=>{r.Observable.notify(this,"duration"),(!Number.isFinite(this.#t.duration)||this.#t.duration<=0)&&this.durationFallback&&this.#p()},this.#u=()=>{!this.paused&&this.#e.isDragging&&(this.pause(),this.#d=window.setInterval(()=>{this.#e.isDragging||(clearInterval(this.#d),this.play())},0)),!this.#n&&this.#t&&(this.currentTime=this.duration*Number(this.#e.value)/100)},this.#o=()=>{r.Observable.notify(this,"paused")}}srcChanged(){this.src===void 0?this.setSrc(""):this.setSrc(this.src)}revokeSrc(){const e=this.getCurrentSrc();e&&e.startsWith("blob:")&&URL.revokeObjectURL(e)}getCurrentSrc(){return this.#t.currentSrc||this.#t.src||""}canPlayType(e){return this.#t.canPlayType(e)!==""}setSrc(e,t){const s=this.getCurrentSrc();this.revokeSrc(),this.#i=void 0,this.#a&&(this.#a.abort(),this.#a=void 0);const a=t&&(this.canPlayType(t.type)||!e)?URL.createObjectURL(t):e;if(s&&this.#t.removeAttribute("src"),a||e)try{this.#t.src=a}catch(l){console.log("Falling back to original URL due to error:",l),this.#t.src=e}}get playbackRate(){return r.Observable.track(this,"playbackRate"),this.#t.playbackRate}set playbackRate(e){this.#t.playbackRate=e,r.Observable.notify(this,"playbackRate")}get paused(){return r.Observable.track(this,"paused"),this.#t.paused}set paused(e){}#i;#a;async#p(){if(this.#i||!this.src)return;this.#a=new AbortController;const e=this.#a.signal;try{const s=await(await fetch(this.src,{signal:e})).blob();this.setSrc(this.src,s);const a=await s.arrayBuffer(),l=new window.AudioContext,p=await l.decodeAudioData(a);l.close(),this.#i=p,r.Observable.notify(this,"duration")}catch(t){t instanceof Error&&t.name!=="AbortError"&&console.error("Error loading audio:",t)}finally{this.#a=void 0}}get duration(){r.Observable.track(this,"duration");const e=this.#t.duration;return Number.isFinite(e)&&e>0?e:this.#i&&this.#i.duration>0?this.#i.duration:e}set duration(e){}get currentTime(){return r.Observable.track(this,"currentTime"),this.#t.currentTime}set currentTime(e){this.#t.currentTime=e}get#e(){return this.shadowRoot.querySelector(".slider")}#t;#n;connectedCallback(){super.connectedCallback(),this.#t.addEventListener("timeupdate",this.#r),this.#t.addEventListener("loadedmetadata",this.#s),this.#t.addEventListener("durationchange",this.#s),this.#c(),this.#o(),this.#r()}disconnectedCallback(){super.disconnectedCallback(),this.#c(!1),this.pause(),this.#t.removeEventListener("timeupdate",this.#r),this.#t.removeEventListener("loadedmetadata",this.#s),this.#t.removeEventListener("durationchange",this.#s)}play(){this.#l(L)}pause(){this.#l(A)}#c(e=!0){const t=e?"addEventListener":"removeEventListener";this.#e&&this.#e[t]("change",this.#u)}#l;#r;#s;#d;#u;#o;skip(e){const t=this.currentTime,s=parseInt(this.skipBy)*e,a=t+s;this.currentTime=Math.max(0,Math.min(this.duration,a))}}o([r.attr({attribute:"play-button-aria-label"})],n.prototype,"playButtonAriaLabel");o([r.attr({attribute:"pause-button-aria-label"})],n.prototype,"pauseButtonAriaLabel");o([r.attr({attribute:"slider-aria-label"})],n.prototype,"sliderAriaLabel");o([r.attr({attribute:"skip-forward-aria-label"})],n.prototype,"skipForwardButtonAriaLabel");o([r.attr({attribute:"skip-backward-aria-label"})],n.prototype,"skipBackwardButtonAriaLabel");o([r.attr],n.prototype,"connotation");o([r.attr],n.prototype,"src");o([r.attr({mode:"boolean"})],n.prototype,"disabled");o([r.attr({mode:"boolean"})],n.prototype,"notime");o([r.attr({attribute:"skip-by",converter:T})],n.prototype,"skipBy");o([r.attr({attribute:"playback-rates"})],n.prototype,"playbackRates");o([r.attr({mode:"boolean",attribute:"duration-fallback"})],n.prototype,"durationFallback");const S=({notime:i,disabled:e,duration:t,skipBy:s,playbackRates:a})=>B.classNames(["disabled",!!e||!t],["two-lines",!i&&(!!Number(s)||!!a)],["playback",!!a]),R=(i,{parent:e})=>i===e.playbackRate;function C(i){const e=i.tagFor(u.Button);return r.html`<${e} class="pause" @click="${t=>t.paused?t.play():t.pause()}"
-	icon="${t=>t.paused?"play-solid":"pause-solid"}"
-	aria-label="${t=>t.paused?t.playButtonAriaLabel||t.locale.audioPlayer.playButtonLabel:t.pauseButtonAriaLabel||t.locale.audioPlayer.pauseButtonLabel}"
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/enums.cjs`);require(`../bundled/definition2.cjs`);const a=require(`../bundled/decorate.cjs`),o=require(`../bundled/playbackRates.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/definition3.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition20.cjs`),d=require(`../bundled/definition21.cjs`);var f=`:host{display:block}.wrapper{container-type:inline-size}.base{box-sizing:border-box;color:var(--vvd-color-canvas-text);user-select:none;align-items:center;gap:8px;inline-size:100%;padding:8px;display:inline-flex}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{grid-area:controls;justify-content:center;align-items:center;gap:8px;display:flex}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{min-inline-size:32px;margin-inline:6px}.base .playback-button{grid-area:playback}@container (width<=500px){.base.two-lines{grid-template:"slider""controls"/1fr;row-gap:4px;inline-size:100%;display:inline-grid}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-columns:1fr auto;grid-template-areas:"slider slider""controls playback"}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}`,p={FORWARD:1,BACKWARD:-1};function m(e){if(!e||Number.isNaN(e))return`0:00`;let t=Math.floor(e/60),n=Math.floor(e%60);return t+`:`+(n<10?`0`+n:n)}var h=!0,g=!1,_={toView(e){return e},fromView(e){return Object.values(i.r).includes(e)?e:void 0}},v=class extends e.t(t.t){srcChanged(){this.src===void 0?this.setSrc(``):this.setSrc(this.src)}revokeSrc(){let e=this.getCurrentSrc();e&&e.startsWith(`blob:`)&&URL.revokeObjectURL(e)}getCurrentSrc(){return this.#i.currentSrc||this.#i.src||``}canPlayType(e){return this.#i.canPlayType(e)!==``}setSrc(e,t){let n=this.getCurrentSrc();this.revokeSrc(),this.#e=void 0,this.#t&&=(this.#t.abort(),void 0);let r=t&&(this.canPlayType(t.type)||!e)?URL.createObjectURL(t):e;if(n&&this.#i.removeAttribute(`src`),r||e)try{this.#i.src=r}catch(t){console.log(`Falling back to original URL due to error:`,t),this.#i.src=e}}get playbackRate(){return t.w.track(this,`playbackRate`),this.#i.playbackRate}set playbackRate(e){this.#i.playbackRate=e,t.w.notify(this,`playbackRate`)}get paused(){return t.w.track(this,`paused`),this.#i.paused}set paused(e){}#e;#t;async#n(){if(this.#e||!this.src)return;this.#t=new AbortController;let e=this.#t.signal;try{let n=await(await fetch(this.src,{signal:e})).blob();this.setSrc(this.src,n);let r=await n.arrayBuffer(),i=new window.AudioContext,a=await i.decodeAudioData(r);i.close(),this.#e=a,t.w.notify(this,`duration`)}catch(e){e instanceof Error&&e.name!==`AbortError`&&console.error(`Error loading audio:`,e)}finally{this.#t=void 0}}get duration(){t.w.track(this,`duration`);let e=this.#i.duration;return Number.isFinite(e)&&e>0?e:this.#e&&this.#e.duration>0?this.#e.duration:e}set duration(e){}get currentTime(){return t.w.track(this,`currentTime`),this.#i.currentTime}set currentTime(e){this.#i.currentTime=e}get#r(){return this.shadowRoot.querySelector(`.slider`)}#i=new Audio;#a=!1;constructor(){super(),this.playButtonAriaLabel=null,this.pauseButtonAriaLabel=null,this.sliderAriaLabel=null,this.skipForwardButtonAriaLabel=null,this.skipBackwardButtonAriaLabel=null,this.disabled=!1,this.notime=!1,this.playbackRates=null,this.durationFallback=!1}connectedCallback(){super.connectedCallback(),this.#i.addEventListener(`timeupdate`,this.#u),this.#i.addEventListener(`loadedmetadata`,this.#d),this.#i.addEventListener(`durationchange`,this.#d),this.#i.addEventListener(`play`,this.#o),this.#i.addEventListener(`pause`,this.#s),this.#c(),this.#m(),this.#u()}disconnectedCallback(){super.disconnectedCallback(),this.#c(!1),this.pause(),this.#i.removeEventListener(`timeupdate`,this.#u),this.#i.removeEventListener(`loadedmetadata`,this.#d),this.#i.removeEventListener(`durationchange`,this.#d),this.#i.removeEventListener(`play`,this.#o),this.#i.removeEventListener(`pause`,this.#s)}play(){this.#l(g)}pause(){this.#l(h)}#o=()=>{this.#r?.isDragging||this.$emit(`play`,void 0,{bubbles:!1})};#s=()=>{this.#r?.isDragging||this.$emit(`pause`,void 0,{bubbles:!1})};#c(e=!0){let t=e?`addEventListener`:`removeEventListener`;this.#r&&this.#r[t](`change`,this.#p)}#l=e=>{if(e===this.paused){this.#m();return}this.paused?(this.#u(),this.#i.play()):this.#i.pause(),this.#m()};#u=()=>{t.w.notify(this,`currentTime`);let e=this.duration,n=this.currentTime,r=Number.isFinite(e)&&e>0&&Number.isFinite(n)&&n>=0,i=r?n/e*100:0;this.#r&&(this.#a=!0,this.#r.value=i.toString(),this.#a=!1),r&&i===100&&this.pause()};#d=()=>{t.w.notify(this,`duration`),(!Number.isFinite(this.#i.duration)||this.#i.duration<=0)&&this.durationFallback&&this.#n()};#f;#p=()=>{!this.paused&&this.#r.isDragging&&(this.pause(),this.#f=window.setInterval(()=>{(!this.#r.isDragging||!this.isConnected)&&(clearInterval(this.#f),this.isConnected&&this.play())},0)),!this.#a&&this.#i&&(this.currentTime=this.duration*Number(this.#r.value)/100)};#m=()=>{t.w.notify(this,`paused`)};skip(e){let t=this.currentTime+parseInt(this.skipBy)*e;this.currentTime=Math.max(0,Math.min(this.duration,t))}};a.t([t.l({attribute:`play-button-aria-label`})],v.prototype,`playButtonAriaLabel`,void 0),a.t([t.l({attribute:`pause-button-aria-label`})],v.prototype,`pauseButtonAriaLabel`,void 0),a.t([t.l({attribute:`slider-aria-label`})],v.prototype,`sliderAriaLabel`,void 0),a.t([t.l({attribute:`skip-forward-aria-label`})],v.prototype,`skipForwardButtonAriaLabel`,void 0),a.t([t.l({attribute:`skip-backward-aria-label`})],v.prototype,`skipBackwardButtonAriaLabel`,void 0),a.t([t.l],v.prototype,`connotation`,void 0),a.t([t.l],v.prototype,`src`,void 0),a.t([t.l({mode:`boolean`})],v.prototype,`disabled`,void 0),a.t([t.l({mode:`boolean`})],v.prototype,`notime`,void 0),a.t([t.l({attribute:`skip-by`,converter:_})],v.prototype,`skipBy`,void 0),a.t([t.l({attribute:`playback-rates`})],v.prototype,`playbackRates`,void 0),a.t([t.l({mode:`boolean`,attribute:`duration-fallback`})],v.prototype,`durationFallback`,void 0);var y=({notime:e,disabled:t,duration:n,skipBy:r,playbackRates:i})=>s.t([`disabled`,!!t||!n],[`two-lines`,!e&&(!!Number(r)||!!i)],[`playback`,!!i]),b=(e,{parent:t})=>e===t.playbackRate;function x(e){let n=e.tagFor(l.i);return t.d`<${n} class="pause" @click="${e=>e.paused?e.play():e.pause()}"
+	icon="${e=>e.paused?`play-solid`:`pause-solid`}"
+	aria-label="${e=>e.paused?e.playButtonAriaLabel||e.locale.audioPlayer.playButtonLabel:e.pauseButtonAriaLabel||e.locale.audioPlayer.pauseButtonLabel}"
 	size='condensed'
-	connotation="${t=>t.connotation}"
-	?disabled="${t=>t.disabled||!t.duration}"
-  ></${e}>`}function F(i){const e=i.tagFor(u.Button);return r.html`
-		<${e} class="skip backward"
-			@click="${t=>t.skip(k.BACKWARD)}"
-		icon="${t=>t.skipBy==c.MediaSkipBy.Five?"5-sec-backward-line":t.skipBy==c.MediaSkipBy.Thirty?"30-sec-backward-line":"10-sec-backward-line"}"
+	connotation="${e=>e.connotation}"
+	?disabled="${e=>e.disabled||!e.duration}"
+  ></${n}>`}function S(e){let n=e.tagFor(l.i);return t.d`
+		<${n} class="skip backward"
+			@click="${e=>e.skip(p.BACKWARD)}"
+		icon="${e=>e.skipBy==i.r.Five?`5-sec-backward-line`:e.skipBy==i.r.Thirty?`30-sec-backward-line`:`10-sec-backward-line`}"
 		size='condensed'
-		aria-label="${t=>t.skipBackwardButtonAriaLabel||t.locale.audioPlayer.skipBackwardButton}"
-		connotation="${t=>t.connotation}"
-		?disabled="${t=>t.disabled||!t.duration}"
-		></${e}>
-	`}function P(i){const e=i.tagFor(u.Button);return r.html`
-		<${e} class="skip forward"
-		@click="${t=>t.skip(k.FORWARD)}"
-		icon="${t=>t.skipBy==c.MediaSkipBy.Five?"5-sec-forward-line":t.skipBy==c.MediaSkipBy.Thirty?"30-sec-forward-line":"10-sec-forward-line"}"
+		aria-label="${e=>e.skipBackwardButtonAriaLabel||e.locale.audioPlayer.skipBackwardButton}"
+		connotation="${e=>e.connotation}"
+		?disabled="${e=>e.disabled||!e.duration}"
+		></${n}>
+	`}function C(e){let n=e.tagFor(l.i);return t.d`
+		<${n} class="skip forward"
+		@click="${e=>e.skip(p.FORWARD)}"
+		icon="${e=>e.skipBy==i.r.Five?`5-sec-forward-line`:e.skipBy==i.r.Thirty?`30-sec-forward-line`:`10-sec-forward-line`}"
 		size='condensed'
-		aria-label="${t=>t.skipForwardButtonAriaLabel||t.locale.audioPlayer.skipForwardButton}"
-		connotation="${t=>t.connotation}"
-		?disabled="${t=>t.disabled||!t.duration}"
-		></${e}>
-	`}function E(i){const e=i.tagFor(h.Slider);return r.html`
-	<${e}
+		aria-label="${e=>e.skipForwardButtonAriaLabel||e.locale.audioPlayer.skipForwardButton}"
+		connotation="${e=>e.connotation}"
+		?disabled="${e=>e.disabled||!e.duration}"
+		></${n}>
+	`}function w(e){let n=e.tagFor(c.r);return t.d`
+	<${n}
 		class="slider"
-		aria-label="${t=>t.sliderAriaLabel||t.locale.audioPlayer.sliderLabel}"
+		aria-label="${e=>e.sliderAriaLabel||e.locale.audioPlayer.sliderLabel}"
 		max="100"
-		aria-valuetext="${t=>b(t.currentTime)}"
-		connotation="${t=>t.connotation}"
-		?disabled="${t=>t.disabled||!t.duration}"
+		aria-valuetext="${e=>m(e.currentTime)}"
+		connotation="${e=>e.connotation}"
+		?disabled="${e=>e.disabled||!e.duration}"
 		internal-part>
-	</${e}>`}function O(){return r.html` <div class="time-stamp">
+	</${n}>`}function T(){return t.d` <div class="time-stamp">
 		<span class="current-time"
-			>${i=>b(i.currentTime||0)}</span
+			>${e=>m(e.currentTime||0)}</span
 		>
-		${d.when(i=>i.duration&&i.duration!==1/0,r.html`
+		${r.t(e=>e.duration&&e.duration!==1/0,t.d`
 				<span>/</span>
-				<span class="total-time">${i=>b(i?.duration)}</span>
+				<span class="total-time">${e=>m(e?.duration)}</span>
 			`)}
-	</div>`}function M(i,e){return e.parent.playbackRate=i,!0}const z=i=>{const e=i.tagFor(y.Menu),t=i.tagFor(u.Button),s=i.tagFor(m.MenuItem);return r.html` <div class="wrapper">
-		<div class="base ${S}">
+	</div>`}function E(e,t){return t.parent.playbackRate=e,!0}var D=t.o(`audio-player`,v,e=>{let a=e.tagFor(d.r),s=e.tagFor(l.i),c=e.tagFor(u.i);return t.d` <div class="wrapper">
+		<div class="base ${y}">
 			<div class="controls">
-				${d.when(a=>a.skipBy&&a.skipBy!=c.MediaSkipBy.Zero,F(i))}
-				${C(i)}
-				${d.when(a=>a.skipBy&&a.skipBy!=c.MediaSkipBy.Zero,P(i))}
-				${d.when(a=>!a.notime,O())}
+				${r.t(e=>e.skipBy&&e.skipBy!=i.r.Zero,S(e))}
+				${x(e)}
+				${r.t(e=>e.skipBy&&e.skipBy!=i.r.Zero,C(e))}
+				${r.t(e=>!e.notime,T())}
 			</div>
-			${E(i)}
-			${d.when(a=>!!a.playbackRates,r.html`
-			<${e} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
-				<${t} id="playback-open-button"
+			${w(e)}
+			${r.t(e=>!!e.playbackRates,t.d`
+			<${a} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
+				<${s} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"
 							  icon="playback-speed-line"
 							  aria-label="play back rates"
 							  size='condensed'
-							  connotation="${a=>a.connotation}"
-							  ?disabled="${a=>a.disabled||!a.duration}"
-				></${t}>
+							  connotation="${e=>e.connotation}"
+							  ?disabled="${e=>e.disabled||!e.duration}"
+				></${s}>
 
-				${v.repeat(a=>g.getPlaybackRatesArray(a.playbackRates),r.html`<${s} @click="${M}"
+				${n.n(e=>o.t(e.playbackRates),t.d`<${c} @click="${E}"
 																			 control-type="radio"
 																			 class="playback-rate"
-																			 text="${a=>a}"
+																			 text="${e=>e}"
 																			 check-appearance="tick-only"
-																			 ?checked="${R}"></${s}>`)}
-			</${e}>`)}
+																			 ?checked="${b}"></${c}>`)}
+			</${a}>`)}
 		</div>
-	</div>`},D=r.defineVividComponent("audio-player",n,z,[u.buttonDefinition,h.sliderDefinition,y.menuDefinition,m.menuItemDefinition],{styles:$}),I=r.createRegisterFunction(D);I();
+	</div>`},[l.t,c.n,d.t,u.t],{styles:f});t.s(D)();