@brightspace-ui/labs 2.63.1 → 2.63.3

package/package.json

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

package/src/components/media-player/README.md

@@ -42,6 +42,7 @@ A Lit element based media player component, designed for similarity across brows
 | crossorigin | String | null | If set, will set the `crossorigin` attribute on the underlying media element to the set value.
 | download-filename | String | null | If set along with `allow-download`, will use the provided value as the base of the filename (the extension will be automatically appended)
 | duration-hint | Number | 1 | Measured in seconds. If set and the duration cannot be determined automatically, this value will be used instead.
+| hide-audio-description-selection | Boolean | false | If set, the button to configure audio descriptions is hidden. |
 | hide-captions-selection | Boolean | false | If set, the menu item to configure captions is hidden. |
 | hide-seek-bar | Boolean | false | If set, the seek bar will not be shown. |
 | loop | Boolean | false | If set, once the media has finished playing it will replay from the beginning. |
@@ -64,6 +65,7 @@ A Lit element based media player component, designed for similarity across brows
 |--|--|--|--|
 | currentTime | Number | Get & Set | Current time playback time of the media in seconds. |
 | activeCue | Object | Get | VTTCue instance for the currently-displayed captions cue. If no cue is currently displayed, the value is null. |
+| activeDescriptionCue | Object | Get | The most recently reached audio description cue (`{ text, time }`). Reset to null on seek or when the audio description language changes. |
 | duration | Number | Get | Total duration of the media in seconds. |
 | ended | Boolean | Get | Whether or not the video has ended. |
 | paused | Boolean | Get | Whether or not the video is currently paused. |
@@ -96,6 +98,7 @@ this.document.querySelector('d2l-labs-media-player').pause();
 | Event | Description |
 |--|--|
 | cuechange | Dispatched when the currently-displayed captions cue changes. |
+| descriptioncuechange | Dispatched when a new audio description cue is reached. Read the cue from `activeDescriptionCue`. |
 | durationchange | Dispatched when the video or media displayed has changed its duration |
 | ended | Dispatched when the media has reached the end of its duration. |
 | error | Dispatched when the media failed to load. |

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

