@vonage/vivid 5.0.0 → 5.2.0

package/{shared/definition5.cjs → audio-player/definition.cjs}

@@ -1,16 +1,17 @@
 'use strict';
 
-const definition$1 = require('./definition11.cjs');
-const definition$3 = require('./definition49.cjs');
-const definition = require('./definition31.cjs');
-const vividElement = require('./vivid-element.cjs');
-const definition$2 = require('./definition30.cjs');
-const enums = require('./enums.cjs');
-const localized = require('./localized.cjs');
-const playbackRates = require('./playbackRates.cjs');
-const repeat = require('./repeat.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const button_definition = require('../unbundled/definition.cjs');
+const slider_definition = require('../slider/definition.cjs');
+const menu_definition = require('../menu/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const menuItem_definition = require('../unbundled/definition2.cjs');
+const fastElement = require('@microsoft/fast-element');
+const enums = require('../unbundled/enums.cjs');
+const localized = require('../unbundled/localized.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const playbackRates = require('../unbundled/playbackRates.cjs');
 
 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}}";
 
@@ -73,7 +74,7 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
       this.#setPausedState();
     };
     this.#updateProgress = () => {
-      vividElement.Observable.notify(this, "currentTime");
+      fastElement.Observable.notify(this, "currentTime");
       const duration = this.duration;
       const currentTime = this.currentTime;
       const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
@@ -88,7 +89,7 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
       }
     };
     this.#updateTotalTime = () => {
-      vividElement.Observable.notify(this, "duration");
+      fastElement.Observable.notify(this, "duration");
       if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
         if (this.durationFallback) {
           this.#fetchAndCacheAudioBuffer();
@@ -113,31 +114,59 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
       }
     };
     this.#setPausedState = () => {
-      vividElement.Observable.notify(this, "paused");
+      fastElement.Observable.notify(this, "paused");
     };
   }
   srcChanged() {
     if (this.src === void 0) {
-      this.#playerEl.removeAttribute("src");
+      this.setSrc("");
     } else {
-      this.#playerEl.src = this.src;
+      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;
+      }
     }
