@brightspace-ui/labs 2.63.3 → 2.63.5

package/package.json

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

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

@@ -1,4 +1,5 @@
 import '@brightspace-ui/core/components/button/button-icon.js';
+import '@brightspace-ui/core/components/dialog/dialog.js';
 import '@brightspace-ui/core/components/dropdown/dropdown.js';
 import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
 import '@brightspace-ui/core/components/icons/icon-custom.js';
@@ -6,8 +7,8 @@ import '@brightspace-ui/core/components/menu/menu.js';
 import '@brightspace-ui/core/components/menu/menu-item-radio.js';
 import '@brightspace-ui/core/components/menu/menu-item.js';
 import '@brightspace-ui/core/components/menu/menu-item-separator.js';
-import { css, html } from 'lit';
-import { bodySmallStyles } from '@brightspace-ui/core/components/typography/styles.js';
+import { css, html, nothing } from 'lit';
+import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 export const AUDIO_DESCRIPTION_REPLAY_KEY = 'r';
@@ -26,13 +27,14 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 
 	static properties = {
 		_audioDescriptionControlsInMenu: { state: true },
+		_audioDescriptionDialogOpened: { state: true },
 		_audioDescriptionPlaying: { state: true },
 		_audioDescriptionTracks: { state: true },
 		_canReplayAudioDescription: { state: true },
 		_selectedAudioDescriptionLanguage: { state: true },
 	};
 
-	static styles = [bodySmallStyles, css`
+	static styles = [bodyCompactStyles, css`
 		#audio-description-skip-button {
 			margin-inline-end: 12px;
 		}
@@ -49,11 +51,8 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 			width: calc(2rem - 9px);
 		}
 		.audio-description-header {
-			background-color: var(--d2l-color-tungsten);
 			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;
+			color: inherit;
 			padding: 1rem;
 		}
 		#audio-description-button[data-enabled]::after {
@@ -77,6 +76,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		this._audioDescriptionPausedVideo = false;
 		this._audioDescriptionPlaying = false;
 		this._audioDescriptionControlsInMenu = false;
+		this._audioDescriptionDialogOpened = false;
 		this._canReplayAudioDescription = false;
 	}
 
@@ -111,7 +111,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 	}
 
 	_getAudioDescriptionsButtonView() {
-		if (!this._audioDescriptionTracks?.length || this.hideAudioDescriptionSelection) return null;
+		if (!this._audioDescriptionTracks?.length || this.hideAudioDescriptionSelection) return nothing;
 
 		const tooltip = this.localize('components:mediaPlayer:audioDescription');
 		const replayTooltip = this.localize('components:mediaPlayer:replayAudioDescription');
@@ -166,7 +166,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 </clipPath>
 </defs>
 </svg></d2l-icon-custom></d2l-button-icon>
-			` : null}
+			` : nothing}
 			<d2l-dropdown>
 				<d2l-button-icon
 					class="d2l-dropdown-opener"
@@ -178,8 +178,16 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 <path d="M8.89199 8.55L7.21999 3.9805C7.13766 3.77783 7.05216 3.53717 6.96349 3.2585C6.87483 2.97983 6.78616 2.679 6.69749 2.356C6.61516 2.679 6.52966 2.983 6.44099 3.268C6.35233 3.54667 6.26683 3.7905 6.18449 3.9995L4.52199 8.55H8.89199ZM13.4045 13.737H11.4285C11.2068 13.737 11.0263 13.6832 10.887 13.5755C10.7477 13.4615 10.6432 13.3222 10.5735 13.1575L9.54749 10.355H3.85699L2.83099 13.1575C2.78033 13.3032 2.68216 13.4362 2.53649 13.5565C2.39083 13.6768 2.21033 13.737 1.99499 13.737H-7.82078e-06L5.40549 -1.43051e-06H8.00849L13.4045 13.737ZM27.2244 6.8685C27.2244 7.8755 27.0565 8.80017 26.7209 9.6425C26.3852 10.4848 25.9134 11.21 25.3054 11.818C24.6974 12.426 23.9659 12.8978 23.1109 13.2335C22.2559 13.5692 21.3059 13.737 20.2609 13.737H15.0264V-1.43051e-06H20.2609C21.3059 -1.43051e-06 22.2559 0.170999 23.1109 0.512999C23.9659 0.848665 24.6974 1.3205 25.3054 1.9285C25.9134 2.53017 26.3852 3.25217 26.7209 4.0945C27.0565 4.93683 27.2244 5.8615 27.2244 6.8685ZM24.6024 6.8685C24.6024 6.11483 24.501 5.44033 24.2984 4.845C24.102 4.24333 23.8139 3.73667 23.4339 3.325C23.0602 2.907 22.6042 2.58717 22.0659 2.3655C21.5339 2.14383 20.9322 2.033 20.2609 2.033H17.5914V11.704H20.2609C20.9322 11.704 21.5339 11.5932 22.0659 11.3715C22.6042 11.1498 23.0602 10.8332 23.4339 10.4215C23.8139 10.0035 24.102 9.49683 24.2984 8.9015C24.501 8.29983 24.6024 7.62217 24.6024 6.8685Z" fill="white"/>
 </svg></d2l-icon-custom></d2l-button-icon>
 				<d2l-dropdown-content id="audio-description-dropdown-content" class="vdiff-target" no-padding no-padding-header no-pointer theme="${ifDefined(this._getTheme())}">
