@vonage/vivid 4.31.0 → 5.1.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,7 +114,7 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
       }
     };
     this.#setPausedState = () => {
-      vividElement.Observable.notify(this, "paused");
+      fastElement.Observable.notify(this, "paused");
     };
   }
   srcChanged() {
@@ -129,15 +130,15 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
     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(_) {
@@ -155,14 +156,14 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
       const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
       audioContext.close();
       this.#audioBuffer = audioBuffer;
-      vividElement.Observable.notify(this, "duration");
+      fastElement.Observable.notify(this, "duration");
     } catch (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 +176,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 +237,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 +282,7 @@ const getClasses = ({
   duration,
   skipBy,
   playbackRates
-}) => classNames.classNames(
+}) => fastWebUtilities.classNames(
   ["disabled", Boolean(disabled) || !duration],
   [
     "two-lines",
@@ -293,8 +294,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 +304,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 +317,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 +330,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 +343,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 +359,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 +391,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 +410,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 +419,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}}";
 
@@ -416,4 +415,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"),s=require("../bundled/vivid-element.cjs"),m=require("../bundled/definition7.cjs"),l=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"),c=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=(a,e,t,n)=>{for(var i=void 0,d=a.length-1,b;d>=0;d--)(b=a[d])&&(i=b(e,t,i)||i);return i&&w(e,t,i),i};const k={FORWARD:1,BACKWARD:-1};function p(a){if(!a||Number.isNaN(a))return"0:00";const e=Math.floor(a/60),t=Math.floor(a%60);return e+":"+(t<10?"0"+t:t)}const A=!0,T=!1,L={toView(a){return a},fromView(a){return Object.values(l.MediaSkipBy).includes(a)?a:void 0}};class r extends f.Localized(s.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.#s(),this.#t.play()):this.#t.pause(),this.#o()},this.#s=()=>{s.Observable.notify(this,"currentTime");const e=this.duration,t=this.currentTime,n=Number.isFinite(e)&&e>0&&Number.isFinite(t)&&t>=0,i=n?t/e*100:0;this.#e&&(this.#n=!0,this.#e.value=i.toString(),this.#n=!1),n&&i===100&&this.pause()},this.#r=()=>{s.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.#c=window.setInterval(()=>{this.#e.isDragging||(clearInterval(this.#c),this.play())},0)),!this.#n&&this.#t&&(this.currentTime=this.duration*Number(this.#e.value)/100)},this.#o=()=>{s.Observable.notify(this,"paused")}}srcChanged(){this.src===void 0?this.#t.removeAttribute("src"):this.#t.src=this.src,this.#a=void 0,this.#i&&this.#i.abort(),this.#i=void 0}get playbackRate(){return s.Observable.track(this,"playbackRate"),this.#t.playbackRate}set playbackRate(e){this.#t.playbackRate=e,s.Observable.notify(this,"playbackRate")}get paused(){return s.Observable.track(this,"paused"),this.#t.paused}set paused(e){}#a;#i;async#p(){if(this.#a||!this.src)return;this.#i=new AbortController;const e=this.#i.signal;try{const n=await(await fetch(this.src,{signal:e})).arrayBuffer(),i=new window.AudioContext,d=await i.decodeAudioData(n);i.close(),this.#a=d,s.Observable.notify(this,"duration")}catch{}finally{this.#i=void 0}}get duration(){s.Observable.track(this,"duration");const e=this.#t.duration;return Number.isFinite(e)&&e>0?e:this.#a&&this.#a.duration>0?this.#a.duration:e}set duration(e){}get currentTime(){return s.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.#s),this.#t.addEventListener("loadedmetadata",this.#r),this.#t.addEventListener("durationchange",this.#r),this.#d(),this.#o(),this.#s()}disconnectedCallback(){super.disconnectedCallback(),this.#d(!1),this.pause(),this.#t.removeEventListener("timeupdate",this.#s),this.#t.removeEventListener("loadedmetadata",this.#r),this.#t.removeEventListener("durationchange",this.#r)}play(){this.#l(T)}pause(){this.#l(A)}#d(e=!0){const t=e?"addEventListener":"removeEventListener";this.#e&&this.#e[t]("change",this.#u)}#l;#s;#r;#c;#u;#o;skip(e){const t=this.currentTime,n=parseInt(this.skipBy)*e,i=t+n;this.currentTime=Math.max(0,Math.min(this.duration,i))}}o([s.attr({attribute:"play-button-aria-label"})],r.prototype,"playButtonAriaLabel");o([s.attr({attribute:"pause-button-aria-label"})],r.prototype,"pauseButtonAriaLabel");o([s.attr({attribute:"slider-aria-label"})],r.prototype,"sliderAriaLabel");o([s.attr({attribute:"skip-forward-aria-label"})],r.prototype,"skipForwardButtonAriaLabel");o([s.attr({attribute:"skip-backward-aria-label"})],r.prototype,"skipBackwardButtonAriaLabel");o([s.attr],r.prototype,"connotation");o([s.attr],r.prototype,"src");o([s.attr({mode:"boolean"})],r.prototype,"disabled");o([s.attr({mode:"boolean"})],r.prototype,"notime");o([s.attr({attribute:"skip-by",converter:L})],r.prototype,"skipBy");o([s.attr({attribute:"playback-rates"})],r.prototype,"playbackRates");o([s.attr({mode:"boolean",attribute:"duration-fallback"})],r.prototype,"durationFallback");const F=({notime:a,disabled:e,duration:t,skipBy:n,playbackRates:i})=>B.classNames(["disabled",!!e||!t],["two-lines",!a&&(!!Number(n)||!!i)],["playback",!!i]),R=(a,{parent:e})=>a===e.playbackRate;function C(a){const e=a.tagFor(u.Button);return s.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 S(a){const e=a.tagFor(u.Button);return s.html`
+		<${e} class="skip backward"
+			@click="${t=>t.skip(k.BACKWARD)}"
+		icon="${t=>t.skipBy==l.MediaSkipBy.Five?"5-sec-backward-line":t.skipBy==l.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(a){const e=a.tagFor(u.Button);return s.html`
+		<${e} class="skip forward"
+		@click="${t=>t.skip(k.FORWARD)}"
+		icon="${t=>t.skipBy==l.MediaSkipBy.Five?"5-sec-forward-line":t.skipBy==l.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 O(a){const e=a.tagFor(h.Slider);return s.html`
+	<${e}
+		class="slider"
+		aria-label="${t=>t.sliderAriaLabel||t.locale.audioPlayer.sliderLabel}"
+		max="100"
+		aria-valuetext="${t=>p(t.currentTime)}"
+		connotation="${t=>t.connotation}"
+		?disabled="${t=>t.disabled||!t.duration}"
+		internal-part>
+	</${e}>`}function E(){return s.html` <div class="time-stamp">
+		<span class="current-time">${a=>p(a.currentTime)}</span>
+		${c.when(a=>a.duration&&a.duration!==1/0,s.html`
+				<span>/</span>
+				<span class="total-time">${a=>p(a.duration)}</span>
+			`)}
+	</div>`}function M(a,e){return e.parent.playbackRate=a,!0}const z=a=>{const e=a.tagFor(y.Menu),t=a.tagFor(u.Button),n=a.tagFor(m.MenuItem);return s.html` <div class="wrapper">
+		<div class="base ${F}">
+			<div class="controls">
+				${c.when(i=>i.skipBy&&i.skipBy!=l.MediaSkipBy.Zero,S(a))}
+				${C(a)}
+				${c.when(i=>i.skipBy&&i.skipBy!=l.MediaSkipBy.Zero,P(a))}
+				${c.when(i=>!i.notime,E())}
+			</div>
+			${O(a)}
+			${c.when(i=>!!i.playbackRates,s.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="${i=>i.connotation}"
+							  ?disabled="${i=>i.disabled||!i.duration}"
+				></${t}>
 
-const definition = require('../shared/definition5.cjs');
-
-definition.registerAudioPlayer();
+				${v.repeat(i=>g.getPlaybackRatesArray(i.playbackRates),s.html`<${n} @click="${M}"
+																			 control-type="radio"
+																			 class="playback-rate"
+																			 text="${i=>i}"
+																			 check-appearance="tick-only"
+																			 ?checked="${R}"></${n}>`)}
+			</${e}>`)}
+		</div>
+	</div>`},D=s.defineVividComponent("audio-player",r,z,[u.buttonDefinition,h.sliderDefinition,y.menuDefinition,m.menuItemDefinition],{styles:$}),I=s.createRegisterFunction(D);I();