@@ -16,6 +16,11 @@ 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_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([
+	'albert', 'bad news', 'bahh', 'bells', 'boing', 'bubbles', 'cellos', 'eddy', 'flo', 'fred', 'good news', 'grandma', 'grandpa',
+	'jester', 'junior', 'kathy', 'organ', 'ralph', 'reed', 'rocko', 'sandy', 'shelley', 'superstar', 'trinoids', 'whisper', 'wobble', 'zarvox'
+]);
 
 export const MediaPlayerAudioDescriptionsMixin = superclass => class extends superclass {
 
@@ -45,7 +50,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		}
 		.audio-description-header {
 			background-color: var(--d2l-color-tungsten);
-			border-bottom: 1px solid var(--d2l-color-mica);
+			border-bottom: 1px solid var(--d2l-color-chromite);
 			border-start-end-radius: var(--d2l-popover-border-radius, var(--d2l-popover-default-border-radius));
 			border-start-start-radius: var(--d2l-popover-border-radius, var(--d2l-popover-default-border-radius));
 			color: white;
@@ -65,6 +70,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 	constructor() {
 		super();
 
+		this._activeDescriptionCue = null;
 		this._audioDescriptionTracks = [];
 		this._audioDescriptionIndex = 0;
 		this._audioDescriptionPreviousTime = -0.001;
@@ -74,6 +80,10 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		this._canReplayAudioDescription = false;
 	}
 
+	get activeDescriptionCue() {
+		return this._activeDescriptionCue;
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		this.#audioDescriptionResizeObserver.observe(this);
@@ -101,7 +111,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 	}
 
 	_getAudioDescriptionsButtonView() {
-		if (!this._audioDescriptionTracks?.length) return null;
+		if (!this._audioDescriptionTracks?.length || this.hideAudioDescriptionSelection) return null;
 
 		const tooltip = this.localize('components:mediaPlayer:audioDescription');
 		const replayTooltip = this.localize('components:mediaPlayer:replayAudioDescription');
@@ -111,28 +121,57 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		return html`
 			${showControls && !this._audioDescriptionControlsInMenu ? html`
 				<d2l-button-icon
-					icon="tier1:undo"
 					id="audio-description-replay-button"
+					text="${this.localize('components:mediaPlayer:replay')}"
 					theme="${ifDefined(this._getTheme())}"
 					disabled-tooltip="${replayTooltip}"
 					?disabled="${!this._audioDescriptionPlaying}"
 					@click="${this._replayAudioDescription}"
-				></d2l-button-icon>
+				><d2l-icon-custom slot="icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_777_1621)">
+<mask id="mask0_777_1621" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="2" width="18" height="14">
+<path d="M0 2H18V16H0V2Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_777_1621)">
+<path d="M14.846 2C16.036 2 17 2.73967 17 3.65278V14.3472C17 14.957 16.563 15.517 15.862 15.8048C15.162 16.0926 14.312 16.0607 13.651 15.7223L3.958 10.3751C3.66426 10.2256 3.42291 10.0217 3.25568 9.78167C3.08845 9.54163 3.00059 9.27302 3 9C3 8.44778 3.36 7.93133 3.96 7.62489L13.651 2.27767C14.0059 2.09624 14.4213 1.9997 14.846 2Z" fill="#F1F5FB"/>
+</g>
+<path d="M2 1V17" stroke="#F1F5FB" stroke-width="2" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_777_1621">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg></d2l-icon-custom></d2l-button-icon>
 				<d2l-button-icon
-					icon="tier1:redo"
 					id="audio-description-skip-button"
+					text="${this.localize('components:mediaPlayer:skip')}"
 					theme="${ifDefined(this._getTheme())}"
-					disabled-tooltip="${skipTooltip}"	
+					disabled-tooltip="${skipTooltip}"
 					?disabled="${!this._audioDescriptionPlaying}"
 					@click="${this._skipAudioDescription}"
-				></d2l-button-icon>
+				><d2l-icon-custom slot="icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_777_1614)">
+<mask id="mask0_777_1614" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="2" width="18" height="14">
+<path d="M18 2H0V16H18V2Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_777_1614)">
+<path d="M3.154 2C1.964 2 1 2.73967 1 3.65278V14.3472C1 14.957 1.437 15.517 2.138 15.8048C2.838 16.0926 3.688 16.0607 4.349 15.7223L14.042 10.3751C14.3357 10.2256 14.5771 10.0217 14.7443 9.78167C14.9115 9.54163 14.9994 9.27302 15 9C15 8.44778 14.64 7.93133 14.04 7.62489L4.349 2.27767C3.9941 2.09624 3.5787 1.9997 3.154 2Z" fill="#F1F5FB"/>
+</g>
+<path d="M16 1V17" stroke="#F1F5FB" stroke-width="2" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_777_1614">
+<rect width="18" height="18" fill="white" transform="matrix(-1 0 0 1 18 0)"/>
+</clipPath>
+</defs>
+</svg></d2l-icon-custom></d2l-button-icon>
 			` : null}
 			<d2l-dropdown>
 				<d2l-button-icon
-					aria-label="${tooltip}"
 					class="d2l-dropdown-opener"
 					id="audio-description-button"
-					title="${tooltip}"
+					text="${tooltip}"
 					theme="${ifDefined(this._getTheme())}"
 					?data-enabled="${!!this._selectedAudioDescriptionLanguage}"
 				><d2l-icon-custom slot="icon"><svg width="28" height="14" viewBox="0 0 28 14" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -217,11 +256,14 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 			this._audioDescriptionIndex = track.descriptions.findIndex(description => description.time >= currentTime);
 			if (this._audioDescriptionIndex < 0) this._audioDescriptionIndex = track.descriptions.length;
 			this._cancelAudioDescription();
+			this._activeDescriptionCue = null;
 		}
 
 		const next = track.descriptions[this._audioDescriptionIndex];
 		if (next && this._audioDescriptionPreviousTime < next.time && currentTime >= next.time) {
 			this._audioDescriptionIndex += 1;
+			this._activeDescriptionCue = next;
+			this.dispatchEvent(new CustomEvent('descriptioncuechange'));
 			this.#speakAudioDescription(next, track);
 		}
 		this._audioDescriptionPreviousTime = currentTime;
@@ -242,6 +284,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 
 	_resetAudioDescriptionCursor(time) {
 		this._cancelAudioDescription();
+		this._activeDescriptionCue = null;
 		const track = this._audioDescriptionTracks?.find(track => track.srclang === this._selectedAudioDescriptionLanguage);
 		this._audioDescriptionIndex = track
 			? track.descriptions.findIndex(description => description.time >= time)
@@ -272,13 +315,34 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		const voices = window.speechSynthesis.getVoices();
 		if (!voices.length) return null;
 
-		const bestMatch = voices.find(voice => (voice.lang || '').toLowerCase() === normalizedLanguage)
-			|| voices.find(voice => (voice.lang || '').toLowerCase().startsWith(`${normalizedLanguage.split('-')[0]}-`))
-			|| voices.find(voice => (voice.lang || '').toLowerCase().startsWith(`${normalizedLanguage.split('-')[0]}_`))
-			|| voices.find(voice => (voice.lang || '').toLowerCase().startsWith(normalizedLanguage.split('-')[0]))
-			|| voices.find(voice => (voice.lang || '').toLowerCase().includes(normalizedLanguage.split('-')[0]))
-			|| voices[0];
-		return bestMatch || null;
+		const baseLanguage = normalizedLanguage.split('-')[0];
+		const getLanguageScore = voice => {
+			const voiceLanguage = (voice.lang || '').toLowerCase();
+			if (voiceLanguage === normalizedLanguage) return 4;
+			if (voiceLanguage.startsWith(`${baseLanguage}-`) || voiceLanguage.startsWith(`${baseLanguage}_`)) return 3;
+			if (voiceLanguage.startsWith(baseLanguage)) return 2;
+			if (voiceLanguage.includes(baseLanguage)) return 1;
+			return 0;
+		};
+		const getQualityScore = voice => {
+			const uri = (voice.voiceURI || '').toLowerCase();
+			const name = (voice.name || '').toLowerCase().split(' (')[0];
+			if (uri.includes('eloquence') || uri.includes('speech.synthesis.voice') || LOW_QUALITY_VOICE_NAMES.has(name)) return 0;
+			if (uri.includes('premium') || name.includes('premium')) return 3;
+			if (uri.includes('enhanced') || name.includes('enhanced')) return 2;
+			return 1;
+		};
+
+		let bestMatch = voices[0];
+		let bestScore = -1;
+		for (const voice of voices) {
+			const score = getLanguageScore(voice) * 10 + getQualityScore(voice);
+			if (score > bestScore) {
+				bestMatch = voice;
+				bestScore = score;
+			}
+		}
+		return bestMatch;
 	}
 
 	#getSelectedAudioDescriptionTrack() {
@@ -329,6 +393,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 			const voice = this.#getAudioDescriptionVoice(track.srclang);
 			if (voice) utterance.voice = voice;
 			utterance.volume = this.volume;
+			utterance.rate = this._media?.playbackRate || 1;
 			window.speechSynthesis.speak(utterance);
 		};
 

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

@@ -84,6 +84,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		crossorigin: { type: String },
 		downloadFilename: { type: String, attribute: 'download-filename' },
 		durationHint: { type: Number, attribute: 'duration-hint' },
+		hideAudioDescriptionSelection: { type: Boolean, attribute: 'hide-audio-description-selection' },
 		hideCaptionsSelection: { type: Boolean, attribute: 'hide-captions-selection' },
 		hideSeekBar: { type: Boolean, attribute: 'hide-seek-bar' },
 		loop: { type: Boolean },
@@ -731,6 +732,17 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		return this._media ? this._media.textTracks : null;
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		fullscreenApi.onchange(this.#onFullscreenChange);
+	}
+
+	disconnectedCallback() {
+		fullscreenApi.off('change', this.#onFullscreenChange);
+		this.#releaseFullscreenEscape();
+		super.disconnectedCallback();
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
@@ -809,7 +821,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		const mediaControlsClass = { 'hidden': this._hidingCustomControls() };
 		const theme = this.mediaType === SOURCE_TYPES.video ? 'dark' : undefined;
 		const volumeLevelContainerClass = { 'hidden': !this._usingVolumeContainer || this._hidingCustomControls() };
-		const hideSearchForAudioDescriptions = this._audioDescriptionTracks.length > 0 && this._audioDescriptionControlsInMenu;
+		const hideSearchForAudioDescriptions = !this.hideAudioDescriptionSelection && this._audioDescriptionTracks.length > 0 && this._audioDescriptionControlsInMenu;
 		const searchContainerClass = { 'search-container-hidden' : !this._searchInstances[this._getSrclangFromTrackIdentifier(this._selectedTrackIdentifier)] || hideSearchForAudioDescriptions };
 		this._captionsMenuReturnItem?.setAttribute('text', (this.transcriptViewerOn ? this.localize('components:mediaPlayer:language') : this.localize('components:mediaPlayer:captions')));
 
@@ -1038,8 +1050,38 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		return this.localize('components:mediaPlayer:off');
 	}
 
+	#isFullscreen = false;
+	#keyboardLocked = false;
 	#searchTimeout = null;
 
+	#onFullscreenChange = () => {
+		const root = this.shadowRoot;
+		const isFullscreen = !!this._mediaContainer && (root?.fullscreenElement ?? root?.webkitFullscreenElement) === this._mediaContainer;
+		if (isFullscreen === this.#isFullscreen) return;
+		this.#isFullscreen = isFullscreen;
+
+		if (isFullscreen) {
+			document.addEventListener('keydown', this.#onFullscreenKeyDown, true);
+			// Lets Escape reach the page so open menus can close before fullscreen exits (Chromium only)
+			navigator.keyboard?.lock?.(['Escape'])
+				.then(() => {
+					if (this.#isFullscreen) this.#keyboardLocked = true;
+					else navigator.keyboard.unlock();
+				})
+				.catch(() => {});
+		} else {
+			this.#releaseFullscreenEscape();
+			// Browsers without keyboard lock exit fullscreen on Escape without dispatching it to the page
+			this.#getOpenDropdowns().forEach(dropdown => dropdown.close());
+		}
+	};
+
+	// Capture phase runs before the dropdowns' own Escape handler closes them
+	#onFullscreenKeyDown = e => {
+		if (e.key !== 'Escape' || this.#getOpenDropdowns().length > 0) return;
+		fullscreenApi.exit();
+	};
+
 	_beginIOSVideoFullscreen() {
 		this._iosVideoFullscreen = true;
 	}
@@ -2354,6 +2396,18 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 			}
 		}
 	}
+
+	#getOpenDropdowns() {
+		return [...(this.shadowRoot?.querySelectorAll('d2l-dropdown-menu[opened], d2l-dropdown-content[opened]') ?? [])];
+	}
+
+	#releaseFullscreenEscape() {
+		document.removeEventListener('keydown', this.#onFullscreenKeyDown, true);
+		if (this.#keyboardLocked) {
+			navigator.keyboard?.unlock?.();
+			this.#keyboardLocked = false;
+		}
+	}
 }
 
 customElements.define('d2l-labs-media-player', MediaPlayer);