@brightspace-ui/labs 2.63.4 → 2.63.6

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

@@ -2,7 +2,6 @@ import '@brightspace-ui/core/components/button/button-icon.js';
 import '@brightspace-ui/core/components/colors/colors.js';
 import '@brightspace-ui/core/components/dropdown/dropdown.js';
 import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
-import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
 import '@brightspace-ui/core/components/icons/icon.js';
 import '@brightspace-ui/core/components/loading-spinner/loading-spinner.js';
 import '@brightspace-ui/core/components/menu/menu.js';
@@ -13,7 +12,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 +20,9 @@ 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 { MediaPlayerChaptersMixin } from './media-player-chapters.js';
+import { MediaPlayerThumbnailsMixin } from './media-player-thumbnails.js';
+import { MediaPlayerTranscriptMixin } from './media-player-transcript.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 +63,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 +76,7 @@ const tryParseUrlExpiry = url => {
 	}
 };
 
-class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(RtlMixin(LitElement))) {
+class MediaPlayer extends LocalizeLabsElement(MediaPlayerTranscriptMixin(MediaPlayerThumbnailsMixin(MediaPlayerChaptersMixin(MediaPlayerAudioDescriptionsMixin(RtlMixin(LitElement)))))) {
 
 	static properties = {
 		allowDownload: { type: Boolean, attribute: 'allow-download', reflect: true },
@@ -89,14 +89,10 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		hideSeekBar: { type: Boolean, attribute: 'hide-seek-bar' },
 		loop: { type: Boolean },
 		mediaType: { type: String, attribute: 'media-type' },
-		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' },
-		_chapters: { state: true },
 		_currentTime: { state: true },
 		_duration: { state: true },
 		_heightPixels: { state: true },
@@ -115,7 +111,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 },
@@ -402,28 +397,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 			width: 2.75rem;
 		}
 
-		.chapter-marker, .chapter-marker-highlight {
-			cursor: pointer;
-			height: 6px;
-			pointer-events: none;
-			position: absolute;
-			top: 4px;
-			width: 3px;
-			z-index: 2;
-		}
-
-		.chapter-marker {
-			background-color: var(--d2l-color-ferrite);
-		}
-
-		.chapter-marker-highlight {
-			background-color: var(--d2l-color-celestine-minus-1);
-		}
-
-		.chapter-marker[theme="dark"] {
-			background-color: white;
-		}
-
 		#search-container {
 			align-items: center;
 			display: flex;
@@ -473,41 +446,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;
@@ -550,73 +488,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 			font-size: 1rem;
 			line-height: 2.1rem;
 		}
