@vonage/vivid 5.15.1 → 5.17.0

package/unbundled/definition14.cjs

@@ -0,0 +1,406 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_localized = require("./localized.cjs");
+const require_definition = require("./definition7.cjs");
+const require_enums = require("./enums.cjs");
+const require_definition$1 = require("./definition11.cjs");
+const require_definition$2 = require("./definition12.cjs");
+const require_definition$3 = require("./definition13.cjs");
+const require_playbackRates = require("./playbackRates.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/audio-player/audio-player.scss?inline
+var audio_player_default = ":host{display:block}.wrapper{container-type:inline-size}.base{box-sizing:border-box;color:var(--vvd-color-canvas-text);user-select:none;align-items:center;gap:8px;inline-size:100%;padding:8px;display:inline-flex}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{grid-area:controls;justify-content:center;align-items:center;gap:8px;display:flex}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{min-inline-size:32px;margin-inline:6px}.base .playback-button{grid-area:playback}@container (width<=500px){.base.two-lines{grid-template:\"slider\"\"controls\"/1fr;row-gap:4px;inline-size:100%;display:inline-grid}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-columns:1fr auto;grid-template-areas:\"slider slider\"\"controls playback\"}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
+//#endregion
+//#region src/lib/audio-player/audio-player.ts
+var 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);
+}
+var PAUSE = true;
+var PLAY = false;
+/**
+* Converter to filter out invalid values for the skip-by attribute.
+*/
+var validSkipByConverter = {
+	toView(value) {
+		return value;
+	},
+	fromView(value) {
+		return Object.values(require_enums.MediaSkipBy).includes(value) ? value : void 0;
+	}
+};
+/**
+* @public
+* @component audio-player
+* @event {CustomEvent<undefined>} play - Fires when the audio playback is started.
+* @event {CustomEvent<undefined>} pause - Fires when the audio playback is paused.
+*/
+var AudioPlayer = class extends require_localized.Localized(require_vivid_element.VividElement) {
+	/**
+	* @internal
+	*/
+	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() {
+		_microsoft_fast_element.Observable.track(this, "playbackRate");
+		return this.#playerEl.playbackRate;
+	}
+	set playbackRate(value) {
+		this.#playerEl.playbackRate = value;
+		_microsoft_fast_element.Observable.notify(this, "playbackRate");
+	}
+	get paused() {
+		_microsoft_fast_element.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 blob = await (await fetch(this.src, { signal })).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;
+			_microsoft_fast_element.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() {
+		_microsoft_fast_element.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() {
+		_microsoft_fast_element.Observable.track(this, "currentTime");
+		return this.#playerEl.currentTime;
+	}
+	set currentTime(value) {
+		this.#playerEl.currentTime = value;
+	}
+	get #sliderEl() {
+		return this.shadowRoot.querySelector(".slider");
+	}
+	#playerEl = new Audio();
+	#isProgrammaticSliderUpdate = false;
+	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.durationFallback = false;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
+		this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
+		this.#playerEl.addEventListener("durationchange", this.#updateTotalTime);
+		this.#playerEl.addEventListener("play", this.#onPlay);
+		this.#playerEl.addEventListener("pause", this.#onPause);
+		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);
+		this.#playerEl.removeEventListener("play", this.#onPlay);
+		this.#playerEl.removeEventListener("pause", this.#onPause);
+	}
+	play() {
+		this.#pausedChanged(PLAY);
+	}
+	pause() {
+		this.#pausedChanged(PAUSE);
+	}
+	#onPlay = () => {
+		if (!this.#sliderEl?.isDragging) this.$emit("play", void 0, { bubbles: false });
+	};
+	#onPause = () => {
+		if (!this.#sliderEl?.isDragging) this.$emit("pause", void 0, { bubbles: false });
+	};
+	#setSliderInteractionListeners(add = true) {
+		const action = add ? "addEventListener" : "removeEventListener";
+		/* v8 ignore else -- @preserve */
+		if (this.#sliderEl) this.#sliderEl[action]("change", this.#updateCurrentTimeOnSliderChange);
+	}
+	#pausedChanged = (pausing) => {
+		if (pausing === this.paused) {
+			this.#setPausedState();
+			return;
+		}
+		if (!this.paused) this.#playerEl.pause();
+		else {
+			this.#updateProgress();
+			this.#playerEl.play();
+		}
+		this.#setPausedState();
+	};
+	#updateProgress = () => {
+		_microsoft_fast_element.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();
+	};
+	#updateTotalTime = () => {
+		_microsoft_fast_element.Observable.notify(this, "duration");
+		if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
+			if (this.durationFallback) this.#fetchAndCacheAudioBuffer();
+		}
+	};
+	#dragInterval;
+	#updateCurrentTimeOnSliderChange = () => {
+		if (!this.paused && this.#sliderEl.isDragging) {
+			this.pause();
+			this.#dragInterval = window.setInterval(() => {
+				if (!this.#sliderEl.isDragging || !this.isConnected) {
+					clearInterval(this.#dragInterval);
+					if (this.isConnected) this.play();
+				}
+			}, 0);
+		}
+		if (this.#isProgrammaticSliderUpdate) return;
+		/* v8 ignore else -- @preserve */
+		if (this.#playerEl) this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
+	};
+	#setPausedState = () => {
+		_microsoft_fast_element.Observable.notify(this, "paused");
+	};
+	/**
+	* Skips the current time by the skipBy value
+	*
+	* @param skipDirection - the direction to skip
+	*
+	* @internal
+	*/
+	skip(skipDirection) {
+		const newTime = this.currentTime + parseInt(this.skipBy) * skipDirection;
+		this.currentTime = Math.max(0, Math.min(this.duration, newTime));
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "play-button-aria-label" })], AudioPlayer.prototype, "playButtonAriaLabel", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "pause-button-aria-label" })], AudioPlayer.prototype, "pauseButtonAriaLabel", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "slider-aria-label" })], AudioPlayer.prototype, "sliderAriaLabel", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "skip-forward-aria-label" })], AudioPlayer.prototype, "skipForwardButtonAriaLabel", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "skip-backward-aria-label" })], AudioPlayer.prototype, "skipBackwardButtonAriaLabel", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], AudioPlayer.prototype, "connotation", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], AudioPlayer.prototype, "src", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], AudioPlayer.prototype, "disabled", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], AudioPlayer.prototype, "notime", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "skip-by",
+	converter: validSkipByConverter
+})], AudioPlayer.prototype, "skipBy", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "playback-rates" })], AudioPlayer.prototype, "playbackRates", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	mode: "boolean",
+	attribute: "duration-fallback"
+})], AudioPlayer.prototype, "durationFallback", void 0);
+//#endregion
+//#region src/lib/audio-player/audio-player.template.ts
+var getClasses = ({ notime, disabled, duration, skipBy, playbackRates }) => (0, _microsoft_fast_web_utilities.classNames)(["disabled", Boolean(disabled) || !duration], ["two-lines", !notime && (Boolean(Number(skipBy)) || Boolean(playbackRates))], ["playback", Boolean(playbackRates)]);
+var isMenuItemChekced = (playbackRate, { parent }) => {
+	return playbackRate === parent.playbackRate;
+};
+function renderButton(context) {
+	const buttonTag = context.tagFor(require_definition.Button);
+	return _microsoft_fast_element.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(require_definition.Button);
+	return _microsoft_fast_element.html`
+		<${buttonTag} class="skip backward"
+			@click="${(element) => element.skip(SKIP_DIRECTIONS.BACKWARD)}"
+		icon="${(x) => x.skipBy == require_enums.MediaSkipBy.Five ? "5-sec-backward-line" : x.skipBy == require_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(require_definition.Button);
+	return _microsoft_fast_element.html`
+		<${buttonTag} class="skip forward"
+		@click="${(element) => element.skip(SKIP_DIRECTIONS.FORWARD)}"
+		icon="${(x) => x.skipBy == require_enums.MediaSkipBy.Five ? "5-sec-forward-line" : x.skipBy == require_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(require_definition$1.Slider);
+	return _microsoft_fast_element.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 _microsoft_fast_element.html` <div class="time-stamp">
+		<span class="current-time"
+			>${(x) => formatTime(x.currentTime || 0)}</span
+		>
+		${(0, _microsoft_fast_element.when)((x) => x.duration && x.duration !== Infinity, _microsoft_fast_element.html`
+				<span>/</span>
+				<span class="total-time">${(x) => formatTime(x?.duration)}</span>
+			`)}
+	</div>`;
+}
+function handlePlaybackRateClick(playbackRate, context) {
+	context.parent.playbackRate = playbackRate;
+	return true;
+}
+var AudioPlayerTemplate = (context) => {
+	const menuTag = context.tagFor(require_definition$3.Menu);
+	const buttonTag = context.tagFor(require_definition.Button);
+	const menuItemTag = context.tagFor(require_definition$2.MenuItem);
+	return _microsoft_fast_element.html` <div class="wrapper">
+		<div class="base ${getClasses}">
+			<div class="controls">
+				${(0, _microsoft_fast_element.when)((x) => x.skipBy && x.skipBy != require_enums.MediaSkipBy.Zero, renderBackwardSkipButtons(context))}
+				${renderButton(context)}
+				${(0, _microsoft_fast_element.when)((x) => x.skipBy && x.skipBy != require_enums.MediaSkipBy.Zero, renderForwardSkipButtons(context))}
+				${(0, _microsoft_fast_element.when)((x) => !x.notime, renderTimestamp())}
+			</div>
+			${renderSlider(context)}
+			${(0, _microsoft_fast_element.when)((x) => Boolean(x.playbackRates), _microsoft_fast_element.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}>
+
+				${(0, _microsoft_fast_element.repeat)((x) => require_playbackRates.getPlaybackRatesArray(x.playbackRates), _microsoft_fast_element.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
+																			 control-type="radio"
+																			 class="playback-rate"
+																			 text="${(x) => x}"
+																			 check-appearance="tick-only"
+																			 ?checked="${isMenuItemChekced}"></${menuItemTag}>`)}
+			</${menuTag}>`)}
+		</div>
+	</div>`;
+};
+//#endregion
+//#region src/lib/audio-player/definition.ts
+/**
+* @internal
+*/
+var audioPlayerDefinition = require_vivid_element.defineVividComponent("audio-player", AudioPlayer, AudioPlayerTemplate, [
+	require_definition.buttonDefinition,
+	require_definition$1.sliderDefinition,
+	require_definition$3.menuDefinition,
+	require_definition$2.menuItemDefinition
+], { styles: audio_player_default });
+/**
+* Registers the audio-player element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerAudioPlayer = require_vivid_element.createRegisterFunction(audioPlayerDefinition);
+//#endregion
+Object.defineProperty(exports, "AudioPlayer", {
+	enumerable: true,
+	get: function() {
+		return AudioPlayer;
+	}
+});
+Object.defineProperty(exports, "audioPlayerDefinition", {
+	enumerable: true,
+	get: function() {
+		return audioPlayerDefinition;
+	}
+});
+Object.defineProperty(exports, "registerAudioPlayer", {
+	enumerable: true,
+	get: function() {
+		return registerAudioPlayer;
+	}
+});