@vonage/vivid 4.27.0 → 4.29.0

package/shared/definition5.cjs

@@ -57,6 +57,8 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
     this.notime = false;
     this.playbackRates = null;
     this.#playerEl = new Audio();
+    this.#isProgrammaticSliderUpdate = false;
+    this.durationFallback = false;
     this.#pausedChanged = (pausing) => {
       if (pausing === this.paused) {
         this.#setPausedState();
@@ -70,18 +72,28 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
       }
       this.#setPausedState();
     };
-    this.#currentTimeChanged = false;
     this.#updateProgress = () => {
-      this.#currentTimeChanged = true;
       vividElement.Observable.notify(this, "currentTime");
-      const percent = this.currentTime / this.duration * 100;
-      this.#sliderEl.value = percent.toString();
-      if (percent === 100) {
+      const duration = this.duration;
+      const currentTime = this.currentTime;
+      const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
+      const percent = isValid ? currentTime / duration * 100 : 0;
+      if (this.#sliderEl) {
+        this.#isProgrammaticSliderUpdate = true;
+        this.#sliderEl.value = percent.toString();
+        this.#isProgrammaticSliderUpdate = false;
+      }
+      if (isValid && percent === 100) {
         this.pause();
       }
     };
     this.#updateTotalTime = () => {
       vividElement.Observable.notify(this, "duration");
+      if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
+        if (this.durationFallback) {
+          this.#fetchAndCacheAudioBuffer();
+        }
+      }
     };
     this.#updateCurrentTimeOnSliderChange = () => {
       if (!this.paused && this.#sliderEl.isDragging) {
@@ -93,16 +105,28 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
           }
         }, 0);
       }
-      if (!this.#currentTimeChanged && this.#playerEl) {
+      if (this.#isProgrammaticSliderUpdate) {
+        return;
+      }
+      if (this.#playerEl) {
         this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
       }
-      this.#currentTimeChanged = false;
     };
     this.#setPausedState = () => {
       vividElement.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;
+    }
+    this.#audioBuffer = void 0;
+    if (this.#fetchAbortController) {
+      this.#fetchAbortController.abort();
+    }
+    this.#fetchAbortController = void 0;
   }
   get playbackRate() {
     vividElement.Observable.track(this, "playbackRate");
@@ -112,22 +136,41 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
     this.#playerEl.playbackRate = value;
     vividElement.Observable.notify(this, "playbackRate");
   }
-  srcChanged() {
-    if (this.src === void 0) {
-      this.#playerEl.removeAttribute("src");
-    } else {
-      this.#playerEl.src = this.src;
-    }
-  }
   get paused() {
     vividElement.Observable.track(this, "paused");
     return this.#playerEl.paused;
   }
   set paused(_) {
   }
+  #audioBuffer;
+  #fetchAbortController;
+  async #fetchAndCacheAudioBuffer() {
+    if (this.#audioBuffer || !this.src) return;
+    this.#fetchAbortController = new AbortController();
+    const signal = this.#fetchAbortController.signal;
+    try {
+      const response = await fetch(this.src, { signal });
+      const arrayBuffer = await response.arrayBuffer();
+      const audioContext = new window.AudioContext();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+      audioContext.close();
+      this.#audioBuffer = audioBuffer;
+      vividElement.Observable.notify(this, "duration");
+    } catch (e) {
+    } finally {
+      this.#fetchAbortController = void 0;
+    }
+  }
   get duration() {
     vividElement.Observable.track(this, "duration");
-    return this.#playerEl.duration;
+    const duration = this.#playerEl.duration;
+    if (Number.isFinite(duration) && duration > 0) {
+      return duration;
+    }
+    if (this.#audioBuffer && this.#audioBuffer.duration > 0) {
+      return this.#audioBuffer.duration;
+    }
+    return duration;
   }
   set duration(_) {
   }
@@ -142,15 +185,23 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
     return this.shadowRoot.querySelector(".slider");
   }
   #playerEl;