-					${showControls ? html`<div class="d2l-body-small audio-description-header" slot="header">${this.localize('components:mediaPlayer:extendedAudioDescription')}</div>` : null}
+					${showControls ? nothing : html`<div class="d2l-body-compact audio-description-header" slot="header">${this.localize('components:mediaPlayer:audioDescriptions')}</div>`}
                     <d2l-menu label="${tooltip}" @d2l-menu-item-change=${this.#onAudioDescriptionMenuItemChange} theme="${ifDefined(this._getTheme())}">
+						${showControls ? html`
+							<d2l-menu-item
+								id="audio-description-about-menu-item"
+								text="${this.localize('components:mediaPlayer:aboutExtendedAudioDescriptions')}"
+								@d2l-menu-item-select="${this.#onAboutExtendedAudioDescriptionsSelect}"
+							></d2l-menu-item>
+							<d2l-menu-item-separator></d2l-menu-item-separator>
+						` : nothing}
 						${showControls && this._audioDescriptionControlsInMenu ? html`
 							<d2l-menu-item
 								text="${this.localize('components:mediaPlayer:replay')}"
@@ -192,7 +200,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 								@d2l-menu-item-select="${this._skipAudioDescription}"
 							></d2l-menu-item>
 							<d2l-menu-item-separator></d2l-menu-item-separator>
-						` : null}
+						` : nothing}
                         <d2l-menu-item-radio
                             ?selected="${!this._selectedAudioDescriptionLanguage}"
                             text="${this.localize('components:mediaPlayer:off')}"
@@ -207,6 +215,17 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
                     </d2l-menu>
 				</d2l-dropdown-content>
 			</d2l-dropdown>
+			${showControls ? html`
+				<d2l-dialog
+					id="audio-description-about-dialog"
+					width="500"
+					title-text="${this.localize('components:mediaPlayer:aboutExtendedAudioDescriptions')}"
+					?opened="${this._audioDescriptionDialogOpened}"
+					@d2l-dialog-close="${this.#onAboutExtendedAudioDescriptionsDialogClose}"
+				>
+					<p class="d2l-body-compact">${this.localize('components:mediaPlayer:aboutExtendedAudioDescriptionsText')}</p>
+				</d2l-dialog>
+			` : nothing}
 		`;
 	}
 
@@ -253,10 +272,7 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		if (!track) return;
 
 		if (currentTime < this._audioDescriptionPreviousTime) {
-			this._audioDescriptionIndex = track.descriptions.findIndex(description => description.time >= currentTime);
-			if (this._audioDescriptionIndex < 0) this._audioDescriptionIndex = track.descriptions.length;
-			this._cancelAudioDescription();
-			this._activeDescriptionCue = null;
+			this._resetAudioDescriptionCursor(currentTime);
 		}
 
 		const next = track.descriptions[this._audioDescriptionIndex];
@@ -349,6 +365,15 @@ export const MediaPlayerAudioDescriptionsMixin = superclass => class extends sup
 		return this._audioDescriptionTracks?.find(track => track.srclang === this._selectedAudioDescriptionLanguage);
 	}
 
+	#onAboutExtendedAudioDescriptionsDialogClose() {
+		this._audioDescriptionDialogOpened = false;
+	}
+
+	#onAboutExtendedAudioDescriptionsSelect() {
+		this.shadowRoot?.querySelector('#audio-description-dropdown-content')?.close();
+		this._audioDescriptionDialogOpened = true;
+	}
+
 	#onAudioDescriptionMenuItemChange(e) {
 		this._cancelAudioDescription();
 		this._selectedAudioDescriptionLanguage = e.target.value || null;

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

