@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition13.js

@@ -1,304 +1,390 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
-import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
-import { i as Popup, t as popupDefinition } from "./definition10.js";
-import { a as MenuItemRole, i as MenuItem, r as menuName, t as menuItemDefinition } from "./definition12.js";
-import { n as anchorSlotTemplateFactory, t as Anchored } from "./anchored.js";
-import { t as Divider } from "./divider.js";
-import { Updates, attr, html, nullableNumberConverter, observable, ref, slotted } from "@microsoft/fast-element";
-import { classNames, keyArrowDown, keyArrowUp, keyEnd, keyHome } from "@microsoft/fast-web-utilities";
-//#region src/lib/menu/menu.scss?inline
-var menu_default = ":host{display:var(--_popup-display,inline)}:host([slotted-anchor]){--_popup-display:contents}.base{box-sizing:border-box;inline-size:max-content;max-block-size:var(--menu-block-size,408px);min-inline-size:var(--menu-min-inline-size);flex-direction:column;gap:8px;padding:4px;display:flex;overflow:hidden auto}@media not all and (width>=600px){.base{max-inline-size:var(--menu-max-inline-size,300px)}}@media (width>=600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;display:block}.header{padding:4px}.hide-header .header{display:none}.body{flex-direction:column;row-gap:1px;display:flex}.hide-body .body{display:none}.action-items{justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px;display:flex}.hide-actions .action-items{display:none}";
+import { t as Localized } from "./localized.js";
+import { i as Button, t as buttonDefinition } from "./definition6.js";
+import { s as MediaSkipBy } from "./enums.js";
+import { n as sliderDefinition, r as Slider } from "./definition10.js";
+import { i as MenuItem, t as menuItemDefinition } from "./definition11.js";
+import { r as Menu, t as menuDefinition } from "./definition12.js";
+import { t as getPlaybackRatesArray } from "./playbackRates.js";
+import { Observable, attr, html, repeat, when } from "@microsoft/fast-element";
+import { classNames } from "@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/menu/menu.ts
-var isCheckbox = (el) => el instanceof MenuItem && el.controlType === "checkbox";
-var isRadio = (el) => el instanceof MenuItem && el.controlType === "radio";
-var isSeparator = (el) => el instanceof Divider ? true : el.role === "separator";
-var isMenuItemElement = (el) => el instanceof MenuItem ? true : Boolean(el.role && el.role in MenuItemRole);
+//#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(MediaSkipBy).includes(value) ? value : void 0;
+	}
+};
 /**
 * @public
-* @component menu
-* @slot - Default slot.
-* @slot anchor - Used to set the anchor element for the menu.
-* @slot header - Used to add additional content to the top of the menu.
-* @slot action-items - Used to add action items to the bottom of the menu.
-* @event {CustomEvent<undefined>} open - Fired when the menu is opened
-* @event {CustomEvent<undefined>} close - Fired when the menu is closed
-* @testSelector byLabel byLabel
-* @testQuery open open true
-* @testQuery closed open false
+* @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 Menu = class extends Anchored(DelegatesAria(VividElement)) {
+var AudioPlayer = class extends Localized(VividElement) {
 	constructor(..._args) {
 		super(..._args);
-		this.offset = null;
-		this.expandedItem = null;
-		this.focusIndex = -1;
-		this.handleFocusOut = (e) => {
-			if (!this.contains(e.relatedTarget) && this.menuItems !== void 0 && this.menuItems.length) {
-				this.collapseExpandedItem();
-				this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-				this.menuItems[0].setAttribute("tabindex", "0");
-				this.focusIndex = 0;
-			}
+		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.#onPlay = () => {
+			if (!this.#sliderEl?.isDragging) this.$emit("play", void 0, { bubbles: false });
 		};
-		this.handleItemFocus = (e) => {
-			const targetItem = e.target;
-			if (this.menuItems !== void 0 && targetItem !== this.menuItems[this.focusIndex]) {
-				this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-				this.focusIndex = this.menuItems.indexOf(targetItem);
-				targetItem.setAttribute("tabindex", "0");
-			}
+		this.#onPause = () => {
+			if (!this.#sliderEl?.isDragging) this.$emit("pause", void 0, { bubbles: false });
 		};
-		this.handleExpandedChanged = (e) => {
-			const changedItem = e.target;
-			if (this.expandedItem !== null && changedItem === this.expandedItem && !changedItem.expanded) this.expandedItem = null;
-			if (changedItem.expanded) this.expandedItem = changedItem;
+		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.removeItemListeners = () => {
-			if (this.menuItems !== void 0) this.menuItems.forEach((item) => {
-				item.removeEventListener("expanded-change", this.handleExpandedChanged);
-				item.removeEventListener("focus", this.handleItemFocus);
-			});
+		this.#updateProgress = () => {
+			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.setItems = () => {
-			const newItems = this.domChildren();
-			this.removeItemListeners();
-			this.menuItems = newItems.filter(isMenuItemElement);
-			if (this.menuItems.length) this.focusIndex = 0;
-			this.menuItems.forEach((item, index) => {
-				if (item instanceof MenuItem) item._isPresentational = false;
-				item.setAttribute("tabindex", index === 0 ? "0" : "-1");
-				item.addEventListener("expanded-change", this.handleExpandedChanged);
-				item.addEventListener("focus", this.handleItemFocus);
-			});
+		this.#updateTotalTime = () => {
+			Observable.notify(this, "duration");
+			if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
+				if (this.durationFallback) this.#fetchAndCacheAudioBuffer();
+			}
 		};
-		this.placement = "bottom";
-		this.autoDismiss = false;
-		this.positionStrategy = "fixed";
-		this.open = false;
-		this.#onAnchorClick = () => {
-			if (this.#triggerBehaviour === "off") return;
-			if (this.#triggerBehaviour === "legacy" && this.open) return;
-			const newValue = !this.open;
-			Updates.enqueue(() => this.open = newValue);
+		this.#updateCurrentTimeOnSliderChange = () => {
+			if (!this.paused && this.#sliderEl.isDragging) {
+				this.pause();
+				this.#dragInterval = window.setInterval(() => {
+					/* v8 ignore else -- @preserve */
+					if (!this.#sliderEl.isDragging || !this.isConnected) {
+						clearInterval(this.#dragInterval);
+						if (this.isConnected) this.play();
+					}
+				}, 0);
+			}
+			if (this.#isProgrammaticSliderUpdate) return;
+			this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
 		};