+  #isProgrammaticSliderUpdate;
   connectedCallback() {
     super.connectedCallback();
+    this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
+    this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
+    this.#playerEl.addEventListener("durationchange", this.#updateTotalTime);
     this.#setSliderInteractionListeners();
     this.#setPausedState();
+    this.#updateProgress();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#setSliderInteractionListeners(false);
     this.pause();
+    this.#playerEl.removeEventListener("timeupdate", this.#updateProgress);
+    this.#playerEl.removeEventListener("loadedmetadata", this.#updateTotalTime);
+    this.#playerEl.removeEventListener("durationchange", this.#updateTotalTime);
   }
   play() {
     this.#pausedChanged(PLAY);
@@ -165,12 +216,24 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
     }
   }
   #pausedChanged;
-  #currentTimeChanged;
   #updateProgress;
   #updateTotalTime;
   #dragInterval;
   #updateCurrentTimeOnSliderChange;
   #setPausedState;
+  /**
+   * Skips the current time by the skipBy value
+   *
+   * @param skipDirection - the direction to skip
+   *
+   * @internal
+   */
+  skip(skipDirection) {
+    const currentTime = this.currentTime;
+    const skipValue = parseInt(this.skipBy) * skipDirection;
+    const newTime = currentTime + skipValue;
+    this.currentTime = Math.max(0, Math.min(this.duration, newTime));
+  }
 }
 __decorateClass([
   vividElement.attr({ attribute: "play-button-aria-label" })
@@ -208,16 +271,10 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ attribute: "playback-rates" })
 ], AudioPlayer.prototype, "playbackRates");
+__decorateClass([
+  vividElement.attr({ mode: "boolean", attribute: "duration-fallback" })
+], AudioPlayer.prototype, "durationFallback");
 
