@vonage/vivid 5.15.0 → 5.16.0

package/audio-player/definition.cjs

@@ -1,463 +1,6 @@
-'use strict';
-
-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}}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __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;
-  },
-  fromView(value) {
-    return Object.values(enums.MediaSkipBy).includes(value) ? value : void 0;
-  }
-};
-class AudioPlayer extends localized.Localized(vividElement.VividElement) {
-  constructor() {
-    super();
-    this.playButtonAriaLabel = null;
-    this.pauseButtonAriaLabel = null;
-    this.sliderAriaLabel = null;
-    this.skipForwardButtonAriaLabel = null;
-    this.skipBackwardButtonAriaLabel = null;
-    this.disabled = false;
-    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();
-        return;
-      }
-      if (!this.paused) {
-        this.#playerEl.pause();
-      } else {
-        this.#updateProgress();
-        this.#playerEl.play();
-      }
-      this.#setPausedState();
-    };
-    this.#updateProgress = () => {
-      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;
-      const percent = isValid ? currentTime / duration * 100 : 0;
-      /* v8 ignore else -- @preserve */
-      if (this.#sliderEl) {
-        this.#isProgrammaticSliderUpdate = true;
-        this.#sliderEl.value = percent.toString();
-        this.#isProgrammaticSliderUpdate = false;
-      }
-      if (isValid && percent === 100) {
-        this.pause();
-      }
-    };
-    this.#updateTotalTime = () => {
-      fastElement.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) {
-        this.pause();
-        this.#dragInterval = window.setInterval(() => {
-          if (!this.#sliderEl.isDragging) {
-            clearInterval(this.#dragInterval);
-            this.play();
-          }
-        }, 0);
-      }
-      if (this.#isProgrammaticSliderUpdate) {
-        return;
-      }
-      /* v8 ignore else -- @preserve */
-      if (this.#playerEl) {
-        this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
-      }
-    };
-    this.#setPausedState = () => {
-      fastElement.Observable.notify(this, "paused");
-    };
-  }
-  srcChanged() {
-    if (this.src === void 0) {
-      this.setSrc("");
-    } else {
-      this.setSrc(this.src);
-    }
-  }
-  revokeSrc() {
-    const src = this.getCurrentSrc();
-    if (src && src.startsWith("blob:")) {
-      URL.revokeObjectURL(src);
-    }
-  }
-  getCurrentSrc() {
-    return this.#playerEl.currentSrc || this.#playerEl.src || "";
-  }
-  canPlayType(type) {
-    return this.#playerEl.canPlayType(type) !== "";
-  }
-  setSrc(url, blob) {
-    const prevSrc = this.getCurrentSrc();
-    this.revokeSrc();
-    this.#audioBuffer = void 0;
-    if (this.#fetchAbortController) {
-      this.#fetchAbortController.abort();
-      this.#fetchAbortController = void 0;
-    }
-    const newSrc = blob && (this.canPlayType(blob.type) || !url) ? URL.createObjectURL(blob) : url;
-    if (prevSrc) {
-      this.#playerEl.removeAttribute("src");
-    }
-    if (newSrc || url) {
-      try {
-        this.#playerEl.src = newSrc;
-      } catch (error) {
-        console.log("Falling back to original URL due to error:", error);
-        this.#playerEl.src = url;
-      }
-    }
-  }
-  get playbackRate() {
-    fastElement.Observable.track(this, "playbackRate");
-    return this.#playerEl.playbackRate;
-  }
-  set playbackRate(value) {
-    this.#playerEl.playbackRate = value;
-    fastElement.Observable.notify(this, "playbackRate");
-  }
-  get paused() {
-    fastElement.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 blob = await response.blob();
-      this.setSrc(this.src, blob);
-      const arrayBuffer = await blob.arrayBuffer();
-      const audioContext = new window.AudioContext();
-      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-      audioContext.close();
-      this.#audioBuffer = audioBuffer;
-      fastElement.Observable.notify(this, "duration");
-    } catch (e) {
-      /* v8 ignore else -- @preserve */
-      if (e instanceof Error && e.name !== "AbortError") {
-        console.error("Error loading audio:", e);
-      }
-    } finally {
-      this.#fetchAbortController = void 0;
-    }
-  }
-  get duration() {
-    fastElement.Observable.track(this, "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(_) {
-  }
-  get currentTime() {
-    fastElement.Observable.track(this, "currentTime");
-    return this.#playerEl.currentTime;
-  }
-  set currentTime(value) {
-    this.#playerEl.currentTime = value;
-  }
-  get #sliderEl() {
-    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);
-  }
-  pause() {
-    this.#pausedChanged(PAUSE);
-  }
-  #setSliderInteractionListeners(add = true) {
-    const action = add ? "addEventListener" : "removeEventListener";
-    /* v8 ignore else -- @preserve */
-    if (this.#sliderEl) {
-      this.#sliderEl[action]("change", this.#updateCurrentTimeOnSliderChange);
-    }
-  }
-  #pausedChanged;
-  #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([
-  fastElement.attr({ attribute: "play-button-aria-label" })
-], AudioPlayer.prototype, "playButtonAriaLabel");
-__decorateClass([
-  fastElement.attr({ attribute: "pause-button-aria-label" })
-], AudioPlayer.prototype, "pauseButtonAriaLabel");
-__decorateClass([
-  fastElement.attr({ attribute: "slider-aria-label" })
-], AudioPlayer.prototype, "sliderAriaLabel");
-__decorateClass([
-  fastElement.attr({ attribute: "skip-forward-aria-label" })
-], AudioPlayer.prototype, "skipForwardButtonAriaLabel");
-__decorateClass([
-  fastElement.attr({ attribute: "skip-backward-aria-label" })
-], AudioPlayer.prototype, "skipBackwardButtonAriaLabel");
-__decorateClass([
-  fastElement.attr
-], AudioPlayer.prototype, "connotation");
-__decorateClass([
-  fastElement.attr
-], AudioPlayer.prototype, "src");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], AudioPlayer.prototype, "disabled");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], AudioPlayer.prototype, "notime");
-__decorateClass([
-  fastElement.attr({
-    attribute: "skip-by",
-    converter: validSkipByConverter
-  })
-], AudioPlayer.prototype, "skipBy");
-__decorateClass([
-  fastElement.attr({ attribute: "playback-rates" })
-], AudioPlayer.prototype, "playbackRates");
-__decorateClass([
-  fastElement.attr({ mode: "boolean", attribute: "duration-fallback" })
-], AudioPlayer.prototype, "durationFallback");
-
-const getClasses = ({
-  notime,
-  disabled,
-  duration,
-  skipBy,
-  playbackRates
-}) => fastWebUtilities.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(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'
-	connotation="${(x) => x.connotation}"
-	?disabled="${(x) => x.disabled || !x.duration}"
-  ></${buttonTag}>`;
-}
-function renderBackwardSkipButtons(context) {
-  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"}"
-		size='condensed'
-		aria-label="${(x) => x.skipBackwardButtonAriaLabel || x.locale.audioPlayer.skipBackwardButton}"
-		connotation="${(x) => x.connotation}"
-		?disabled="${(x) => x.disabled || !x.duration}"
-		></${buttonTag}>
-	`;
-}
-function renderForwardSkipButtons(context) {
-  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"}"
-		size='condensed'
-		aria-label="${(x) => x.skipForwardButtonAriaLabel || x.locale.audioPlayer.skipForwardButton}"
-		connotation="${(x) => x.connotation}"
-		?disabled="${(x) => x.disabled || !x.duration}"
-		></${buttonTag}>
-	`;
-}
-function renderSlider(context) {
-  const sliderTag = context.tagFor(slider_definition.VwcSliderElement);
-  return fastElement.html`
-	<${sliderTag}
-		class="slider"
-		aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
-		max="100"
-		aria-valuetext="${(x) => formatTime(x.currentTime)}"
-		connotation="${(x) => x.connotation}"
-		?disabled="${(x) => x.disabled || !x.duration}"
-		internal-part>
-	</${sliderTag}>`;
-}
-function renderTimestamp() {
-  return fastElement.html` <div class="time-stamp">
-		<span class="current-time"
-			>${(x) => formatTime(x.currentTime || 0)}</span
-		>
-		${fastElement.when(
-    (x) => x.duration && x.duration !== Infinity,
-    fastElement.html`
-				<span>/</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(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">
-				${fastElement.when(
-    (x) => x.skipBy && x.skipBy != enums.MediaSkipBy.Zero,
-    renderBackwardSkipButtons(context)
-  )}
-				${renderButton(context)}
-				${fastElement.when(
-    (x) => x.skipBy && x.skipBy != enums.MediaSkipBy.Zero,
-    renderForwardSkipButtons(context)
-  )}
-				${fastElement.when((x) => !x.notime, renderTimestamp())}
-			</div>
-			${renderSlider(context)}
-			${fastElement.when(
-    (x) => Boolean(x.playbackRates),
-    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"
-							  slot="anchor"
-							  icon="playback-speed-line"
-							  aria-label="play back rates"
-							  size='condensed'
-							  connotation="${(x) => x.connotation}"
-							  ?disabled="${(x) => x.disabled || !x.duration}"
-				></${buttonTag}>
-
-				${fastElement.repeat(
-      (x) => playbackRates.getPlaybackRatesArray(x.playbackRates),
-      fastElement.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
-																			 control-type="radio"
-																			 class="playback-rate"
-																			 text="${(x) => x}"
-																			 check-appearance="tick-only"
-																			 ?checked="${isMenuItemChekced}"></${menuItemTag}>`
-    )}
-			</${menuTag}>`
-  )}
-		</div>
-	</div>`;
-};
-
-const audioPlayerDefinition = vividElement.defineVividComponent(
-  "audio-player",
-  AudioPlayer,
-  AudioPlayerTemplate,
-  [button_definition.buttonDefinition, slider_definition.sliderDefinition, menu_definition.menuDefinition, menuItem_definition.menuItemDefinition],
-  {
-    styles
-  }
-);
-const registerAudioPlayer = vividElement.createRegisterFunction(
-  audioPlayerDefinition
-);
-
-exports.VwcAudioPlayerElement = AudioPlayer;
-exports.audioPlayerDefinition = audioPlayerDefinition;
-exports.registerAudioPlayer = registerAudioPlayer;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition14.cjs");
+exports.VwcAudioPlayerElement = require_definition$1.AudioPlayer;
+exports.audioPlayerDefinition = require_definition$1.audioPlayerDefinition;
+exports.registerAudioPlayer = require_definition$1.registerAudioPlayer;