@@ -0,0 +1,116 @@
+import { css, html } from 'lit';
+
+const DEFAULT_PREVIEW_WIDTH = 160;
+const DEFAULT_PREVIEW_HEIGHT = 90;
+
+// Expects the host to provide _hovering, _hoverTime, _timelinePreviewOffset, _getChapterTitle() and static _formatTime()
+export const MediaPlayerThumbnailsMixin = superclass => class extends superclass {
+
+	static properties = {
+		thumbnails: { type: String },
+		_thumbnailsImage: { state: true },
+	};
+
+	static styles = [super.styles, css`
+		#thumbnails-preview-container {
+			bottom: 60px;
+			position: absolute;
+			transform: translateX(-50%);
+			z-index: 2;
+		}
+
+		#thumbnails-preview-chapter {
+			background: #00000072;
+			position: absolute;
+			text-align: center;
+			text-shadow: 0 0 5px rgb(0 0 0 / 75%);
+			width: 100%;
+			z-index: 2;
+		}
+
+		#thumbnails-preview-time {
+			background: #00000042;
+			bottom: 3px;
+			font-size: 14px;
+			left: 0;
+			position: absolute;
+			text-align: center;
+			text-shadow: 0 0 4px rgb(0 0 0 / 75%);
+			width: 100%;
+			z-index: 2;
+		}
+
+		#thumbnails-preview-image {
+			background-repeat: no-repeat;
+			position: relative;
+			width: 100%;
+			z-index: 2;
+		}
+	`];
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+
+		if (changedProperties.has('thumbnails')) {
+			this._getThumbnails();
+		}
+	}
+
+	_getThumbnails() {
+		if (!this.thumbnails) return;
+		this._thumbnailsImage = new Image();
+		this._thumbnailsImage.src = this.thumbnails;
+	}
+
+	_getTimelinePreview() {
+		if (!this._hovering) return;
+		const chapterTitleLabel = this._getChapterTitle();
+		const hoverTimeText = this.constructor._formatTime(this._hoverTime);
+
+		if (!(this.thumbnails && this._thumbnailsImage))
+			return html`
+				<div id="thumbnails-preview-container"
+					style="width: ${DEFAULT_PREVIEW_WIDTH}px; left: clamp(${DEFAULT_PREVIEW_WIDTH / 2}px, ${this._timelinePreviewOffset}%, calc(100% - ${DEFAULT_PREVIEW_WIDTH / 2}px));">
+					<div
+						id="thumbnails-preview-image"
+					>
+						<span id="thumbnails-preview-time">${hoverTimeText}</span>
+					</div>
+					${chapterTitleLabel &&
+						html`<span class="d2l-label-text" id="thumbnails-preview-chapter" style="bottom: ${DEFAULT_PREVIEW_HEIGHT - 60}px">${chapterTitleLabel}</span>`}
+				</div>
+			`;
+
+		// format of the thumbnail is either [url]/timelineThumbnails-h<height>w<height>i<interval>-<hash>.[png|jpg]
+		// or [url]/th<height>w<height>i<interval>-<hash>.[png|jpg]
+		const matches = this.thumbnails.match(/(timelineThumbnails-|t)h(\d+)w(\d+)i(\d+)[^/]*$/i);
+		if (matches && matches.length !== 5) return; // no matches
+		const [ , , thumbHeight, thumbWidth, interval] = matches;
+
+		const width = this._thumbnailsImage.width;
+		const height = this._thumbnailsImage.height;
+
+		const rows = height / thumbHeight;
+		const columns = width / thumbWidth;
+
+		let thumbNum = Math.floor(this._hoverTime / interval);
+		if (thumbNum >= rows * columns) thumbNum = rows * columns - 1;
+
+		const row = Math.floor(thumbNum / columns);
+		const column = thumbNum % columns;
+
+		return html`
+			<div id="thumbnails-preview-container"
+				style="width: ${thumbWidth}px; left: clamp(${thumbWidth / 2}px, ${this._timelinePreviewOffset}%, calc(100% - ${thumbWidth / 2}px));">
+				<div
+					id="thumbnails-preview-image"
+					style="height: ${thumbHeight}px; background: url(${this._thumbnailsImage.src}) ${-column * thumbWidth}px ${-row * thumbHeight}px / ${width}px ${height}px;"
+				>
+					<span id="thumbnails-preview-time">${hoverTimeText}</span>
+				</div>
+				${chapterTitleLabel &&
+					html`<span class="d2l-label-text" id="thumbnails-preview-chapter" style="bottom: ${thumbHeight}px">${chapterTitleLabel}</span>`}
+			</div>
+		`;
+	}
+};

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

@@ -13,7 +13,7 @@ import './slider-bar.js';
 import 'webvtt-parser';
 import './media-player-audio-bars.js';
 import { AUDIO_DESCRIPTION_REPLAY_KEY, AUDIO_DESCRIPTION_SKIP_KEY, AUDIO_DESCRIPTION_TRACK_KIND, MediaPlayerAudioDescriptionsMixin } from './media-player-audio-descriptions.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import fullscreenApi from './fullscreen-api.js';
 import Fuse from 'fuse.js';
@@ -21,6 +21,7 @@ import { getFocusPseudoClass } from '@brightspace-ui/core/helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { labelStyles } from '@brightspace-ui/core/components/typography/styles.js';
 import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { MediaPlayerThumbnailsMixin } from './media-player-thumbnails.js';
 import parseSRT from 'parse-srt/src/parse-srt.js';
 import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -61,8 +62,6 @@ const FUSE_OPTIONS = options => ({
 	...options
 });
 const SEARCH_CONTAINER_HOVER_CLASS = 'search-container-hover';
-const DEFAULT_PREVIEW_WIDTH = 160;
-const DEFAULT_PREVIEW_HEIGHT = 90;
 
 const SAFARI_EXPIRY_EARLY_SWAP_SECONDS = 10;
 const SAFARI_EXPIRY_MIN_ERROR_EMIT_SECONDS = 30;
@@ -76,7 +75,7 @@ const tryParseUrlExpiry = url => {
 	}
 };
 
