From 4cf82d87e1a9e3d84d1b9a5153086645203e121b Mon Sep 17 00:00:00 2001
From: Yonatan Kra <yonatan.kra@vonage.com>
Date: Thu, 30 Mar 2023 14:41:27 +0300
Subject: [PATCH] feat(vwc-audio): audio infinity time handling (VIV-874)
 (#1383)

* feat(vwc-audio): visualize Infinity duration
---
 components/audio/src/vwc-audio.ts             |  12 ++-
 components/audio/test/audio.test.js           |  71 +++++++++++++++---
 .../media-controller/src/vwc-scrub-bar.ts     |  12 ++-
 ui-tests/snapshots/vwc-audio.png              | Bin 1839 -> 2868 bytes
 ui-tests/tests/vwc-audio/index.js             |   2 +-
 5 files changed, 81 insertions(+), 16 deletions(-)

diff --git a/components/audio/src/vwc-audio.ts b/components/audio/src/vwc-audio.ts
index 4999dbfa62..2e054011ce 100644
--- a/components/audio/src/vwc-audio.ts
+++ b/components/audio/src/vwc-audio.ts
@@ -26,7 +26,6 @@ const SECOND = 1;
 const MINUTE = 60 * SECOND;
 const HOUR = 60 * MINUTE;
 
-
 const setEvents = function (eventSource: HTMLElement, handlersMap: Record<string, () => unknown>) {
 	return (pipe as any)(...Object
 		.entries(handlersMap)
@@ -36,7 +35,6 @@ const setEvents = function (eventSource: HTMLElement, handlersMap: Record<string
 		}));
 };
 
