@vonage/vivid 3.56.0 → 3.58.0

package/shared/definition46.cjs

@@ -484,7 +484,7 @@ index.__decorate([
     index.attr
 ], Slider$1.prototype, "mode", void 0);
 
-const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}.control.horizontal .track .mark{block-size:4px;inline-size:100%}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:4px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}";
+const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition46.js

@@ -482,7 +482,7 @@ __decorate([
     attr
 ], Slider$1.prototype, "mode", void 0);
 
-const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}.control.horizontal .track .mark{block-size:4px;inline-size:100%}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:4px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}";
+const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition5.cjs

@@ -9,7 +9,6 @@ require('./index2.cjs');
 const localized = require('./localized.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const when = require('./when.cjs');
-const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
 const styles = ":host{display:block;max-inline-size:350px}.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:16px;inline-size:100%;user-select:none}.base .slider{flex:1;grid-area:slider;min-inline-size:var(--audio-player-min-inline-size, 200px)}.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{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}}";
@@ -24,6 +23,20 @@ var __decorateClass = (decorators, target, key, kind) => {
     __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;
@@ -34,7 +47,7 @@ const validSkipByConverter = {
 };
 class AudioPlayer extends index.FoundationElement {
   constructor() {
-    super(...arguments);
+    super();
     this.playButtonAriaLabel = null;
     this.pauseButtonAriaLabel = null;
     this.sliderAriaLabel = null;
@@ -42,106 +55,109 @@ class AudioPlayer extends index.FoundationElement {
     this.skipBackwardButtonAriaLabel = null;
     this.disabled = false;
     this.notime = false;
-    this.paused = true;
-    /**
-     * @internal
-     */
-    this._rewind = () => {
-      if (this._playerEl) {
-        this._playerEl.currentTime = this._playerEl.duration * (Number(this._sliderEl.value) / 100);
+    this.#playerEl = new Audio();
+    this.#pausedChanged = (pausing) => {
+      if (pausing === this.paused) {
+        return;
+      }
+      if (!this.paused) {
+        this.#playerEl.pause();
+      } else {
+        this.#updateProgress();
+        this.#playerEl.play();
+      }
+      this.#setPausedState();
+    };
+    this.#updateProgress = () => {
+      index.Observable.notify(this, "currentTime");
+      const percent = this.currentTime / this.duration * 100;
+      if (percent === 100) {
+        this.pause();
+      }
+    };
+    this.#updateTotalTime = () => {
+      index.Observable.notify(this, "duration");
+    };
+    this.#rewind = () => {
+      if (this.#playerEl) {
+        this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
+      }
+    };
+    this.#handleSliderEvent = (event) => {
+      if (event.target === this.#sliderEl) {
+        this.pause();
+        this.#rewind();
       }
+      return true;
     };
+    this.#setPausedState = () => {
+      index.Observable.notify(this, "paused");
+    };
+    this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
+    this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
+  }
+  srcChanged() {
+    if (this.src === void 0) {
+      this.#playerEl.removeAttribute("src");
+    } else {
+      this.#playerEl.src = this.src;
+    }
+  }
+  get paused() {
+    index.Observable.track(this, "paused");
+    return this.#playerEl.paused;
+  }
+  set paused(_) {
+  }
+  get duration() {
+    index.Observable.track(this, "duration");
+    return this.#playerEl.duration;
+  }
+  set duration(_) {
+  }
+  get currentTime() {
+    index.Observable.track(this, "currentTime");
+    return this.#playerEl.currentTime;
+  }
+  set currentTime(value) {
+    this.#playerEl.currentTime = value;
+  }
+  get #sliderEl() {
+    return this.shadowRoot.querySelector(".slider");
+  }
+  #playerEl;
+  get #baseElement() {
+    return this.shadowRoot.querySelector(".base");
   }
   connectedCallback() {
     super.connectedCallback();
-    document.addEventListener("mouseup", this._rewind);
+    document.addEventListener("mouseup", this.#rewind);
+    this.#setInteractionListeners();
+    this.#setPausedState();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    document.addEventListener("mouseup", this._rewind);
+    document.addEventListener("mouseup", this.#rewind);
+    this.#setInteractionListeners(false);
   }
-  /**
-   * @internal
-   */
-  _togglePlay() {
-    if (this.paused) {
-      this._updateProgress();
-      this._playerEl.play();
-    } else {
-      this._playerEl.pause();
-    }
-    this.paused = !this.paused;
+  play() {
+    this.#pausedChanged(PLAY);
   }
-  /**
-   * @internal
-   */
-  _onSkipButtonClick(isForward) {
-    if (this._playerEl) {
-      const currentTime = this._playerEl.currentTime;
-      const skipDirection = isForward ? 1 : -1;
-      const skipValue = parseInt(this.skipBy) * skipDirection;
-      const newTime = currentTime + skipValue;
-      this._playerEl.currentTime = Math.max(
-        0,
-        Math.min(this._playerEl.duration, newTime)
-      );
-      this._updateProgress();
-    }
+  pause() {
+    this.#pausedChanged(PAUSE);
   }
-  /**
-   * @internal
-   */
-  _updateProgress() {
-    let currentTime;
-    const current = this._playerEl.currentTime;
-    const percent = current / this._playerEl.duration * 100;
-    if (this._sliderEl) {
-      this._sliderEl.value = percent.toString();
-      this._sliderEl.ariaValuetext = this._formatTime(current);
-    }
-    if (percent === 100) {
-      this.paused = true;
-    }
-    if (this._timeStampEl) {
-      currentTime = this._timeStampEl.querySelector(".current-time");
-      if (currentTime)
-        currentTime.textContent = this._formatTime(current);
-    }
-  }
-  /**
-   * @internal
-   */
-  _updateTotalTime() {
-    let totalTime;
-    if (this._playerEl)
-      this.duration = this._playerEl.duration;
-    if (this._timeStampEl) {
-      totalTime = this._timeStampEl.querySelector(".total-time");
-      if (totalTime)
-        totalTime.textContent = this._formatTime(this._playerEl.duration);
-    }
-  }
-  /**
-   * @internal
-   */
-  _handleSliderEvent(event) {
-    if (event.target === this._sliderEl) {
-      this.paused = true;
-      if (this._playerEl) {
-        this._playerEl.pause();
-      }
-      this._rewind();
-    }
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _formatTime(time) {
-    const min = Math.floor(time / 60);
-    const sec = Math.floor(time % 60);
-    return min + ":" + (sec < 10 ? "0" + sec : sec);
+  #setInteractionListeners(add = true) {
+    const action = add ? "addEventListener" : "removeEventListener";
+    this.#baseElement[action]("keyup", this.#handleSliderEvent);
+    this.#baseElement[action]("keydown", this.#handleSliderEvent);
+    this.#baseElement[action]("mousedown", this.#handleSliderEvent);
   }
+  #pausedChanged;
+  #updateProgress;
+  #updateTotalTime;
+  #rewind;
+  #handleSliderEvent;
+  #setPausedState;
 }
 __decorateClass([
   index.attr({ attribute: "play-button-aria-label" })
@@ -176,18 +192,27 @@ __decorateClass([
     converter: validSkipByConverter
   })
 ], AudioPlayer.prototype, "skipBy");
-__decorateClass([
-  index.observable
-], AudioPlayer.prototype, "paused");
-__decorateClass([
-  index.observable
-], AudioPlayer.prototype, "duration");
 applyMixins.applyMixins(AudioPlayer, localized.Localized);
 
+function getCurrentTimePercentage(x) {
+  if (Number.isNaN(x.currentTime) || Number.isNaN(x.duration)) {
+    return 0;
+  }
+  return x.currentTime / x.duration * 100;
+}
+function skip(audioElement, skipDirection) {
+  const currentTime = audioElement.currentTime;
+  const skipValue = parseInt(audioElement.skipBy) * skipDirection;
+  const newTime = currentTime + skipValue;
+  audioElement.currentTime = Math.max(
+    0,
+    Math.min(audioElement.duration, newTime)
+  );
+}
 const getClasses = ({ disabled, duration }) => classNames.classNames(["disabled", Boolean(disabled) || !duration]);
 function renderButton(context) {
   const buttonTag = context.tagFor(definition.Button);
-  return index.html`<${buttonTag} class="pause" @click="${(x) => x._togglePlay()}"
+  return index.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'
@@ -198,7 +223,8 @@ function renderButton(context) {
 function renderBackwardSkipButtons(context) {
   const buttonTag = context.tagFor(definition.Button);
   return index.html`
-		<${buttonTag} class="skip backward" @click="${(x) => x._onSkipButtonClick(false)}"
+		<${buttonTag} class="skip backward"
+			@click="${(element) => skip(element, 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"}"
 		size='condensed'
 		aria-label="${(x) => x.skipBackwardButtonAriaLabel || x.locale.audioPlayer.skipBackwardButton}"
@@ -210,7 +236,8 @@ function renderBackwardSkipButtons(context) {
 function renderForwardSkipButtons(context) {
   const buttonTag = context.tagFor(definition.Button);
   return index.html`
-		<${buttonTag} class="skip forward" @click="${(x) => x._onSkipButtonClick(true)}"
+		<${buttonTag} class="skip forward"
+		@click="${(element) => skip(element, 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"}"
 		size='condensed'
 		aria-label="${(x) => x.skipForwardButtonAriaLabel || x.locale.audioPlayer.skipForwardButton}"
@@ -221,29 +248,26 @@ function renderForwardSkipButtons(context) {
 }
 function renderSlider(context) {
   const sliderTag = context.tagFor(definition$1.Slider);
-  return index.html`<${sliderTag}
-	${ref.ref("_sliderEl")} class="slider"
-	aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
-	value="0" max="100"
-	connotation="${(x) => x.connotation}"
-	?disabled="${(x) => x.disabled || !x.duration}">
+  return index.html`
+	<${sliderTag}
+		class="slider"
+		aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
+		value="${getCurrentTimePercentage}" max="100"
+		ariaValuetext="${(x) => formatTime(x.currentTime)}"
+		connotation="${(x) => x.connotation}"
+		?disabled="${(x) => x.disabled || !x.duration}">
 	</${sliderTag}>`;
 }
 function renderTimestamp() {
-  return index.html` <div class="time-stamp" ${ref.ref("_timeStampEl")}>
-		<span class="current-time">0:00</span>
+  return index.html` <div class="time-stamp">
+		<span class="current-time">${(x) => formatTime(x.currentTime)}</span>
 		<span>/</span>
-		<span class="total-time">0:00</span>
+		<span class="total-time">${(x) => formatTime(x.duration)}</span>
 	</div>`;
 }
 const AudioPlayerTemplate = (context) => {
   return index.html` <div class="wrapper">
-		<div
-			class="base ${getClasses}"
-			@keyup="${(x, c) => x._handleSliderEvent(c.event)}"
-			@keydown="${(x, c) => x._handleSliderEvent(c.event)}"
-			@mousedown="${(x, c) => x._handleSliderEvent(c.event)}"
-		>
+		<div class="base ${getClasses}">
 			<div class="controls">
 				${when.when(
     (x) => x.skipBy && x.skipBy != enums.MediaSkipBy.Zero,
@@ -257,12 +281,6 @@ const AudioPlayerTemplate = (context) => {
 				${when.when((x) => !x.notime, renderTimestamp())}
 			</div>
 			${renderSlider(context)}
-			<audio
-				${ref.ref("_playerEl")}
-				src="${(x) => x.src}"
-				@timeupdate="${(x) => x._updateProgress()}"
-				@loadedmetadata="${(x) => x._updateTotalTime()}"
-			></audio>
 		</div>
 	</div>`;
 };