-class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(RtlMixin(LitElement))) {
+class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPlayerAudioDescriptionsMixin(RtlMixin(LitElement)))) {
 
 	static properties = {
 		allowDownload: { type: Boolean, attribute: 'allow-download', reflect: true },
@@ -92,7 +91,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		metadata: { type: Object },
 		poster: { type: String },
 		src: { type: String },
-		thumbnails: { type: String },
 		disableSetPreferences: { type: Boolean, attribute: 'disable-set-preferences' },
 		transcriptViewerOn: { type: Boolean, attribute: 'transcript-viewer-on' },
 		playInView: { type: Boolean, attribute: 'play-in-view' },
@@ -115,7 +113,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		_selectedSpeed: { state: true },
 		_selectedTrackIdentifier: { state: true },
 		_sources: { state: true },
-		_thumbnailsImage: { state: true },
 		_timelinePreviewOffset: { state: true },
 		_trackFontSizeRem: { state: true },
 		_timeFontSizeRem: { state: true },
@@ -473,41 +470,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 			width: 100%;
 		}
 
-		#thumbnails-preview-container {
-			bottom: 60px;
-			position: absolute;
-			transform: translateX(-50%);
-			z-index: 2;
-		}
-
-		#thumbnails-preview-chapter {
-			background: #00000072;
-			position: absolute;
-			text-align: center;
-			text-shadow: 0 0 5px rgb(0 0 0 / 75%);
-			width: 100%;
-			z-index: 2;
-		}
-
-		#thumbnails-preview-time {
-			background: #00000042;
-			bottom: 3px;
-			font-size: 14px;
-			left: 0;
-			position: absolute;
-			text-align: center;
-			text-shadow: 0 0 4px rgb(0 0 0 / 75%);
-			width: 100%;
-			z-index: 2;
-		}
-
-		#thumbnails-preview-image {
-			background-repeat: no-repeat;
-			position: relative;
-			width: 100%;
-			z-index: 2;
-		}
-
 		.search-marker {
 			color: var(--d2l-color-ferrite);
 			cursor: pointer;
@@ -830,7 +792,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 			icon="${fullscreenIcon}"
 			text="${fullscreenTooltip}"
 			theme="${ifDefined(theme)}"
-			@click="${this._toggleFullscreen}"></d2l-button-icon>` : null;
+			@click="${this._toggleFullscreen}"></d2l-button-icon>` : nothing;
 
 		return html`
 		<slot @slotchange=${this._onSlotChange}></slot>
@@ -841,7 +803,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 			${this.transcriptViewerOn ? this._renderTranscriptViewer() : ''}
 			${this._getMediaAreaView()}
 
-			${!this._trackText || this.transcriptViewerOn ? null : html`
+			${!this._trackText || this.transcriptViewerOn ? nothing : html`
 				<div id="track-container" style=${styleMap(trackContainerStyle)} @click=${this._onTrackContainerClick}>
 					<div>
 						<span style=${styleMap(trackSpanStyle)} role="status">${this._trackText}</span>
@@ -980,10 +942,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		if (changedProperties.has('metadata')) {
 			this._getMetadata();
 		}
-
-		if (changedProperties.has('thumbnails')) {
-			this._getThumbnails();
-		}
 	}
 
 	exitFullscreen() {
@@ -1180,7 +1138,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 					theme="${ifDefined(this._getTheme())}"
 					style=${styleMap({ left: `${this._getPercentageTime(chapter.time)}%` })}
 				></div>
-			` : null;
+			` : nothing;
 		});
 	}
 
@@ -1239,7 +1197,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 			<div class="full-area-centered">
 				<d2l-loading-spinner size="100"></d2l-loading-spinner>
 			</div>
-		` : null;
+		` : nothing;
 	}
 
 	_getMediaAreaView() {
@@ -1299,7 +1257,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 					>
 						<source @error=${this._onError}></source>
 					</audio>
-					${this.transcriptViewerOn ? null : html`
+					${this.transcriptViewerOn ? nothing : html`
 					<div id="audio-bars-container">
 						<div id="audio-play-button-container">
 							<button id="audio-play-button" title="${playTooltip}" aria-label="${playTooltip}" @click=${this._togglePlay}>
@@ -1311,7 +1269,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 					</div>`}
 				`;
 			default:
-				return null;
+				return nothing;
 		}
 	}
 
@@ -1382,7 +1340,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 				@click=${this._onVideoClick}>
 				<d2l-icon icon="tier1:play" theme="${ifDefined(this._getTheme())}"></d2l-icon>
 			</button>
-		` : null;
+		` : nothing;
 
 		return html`
 			${playIcon}
@@ -1416,7 +1374,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 					`)}
 				</d2l-menu>
 			</d2l-menu-item>
-		` : null;
+		` : nothing;
 	}
 
 	_getSearchResultsView() {
@@ -1460,63 +1418,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		return this.mediaType === SOURCE_TYPES.video ? 'dark' : undefined;
 	}
 
-	_getThumbnails() {
-		if (!this.thumbnails) return;
-		this._thumbnailsImage = new Image();
-		this._thumbnailsImage.src = this.thumbnails;
-	}
-
-	_getTimelinePreview() {
-		if (!this._hovering) return;
-		const chapterTitleLabel = this._getChapterTitle();
-
-		if (!(this.thumbnails && this._thumbnailsImage))
-			return html`
-				<div id="thumbnails-preview-container"
-					style="width: ${DEFAULT_PREVIEW_WIDTH}px; left: clamp(${DEFAULT_PREVIEW_WIDTH / 2}px, ${this._timelinePreviewOffset}%, calc(100% - ${DEFAULT_PREVIEW_WIDTH / 2}px));">
-					<div
-						id="thumbnails-preview-image"
-					>
-						<span id="thumbnails-preview-time">${MediaPlayer._formatTime(this._hoverTime)}</span>
-					</div>
-					${chapterTitleLabel &&
-						html`<span class="d2l-label-text" id="thumbnails-preview-chapter" style="bottom: ${DEFAULT_PREVIEW_HEIGHT - 60}px">${chapterTitleLabel}</span>`}
-				</div>
-			`;
-
-		// format of the thumbnail is either [url]/timelineThumbnails-h<height>w<height>i<interval>-<hash>.[png|jpg]
-		// or [url]/th<height>w<height>i<interval>-<hash>.[png|jpg]
-		const matches = this.thumbnails.match(/(timelineThumbnails-|t)h(\d+)w(\d+)i(\d+)[^/]*$/i);
-		if (matches && matches.length !== 5) return; // no matches
-		const [ , , thumbHeight, thumbWidth, interval] = matches;
-
-		const width = this._thumbnailsImage.width;
-		const height = this._thumbnailsImage.height;
-
-		const rows = height / thumbHeight;
-		const columns = width / thumbWidth;
-
-		let thumbNum = Math.floor(this._hoverTime / interval);
-		if (thumbNum >= rows * columns) thumbNum = rows * columns - 1;
-
-		const row = Math.floor(thumbNum / columns);
-		const column = thumbNum % columns;
-
-		return html`
-			<div id="thumbnails-preview-container"
-				style="width: ${thumbWidth}px; left: clamp(${thumbWidth / 2}px, ${this._timelinePreviewOffset}%, calc(100% - ${thumbWidth / 2}px));">
-				<div
-					id="thumbnails-preview-image"
-					style="height: ${thumbHeight}px; background: url(${this._thumbnailsImage.src}) ${-column * thumbWidth}px ${-row * thumbHeight}px / ${width}px ${height}px;"
-				>
-					<span id="thumbnails-preview-time">${MediaPlayer._formatTime(this._hoverTime)}</span>
-				</div>
-				${chapterTitleLabel &&
-					html`<span class="d2l-label-text" id="thumbnails-preview-chapter" style="bottom: ${thumbHeight}px">${chapterTitleLabel}</span>`}
-			</div>
-		`;
-	}
-
 	_getTrackIdentifier(srclang, kind) {
 		return JSON.stringify({
 			kind,
@@ -1546,7 +1447,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 					`)}
 				</d2l-menu>
 			</d2l-menu-item>