-/* istanbul ignore next */
 const formatTime = (seconds: number) => {
 	const outputTime: Array<number> = [];
 	[HOUR, MINUTE, SECOND].reduce((ac: number, divider: number) => {
@@ -49,6 +47,11 @@ const formatTime = (seconds: number) => {
 		.join(':');
 };
 
+function getTimeStampTemplate(_playheadPosition: number, _duration: number) {
+	const timeString = _duration === Infinity ? '__ / __' : `${formatTime(_playheadPosition)} / ${formatTime(_duration)}`;
+	return html`<div class="playhead-position">${timeString}</div>`;
+}
+
 type AudioConnotation =
 	Connotation.Primary |
 	Connotation.CTA;
@@ -138,6 +141,7 @@ export class VWCAudio extends LitElement {
 	}
 
 	override render(): TemplateResult {
+
 		return html`
 			<audio class='audio-el' src='${ifDefined(this.src)}'></audio>
 			<div class="audio ${classMap(this.getRenderClasses())}" aria-controls="${ifDefined(this.ariaControls)}">
@@ -152,8 +156,8 @@ export class VWCAudio extends LitElement {
 						type="${this._isPlaying ? 'pause-solid' : 'play-solid'}"
 				></vwc-icon>
 				</button>
-				${this.timestamp ? html`<div class="playhead-position">${formatTime(this._playheadPosition)} / ${formatTime(this._duration)}</div>` : nothing}
-				${!this.noseek ? html`<vwc-scrub-bar @userScrubRequest="${({ detail }: { detail: number }) => this.currentTime = detail * this._duration}" class="scrubber"></vwc-scrub-bar>` : nothing}
+				${this.timestamp ? getTimeStampTemplate(this._playheadPosition, this._duration) : nothing}
+				${!this.noseek ? html`<vwc-scrub-bar noseek-button=${ifDefined(this._duration === Infinity ? 'true' : undefined)} @userScrubRequest="${({ detail }: { detail: number }) => this.currentTime = detail * this._duration}" class="scrubber"></vwc-scrub-bar>` : nothing}
 			</div>
 		`;
 	}
diff --git a/components/audio/test/audio.test.js b/components/audio/test/audio.test.js
index b8970fbbac..e88d02ecb4 100644
--- a/components/audio/test/audio.test.js
+++ b/components/audio/test/audio.test.js
@@ -32,18 +32,71 @@ describe('vwc-audio', () => {
 		expect(actualElement.src).to.eq(url);
 	});
 
-	it(`should not show scrub-bar if noseek is set`, async function () {
-		const [vwcAudioEl] = addElements(textToDomToParent(`<vwc-audio noseek></vwc-audio>`));
-		await waitNextTask();
-		expect(vwcAudioEl.shadowRoot.querySelector('vwc-scrub-bar')).not.to.exist;
+	describe('scrub-bar', function () {
+		it(`should not show scrub-bar if noseek is set`, async function () {
+			const [vwcAudioEl] = addElements(textToDomToParent(`<vwc-audio noseek></vwc-audio>`));
+			await waitNextTask();
+			expect(vwcAudioEl.shadowRoot.querySelector('vwc-scrub-bar')).not.to.exist;
+		});
+
+		it('should add noseek-button to the scrub-bar when duration is Infinity', async function () {
+			const [vwcAudioEl] = addElements(textToDomToParent(`<vwc-audio></vwc-audio>`));
+			await waitNextTask();
+			Object.defineProperty(vwcAudioEl._audio, 'duration', {
+				get: () => Infinity
+			});
+			vwcAudioEl._audio.dispatchEvent(new Event('loadedmetadata'));
+			await waitNextTask();
+			expect(vwcAudioEl.shadowRoot.querySelector('vwc-scrub-bar').hasAttribute('noseek-button'))
+				.to.equal(true);
+		});
 	});
 
-	it(`should show timestamp indicator when "timestamp" is set`, async function () {
-		const [vwcAudioEl] = addElements(textToDomToParent(`<vwc-audio timestamp></vwc-audio>`));
-		await waitNextTask();
-		expect(vwcAudioEl.shadowRoot.querySelector('.playhead-position')).to.exist;
+	describe('timestamp', function () {
+		it(`should show timestamp indicator when "timestamp" is set`, async function () {
+			const [vwcAudioEl] = addElements(textToDomToParent(`<vwc-audio timestamp></vwc-audio>`));
+			await waitNextTask();
+			expect(vwcAudioEl.shadowRoot.querySelector('.playhead-position')).to.exist;
+		});
+
+		it(`should hide timestamp indicator when "timestamp" is not set`, async function () {
+			const [vwcAudioEl] = addElements(textToDomToParent(`<vwc-audio></vwc-audio>`));
+			await waitNextTask();
+			expect(vwcAudioEl.shadowRoot.querySelector('.playhead-position')).not.to.exist;
+		});
+
+		it(`should show the end time correctly`, async function () {
+			const [vwcAudioEl] = addElements(textToDomToParent(`<vwc-audio timestamp></vwc-audio>`));
+			vwcAudioEl._duration = 500;
+			await waitNextTask();
+			expect(vwcAudioEl.shadowRoot.querySelector('.playhead-position').textContent).to.equal('0:00 / 8:20');
+		});
+
+		it(`should show the current time correctly`, async function () {
+			const [vwcAudioEl] = addElements(textToDomToParent(`<vwc-audio timestamp></vwc-audio>`));
+			await waitNextTask();
+			vwcAudioEl._duration = 500;
+			Object.defineProperty(vwcAudioEl._audio, 'currentTime', {
+				get: () => 500
+			});
+			vwcAudioEl._audio.dispatchEvent(new Event('timeupdate'));
+			await waitNextTask();
+			expect(vwcAudioEl.shadowRoot.querySelector('.playhead-position').textContent).to.equal('8:20 / 8:20');
+		});
+
+		it('should show null timestamp when duration is infinity', async function () {
+			const [vwcAudioEl] = addElements(textToDomToParent(`<vwc-audio timestamp></vwc-audio>`));
+			await waitNextTask();
+			Object.defineProperty(vwcAudioEl._audio, 'duration', {
+				get: () => Infinity
+			});
+			vwcAudioEl._audio.dispatchEvent(new Event('loadedmetadata'));
+			await waitNextTask();
+			expect(vwcAudioEl.shadowRoot.querySelector('.playhead-position').textContent).to.equal('__ / __');
+		});
 	});
 
+
 	describe('play', () => {
 		let originalPlay = Audio.prototype.play;
 		before(function () {
@@ -58,7 +111,7 @@ describe('vwc-audio', () => {
 
 		it('should return to stop mode when src changes', async function () {
 
-			const [audioElement] = (textToDomToParent(`<vwc-audio></vwc-audio>`));
+			const [audioElement] = addElements(textToDomToParent(`<vwc-audio></vwc-audio>`));
 			await waitNextTask();
 			audioElement.src = 'https://download.samplelib.com/mp3/sample-9s.mp3';
 			await audioElement.updateComplete;
diff --git a/components/media-controller/src/vwc-scrub-bar.ts b/components/media-controller/src/vwc-scrub-bar.ts
index 5a4e18bbc2..d926bd08f6 100644
--- a/components/media-controller/src/vwc-scrub-bar.ts
+++ b/components/media-controller/src/vwc-scrub-bar.ts
@@ -5,7 +5,7 @@ import kefir from 'kefir';
 import {
 	pipe, partial, clamp, prop, always, not, identity, path
 } from 'ramda';
-import { style as vwcScrubBarStyle } from './vwc-scrub-bar.css.js';//
+import { style as vwcScrubBarStyle } from './vwc-scrub-bar.css.js';
 
 const SIGNAL = Symbol('signal'),
 	TRACK_KNOB_HORIZONTAL_MARGIN = 5,
@@ -63,6 +63,13 @@ const byType = typeName => ({ type }) => type === typeName,
  * @fires userSkipBackwardsRequest - Fires when the user requests a skip backwards
  */
 class VWCScrubBar extends HTMLElement {
+	static get observedAttributes() { return ['noseek-button']; }
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (name === 'noseek-button' && oldValue !== newValue) {
+			this.trackEl.querySelector('button')?.style.display = newValue !== null ? 'none' : 'block';
+		}
+	}
 	constructor() {
 		super();
 
@@ -111,7 +118,6 @@ class VWCScrubBar extends HTMLElement {
 				'resize',
 			].map(eventName => kefir.fromEvents(window, eventName)),
 			trackBarEnabledProperty = componentConnectedStream
-				.take(1)
 				.map(() => {
 					// eslint-disable-next-line
 					return !this.hasAttribute('noseek');
@@ -307,6 +313,8 @@ class VWCScrubBar extends HTMLElement {
 					[KEY_RIGHT]: 'userSkipForwardRequest'
 				})[keyCode]);
 			});
+
+		this.trackEl = trackEl;
 	}
 
 	/**
diff --git a/ui-tests/snapshots/vwc-audio.png b/ui-tests/snapshots/vwc-audio.png
index d969109b0949c11d4161c855fef1aad87344a104..429895c93d94f54bfc456b645c1c21ec00978680 100644
GIT binary patch
literal 2868
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
CIug$S

delta 1790
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
GbN>ULnkm!(

diff --git a/ui-tests/tests/vwc-audio/index.js b/ui-tests/tests/vwc-audio/index.js
index a5e8e4fac1..e215fcfd09 100644
--- a/ui-tests/tests/vwc-audio/index.js
+++ b/ui-tests/tests/vwc-audio/index.js
@@ -7,7 +7,7 @@ export async function createElementVariations(wrapper) {
 	testWrapper.classList.add('grid');
 	testWrapper.innerHTML =
 		`
-<vwc-audio></vwc-audio>
+<vwc-audio timestamp></vwc-audio>
 <vwc-audio connotation="primary"></vwc-audio>
 <vwc-audio noseek="true"></vwc-audio>`;
 	wrapper.appendChild(testWrapper);