@brightspace-ui/labs 2.63.7 → 2.64.0

package/package.json

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

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,6 +25,8 @@ 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 = {
@@ -352,6 +356,16 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		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) {
 		const normalizedLanguage = (language || '').toLowerCase();
 		if (!normalizedLanguage || !window.speechSynthesis?.getVoices) return null;
@@ -405,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);
@@ -415,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();
@@ -440,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;
@@ -448,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

@@ -1935,6 +1935,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerTranscriptMixin(MediaPl
 
 	_togglePlay() {
 		this._posterVisible = false;
+		this._unlockAudioDescriptionSpeech();
 		if (this._audioDescriptionPausedVideo) {
 			this._toggleAudioDescriptionPause();
 			return;