-    this.#fetchAbortController = void 0;
   }
   get playbackRate() {
-    vividElement.Observable.track(this, "playbackRate");
+    fastElement.Observable.track(this, "playbackRate");
     return this.#playerEl.playbackRate;
   }
   set playbackRate(value) {
     this.#playerEl.playbackRate = value;
-    vividElement.Observable.notify(this, "playbackRate");
+    fastElement.Observable.notify(this, "playbackRate");
   }
   get paused() {
-    vividElement.Observable.track(this, "paused");
+    fastElement.Observable.track(this, "paused");
     return this.#playerEl.paused;
   }
   set paused(_) {
@@ -150,19 +179,24 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
     const signal = this.#fetchAbortController.signal;
     try {
       const response = await fetch(this.src, { signal });
-      const arrayBuffer = await response.arrayBuffer();
+      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;
-      vividElement.Observable.notify(this, "duration");
+      fastElement.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() {
-    vividElement.Observable.track(this, "duration");
+    fastElement.Observable.track(this, "duration");
     const duration = this.#playerEl.duration;
     if (Number.isFinite(duration) && duration > 0) {
       return duration;
@@ -175,7 +209,7 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
   set duration(_) {
   }
   get currentTime() {
-    vividElement.Observable.track(this, "currentTime");
+    fastElement.Observable.track(this, "currentTime");
     return this.#playerEl.currentTime;
   }
   set currentTime(value) {
@@ -236,43 +270,43 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
   }
 }
 __decorateClass([
-  vividElement.attr({ attribute: "play-button-aria-label" })
+  fastElement.attr({ attribute: "play-button-aria-label" })
 ], AudioPlayer.prototype, "playButtonAriaLabel");
 __decorateClass([
-  vividElement.attr({ attribute: "pause-button-aria-label" })
+  fastElement.attr({ attribute: "pause-button-aria-label" })
 ], AudioPlayer.prototype, "pauseButtonAriaLabel");
 __decorateClass([
-  vividElement.attr({ attribute: "slider-aria-label" })
+  fastElement.attr({ attribute: "slider-aria-label" })
 ], AudioPlayer.prototype, "sliderAriaLabel");
 __decorateClass([
-  vividElement.attr({ attribute: "skip-forward-aria-label" })
+  fastElement.attr({ attribute: "skip-forward-aria-label" })
 ], AudioPlayer.prototype, "skipForwardButtonAriaLabel");
 __decorateClass([
-  vividElement.attr({ attribute: "skip-backward-aria-label" })
+  fastElement.attr({ attribute: "skip-backward-aria-label" })
 ], AudioPlayer.prototype, "skipBackwardButtonAriaLabel");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], AudioPlayer.prototype, "connotation");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], AudioPlayer.prototype, "src");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], AudioPlayer.prototype, "disabled");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], AudioPlayer.prototype, "notime");
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     attribute: "skip-by",
     converter: validSkipByConverter
   })
 ], AudioPlayer.prototype, "skipBy");
 __decorateClass([
-  vividElement.attr({ attribute: "playback-rates" })
+  fastElement.attr({ attribute: "playback-rates" })
 ], AudioPlayer.prototype, "playbackRates");
 __decorateClass([
-  vividElement.attr({ mode: "boolean", attribute: "duration-fallback" })
+  fastElement.attr({ mode: "boolean", attribute: "duration-fallback" })
 ], AudioPlayer.prototype, "durationFallback");
 
 const getClasses = ({
@@ -281,7 +315,7 @@ const getClasses = ({
   duration,
   skipBy,
   playbackRates
-}) => classNames.classNames(
+}) => fastWebUtilities.classNames(
   ["disabled", Boolean(disabled) || !duration],
   [
     "two-lines",
@@ -293,8 +327,8 @@ const isMenuItemChekced = (playbackRate, { parent }) => {
   return playbackRate === parent.playbackRate;
 };
 function renderButton(context) {
-  const buttonTag = context.tagFor(definition$1.Button);
-  return vividElement.html`<${buttonTag} class="pause" @click="${(x) => x.paused ? x.play() : x.pause()}"
+  const buttonTag = context.tagFor(button_definition.Button);
+  return fastElement.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'
@@ -303,8 +337,8 @@ function renderButton(context) {
   ></${buttonTag}>`;
 }
 function renderBackwardSkipButtons(context) {
-  const buttonTag = context.tagFor(definition$1.Button);
-  return vividElement.html`
+  const buttonTag = context.tagFor(button_definition.Button);
+  return fastElement.html`
 		<${buttonTag} class="skip backward"
 			@click="${(element) => element.skip(SKIP_DIRECTIONS.BACKWARD)}"
 		icon="${(x) => x.skipBy == enums.MediaSkipBy.Five ? "5-sec-backward-line" : x.skipBy == enums.MediaSkipBy.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
@@ -316,8 +350,8 @@ function renderBackwardSkipButtons(context) {
 	`;
 }
 function renderForwardSkipButtons(context) {
-  const buttonTag = context.tagFor(definition$1.Button);
-  return vividElement.html`
+  const buttonTag = context.tagFor(button_definition.Button);
+  return fastElement.html`
 		<${buttonTag} class="skip forward"
 		@click="${(element) => element.skip(SKIP_DIRECTIONS.FORWARD)}"
 		icon="${(x) => x.skipBy == enums.MediaSkipBy.Five ? "5-sec-forward-line" : x.skipBy == enums.MediaSkipBy.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
@@ -329,8 +363,8 @@ function renderForwardSkipButtons(context) {
 	`;
 }
 function renderSlider(context) {
-  const sliderTag = context.tagFor(definition$3.Slider);
-  return vividElement.html`
+  const sliderTag = context.tagFor(slider_definition.VwcSliderElement);
+  return fastElement.html`
 	<${sliderTag}
 		class="slider"
 		aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
@@ -342,11 +376,11 @@ function renderSlider(context) {
 	</${sliderTag}>`;
 }
 function renderTimestamp() {
-  return vividElement.html` <div class="time-stamp">
+  return fastElement.html` <div class="time-stamp">
 		<span class="current-time">${(x) => formatTime(x.currentTime)}</span>
-		${when.when(
+		${fastElement.when(
     (x) => x.duration && x.duration !== Infinity,
-    vividElement.html`
+    fastElement.html`
 				<span>/</span>
 				<span class="total-time">${(x) => formatTime(x.duration)}</span>
 			`
@@ -358,27 +392,27 @@ function handlePlaybackRateClick(playbackRate, context) {
   return true;
 }
 const AudioPlayerTemplate = (context) => {
-  const menuTag = context.tagFor(definition.Menu);
-  const buttonTag = context.tagFor(definition$1.Button);
-  const menuItemTag = context.tagFor(definition$2.MenuItem);
-  return vividElement.html` <div class="wrapper">
+  const menuTag = context.tagFor(menu_definition.VwcMenuElement);
+  const buttonTag = context.tagFor(button_definition.Button);
+  const menuItemTag = context.tagFor(menuItem_definition.MenuItem);
+  return fastElement.html` <div class="wrapper">
 		<div class="base ${getClasses}">
 			<div class="controls">
-				${when.when(
+				${fastElement.when(
     (x) => x.skipBy && x.skipBy != enums.MediaSkipBy.Zero,
     renderBackwardSkipButtons(context)
   )}
 				${renderButton(context)}
-				${when.when(
+				${fastElement.when(
     (x) => x.skipBy && x.skipBy != enums.MediaSkipBy.Zero,
     renderForwardSkipButtons(context)
   )}
-				${when.when((x) => !x.notime, renderTimestamp())}
+				${fastElement.when((x) => !x.notime, renderTimestamp())}
 			</div>
 			${renderSlider(context)}
-			${when.when(
+			${fastElement.when(
     (x) => Boolean(x.playbackRates),
-    vividElement.html`
+    fastElement.html`
 			<${menuTag} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
@@ -390,9 +424,9 @@ const AudioPlayerTemplate = (context) => {
 							  ?disabled="${(x) => x.disabled || !x.duration}"
 				></${buttonTag}>
 
-				${repeat.repeat(
+				${fastElement.repeat(
       (x) => playbackRates.getPlaybackRatesArray(x.playbackRates),
-      vividElement.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
+      fastElement.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
 																			 control-type="radio"
 																			 class="playback-rate"
 																			 text="${(x) => x}"
@@ -409,7 +443,7 @@ const audioPlayerDefinition = vividElement.defineVividComponent(
   "audio-player",
   AudioPlayer,
   AudioPlayerTemplate,
-  [definition$1.buttonDefinition, definition$3.sliderDefinition, definition.menuDefinition, definition$2.menuItemDefinition],
+  [button_definition.buttonDefinition, slider_definition.sliderDefinition, menu_definition.menuDefinition, menuItem_definition.menuItemDefinition],
   {
     styles
   }
@@ -418,6 +452,6 @@ const registerAudioPlayer = vividElement.createRegisterFunction(
   audioPlayerDefinition
 );
 
-exports.AudioPlayer = AudioPlayer;
+exports.VwcAudioPlayerElement = AudioPlayer;
 exports.audioPlayerDefinition = audioPlayerDefinition;
 exports.registerAudioPlayer = registerAudioPlayer;

package/{shared/definition5.js → audio-player/definition.js}

@@ -1,14 +1,13 @@
-import { B as Button, b as buttonDefinition } from './definition11.js';
-import { S as Slider, s as sliderDefinition } from './definition49.js';
-import { M as Menu, m as menuDefinition } from './definition31.js';
-import { O as Observable, V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { M as MenuItem, m as menuItemDefinition } from './definition30.js';
-import { M as MediaSkipBy } from './enums.js';
-import { L as Localized } from './localized.js';
-import { g as getPlaybackRatesArray } from './playbackRates.js';
-import { r as repeat } from './repeat.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+import { B as Button, b as buttonDefinition } from '../unbundled/definition.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 { M as MenuItem, m as menuItemDefinition } from '../unbundled/definition2.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}}";
 
@@ -116,15 +115,43 @@ class AudioPlayer extends Localized(VividElement) {
   }
   srcChanged() {
     if (this.src === void 0) {
-      this.#playerEl.removeAttribute("src");
+      this.setSrc("");
     } else {
-      this.#playerEl.src = this.src;
+      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;
+      }
     }
-    this.#fetchAbortController = void 0;
   }
   get playbackRate() {
     Observable.track(this, "playbackRate");
@@ -148,13 +175,18 @@ class AudioPlayer extends Localized(VividElement) {
     const signal = this.#fetchAbortController.signal;
     try {
       const response = await fetch(this.src, { signal });
-      const arrayBuffer = await response.arrayBuffer();
+      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;
     }
@@ -416,4 +448,4 @@ const registerAudioPlayer = createRegisterFunction(
   audioPlayerDefinition
 );
 
-export { AudioPlayer as A, audioPlayerDefinition as a, registerAudioPlayer as r };
+export { AudioPlayer as VwcAudioPlayerElement, audioPlayerDefinition, registerAudioPlayer };

package/audio-player/index.cjs

@@ -1,5 +1,69 @@
-'use strict';
+"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"),v=require("../bundled/repeat.cjs"),B=require("../bundled/class-names.cjs"),d=require("../bundled/when.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}"
+	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"}"
+		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"}"
+		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}
+		class="slider"
+		aria-label="${t=>t.sliderAriaLabel||t.locale.audioPlayer.sliderLabel}"
+		max="100"
+		aria-valuetext="${t=>b(t.currentTime)}"
+		connotation="${t=>t.connotation}"
+		?disabled="${t=>t.disabled||!t.duration}"
+		internal-part>
+	</${e}>`}function O(){return r.html` <div class="time-stamp">
+		<span class="current-time">${i=>b(i.currentTime)}</span>
+		${d.when(i=>i.duration&&i.duration!==1/0,r.html`
+				<span>/</span>
+				<span class="total-time">${i=>b(i.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 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())}
+			</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"
+							  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}>
 
-const definition = require('../shared/definition5.cjs');
-
-definition.registerAudioPlayer();
+				${v.repeat(a=>g.getPlaybackRatesArray(a.playbackRates),r.html`<${s} @click="${M}"
+																			 control-type="radio"
+																			 class="playback-rate"
+																			 text="${a=>a}"
+																			 check-appearance="tick-only"
+																			 ?checked="${R}"></${s}>`)}
+			</${e}>`)}
+		</div>
+	</div>`},D=r.defineVividComponent("audio-player",n,z,[u.buttonDefinition,h.sliderDefinition,y.menuDefinition,m.menuItemDefinition],{styles:$}),I=r.createRegisterFunction(D);I();