-		this._onFocusout = (e) => {
-			const focusTarget = e.relatedTarget;
-			const focusMovedAway = !this.contains(focusTarget) && !this._anchorEl?.contains(focusTarget);
-			if (this.autoDismiss && focusMovedAway) this.open = false;
+		this.#setPausedState = () => {
+			Observable.notify(this, "paused");
 		};
 	}
-	/**
-	* @internal
-	*/
-	itemsChanged() {
-		if (this.$fastController.isConnected && this.menuItems !== void 0) this.setItems();
+	/** @internal */
+	srcChanged() {
+		if (this.src === void 0) this.setSrc("");
+		else this.setSrc(this.src);
 	}
-	/**
-	* @internal
-	*/
-	connectedCallback() {
-		super.connectedCallback();
-		Updates.enqueue(() => {
-			this.setItems();
-		});
+	revokeSrc() {
+		const src = this.getCurrentSrc();
+		if (src && src.startsWith("blob:")) URL.revokeObjectURL(src);
 	}
-	/**
-	* @internal
-	*/
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeItemListeners();
-		this.menuItems = void 0;
+	getCurrentSrc() {
+		return this.#playerEl.currentSrc || this.#playerEl.src || "";
 	}
-	/**
-	* Moves focus into the Menu. If there is a child with the `autofocus` attribute, it will be
-	* focused. Otherwise, the first Menu Item will be focused.
-	*
-	* @public
-	*/
-	focus() {
-		const autoFocusElement = this.querySelector("[autofocus]:not([slot=\"anchor\"])");
-		if (autoFocusElement instanceof HTMLElement) autoFocusElement.focus();
-		else this.setFocus(0);
+	canPlayType(type) {
+		return this.#playerEl.canPlayType(type) !== "";
 	}
-	/**
-	* Collapses any expanded Menu Items.
-	*
-	* @public
-	*/
-	collapseExpandedItem() {
-		if (this.expandedItem !== null) {
-			this.expandedItem.expanded = false;
-			this.expandedItem = null;
+	setSrc(url, blob) {
+		const prevSrc = this.getCurrentSrc();
+		this.revokeSrc();
+		this.#audioBuffer = void 0;
+		if (this.#fetchAbortController) {
+			this.#fetchAbortController.abort();
+			this.#fetchAbortController = void 0;
 		}
-	}
-	/**
-	* @internal
-	*/
-	handleMenuKeyDown(e) {
-		if (e.defaultPrevented || this.menuItems === void 0) return;
-		switch (e.key) {
-			case keyArrowDown:
-				this.setFocus(this.focusIndex + 1);
-				return;
-			case keyArrowUp:
-				this.setFocus(this.focusIndex - 1);
-				return;
-			case keyEnd:
-				this.setFocus(this.menuItems.length - 1);
-				return;
-			case keyHome:
-				this.setFocus(0);
-				return;
-			default: return true;
+		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 an array of valid DOM children
-	*/
-	domChildren() {
-		return Array.from(this.children).filter((child) => !child.hasAttribute("hidden")).filter((child) => !child.hasAttribute("slot"));
+	get playbackRate() {
+		Observable.track(this, "playbackRate");
+		return this.#playerEl.playbackRate;
+	}
+	set playbackRate(value) {
+		this.#playerEl.playbackRate = value;
+		Observable.notify(this, "playbackRate");
 	}
-	setFocus(focusIndex) {
-		if (this.menuItems === void 0) return;
-		if (focusIndex >= 0 && focusIndex < this.menuItems.length) {
-			const child = this.menuItems[focusIndex];
+	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 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;
+			Observable.notify(this, "duration");
+		} catch (e) {
 			/* v8 ignore else -- @preserve */
-			if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-			this.focusIndex = focusIndex;
-			child.setAttribute("tabindex", "0");
-			child.focus();
+			if (e instanceof Error && e.name !== "AbortError") console.error("Error loading audio:", e);
+		} finally {
+			this.#fetchAbortController = void 0;
 		}
 	}
-	get #triggerBehaviour() {
-		return this.trigger ?? "auto";
+	get duration() {
+		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;
 	}
-	openChanged(_, newValue) {
-		if (newValue) this._popupEl?.show().then(() => this.focus());
-		this.$emit(newValue ? "open" : "close", void 0, { bubbles: false });
-		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
+	set duration(_) {}
+	get currentTime() {
+		Observable.track(this, "currentTime");
+		return this.#playerEl.currentTime;
 	}
-	/**
-	* @internal
-	*/
-	_anchorElChanged(oldValue, newValue) {
-		if (oldValue) this.#cleanupAnchor(oldValue);
-		if (newValue) this.#setupAnchor(newValue);
+	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.#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);
 	}
-	#setupAnchor(a) {
-		a.addEventListener("click", this.#onAnchorClick, true);
-		a.addEventListener("focusout", this._onFocusout);
-		a.ariaHasPopup = "menu";
-		this.#updateAnchor(a);
+	play() {
+		this.#pausedChanged(PLAY);
 	}
-	#updateAnchor(a) {
-		a.ariaExpanded = this.open.toString();
-		a.dataset.expanded = this.open.toString();
+	pause() {
+		this.#pausedChanged(PAUSE);
 	}
-	#cleanupAnchor(a) {
-		a.removeEventListener("click", this.#onAnchorClick, true);
-		a.removeEventListener("focusout", this._onFocusout);
-		a.ariaHasPopup = null;
-		a.ariaExpanded = null;
-		delete a.dataset.expanded;
+	#onPlay;
+	#onPause;
+	#setSliderInteractionListeners(add = true) {
+		const action = add ? "addEventListener" : "removeEventListener";
+		/* v8 ignore else -- @preserve */
+		if (this.#sliderEl) this.#sliderEl[action]("change", this.#updateCurrentTimeOnSliderChange);
 	}
-	#onAnchorClick;
+	#pausedChanged;
+	#updateProgress;
+	#updateTotalTime;
+	#dragInterval;
+	#updateCurrentTimeOnSliderChange;
+	#setPausedState;
 	/**
+	* Skips the current time by the skipBy value
+	*
+	* @param skipDirection - the direction to skip
+	*
 	* @internal
 	*/
-	_onBodyChange(e) {
-		if (this.menuItems === void 0 || !(e.target instanceof Element)) return;
-		if (this.#triggerBehaviour === "auto" && !isCheckbox(e.target)) this.open = false;
-		const domChildren = this.domChildren();
-		const targetItemIndex = domChildren.indexOf(e.target);
-		if (targetItemIndex === -1) return;
-		if (isRadio(e.target) && e.target.checked) {
-			for (let i = targetItemIndex - 1; i >= 0; --i) {
-				const item = domChildren[i];
-				if (isRadio(item)) item.checked = false;
-				if (isSeparator(item)) break;
-			}
-			for (let i = targetItemIndex + 1; i <= domChildren.length - 1; ++i) {
-				const item = domChildren[i];
-				if (isRadio(item)) item.checked = false;
-				if (isSeparator(item)) break;
-			}
-		}
-		return true;
+	skip(skipDirection) {
+		const newTime = this.currentTime + parseInt(this.skipBy) * skipDirection;
+		this.currentTime = Math.max(0, Math.min(this.duration, newTime));
 	}
 };
+__decorate([attr({ attribute: "play-button-aria-label" })], AudioPlayer.prototype, "playButtonAriaLabel", void 0);
+__decorate([attr({ attribute: "pause-button-aria-label" })], AudioPlayer.prototype, "pauseButtonAriaLabel", void 0);
+__decorate([attr({ attribute: "slider-aria-label" })], AudioPlayer.prototype, "sliderAriaLabel", void 0);
+__decorate([attr({ attribute: "skip-forward-aria-label" })], AudioPlayer.prototype, "skipForwardButtonAriaLabel", void 0);
+__decorate([attr({ attribute: "skip-backward-aria-label" })], AudioPlayer.prototype, "skipBackwardButtonAriaLabel", void 0);
+__decorate([attr], AudioPlayer.prototype, "connotation", void 0);
+__decorate([attr], AudioPlayer.prototype, "src", void 0);
+__decorate([attr({ mode: "boolean" })], AudioPlayer.prototype, "disabled", void 0);
+__decorate([attr({ mode: "boolean" })], AudioPlayer.prototype, "notime", void 0);
 __decorate([attr({
-	attribute: "offset",
-	converter: nullableNumberConverter
-})], Menu.prototype, "offset", void 0);
-__decorate([observable], Menu.prototype, "items", void 0);
-__decorate([attr({ mode: "fromView" })], Menu.prototype, "placement", void 0);
-__decorate([attr], Menu.prototype, "trigger", void 0);
+	attribute: "skip-by",
+	converter: validSkipByConverter
+})], AudioPlayer.prototype, "skipBy", void 0);
+__decorate([attr({ attribute: "playback-rates" })], AudioPlayer.prototype, "playbackRates", void 0);
 __decorate([attr({
 	mode: "boolean",
-	attribute: "auto-dismiss"
-})], Menu.prototype, "autoDismiss", void 0);
-__decorate([attr({
-	mode: "fromView",
-	attribute: "position-strategy"
-})], Menu.prototype, "positionStrategy", void 0);
-__decorate([attr({ mode: "boolean" })], Menu.prototype, "open", void 0);
-__decorate([observable], Menu.prototype, "headerSlottedContent", void 0);
-__decorate([observable], Menu.prototype, "actionItemsSlottedContent", void 0);
-__decorate([observable], Menu.prototype, "_popupOffset", void 0);
+	attribute: "duration-fallback"
+})], AudioPlayer.prototype, "durationFallback", void 0);
 //#endregion
-//#region src/lib/menu/menu.template.ts
-var getClasses = ({ headerSlottedContent, actionItemsSlottedContent, items }) => classNames("base", ["hide-header", !headerSlottedContent?.length], ["hide-actions", !actionItemsSlottedContent?.length], ["hide-body", items && !items.length]);
-function handleEscapeKey(menu, event) {
-	if (menu.open && handleEscapeKeyAndStopPropogation(event)) menu.open = false;
-	return true;
+//#region src/lib/audio-player/audio-player.template.ts
+var isMenuItemChekced = (playbackRate, { parent }) => {
+	return playbackRate === parent.playbackRate;
+};
+function renderButton(context) {
+	const buttonTag = context.tagFor(Button);
+	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'
+	connotation="${(x) => x.connotation}"
+	?disabled="${(x) => x.disabled || !x.duration}"
+  ></${buttonTag}>`;
+}
+function renderBackwardSkipButtons(context) {
+	const buttonTag = context.tagFor(Button);
+	return html`
+		<${buttonTag} class="skip 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}"
+		connotation="${(x) => x.connotation}"
+		?disabled="${(x) => x.disabled || !x.duration}"
+		></${buttonTag}>
+	`;
+}
+function renderForwardSkipButtons(context) {
+	const buttonTag = context.tagFor(Button);
+	return html`
+		<${buttonTag} class="skip 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}"
+		connotation="${(x) => x.connotation}"
+		?disabled="${(x) => x.disabled || !x.duration}"
+		></${buttonTag}>
+	`;
 }
-var MenuTemplate = (context) => {
-	const popupTag = context.tagFor(Popup);
+function renderSlider(context) {
+	const sliderTag = context.tagFor(Slider);
 	return html`
-		<template @focusout="${(x, c) => x._onFocusout(c.event)}">
-			${anchorSlotTemplateFactory()}
-			<${popupTag}
-				${ref("_popupEl")}
-				:placement=${(x) => x.placement}
-				:open=${(x) => x.open}
-				:anchor=${(x) => x._anchorEl}
-				:strategy="${(x) => x.positionStrategy}"
-				:offset=${(x) => x.offset || x._popupOffset}
-				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
-			>
-			<div class="${getClasses}">
-				<div class="header">
-					<slot name="header" ${slotted("headerSlottedContent")}></slot>
-				</div>
-				<div
-					class="body"
-					${delegateAria({ role: "menu" })}
-					@change="${(x, c) => x._onBodyChange(c.event)}"
-					@keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
-					@focusout="${(x, c) => x.handleFocusOut(c.event)}"
-				>
-					<slot ${slotted("items")}></slot>
-				</div>
-				<footer class="action-items"><slot name="action-items"  ${slotted("actionItemsSlottedContent")}></slot></footer>
+	<${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 html` <div class="time-stamp">
+		<span class="current-time">${(x) => formatTime(x.currentTime || 0)}</span>
+		${when((x) => x.duration && x.duration !== Infinity, 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(Menu);
+	const buttonTag = context.tagFor(Button);
+	const menuItemTag = context.tagFor(MenuItem);
+	return html` <div class="wrapper">
+		<div
+			class="base ${(x) => classNames(["disabled", x.disabled || !x.duration], ["two-lines", !x.notime && (Boolean(Number(x.skipBy)) || Boolean(x.playbackRates))], ["playback", Boolean(x.playbackRates)])}"
+		>
+			<div class="controls">
+				${when((x) => x.skipBy && x.skipBy != MediaSkipBy.Zero, renderBackwardSkipButtons(context))}
+				${renderButton(context)}
+				${when((x) => x.skipBy && x.skipBy != MediaSkipBy.Zero, renderForwardSkipButtons(context))}
+				${when((x) => !x.notime, renderTimestamp())}
 			</div>
-		</${popupTag}>
-	</template>`;
+			${renderSlider(context)}
+			${when((x) => Boolean(x.playbackRates), 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}>
+
+				${repeat((x) => getPlaybackRatesArray(x.playbackRates), 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/menu/definition.ts
-/**
-* @internal
-*/
-var menuDefinition = defineVividComponent(menuName, Menu, MenuTemplate, [popupDefinition, menuItemDefinition], { styles: menu_default });
+//#region src/lib/audio-player/definition.ts
+/** @internal */
+var audioPlayerDefinition = defineVividComponent("audio-player", AudioPlayer, AudioPlayerTemplate, [
+	buttonDefinition,
+	sliderDefinition,
+	menuDefinition,
+	menuItemDefinition
+], { styles: audio_player_default });
 /**
-* Registers the calendar-event elements with the design system.
+* Registers the audio-player element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerMenu = createRegisterFunction(menuDefinition);
+var registerAudioPlayer = createRegisterFunction(audioPlayerDefinition);
 //#endregion
-export { registerMenu as n, Menu as r, menuDefinition as t };
+export { registerAudioPlayer as n, AudioPlayer as r, audioPlayerDefinition as t };