@brightspace-ui/labs 2.63.6 → 2.63.8

package/package.json

@@ -112,5 +112,5 @@
     "parse-srt": "^1.0.0-alpha",
     "webvtt-parser": "^2"
   },
-  "version": "2.63.6"
+  "version": "2.63.8"
 }

package/src/components/media-player/media-player-audio-descriptions.js

@@ -16,6 +16,8 @@ export const AUDIO_DESCRIPTION_SKIP_KEY = 's';
 export const AUDIO_DESCRIPTION_TRACK_KIND = 'descriptions';
 const PREFERENCES_AUDIO_DESCRIPTION_LANGUAGE_KEY = 'D2L.MediaPlayer.Preferences.AudioDescriptionLanguage';
 const VOICES_LOAD_TIMEOUT_MS = 1000;
+const AUDIO_DESCRIPTION_START_TIMEOUT_MS = 1500;
+const AUDIO_DESCRIPTION_END_POLL_MS = 500;
 const AUDIO_DESCRIPTION_CONTROLS_IN_MENU_MAX_WIDTH_PX = 768;
 // macOS Eloquence and novelty voices, which Safari lists alphabetically ahead of the natural-sounding ones
 const LOW_QUALITY_VOICE_NAMES = new Set([
@@ -23,11 +25,15 @@ const LOW_QUALITY_VOICE_NAMES = new Set([
 	'jester', 'junior', 'kathy', 'organ', 'ralph', 'reed', 'rocko', 'sandy', 'shelley', 'superstar', 'trinoids', 'whisper', 'wobble', 'zarvox'
 ]);
 
+let speechUnlocked = false;
+
 export const MediaPlayerAudioDescriptionsMixin = superclass => class extends superclass {
 
 	static properties = {
 		_audioDescriptionControlsInMenu: { state: true },
 		_audioDescriptionDialogOpened: { state: true },
+		_audioDescriptionPaused: { state: true },
+		_audioDescriptionPausedVideo: { state: true },
 		_audioDescriptionPlaying: { state: true },
 		_audioDescriptionTracks: { state: true },
 		_canReplayAudioDescription: { state: true },
@@ -73,6 +79,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		this._audioDescriptionTracks = [];
 		this._audioDescriptionIndex = 0;
 		this._audioDescriptionPreviousTime = -0.001;
+		this._audioDescriptionPaused = false;
 		this._audioDescriptionPausedVideo = false;
 		this._audioDescriptionPlaying = false;
 		this._audioDescriptionControlsInMenu = false;
@@ -95,6 +102,11 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		super.disconnectedCallback();
 	}
 
+	// True while a pause-video description is speaking, so the player should present itself as playing
+	get _audioDescriptionHoldingPlayback() {
+		return this._audioDescriptionPausedVideo && !this._audioDescriptionPaused;
+	}
+
 	#audioDescriptionResizeObserver = new ResizeObserver(entries => {
 		for (const entry of entries) {
 			this._audioDescriptionControlsInMenu = entry.contentRect.width < AUDIO_DESCRIPTION_CONTROLS_IN_MENU_MAX_WIDTH_PX;
@@ -104,8 +116,11 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 	_cancelAudioDescription() {
 		if (this._audioDescriptionUtterance && window.speechSynthesis) {
 			window.speechSynthesis.cancel();
+			// Some browsers stay paused after cancel(), which would hold back the next utterance
+			if (this._audioDescriptionPaused) window.speechSynthesis.resume();
 		}
 		this._audioDescriptionUtterance = null;
+		this._audioDescriptionPaused = false;
 		this._audioDescriptionPausedVideo = false;
 		this._audioDescriptionPlaying = false;
 	}
@@ -285,6 +300,12 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		this._audioDescriptionPreviousTime = currentTime;
 	}
 
+	_pauseAudioDescription() {
+		if (!this._audioDescriptionPlaying || this._audioDescriptionPaused) return;
+		this._audioDescriptionPaused = true;
+		window.speechSynthesis?.pause();
+	}
+
 	_replayAudioDescription() {
 		if (!this._audioDescriptionPlaying) return;
 		const track = this.#getSelectedAudioDescriptionTrack();
@@ -317,11 +338,32 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		this._resetAudioDescriptionCursor(this.currentTime);
 	}
 
+	_resumeAudioDescription() {
+		if (!this._audioDescriptionPaused) return;
+		this._audioDescriptionPaused = false;
+		window.speechSynthesis?.resume();
+	}
+
 	_skipAudioDescription() {
 		if (!this._audioDescriptionPlaying || !this.#getSelectedAudioDescriptionTrack()?.pauseVideo) return;
-		const pausedVideo = this._audioDescriptionPausedVideo;
+		const resumeVideo = this._audioDescriptionHoldingPlayback;
 		this._cancelAudioDescription();
-		if (pausedVideo) this._play();
+		if (resumeVideo) this._play();
+	}
+
+	_toggleAudioDescriptionPause() {
+		if (this._audioDescriptionPaused) this._resumeAudioDescription();
+		else this._pauseAudioDescription();
+	}
+
+	// iOS Safari only speaks after speak() has been called once from a user gesture
+	_unlockAudioDescriptionSpeech() {
+		if (speechUnlocked || !this._selectedAudioDescriptionLanguage || !window.speechSynthesis || !window.SpeechSynthesisUtterance) return;
+		if (navigator.userActivation && !navigator.userActivation.isActive) return;
+		speechUnlocked = true;
+		const utterance = new window.SpeechSynthesisUtterance('');
+		utterance.volume = 0;
+		window.speechSynthesis.speak(utterance);
 	}
 
 	#getAudioDescriptionVoice(language) {
@@ -377,6 +419,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 	#onAudioDescriptionMenuItemChange(e) {
 		this._cancelAudioDescription();
 		this._selectedAudioDescriptionLanguage = e.target.value || null;
+		this._unlockAudioDescriptionSpeech();
 		this._resetAudioDescriptionCursor(this.currentTime);
 		if (this._selectedAudioDescriptionLanguage) {
 			this._setPreference(PREFERENCES_AUDIO_DESCRIPTION_LANGUAGE_KEY, this._selectedAudioDescriptionLanguage);
@@ -387,7 +430,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		this.shadowRoot?.querySelector('#audio-description-dropdown-content')?.close();
 	}
 
-	#speakAudioDescription(description, track) {
+	#speakAudioDescription(description, track, isRetry = false) {
 		if (!window.speechSynthesis || !window.SpeechSynthesisUtterance) return;
 
 		this._cancelAudioDescription();
@@ -412,6 +455,18 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		};
 		utterance.onend = finish;
 		utterance.onerror = finish;
+		let started = false;
+		utterance.onstart = () => {
+			started = true;
+			// Safari can drop onend (e.g. when iOS backgrounds the page), which would leave the video paused
+			const poll = setInterval(() => {
+				if (this._audioDescriptionUtterance !== utterance) clearInterval(poll);
+				else if (!this._audioDescriptionPaused && !window.speechSynthesis.speaking) {
+					clearInterval(poll);
+					finish();
+				}
+			}, AUDIO_DESCRIPTION_END_POLL_MS);
+		};
 
 		const speak = () => {
 			if (this._audioDescriptionUtterance !== utterance) return;
@@ -420,6 +475,19 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 			utterance.volume = this.volume;
 			utterance.rate = this._media?.playbackRate || 1;
 			window.speechSynthesis.speak(utterance);
+			// Chrome's paused state is browser-wide and survives reloads, and resume() is ignored until something is queued
+			if (!this._audioDescriptionPaused) window.speechSynthesis.resume?.();
+			if (isRetry) return;
+
+			setTimeout(() => {
+				if (started || this._audioDescriptionUtterance !== utterance || this._audioDescriptionPaused) return;
+				const pausedVideo = this._audioDescriptionPausedVideo;
+				// Detach first so the cancelled utterance's error event doesn't resume the video
+				this._audioDescriptionUtterance = null;
+				window.speechSynthesis.cancel();
+				this.#speakAudioDescription(description, track, true);
+				if (pausedVideo) this._audioDescriptionPausedVideo = true;
+			}, AUDIO_DESCRIPTION_START_TIMEOUT_MS);
 		};
 
 		if (window.speechSynthesis.getVoices().length) {

package/src/components/media-player/media-player.js

@@ -659,11 +659,12 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerTranscriptMixin(MediaPl
 
 	render() {
 		const fullscreenIcon = fullscreenApi.isFullscreen ? 'tier1:smallscreen' : 'tier1:fullscreen';
-		const playIcon = this._playing ? 'tier1:pause' : 'tier1:play';
+		const playing = this._playing || this._audioDescriptionHoldingPlayback;
+		const playIcon = playing ? 'tier1:pause' : 'tier1:play';
 		const volumeIcon = this._muted ? 'tier1:volume-muted' : 'tier1:volume';
 
 		const fullscreenTooltip = `${fullscreenApi.isFullscreen ? this.localize('components:mediaPlayer:exitFullscreen') : this.localize('components:mediaPlayer:fullscreen')} (${KEY_BINDINGS.fullscreen})`;
-		const playTooltip = `${this._playing ? this.localize('components:mediaPlayer:pause') : this.localize('components:mediaPlayer:play')} (${KEY_BINDINGS.play})`;
+		const playTooltip = `${playing ? this.localize('components:mediaPlayer:pause') : this.localize('components:mediaPlayer:play')} (${KEY_BINDINGS.play})`;
 		const volumeTooltip = `${this._muted ? this.localize('components:mediaPlayer:unmute') : this.localize('components:mediaPlayer:mute')} (${KEY_BINDINGS.mute})`;
 
 		const height = this._maintainHeight ? `${this._maintainHeight}px` : (this._heightPixels ? `${this._heightPixels}px` : '100%');
@@ -864,13 +865,13 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerTranscriptMixin(MediaPl
 	}
 
 	pause() {
-		if (this._media && !this._media.paused) {
+		if (this._media && (!this._media.paused || this._audioDescriptionHoldingPlayback)) {
 			this._togglePlay();
 		}
 	}
 
 	play() {
-		if (this._media && this._media.paused) {
+		if (this._media && this._media.paused && !this._audioDescriptionHoldingPlayback) {
 			this._togglePlay();
 		}
 	}
@@ -1039,8 +1040,9 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerTranscriptMixin(MediaPl
 	}
 
 	_getMediaAreaView() {
-		const playIcon = `tier3:${this._playing ? 'pause' : 'play'}`;
-		const playTooltip = `${this._playing ? this.localize('components:mediaPlayer:pause') : this.localize('components:mediaPlayer:play')} (${KEY_BINDINGS.play})`;
+		const playing = this._playing || this._audioDescriptionHoldingPlayback;
+		const playIcon = `tier3:${playing ? 'pause' : 'play'}`;
+		const playTooltip = `${playing ? this.localize('components:mediaPlayer:pause') : this.localize('components:mediaPlayer:play')} (${KEY_BINDINGS.play})`;
 
 		switch (this.mediaType) {
 			case SOURCE_TYPES.video:
@@ -1417,12 +1419,13 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerTranscriptMixin(MediaPl
 	}
 
 	_onPause() {
-		if (!this._audioDescriptionPausedVideo) this._cancelAudioDescription();
+		if (!this._audioDescriptionPausedVideo) this._pauseAudioDescription();
 		this._playing = false;
 		this.dispatchEvent(new CustomEvent('pause'));
 	}
 
 	_onPlay() {
+		this._resumeAudioDescription();
 		this.dispatchEvent(new CustomEvent('play'));
 	}
 
@@ -1932,6 +1935,11 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerTranscriptMixin(MediaPl
 
 	_togglePlay() {
 		this._posterVisible = false;
+		this._unlockAudioDescriptionSpeech();
+		if (this._audioDescriptionPausedVideo) {
+			this._toggleAudioDescriptionPause();
+			return;
+		}
 		if (this._media.paused) {
 			if (this.playInView) {
 				this._loadVisibilityObserver({ target: this._mediaContainer });