-
-		.transcript-cue-container {
-			padding-left: 10px;
-		}
-		.video-transcript-cue {
-			padding-left: 5px;
-		}
-		.audio-transcript-cue {
-			padding-left: 5px;
-		}
-		.video-transcript-cue[active] {
-			background-color: gray;
-			box-shadow: -5px 0 0 white;
-		}
-		.audio-transcript-cue[active] {
-			background-color: lightgray;
-			box-shadow: -5px 0 0 black;
-		}
-		#video-transcript-viewer {
-			bottom: 55px;
-			color: white;
-			overflow-anchor: none;
-			overflow-y: auto;
-			position: absolute;
-			right: 0;
-			top: 50px;
-			width: 65%;
-			z-index: 1;
-		}
-		#audio-transcript-viewer {
-			bottom: 60px;
-			color: black;
-			overflow-anchor: none;
-			overflow-y: auto;
-			position: absolute;
-			right: 0;
-			top: 45px;
-			width: 100%;
-			z-index: 1;
-		}
-		#close-transcript {
-			position: absolute;
-			right: 7px;
-			top: 0;
-			z-index: 1;
-		}
-		#video-transcript-download-button {
-			left: 35%;
-			position: absolute;
-			top: 5px;
-			z-index: 2;
-		}
-		#audio-transcript-download-button {
-			left: 10px;
-			position: absolute;
-			top: 0;
-			z-index: 2;
-		}
-		#audio-transcript-download-menu {
-			left: 35px;
-		}
-		#video-close-transcript-icon {
-			color: white;
-		}
-		#audio-close-transcript-icon {
-			color: black;
-		}
 	`];
 
 	constructor() {
@@ -627,7 +498,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		this.loop = false;
 		this.playInView = false;
 
-		this._chapters = [];
 		this._currentTime = 0;
 		this._determiningSourceType = true;
 		this._duration = this.durationHint || 1;
@@ -661,8 +531,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		this._playRequested = false;
 		this._mediaContainerAspectRatio = {
 		};
-		this.afterCaptions = [];
-		this.beforeCaptions = [];
 		this._iosVideoFullscreen = false;
 	}
 
@@ -760,8 +628,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		this._searchInput = this.shadowRoot.getElementById('search-input');
 		this._searchContainer = this.shadowRoot.getElementById('search-container');
 
-		this._getMetadata();
-
 		this._startUpdatingCurrentTime();
 		new ResizeObserver((entries) => {
 			for (const entry of entries) {
@@ -830,7 +696,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 +707,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>
@@ -956,6 +822,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 								</d2l-menu-item>
 								${this._getTracksMenuView()}
 								${this._getQualityMenuView()}
+								${this._renderTranscriptViewerMenuItem()}
 								${(this.allowDownload && this._getCurrentSource()) ? this._getDownloadButtonView() : ''}
 								<slot name="settings-menu-item"></slot>
 							</d2l-menu>
@@ -976,14 +843,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		if (changedProperties.has('src') || changedProperties.has('mediaType')) {
 			this._reloadSource();
 		}
-
-		if (changedProperties.has('metadata')) {
-			this._getMetadata();
-		}
-
-		if (changedProperties.has('thumbnails')) {
-			this._getThumbnails();
-		}
 	}
 
 	exitFullscreen() {
@@ -1090,10 +949,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		localStorage.removeItem(preferenceKey);
 	}
 
-	_closeTranscript() {
-		this.dispatchEvent(new CustomEvent('close-transcript', { bubbles: true, composed: true }));
-	}
-
 	_disableNativeCaptions() {
 		if (!this._media) return;
 		for (let i = 0; i < this._media.textTracks.length; i++) {
@@ -1107,14 +962,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		}
 	}
 
-	_downloadCaptions() {
-		this.dispatchEvent(new CustomEvent('download-captions', { bubbles: true, composed: true }));
-	}
-
-	_downloadTranscript() {
-		this.dispatchEvent(new CustomEvent('download-transcript', { bubbles: true, composed: true }));
-	}
-
 	_endIOSVideoFullscreen() {
 		this._iosVideoFullscreen = false;
 	}
@@ -1154,57 +1001,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		return a.href;
 	}
 
-	_getChapterMarkersView() {
-		if (this._chapters.length === 0) return;
-
-		let start, end;
-		if (this._chapters[this._chapters.length - 1].time === Math.floor(this._duration)) this._chapters.pop();
-
-		for (let i = 0; i < this._chapters.length; i++) {
-			if (i === this._chapters.length - 1) {
-				start = this._chapters[i].time;
-				break;
-			}
-			else if (this._hoverTime >= this._chapters[i].time && this._hoverTime < this._chapters[i + 1].time) {
-				start = this._chapters[i].time;
-				end = this._chapters[i + 1].time;
-				break;
-			}
-		}
-
-		return this._chapters.map(chapter => {
-			const highlight = this._hovering && this._hoverTime >= this._chapters[0].time && (chapter.time === start || chapter.time === end);
-			return chapter.time > 0 ? html`
-				<div
-					class=${highlight ? 'chapter-marker-highlight' : 'chapter-marker'}
-					theme="${ifDefined(this._getTheme())}"
-					style=${styleMap({ left: `${this._getPercentageTime(chapter.time)}%` })}
-				></div>
-			` : null;
-		});
-	}
-
-	_getChapterTitle() {
-		if (!(this._chapters.length > 0 && this._hoverTime >= this._chapters[0].time)) return;
-
-		const chapter = this._chapters.find((_chapter, index, chapters) => (
-			index === chapters.length - 1 || (this._hoverTime >= chapters[0].time && this._hoverTime < chapters[index + 1].time)
-		));
-		const chapterTitle = chapter && chapter.title;
-
-		if (!chapterTitle) return;
-
-		if (typeof chapterTitle === 'string') {
-			return chapterTitle;
-		}
-
-		for (const locale in chapterTitle) {
-			if (locale.split('-')[0] === 'en') {
-				return chapterTitle[locale];
-			}
-		}
-	}
-
 	_getCurrentSource() {
 		return this.src || this._sources[this._selectedQuality];
 	}
@@ -1239,7 +1035,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 +1095,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,65 +1107,10 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 					</div>`}
 				`;
 			default:
-				return null;
+				return nothing;
 		}
 	}
 
-	_getMetadata() {
-		if (!this.metadata) return;
-
-		const data = (typeof this.metadata === 'string' || this.metadata instanceof String) ? JSON.parse(this.metadata) : this.metadata;
-		if (!(data && data.chapters && data.chapters.length > 0)) return;
-		let chapters = data.chapters.map(({ time, title }) => {
-			return {
-				time: parseInt(time),
-				title
-			};
-		}).sort((a, b) => a.time - b.time);
-
-		if (!data.cuts) {
-			data.cuts = [];
-		}
-
-		// updating the chapter times based on the cuts, loops over all chapters per cut because it can change multiple chapters
-		let cutDiff = 0;
-		for (const cut of data.cuts) {
-			const cutIn = cut.in - cutDiff;
-
-			const newChapters = new Map(); // using map to preserve sort ordering
-
-			if (!cut.out) { // if cut is until the end of the video
-				for (const chapter of chapters) {
-					if (chapter.time < cutIn) {
-						newChapters.set(chapter.time, chapter.title);
-					}
-				}
-			} else {
-				const cutOut = cut.out - cutDiff;
-				const cutLength = cutOut - cutIn;
-
-				for (const chapter of chapters) {
-					let newTime = chapter.time;
-					if (chapter.time > cutIn && chapter.time <= cutOut) {
-						newTime = cutIn;
-					} else if (chapter.time > cutOut) {
-						newTime = chapter.time - cutLength;
-					}
-
-					newChapters.set(newTime, chapter.title);
-				}
-
-				cutDiff += cutLength;
-			}
-
-			chapters = [...newChapters].map(([chapterTime, chapterTitle]) => ({
-				time: chapterTime,
-				title: chapterTitle
-			}));
-		}
-		this._chapters = chapters;
-	}
-
 	_getPercentageTime(time) {
 		if (this._media) return (time / this.duration) * 100;
 	}
@@ -1382,7 +1123,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 +1157,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 					`)}
 				</d2l-menu>
 			</d2l-menu-item>