-		` : null;
+		` : nothing;
 	}
 
 	_hidingCustomControls() {

package/src/lang/ar.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "العلامة الإجمالية",
 	"components:gradeResult:studentGradePreviewLabel": "عرض المتعلّم للعلامات",
 	"components:gradeResult:studentGradePreviewNotShown": "العلامة لا تظهر للمتعلّمين",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "التسميات التوضيحية",
 	"components:mediaPlayer:captionsVtt": "التسميات التوضيحية (‎.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "التسميات التوضيحية المغلقة",
 	"components:mediaPlayer:default": "افتراضي",
 	"components:mediaPlayer:download": "تنزيل",
 	"components:mediaPlayer:exitFullscreen": "الخروج من وضع ملء الشاشة",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "ملء الشاشة",
 	"components:mediaPlayer:language": "اللغة",
 	"components:mediaPlayer:loadErrorMessage": "عذرًا، حدثت مشكلة أثناء تحميل ملف الوسائط هذا",

package/src/lang/ca.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Qualificació global",
 	"components:gradeResult:studentGradePreviewLabel": "Vista d’estudiant de la qualificació",
 	"components:gradeResult:studentGradePreviewNotShown": "Qualificació no mostrada als estudiants",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Subtítols",
 	"components:mediaPlayer:captionsVtt": "Subtítols (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Predeterminat",
 	"components:mediaPlayer:download": "Descarrega",
 	"components:mediaPlayer:exitFullscreen": "Sortir de pantalla completa",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Pantalla completa",
 	"components:mediaPlayer:language": "Idioma",
 	"components:mediaPlayer:loadErrorMessage": "Vaja! Hi ha hagut un problema en carregar aquest fitxer multimèdia.",

package/src/lang/cy.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Gradd Gyffredinol",
 	"components:gradeResult:studentGradePreviewLabel": "Gwedd Dysgwr o Radd",
 	"components:gradeResult:studentGradePreviewNotShown": "Ni ddangosir y radd i ddysgwyr",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Penawdau",
 	"components:mediaPlayer:captionsVtt": "Capsiynau (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Diofyn",
 	"components:mediaPlayer:download": "Lawrlwytho",
 	"components:mediaPlayer:exitFullscreen": "Gadael sgrîn lawn",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Sgrin Lawn",
 	"components:mediaPlayer:language": "Iaith",
 	"components:mediaPlayer:loadErrorMessage": "Wps, roedd problem wrth lwytho’r ffeil gyfryngau hon",

package/src/lang/da.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Samlet karakter",
 	"components:gradeResult:studentGradePreviewLabel": "Studerendes visning af karakter",
 	"components:gradeResult:studentGradePreviewNotShown": "Karakter vises ikke til studerende",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Undertekster",
 	"components:mediaPlayer:captionsVtt": "Undertekster (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Standard",
 	"components:mediaPlayer:download": "Download",
 	"components:mediaPlayer:exitFullscreen": "Afslut fuld skærm",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Fuld skærm",
 	"components:mediaPlayer:language": "Sprog",
 	"components:mediaPlayer:loadErrorMessage": "Hovsa, der opstod et problem med at indlæse denne mediefil",

package/src/lang/de.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Gesamtnote",
 	"components:gradeResult:studentGradePreviewLabel": "Lerneransicht der Note",
 	"components:gradeResult:studentGradePreviewNotShown": "Note wird Lernern nicht angezeigt",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Beschriftungen",
 	"components:mediaPlayer:captionsVtt": "Untertitel (vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Standard",
 	"components:mediaPlayer:download": "Herunterladen",
 	"components:mediaPlayer:exitFullscreen": "Vollbildmodus beenden",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Vollbildmodus",
 	"components:mediaPlayer:language": "Sprache",
 	"components:mediaPlayer:loadErrorMessage": "Hoppla, beim Laden dieser Mediendatei ist ein Problem aufgetreten",

package/src/lang/en-gb.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Overall Grade",
 	"components:gradeResult:studentGradePreviewLabel": "Learner View of Grade",
 	"components:gradeResult:studentGradePreviewNotShown": "Grade not shown to learners",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Captions",
 	"components:mediaPlayer:captionsVtt": "Captions (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Default",
 	"components:mediaPlayer:download": "Download",
 	"components:mediaPlayer:exitFullscreen": "Exit fullscreen",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Fullscreen",
 	"components:mediaPlayer:language": "Language",
 	"components:mediaPlayer:loadErrorMessage": "Oops, there was a problem loading this media file",

package/src/lang/en.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Overall Grade",
 	"components:gradeResult:studentGradePreviewLabel": "Learner View of Grade",
 	"components:gradeResult:studentGradePreviewNotShown": "Grade not shown to learners",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Captions",
 	"components:mediaPlayer:captionsVtt": "Captions (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Default",
 	"components:mediaPlayer:download": "Download",
 	"components:mediaPlayer:exitFullscreen": "Exit fullscreen",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Fullscreen",
 	"components:mediaPlayer:language": "Language",
 	"components:mediaPlayer:loadErrorMessage": "Oops, there was a problem loading this media file",

package/src/lang/es-es.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Calificación general",
 	"components:gradeResult:studentGradePreviewLabel": "Vista de calificación del estudiante",
 	"components:gradeResult:studentGradePreviewNotShown": "Calificación no mostrada a los estudiantes",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Subtítulos",
 	"components:mediaPlayer:captionsVtt": "Subtítulos (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Predeterminado",
 	"components:mediaPlayer:download": "Descargar",
 	"components:mediaPlayer:exitFullscreen": "Salir de la pantalla completa",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Pantalla completa",
 	"components:mediaPlayer:language": "Idioma",
 	"components:mediaPlayer:loadErrorMessage": "Lo sentimos. Ha surgido un problema al cargar este archivo multimedia",

package/src/lang/es.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Calificación general",
 	"components:gradeResult:studentGradePreviewLabel": "Vista de calificaciones del estudiante",
 	"components:gradeResult:studentGradePreviewNotShown": "La calificación no se muestra a los estudiantes",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Leyendas",
 	"components:mediaPlayer:captionsVtt": "Subtítulos (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Predeterminado",
 	"components:mediaPlayer:download": "Descargar",
 	"components:mediaPlayer:exitFullscreen": "Salir de la pantalla completa",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Pantalla completa",
 	"components:mediaPlayer:language": "Idioma",
 	"components:mediaPlayer:loadErrorMessage": "Lo sentimos, ocurrió un problema al cargar este archivo multimedia",

package/src/lang/fr-fr.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Note générale",
 	"components:gradeResult:studentGradePreviewLabel": "Vue de la note de l’apprenant",
 	"components:gradeResult:studentGradePreviewNotShown": "Note non visible par les apprenants",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Sous-titres",
 	"components:mediaPlayer:captionsVtt": "Sous-titres (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "Cc",
 	"components:mediaPlayer:default": "Par défaut",
 	"components:mediaPlayer:download": "Télécharger",
 	"components:mediaPlayer:exitFullscreen": "Quitter le mode plein écran",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Plein écran",
 	"components:mediaPlayer:language": "Langue",
 	"components:mediaPlayer:loadErrorMessage": "Un problème est survenu lors du chargement de ce fichier multimédia",

package/src/lang/fr-on.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Note générale",
 	"components:gradeResult:studentGradePreviewLabel": "Vue de la note d’appréciation de l’élève",
 	"components:gradeResult:studentGradePreviewNotShown": "La note n’est pas affichée aux élèves",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Légendes",
 	"components:mediaPlayer:captionsVtt": "Sous-titres (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Par défaut",
 	"components:mediaPlayer:download": "Télécharger",
 	"components:mediaPlayer:exitFullscreen": "Quitter le mode plein écran",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Plein écran",
 	"components:mediaPlayer:language": "Langue",
 	"components:mediaPlayer:loadErrorMessage": "Oups! Un problème est survenu lors du chargement de ce fichier multimédia.",

package/src/lang/fr.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Note générale",
 	"components:gradeResult:studentGradePreviewLabel": "Vue de la note d’appréciation de l’apprenant",
 	"components:gradeResult:studentGradePreviewNotShown": "La note n’est pas affichée aux apprenants",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Légendes",
 	"components:mediaPlayer:captionsVtt": "Sous-titres (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Par défaut",
 	"components:mediaPlayer:download": "Télécharger",
 	"components:mediaPlayer:exitFullscreen": "Quitter le mode plein écran",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Plein écran",
 	"components:mediaPlayer:language": "Langue",
 	"components:mediaPlayer:loadErrorMessage": "Oups! Un problème est survenu lors du chargement de ce fichier multimédia.",

package/src/lang/haw.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Nā Kaha Laulā",
 	"components:gradeResult:studentGradePreviewLabel": "Nānā Nā Kaha o ka haumāna",
 	"components:gradeResult:studentGradePreviewNotShown": "ʻAʻole hōʻike ʻia ka Nā Kaha i nā haumāna",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Nā huaʻōlelo",
 	"components:mediaPlayer:captionsVtt": "Nā huaʻōlelo (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Default",
 	"components:mediaPlayer:download": "Hoʻoiho",
 	"components:mediaPlayer:exitFullscreen": "Haʻalele i ka Pale Hoʻokahi",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Palena piha",
 	"components:mediaPlayer:language": "ʻŌlelo",
 	"components:mediaPlayer:loadErrorMessage": "Auē, pilikia ka hoʻouka ʻana i kēia faila pāpaho",

package/src/lang/hi.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "संपूर्ण ग्रेड",
 	"components:gradeResult:studentGradePreviewLabel": "ग्रेड का छात्र दृश्य",
 	"components:gradeResult:studentGradePreviewNotShown": "ग्रेड को छात्रों को नहीं दिखाया गया",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "कैप्शन",
 	"components:mediaPlayer:captionsVtt": "कैप्शन (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "प्रतिलिपि",
 	"components:mediaPlayer:default": "डिफ़ॉल्ट",
 	"components:mediaPlayer:download": "डाउनलोड करें",
 	"components:mediaPlayer:exitFullscreen": "फ़ुलस्क्रीन से बाहर निकलें",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "पूर्ण स्क्रीन",
 	"components:mediaPlayer:language": "भाषा",
 	"components:mediaPlayer:loadErrorMessage": "ओह, इस मीडिया फ़ाइल को लोड करने में कोई समस्या हुई",

package/src/lang/ja.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "全体の成績",
 	"components:gradeResult:studentGradePreviewLabel": "受講者の成績ビュー",
 	"components:gradeResult:studentGradePreviewNotShown": "成績は受講者には表示されません",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "キャプション",
 	"components:mediaPlayer:captionsVtt": "キャプション（.vtt）",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "デフォルト",
 	"components:mediaPlayer:download": "ダウンロード",
 	"components:mediaPlayer:exitFullscreen": "フルスクリーンの終了",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "フルスクリーン",
 	"components:mediaPlayer:language": "言語",
 	"components:mediaPlayer:loadErrorMessage": "このメディアファイルのロード中に問題が発生しました",

package/src/lang/ko.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "전체 평점",
 	"components:gradeResult:studentGradePreviewLabel": "학습자 평점 보기",
 	"components:gradeResult:studentGradePreviewNotShown": "학습자에게 평점이 표시되지 않음",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "캡션",
 	"components:mediaPlayer:captionsVtt": "캡션(.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "참조",
 	"components:mediaPlayer:default": "기본값",
 	"components:mediaPlayer:download": "다운로드",
 	"components:mediaPlayer:exitFullscreen": "전체 화면 끝내기",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "전체 화면",
 	"components:mediaPlayer:language": "언어",
 	"components:mediaPlayer:loadErrorMessage": "죄송합니다. 이 미디어 파일을 로드하는 도중 문제가 발생했습니다",

package/src/lang/mi.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Ngā Tohu Kounga Katoa",
 	"components:gradeResult:studentGradePreviewLabel": "Te Tirohanga Ākonga o te Kōeke",
 	"components:gradeResult:studentGradePreviewNotShown": "Kāore te mahi whakakore i whakaaturia ki ngā ākonga",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Ngā Whakaāhua",
 	"components:mediaPlayer:captionsVtt": "Ngā Whakamaumaharatanga (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "PC",
 	"components:mediaPlayer:default": "Taunoa",
 	"components:mediaPlayer:download": "Tikiake",
 	"components:mediaPlayer:exitFullscreen": "Whakakore i Mata Katoa",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Mata Whānui",
 	"components:mediaPlayer:language": "Reo",
 	"components:mediaPlayer:loadErrorMessage": "Aue, he raru te whakakii i tēnei kōnae pāpāho",

package/src/lang/nl.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Algehele score",
 	"components:gradeResult:studentGradePreviewLabel": "Weergave van score voor cursist",
 	"components:gradeResult:studentGradePreviewNotShown": "Score wordt niet voor cursisten weergegeven",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Bijschriften",
 	"components:mediaPlayer:captionsVtt": "Ondertitels (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Standaard",
 	"components:mediaPlayer:download": "Downloaden",
 	"components:mediaPlayer:exitFullscreen": "Volledig scherm afsluiten",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Volledig scherm",
 	"components:mediaPlayer:language": "Taal",
 	"components:mediaPlayer:loadErrorMessage": "Er is een probleem opgetreden bij het laden van dit mediabestand",

package/src/lang/pl.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Ocena ogólna",
 	"components:gradeResult:studentGradePreviewLabel": "Widok oceny ucznia",
 	"components:gradeResult:studentGradePreviewNotShown": "Ocena niepokazana uczniom",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Napisy",
 	"components:mediaPlayer:captionsVtt": "Napisy (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "DW",
 	"components:mediaPlayer:default": "Domyślny",
 	"components:mediaPlayer:download": "Pobierz",
 	"components:mediaPlayer:exitFullscreen": "Wyjdź z pełnego ekranu",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Pełny ekran",
 	"components:mediaPlayer:language": "Język",
 	"components:mediaPlayer:loadErrorMessage": "Ups, wystąpił problem podczas ładowania tego pliku multimedialnego",

package/src/lang/pt.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Nota Geral",
 	"components:gradeResult:studentGradePreviewLabel": "Visualização da Nota pelo Aluno",
 	"components:gradeResult:studentGradePreviewNotShown": "Nota não exibida aos alunos",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Legendas",
 	"components:mediaPlayer:captionsVtt": "Legendas (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Padrão",
 	"components:mediaPlayer:download": "Baixar",
 	"components:mediaPlayer:exitFullscreen": "Sair do modo de tela inteira",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Tela inteira",
 	"components:mediaPlayer:language": "Idioma",
 	"components:mediaPlayer:loadErrorMessage": "Houve um problema ao carregar este arquivo de mídia",

package/src/lang/ru.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Общий класс",
 	"components:gradeResult:studentGradePreviewLabel": "Вид класса для учащегося",
 	"components:gradeResult:studentGradePreviewNotShown": "Класс не показывается учащимся",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Подписи",
 	"components:mediaPlayer:captionsVtt": "Подписи (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "Копия",
 	"components:mediaPlayer:default": "По умолчанию",
 	"components:mediaPlayer:download": "Скачать",
 	"components:mediaPlayer:exitFullscreen": "Выход из полного экрана",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Полноэкранный режим",
 	"components:mediaPlayer:language": "Язык",
 	"components:mediaPlayer:loadErrorMessage": "Упс, при загрузке этого медиафайла произошла проблема",

package/src/lang/sv.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Totalbetyg",
 	"components:gradeResult:studentGradePreviewLabel": "Elevvy över betyg",
 	"components:gradeResult:studentGradePreviewNotShown": "Betyg visas inte för eleverna",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Bildtexter",
 	"components:mediaPlayer:captionsVtt": "Bildtexter (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "Kopia",
 	"components:mediaPlayer:default": "Standard",
 	"components:mediaPlayer:download": "Hämta",
 	"components:mediaPlayer:exitFullscreen": "Avsluta helskärmsläget",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Helskärm",
 	"components:mediaPlayer:language": "Språk",
 	"components:mediaPlayer:loadErrorMessage": "Det uppstod ett problem när den här mediefilen skulle läsas in",

package/src/lang/th.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "เกรดโดยรวม",
 	"components:gradeResult:studentGradePreviewLabel": "มุมมองเกรดของผู้เรียน",
 	"components:gradeResult:studentGradePreviewNotShown": "ไม่แสดงเกรดให้ผู้เรียนเห็น",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "คำบรรยายภาพ",
 	"components:mediaPlayer:captionsVtt": "คำบรรยายภาพ (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "สำเนาถึง",
 	"components:mediaPlayer:default": "ค่าเริ่มต้น",
 	"components:mediaPlayer:download": "ดาวน์โหลด",
 	"components:mediaPlayer:exitFullscreen": "ออกจากเต็มหน้าจอ",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "เต็มหน้าจอ",
 	"components:mediaPlayer:language": "ภาษา",
 	"components:mediaPlayer:loadErrorMessage": "อุ๊ปส์ เกิดปัญหาขณะโหลดไฟล์สื่อนี้",

package/src/lang/tr.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Genel Not",
 	"components:gradeResult:studentGradePreviewLabel": "Notun Öğrenci Görünümü",
 	"components:gradeResult:studentGradePreviewNotShown": "Not öğrencilere gösterilmiyor",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Alt yazı",
 	"components:mediaPlayer:captionsVtt": "Alt yazılar (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "Bilgi",
 	"components:mediaPlayer:default": "Varsayılan",
 	"components:mediaPlayer:download": "İndir",
 	"components:mediaPlayer:exitFullscreen": "Tam ekrandan çık",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Tam Ekran",
 	"components:mediaPlayer:language": "Dil",
 	"components:mediaPlayer:loadErrorMessage": "Bu ortam dosyası yüklenirken bir sorun oluştu",

package/src/lang/ur.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Overall Grade",
 	"components:gradeResult:studentGradePreviewLabel": "Learner View of Grade",
 	"components:gradeResult:studentGradePreviewNotShown": "Grade not shown to learners",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Captions",
 	"components:mediaPlayer:captionsVtt": "Captions (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Default",
 	"components:mediaPlayer:download": "Download",
 	"components:mediaPlayer:exitFullscreen": "Exit fullscreen",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Fullscreen",
 	"components:mediaPlayer:language": "Language",
 	"components:mediaPlayer:loadErrorMessage": "Oops, there was a problem loading this media file",

package/src/lang/vi.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "Điểm tổng thể",
 	"components:gradeResult:studentGradePreviewLabel": "Chế độ xem điểm của người học",
 	"components:gradeResult:studentGradePreviewNotShown": "Điểm không hiển thị cho người học",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "Phụ đề",
 	"components:mediaPlayer:captionsVtt": "Phụ đề (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "CC",
 	"components:mediaPlayer:default": "Mặc định",
 	"components:mediaPlayer:download": "Tải xuống",
 	"components:mediaPlayer:exitFullscreen": "Thoát toàn màn hình",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "Toàn màn hình",
 	"components:mediaPlayer:language": "Ngôn ngữ",
 	"components:mediaPlayer:loadErrorMessage": "Ôi, có vấn đề khi tải tệp phương tiện này",

package/src/lang/zh-cn.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "总成绩",
 	"components:gradeResult:studentGradePreviewLabel": "学员成绩视图",
 	"components:gradeResult:studentGradePreviewNotShown": "不向学员显示成绩",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "字幕",
 	"components:mediaPlayer:captionsVtt": "字幕 (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "字幕",
 	"components:mediaPlayer:default": "默认值",
 	"components:mediaPlayer:download": "下载",
 	"components:mediaPlayer:exitFullscreen": "退出全屏",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "全屏",
 	"components:mediaPlayer:language": "语言",
 	"components:mediaPlayer:loadErrorMessage": "糟糕，加载此媒体文件时出现问题",

package/src/lang/zh-tw.js

@@ -30,14 +30,16 @@ export default {
 	"components:gradeResult:overallGrade": "整體成績",
 	"components:gradeResult:studentGradePreviewLabel": "學習者的成績檢視",
 	"components:gradeResult:studentGradePreviewNotShown": "成績未向學習者顯示",
+	"components:mediaPlayer:aboutExtendedAudioDescriptions": "About Extended Audio Descriptions",
+	"components:mediaPlayer:aboutExtendedAudioDescriptionsText": "The video will pause when descriptions play. Options to Replay (r) and Skip (s) the description will be available during that time. Keyboard shortcuts work while focus is in the player.",
 	"components:mediaPlayer:audioDescription": "Audio Description",
+	"components:mediaPlayer:audioDescriptions": "Audio Descriptions",
 	"components:mediaPlayer:captions": "字幕",
 	"components:mediaPlayer:captionsVtt": "字幕 (.vtt)",
 	"components:mediaPlayer:closedCaptionsAcronym": "副本",
 	"components:mediaPlayer:default": "預設",
 	"components:mediaPlayer:download": "下載",
 	"components:mediaPlayer:exitFullscreen": "退出全螢幕",
-	"components:mediaPlayer:extendedAudioDescription": "Extended Audio Description",
 	"components:mediaPlayer:fullscreen": "全螢幕",
 	"components:mediaPlayer:language": "語言",
 	"components:mediaPlayer:loadErrorMessage": "糟糕，載入此影片檔時發生錯誤",