@brightspace-ui/labs 2.63.6 → 2.63.7

package/package.json

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

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

@@ -28,6 +28,8 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 	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 +75,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 +98,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 +112,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 +296,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 +334,22 @@ 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();
 	}
 
 	#getAudioDescriptionVoice(language) {

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,10 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerTranscriptMixin(MediaPl
 
 	_togglePlay() {
 		this._posterVisible = false;
+		if (this._audioDescriptionPausedVideo) {
+			this._toggleAudioDescriptionPause();
+			return;
+		}
 		if (this._media.paused) {
 			if (this.playInView) {
 				this._loadVisibilityObserver({ target: this._mediaContainer });