-		` : null;
+		` : nothing;
 	}
 
 	_getSearchResultsView() {
@@ -1460,63 +1201,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 +1230,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 					`)}
 				</d2l-menu>
 			</d2l-menu-item>
-		` : null;
+		` : nothing;
 	}
 
 	_hidingCustomControls() {
@@ -1601,13 +1285,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 
 	async _onCueChange() {
 		if (this.transcriptViewerOn) {
-			if (!this._transcriptViewer) {
-				this._transcriptViewer = this.shadowRoot.getElementById('video-transcript-viewer')
-					|| this.shadowRoot.getElementById('audio-transcript-viewer');
-			}
-			this._updateTranscriptViewerCues();
-			await this.requestUpdate();
-			this._scrollTranscriptViewer();
+			await this._onTranscriptCueChange();
 		}
 		for (let i = 0; i < this._media.textTracks.length; i++) {
 			if (this._media.textTracks[i].mode === 'hidden') {
@@ -2151,82 +1829,10 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		}
 	}
 
-	_renderTranscriptViewer() {
-		if (!this._media) {
-			return;
-		}
-		const captionsMenu = this.shadowRoot.getElementById('captions-menu');
-		if (captionsMenu) {
-			this._captionsMenuReturnItem = captionsMenu.shadowRoot.querySelector('d2l-menu-item-return');
-			this._captionsMenuReturnItem?.setAttribute('text', this.localize('components:mediaPlayer:language'));
-		}
-
-		if (!this._transcriptViewer) {
-			this._onCueChange();
-		}
-
-		const isVideo = this.mediaType === SOURCE_TYPES.video;
-		const captionsToHtml = (item) => {
-			const updateTime = async() => {
-				this.currentTime = item.startTime;
-				this._media.currentTime = item.startTime;
-			};
-			return html`
-			<div class=${isVideo ? 'video-transcript-cue' : 'audio-transcript-cue'}
-				@click=${updateTime}>
-				${item.text}<br>
-			</div>`;
-		};
-
-		return html`
-			<span id="close-transcript"
-			@click=${this._closeTranscript}>
-			<d2l-icon class="d2l-button-icon"
-				id=${isVideo ? 'video-close-transcript-icon' : 'audio-close-transcript-icon'}
-				icon="tier1:close-small"></d2l-icon>
-			</span>
-			<div
-			id=${isVideo ? 'video-transcript-viewer' : 'audio-transcript-viewer'}
-			>
-			<div class="transcript-cue-container">
-				${this.beforeCaptions.map(captionsToHtml)}
-				<div class=${isVideo ? 'video-transcript-cue' : 'audio-transcript-cue'} active
-				id="transcript-viewer-active-cue">
-					${this.transcriptActiveCue?.text}
-				</div>
-				${this.afterCaptions.map(captionsToHtml)}
-			</div>
-			</div>
-			<d2l-dropdown-button-subtle
-				id=${isVideo ? 'video-transcript-download-button' : 'audio-transcript-download-button'}
-				text="${this.localize('components:mediaPlayer:download')}">
-				<d2l-dropdown-menu id=${isVideo ? 'video-transcript-download-menu' : 'audio-transcript-download-menu'}>
-					<d2l-menu>
-							<d2l-menu-item @click=${this._downloadTranscript} text="${this.localize('components:mediaPlayer:transcriptTxt')}"></d2l-menu-item>
-							<d2l-menu-item @click=${this._downloadCaptions} text="${this.localize('components:mediaPlayer:captionsVtt')}"></d2l-menu-item>
-					</d2l-menu>
-				</d2l-dropdown-menu>
-			</d2l-dropdown-button-subtle>
-		`;
-	}
-
 	_sanitizeText(text) {
 		return text.replace(/<br \/>/g, '\n');
 	}
 
-	_scrollTranscriptViewer() {
-		const cue = this.shadowRoot.getElementById('transcript-viewer-active-cue');
-		const cueRect = cue?.getBoundingClientRect();
-		const transcriptRect = this._transcriptViewer?.getBoundingClientRect();
-		if (cue && cueRect && transcriptRect) {
-			if (cueRect.bottom > transcriptRect.bottom && cueRect.height <= transcriptRect.height) {
-				this._transcriptViewer.scrollBy({ top: cueRect.bottom - transcriptRect.bottom + transcriptRect.height - cueRect.height, left: 0, behavior: 'smooth' });
-			} else if (cueRect.top < transcriptRect.top) {
-				this._transcriptViewer.scrollBy({ top: cueRect.top - transcriptRect.top, left: 0, behavior: 'smooth' });
-			}
-		}
-	}
-
 	_setPreference(preferenceKey, value) {
 		if (!this.disableSetPreferences) {
 			localStorage.setItem(preferenceKey, value);
@@ -2354,49 +1960,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerAudioDescriptionsMixin(
 		});
 	}
 
-	_updateTranscriptViewerCues() {
-		let cues = null;
-		const lang = this._getSrclangFromTrackIdentifier(this._selectedTrackIdentifier);
-		for (let i = 0; i < this._media.textTracks.length; i += 1) {
-			const currTrack = this._media.textTracks[i];
-			if (currTrack?.cues) {
-				const activeCues = currTrack.activeCues;
-				if (lang === currTrack.language) {
-					this.transcriptActiveCue = activeCues?.[activeCues?.length - 1];
-					cues = currTrack.cues;
-					break;
-				}
-			}
-		}
-		if (!cues) {
-			let defaultTrack;
-			for (let i = 0; i < this._media.textTracks.length; i++) {
-				if (this._media.textTracks[i].default) {
-					defaultTrack = this._media.textTracks[i];
-					break;
-				}
-			}
-			defaultTrack = defaultTrack || this._media.textTracks[0];
-			if (defaultTrack) defaultTrack.mode = 'hidden';
-			this._selectedTrackIdentifier = { kind: defaultTrack?.kind, srclang: defaultTrack?.language };
-			this.requestUpdate();
-			return;
-		}
-
-		this.beforeCaptions = [];
-		this.afterCaptions = [];
-		for (let i = 0; i < cues.length; i += 1) {
-			const currCue = cues[i];
-			const currTime = this._media?.currentTime;
-			const before = currCue !== this.transcriptActiveCue && (currCue.endTime < currTime || currCue.endTime <= this.transcriptActiveCue?.endTime);
-			if (before) {
-				this.beforeCaptions.push(currCue);
-			} else if (currCue !== this.transcriptActiveCue) {
-				this.afterCaptions.push(currCue);
-			}
-		}
-	}
-
 	#getOpenDropdowns() {
 		return [...(this.shadowRoot?.querySelectorAll('d2l-dropdown-menu[opened], d2l-dropdown-content[opened]') ?? [])];
 	}

package/src/lang/ar.js

@@ -30,15 +30,18 @@ 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:hideTranscript": "Hide transcript",
 	"components:mediaPlayer:language": "اللغة",
 	"components:mediaPlayer:loadErrorMessage": "عذرًا، حدثت مشكلة أثناء تحميل ملف الوسائط هذا",
 	"components:mediaPlayer:loadSuccessMessage": "تم تحميل الوسائط بنجاح",
@@ -63,6 +66,7 @@ export default {
 	"components:mediaPlayer:transcriptTxt": "النص (‎.txt)",
 	"components:mediaPlayer:unableToDownload": "لا يمكن التنزيل. يُرجى تحديث الصفحة والمحاولة مرة أخرى.",
 	"components:mediaPlayer:unmute": "إلغاء كتم الصوت",
+	"components:mediaPlayer:viewTranscript": "View transcript",
 	"components:mediaPlayer:volumeSlider": "شريط تمرير مستوى الصوت",
 	"components:navigation:back": "العودة",
 	"components:navigation:next": "التالي",