-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 = ({
   notime,
   disabled,
@@ -249,7 +306,7 @@ function renderBackwardSkipButtons(context) {
   const buttonTag = context.tagFor(definition$1.Button);
   return vividElement.html`
 		<${buttonTag} class="skip backward"
-			@click="${(element) => skip(element, SKIP_DIRECTIONS.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"}"
 		size='condensed'
 		aria-label="${(x) => x.skipBackwardButtonAriaLabel || x.locale.audioPlayer.skipBackwardButton}"
@@ -262,7 +319,7 @@ function renderForwardSkipButtons(context) {
   const buttonTag = context.tagFor(definition$1.Button);
   return vividElement.html`
 		<${buttonTag} class="skip forward"
-		@click="${(element) => skip(element, SKIP_DIRECTIONS.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"}"
 		size='condensed'
 		aria-label="${(x) => x.skipForwardButtonAriaLabel || x.locale.audioPlayer.skipForwardButton}"
@@ -276,7 +333,6 @@ function renderSlider(context) {
   return vividElement.html`
 	<${sliderTag}
 		class="slider"
-		value="0"
 		aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
 		max="100"
 		aria-valuetext="${(x) => formatTime(x.currentTime)}"

package/shared/definition5.js

@@ -55,6 +55,8 @@ class AudioPlayer extends Localized(VividElement) {
     this.notime = false;
     this.playbackRates = null;
     this.#playerEl = new Audio();
+    this.#isProgrammaticSliderUpdate = false;
+    this.durationFallback = false;
     this.#pausedChanged = (pausing) => {
       if (pausing === this.paused) {
         this.#setPausedState();
@@ -68,18 +70,28 @@ class AudioPlayer extends Localized(VividElement) {
       }
       this.#setPausedState();
     };
-    this.#currentTimeChanged = false;
     this.#updateProgress = () => {
-      this.#currentTimeChanged = true;
       Observable.notify(this, "currentTime");
-      const percent = this.currentTime / this.duration * 100;
-      this.#sliderEl.value = percent.toString();
-      if (percent === 100) {
+      const duration = this.duration;
+      const currentTime = this.currentTime;
+      const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
+      const percent = isValid ? currentTime / duration * 100 : 0;
+      if (this.#sliderEl) {
+        this.#isProgrammaticSliderUpdate = true;
+        this.#sliderEl.value = percent.toString();
+        this.#isProgrammaticSliderUpdate = false;
+      }
+      if (isValid && percent === 100) {
         this.pause();
       }
     };
     this.#updateTotalTime = () => {
       Observable.notify(this, "duration");
+      if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
+        if (this.durationFallback) {
+          this.#fetchAndCacheAudioBuffer();
+        }
+      }
     };
     this.#updateCurrentTimeOnSliderChange = () => {
       if (!this.paused && this.#sliderEl.isDragging) {
@@ -91,16 +103,28 @@ class AudioPlayer extends Localized(VividElement) {
           }
         }, 0);
       }
-      if (!this.#currentTimeChanged && this.#playerEl) {
+      if (this.#isProgrammaticSliderUpdate) {
+        return;
+      }
+      if (this.#playerEl) {
         this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
       }
-      this.#currentTimeChanged = false;
     };
     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;
+    }
+    this.#audioBuffer = void 0;
+    if (this.#fetchAbortController) {
+      this.#fetchAbortController.abort();
+    }
+    this.#fetchAbortController = void 0;
   }
   get playbackRate() {
     Observable.track(this, "playbackRate");
@@ -110,22 +134,41 @@ class AudioPlayer extends Localized(VividElement) {
     this.#playerEl.playbackRate = value;
     Observable.notify(this, "playbackRate");
   }
-  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(_) {
   }
+  #audioBuffer;
+  #fetchAbortController;
+  async #fetchAndCacheAudioBuffer() {
+    if (this.#audioBuffer || !this.src) return;
+    this.#fetchAbortController = new AbortController();
+    const signal = this.#fetchAbortController.signal;
+    try {
+      const response = await fetch(this.src, { signal });
+      const arrayBuffer = await response.arrayBuffer();
+      const audioContext = new window.AudioContext();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+      audioContext.close();
+      this.#audioBuffer = audioBuffer;
+      Observable.notify(this, "duration");
+    } catch (e) {
+    } finally {
+      this.#fetchAbortController = void 0;
+    }
+  }
   get duration() {
     Observable.track(this, "duration");
-    return this.#playerEl.duration;
+    const duration = this.#playerEl.duration;
+    if (Number.isFinite(duration) && duration > 0) {
+      return duration;
+    }
+    if (this.#audioBuffer && this.#audioBuffer.duration > 0) {
+      return this.#audioBuffer.duration;
+    }
+    return duration;
   }
   set duration(_) {
   }
@@ -140,15 +183,23 @@ class AudioPlayer extends Localized(VividElement) {
     return this.shadowRoot.querySelector(".slider");
   }
   #playerEl;
+  #isProgrammaticSliderUpdate;
   connectedCallback() {
     super.connectedCallback();
+    this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
+    this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
+    this.#playerEl.addEventListener("durationchange", this.#updateTotalTime);
     this.#setSliderInteractionListeners();
     this.#setPausedState();
+    this.#updateProgress();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#setSliderInteractionListeners(false);
     this.pause();
+    this.#playerEl.removeEventListener("timeupdate", this.#updateProgress);
+    this.#playerEl.removeEventListener("loadedmetadata", this.#updateTotalTime);
+    this.#playerEl.removeEventListener("durationchange", this.#updateTotalTime);
   }
   play() {
     this.#pausedChanged(PLAY);
@@ -163,12 +214,24 @@ class AudioPlayer extends Localized(VividElement) {
     }
   }
   #pausedChanged;
-  #currentTimeChanged;
   #updateProgress;
   #updateTotalTime;
   #dragInterval;
   #updateCurrentTimeOnSliderChange;
   #setPausedState;
+  /**
+   * Skips the current time by the skipBy value
+   *
+   * @param skipDirection - the direction to skip
+   *
+   * @internal
+   */
+  skip(skipDirection) {
+    const currentTime = this.currentTime;
+    const skipValue = parseInt(this.skipBy) * skipDirection;
+    const newTime = currentTime + skipValue;
+    this.currentTime = Math.max(0, Math.min(this.duration, newTime));
+  }
 }
 __decorateClass([
   attr({ attribute: "play-button-aria-label" })
@@ -206,16 +269,10 @@ __decorateClass([
 __decorateClass([
   attr({ attribute: "playback-rates" })
 ], AudioPlayer.prototype, "playbackRates");
+__decorateClass([
+  attr({ mode: "boolean", attribute: "duration-fallback" })
+], AudioPlayer.prototype, "durationFallback");
 
-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 = ({
   notime,
   disabled,
@@ -247,7 +304,7 @@ function renderBackwardSkipButtons(context) {
   const buttonTag = context.tagFor(Button);
   return html`
 		<${buttonTag} class="skip backward"
-			@click="${(element) => skip(element, SKIP_DIRECTIONS.BACKWARD)}"
+			@click="${(element) => element.skip(SKIP_DIRECTIONS.BACKWARD)}"
 		icon="${(x) => x.skipBy == MediaSkipBy.Five ? "5-sec-backward-line" : x.skipBy == MediaSkipBy.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
 		size='condensed'
 		aria-label="${(x) => x.skipBackwardButtonAriaLabel || x.locale.audioPlayer.skipBackwardButton}"
@@ -260,7 +317,7 @@ function renderForwardSkipButtons(context) {
   const buttonTag = context.tagFor(Button);
   return html`
 		<${buttonTag} class="skip forward"
-		@click="${(element) => skip(element, SKIP_DIRECTIONS.FORWARD)}"
+		@click="${(element) => element.skip(SKIP_DIRECTIONS.FORWARD)}"
 		icon="${(x) => x.skipBy == MediaSkipBy.Five ? "5-sec-forward-line" : x.skipBy == MediaSkipBy.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
 		size='condensed'
 		aria-label="${(x) => x.skipForwardButtonAriaLabel || x.locale.audioPlayer.skipForwardButton}"
@@ -274,7 +331,6 @@ function renderSlider(context) {
   return html`
 	<${sliderTag}
 		class="slider"
-		value="0"
 		aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
 		max="100"
 		aria-valuetext="${(x) => formatTime(x.currentTime)}"

package/shared/definition61.cjs

@@ -23,9 +23,11 @@ class Tooltip extends anchored.Anchored(vividElement.VividElement) {
     this.open = false;
     this.#show = () => {
       this.open = true;
+      this.#updateAnchorExpanded();
     };
     this.#hide = () => {
       this.open = false;
+      this.#updateAnchorExpanded();
     };
     this.#closeOnEscape = (e) => {
       if (e.key === "Escape") this.#hide();
@@ -51,15 +53,24 @@ class Tooltip extends anchored.Anchored(vividElement.VividElement) {
     a.addEventListener("mouseout", this.#hide);
     a.addEventListener("focusin", this.#show);
     a.addEventListener("focusout", this.#hide);
+    a.setAttribute("aria-haspopup", "true");
+    a.setAttribute("aria-expanded", String(this.open));
   }
   #cleanupAnchor(a) {
     a.removeEventListener("mouseover", this.#show);
     a.removeEventListener("mouseout", this.#hide);
     a.removeEventListener("focusin", this.#show);
     a.removeEventListener("focusout", this.#hide);
+    a.removeAttribute("aria-haspopup");
+    a.removeAttribute("aria-expanded");
   }
   #show;
   #hide;
+  #updateAnchorExpanded() {
+    if (this._anchorEl) {
+      this._anchorEl.setAttribute("aria-expanded", String(this.open));
+    }
+  }
   #updateListeners() {
     document.removeEventListener("keydown", this.#closeOnEscape);
     if (this.open && this.isConnected) {

package/shared/definition61.js

@@ -21,9 +21,11 @@ class Tooltip extends Anchored(VividElement) {
     this.open = false;
     this.#show = () => {
       this.open = true;
+      this.#updateAnchorExpanded();
     };
     this.#hide = () => {
       this.open = false;
+      this.#updateAnchorExpanded();
     };
     this.#closeOnEscape = (e) => {
       if (e.key === "Escape") this.#hide();
@@ -49,15 +51,24 @@ class Tooltip extends Anchored(VividElement) {
     a.addEventListener("mouseout", this.#hide);
     a.addEventListener("focusin", this.#show);
     a.addEventListener("focusout", this.#hide);
+    a.setAttribute("aria-haspopup", "true");
+    a.setAttribute("aria-expanded", String(this.open));
   }
   #cleanupAnchor(a) {
     a.removeEventListener("mouseover", this.#show);
     a.removeEventListener("mouseout", this.#hide);
     a.removeEventListener("focusin", this.#show);
     a.removeEventListener("focusout", this.#hide);
+    a.removeAttribute("aria-haspopup");
+    a.removeAttribute("aria-expanded");
   }
   #show;
   #hide;
+  #updateAnchorExpanded() {
+    if (this._anchorEl) {
+      this._anchorEl.setAttribute("aria-expanded", String(this.open));
+    }
+  }
   #updateListeners() {
     document.removeEventListener("keydown", this.#closeOnEscape);
     if (this.open && this.isConnected) {