@vonage/vivid 3.57.0 → 3.59.0

package/shared/definition5.cjs

@@ -1,18 +1,21 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition11.cjs');
-const definition$1 = require('./definition46.cjs');
+const definition$1 = require('./definition11.cjs');
+const definition$2 = require('./definition46.cjs');
+const definition$3 = require('./definition30.cjs');
 const enums = require('./enums.cjs');
 require('./affix.cjs');
 require('./index2.cjs');
 const localized = require('./localized.cjs');
 const applyMixins = require('./apply-mixins.cjs');
+const videoPlayer = require('./video-player.cjs');
+const definition = require('./definition29.cjs');
 const when = require('./when.cjs');
-const ref = require('./ref.cjs');
+const repeat = require('./repeat.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}}";
+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-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 __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -24,6 +27,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 +51,7 @@ const validSkipByConverter = {
 };
 class AudioPlayer extends index.FoundationElement {
   constructor() {
-    super(...arguments);
+    super();
     this.playButtonAriaLabel = null;
     this.pauseButtonAriaLabel = null;
     this.sliderAriaLabel = null;
@@ -42,106 +59,118 @@ 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.playbackRates = null;
+    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);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("mouseup", this._rewind);
+  get playbackRate() {
+    index.Observable.track(this, "playbackRate");
+    return this.#playerEl.playbackRate;
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.addEventListener("mouseup", this._rewind);
+  set playbackRate(value) {
+    this.#playerEl.playbackRate = value;
+    index.Observable.notify(this, "playbackRate");
   }
-  /**
-   * @internal
-   */
-  _togglePlay() {
-    if (this.paused) {
-      this._updateProgress();
-      this._playerEl.play();
+  srcChanged() {
+    if (this.src === void 0) {
+      this.#playerEl.removeAttribute("src");
     } else {
-      this._playerEl.pause();
+      this.#playerEl.src = this.src;
     }
-    this.paused = !this.paused;
   }
-  /**
-   * @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();
-    }
+  get paused() {
+    index.Observable.track(this, "paused");
+    return this.#playerEl.paused;
   }
-  /**
-   * @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);
-    }
+  set paused(_) {
   }
-  /**
-   * @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);
-    }
+  get duration() {
+    index.Observable.track(this, "duration");
+    return this.#playerEl.duration;
   }
-  /**
-   * @internal
-   */
-  _handleSliderEvent(event) {
-    if (event.target === this._sliderEl) {
-      this.paused = true;
-      if (this._playerEl) {
-        this._playerEl.pause();
-      }
-      this._rewind();
-    }
-    return true;
+  set duration(_) {
+  }
+  get currentTime() {
+    index.Observable.track(this, "currentTime");
+    return this.#playerEl.currentTime;
   }
-  /**
-   * @internal
-   */
-  _formatTime(time) {
-    const min = Math.floor(time / 60);
-    const sec = Math.floor(time % 60);
-    return min + ":" + (sec < 10 ? "0" + sec : sec);
+  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);
+    this.#setInteractionListeners();
+    this.#setPausedState();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.addEventListener("mouseup", this.#rewind);
+    this.#setInteractionListeners(false);
+  }
+  play() {
+    this.#pausedChanged(PLAY);
+  }
+  pause() {
+    this.#pausedChanged(PAUSE);
+  }
+  #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" })
@@ -177,17 +206,45 @@ __decorateClass([
   })
 ], AudioPlayer.prototype, "skipBy");
 __decorateClass([
-  index.observable
-], AudioPlayer.prototype, "paused");
-__decorateClass([
-  index.observable
-], AudioPlayer.prototype, "duration");
+  index.attr({ attribute: "playback-rates" })
+], AudioPlayer.prototype, "playbackRates");
 applyMixins.applyMixins(AudioPlayer, localized.Localized);
 
-const getClasses = ({ disabled, duration }) => classNames.classNames(["disabled", Boolean(disabled) || !duration]);
+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 = ({
+  notime,
+  disabled,
+  duration,
+  skipBy,
+  playbackRates
+}) => classNames.classNames(
+  ["disabled", Boolean(disabled) || !duration],
+  [
+    "two-lines",
+    !notime && (Boolean(Number(skipBy)) || Boolean(playbackRates))
+  ],
+  ["playback", Boolean(playbackRates)]
+);
+const isMenuItemChekced = (playbackRate, { parent }) => {
+  return playbackRate === parent.playbackRate;
+};
 function renderButton(context) {
-  const buttonTag = context.tagFor(definition.Button);
-  return index.html`<${buttonTag} class="pause" @click="${(x) => x._togglePlay()}"
+  const buttonTag = context.tagFor(definition$1.Button);
+  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'
@@ -196,9 +253,10 @@ function renderButton(context) {
   ></${buttonTag}>`;
 }
 function renderBackwardSkipButtons(context) {
-  const buttonTag = context.tagFor(definition.Button);
+  const buttonTag = context.tagFor(definition$1.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}"
@@ -208,9 +266,10 @@ function renderBackwardSkipButtons(context) {
 	`;
 }
 function renderForwardSkipButtons(context) {
-  const buttonTag = context.tagFor(definition.Button);
+  const buttonTag = context.tagFor(definition$1.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}"
@@ -220,30 +279,34 @@ 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}">
+  const sliderTag = context.tagFor(definition$2.Slider);
+  return index.html`
+	<${sliderTag}
+		class="slider"
+		aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
+		current-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>`;
 }
+function handlePlaybackRateClick(playbackRate, context) {
+  context.parent.playbackRate = playbackRate;
+  return true;
+}
 const AudioPlayerTemplate = (context) => {
+  const menuTag = context.tagFor(definition.Menu);
+  const buttonTag = context.tagFor(definition$1.Button);
+  const menuItemTag = context.tagFor(definition.MenuItem);
   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 +320,29 @@ 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>
+			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss>
+				${when.when(
+    (x) => Boolean(x.playbackRates),
+    index.html`<${buttonTag} id="playback-open-button"
+							  class="playback-button"
+							  slot="anchor"
+							  icon="playback-speed-line"
+							  aria-label="play back rates"
+							  size='condensed'
+							  connotation="${(x) => x.connotation}"
+							  ?disabled="${(x) => x.disabled || !x.duration}"
+				></${buttonTag}>`
+  )}
+				${repeat.repeat(
+    (x) => x.playbackRates ? videoPlayer.getPlaybackRatesArray(x.playbackRates) : [],
+    index.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
+                          role="menuitemradio"
+												 class="playback-rate"
+												 text="${(x) => x}"
+												 check-appearance="tick-only"
+												 ?checked="${isMenuItemChekced}"></${menuItemTag}>`
+  )}
+			</${menuTag}>
 		</div>
 	</div>`;
 };
@@ -274,8 +354,9 @@ const audioPlayerDefinition = AudioPlayer.compose({
 });
 const audioPlayerRegistries = [
   audioPlayerDefinition(),
-  ...definition.buttonRegistries,
-  ...definition$1.sliderRegistries
+  ...definition$1.buttonRegistries,
+  ...definition$2.sliderRegistries,
+  ...definition$3.menuRegistries
 ];
 const registerAudioPlayer = index.registerFactory(audioPlayerRegistries);