@vonage/vivid 3.57.0 → 3.58.0

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>`;
 };

package/shared/definition5.js

@@ -1,4 +1,4 @@
-import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
+import { a as attr, F as FoundationElement, O as Observable, h as html, r as registerFactory } from './index.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
 import { S as Slider, a as sliderRegistries } from './definition46.js';
 import { M as MediaSkipBy } from './enums.js';
@@ -7,7 +7,6 @@ import './index2.js';
 import { L as Localized } from './localized.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { w as when } from './when.js';
-import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
 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}}";
@@ -22,6 +21,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;
@@ -32,7 +45,7 @@ const validSkipByConverter = {
 };
 class AudioPlayer extends FoundationElement {
   constructor() {
-    super(...arguments);
+    super();
     this.playButtonAriaLabel = null;
     this.pauseButtonAriaLabel = null;
     this.sliderAriaLabel = null;
@@ -40,106 +53,109 @@ class AudioPlayer extends 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 = () => {
+      Observable.notify(this, "currentTime");
+      const percent = this.currentTime / this.duration * 100;
+      if (percent === 100) {
+        this.pause();
+      }
+    };
+    this.#updateTotalTime = () => {
+      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 = () => {
+      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() {
+    Observable.track(this, "paused");
+    return this.#playerEl.paused;
+  }
+  set paused(_) {
+  }
+  get duration() {
+    Observable.track(this, "duration");
+    return this.#playerEl.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;
+  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([
   attr({ attribute: "play-button-aria-label" })
@@ -174,18 +190,27 @@ __decorateClass([
     converter: validSkipByConverter
   })
 ], AudioPlayer.prototype, "skipBy");
-__decorateClass([
-  observable
-], AudioPlayer.prototype, "paused");
-__decorateClass([
-  observable
-], AudioPlayer.prototype, "duration");
 applyMixins(AudioPlayer, 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(["disabled", Boolean(disabled) || !duration]);
 function renderButton(context) {
   const buttonTag = context.tagFor(Button);
-  return html`<${buttonTag} class="pause" @click="${(x) => x._togglePlay()}"
+  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'
@@ -196,7 +221,8 @@ function renderButton(context) {
 function renderBackwardSkipButtons(context) {
   const buttonTag = context.tagFor(Button);
   return 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 == 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}"
@@ -208,7 +234,8 @@ function renderBackwardSkipButtons(context) {
 function renderForwardSkipButtons(context) {
   const buttonTag = context.tagFor(Button);
   return 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 == 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}"
@@ -219,29 +246,26 @@ function renderForwardSkipButtons(context) {
 }
 function renderSlider(context) {
   const sliderTag = context.tagFor(Slider);
-  return html`<${sliderTag}
-	${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 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 html` <div class="time-stamp" ${ref("_timeStampEl")}>
-		<span class="current-time">0:00</span>
+  return 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 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(
     (x) => x.skipBy && x.skipBy != MediaSkipBy.Zero,
@@ -255,12 +279,6 @@ const AudioPlayerTemplate = (context) => {
 				${when((x) => !x.notime, renderTimestamp())}
 			</div>
 			${renderSlider(context)}
-			<audio
-				${ref("_playerEl")}
-				src="${(x) => x.src}"
-				@timeupdate="${(x) => x._updateProgress()}"
-				@loadedmetadata="${(x) => x._updateTotalTime()}"
-			></audio>
 		</div>
 	</div>`;
 };