@brightspace-ui/labs 2.63.5 → 2.63.7

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';
@@ -21,7 +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';
@@ -75,7 +76,7 @@ const tryParseUrlExpiry = url => {
 	}
 };
 
-class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPlayerAudioDescriptionsMixin(RtlMixin(LitElement)))) {
+class MediaPlayer extends LocalizeLabsElement(MediaPlayerTranscriptMixin(MediaPlayerThumbnailsMixin(MediaPlayerChaptersMixin(MediaPlayerAudioDescriptionsMixin(RtlMixin(LitElement)))))) {
 
 	static properties = {
 		allowDownload: { type: Boolean, attribute: 'allow-download', reflect: true },
@@ -88,13 +89,10 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 		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 },
 		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 },
@@ -399,28 +397,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 			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;
@@ -512,73 +488,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 			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() {
@@ -589,7 +498,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 		this.loop = false;
 		this.playInView = false;
 
-		this._chapters = [];
 		this._currentTime = 0;
 		this._determiningSourceType = true;
 		this._duration = this.durationHint || 1;
@@ -623,8 +531,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 		this._playRequested = false;
 		this._mediaContainerAspectRatio = {
 		};
-		this.afterCaptions = [];
-		this.beforeCaptions = [];
 		this._iosVideoFullscreen = false;
 	}
 
@@ -722,8 +628,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 		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) {
@@ -755,11 +659,12 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 
 	render() {
 		const fullscreenIcon = fullscreenApi.isFullscreen ? 'tier1:smallscreen' : 'tier1:fullscreen';
-		const playIcon = this._playing ? 'tier1:pause' : 'tier1:play';
+		const playing = this._playing || this._audioDescriptionHoldingPlayback;
+		const playIcon = playing ? 'tier1:pause' : 'tier1:play';
 		const volumeIcon = this._muted ? 'tier1:volume-muted' : 'tier1:volume';
 
 		const fullscreenTooltip = `${fullscreenApi.isFullscreen ? this.localize('components:mediaPlayer:exitFullscreen') : this.localize('components:mediaPlayer:fullscreen')} (${KEY_BINDINGS.fullscreen})`;
-		const playTooltip = `${this._playing ? this.localize('components:mediaPlayer:pause') : this.localize('components:mediaPlayer:play')} (${KEY_BINDINGS.play})`;
+		const playTooltip = `${playing ? this.localize('components:mediaPlayer:pause') : this.localize('components:mediaPlayer:play')} (${KEY_BINDINGS.play})`;
 		const volumeTooltip = `${this._muted ? this.localize('components:mediaPlayer:unmute') : this.localize('components:mediaPlayer:mute')} (${KEY_BINDINGS.mute})`;
 
 		const height = this._maintainHeight ? `${this._maintainHeight}px` : (this._heightPixels ? `${this._heightPixels}px` : '100%');
@@ -918,6 +823,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 								</d2l-menu-item>
 								${this._getTracksMenuView()}
 								${this._getQualityMenuView()}
+								${this._renderTranscriptViewerMenuItem()}
 								${(this.allowDownload && this._getCurrentSource()) ? this._getDownloadButtonView() : ''}
 								<slot name="settings-menu-item"></slot>
 							</d2l-menu>
@@ -938,10 +844,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 		if (changedProperties.has('src') || changedProperties.has('mediaType')) {
 			this._reloadSource();
 		}
-
-		if (changedProperties.has('metadata')) {
-			this._getMetadata();
-		}
 	}
 
 	exitFullscreen() {
@@ -963,13 +865,13 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 	}
 
 	pause() {
-		if (this._media && !this._media.paused) {
+		if (this._media && (!this._media.paused || this._audioDescriptionHoldingPlayback)) {
 			this._togglePlay();
 		}
 	}
 
 	play() {
-		if (this._media && this._media.paused) {
+		if (this._media && this._media.paused && !this._audioDescriptionHoldingPlayback) {
 			this._togglePlay();
 		}
 	}
@@ -1048,10 +950,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 		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++) {
@@ -1065,14 +963,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 		}
 	}
 
-	_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;
 	}
@@ -1112,57 +1002,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 		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>
-			` : nothing;
-		});
-	}
-
-	_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];
 	}
@@ -1201,8 +1040,9 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 	}
 
 	_getMediaAreaView() {
-		const playIcon = `tier3:${this._playing ? 'pause' : 'play'}`;
-		const playTooltip = `${this._playing ? this.localize('components:mediaPlayer:pause') : this.localize('components:mediaPlayer:play')} (${KEY_BINDINGS.play})`;
+		const playing = this._playing || this._audioDescriptionHoldingPlayback;
+		const playIcon = `tier3:${playing ? 'pause' : 'play'}`;
+		const playTooltip = `${playing ? this.localize('components:mediaPlayer:pause') : this.localize('components:mediaPlayer:play')} (${KEY_BINDINGS.play})`;
 
 		switch (this.mediaType) {
 			case SOURCE_TYPES.video:
@@ -1273,61 +1113,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 		}
 	}
 
-	_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;
 	}
@@ -1502,13 +1287,7 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 
 	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') {
@@ -1640,12 +1419,13 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 	}
 
 	_onPause() {
-		if (!this._audioDescriptionPausedVideo) this._cancelAudioDescription();
+		if (!this._audioDescriptionPausedVideo) this._pauseAudioDescription();
 		this._playing = false;
 		this.dispatchEvent(new CustomEvent('pause'));
 	}
 
 	_onPlay() {
+		this._resumeAudioDescription();
 		this.dispatchEvent(new CustomEvent('play'));
 	}
 
@@ -2052,82 +1832,10 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 		}
 	}
 
-	_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);
@@ -2227,6 +1935,10 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 
 	_togglePlay() {
 		this._posterVisible = false;
+		if (this._audioDescriptionPausedVideo) {
+			this._toggleAudioDescriptionPause();
+			return;
+		}
 		if (this._media.paused) {
 			if (this.playInView) {
 				this._loadVisibilityObserver({ target: this._mediaContainer });
@@ -2255,49 +1967,6 @@ class MediaPlayer extends LocalizeLabsElement(MediaPlayerThumbnailsMixin(MediaPl
 		});
 	}
 
-	_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

@@ -41,6 +41,7 @@ export default {
 	"components:mediaPlayer:download": "تنزيل",
 	"components:mediaPlayer:exitFullscreen": "الخروج من وضع ملء الشاشة",
 	"components:mediaPlayer:fullscreen": "ملء الشاشة",
+	"components:mediaPlayer:hideTranscript": "Hide transcript",
 	"components:mediaPlayer:language": "اللغة",
 	"components:mediaPlayer:loadErrorMessage": "عذرًا، حدثت مشكلة أثناء تحميل ملف الوسائط هذا",
 	"components:mediaPlayer:loadSuccessMessage": "تم تحميل الوسائط بنجاح",
@@ -65,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": "التالي",

package/src/lang/ca.js

@@ -41,6 +41,7 @@ export default {
 	"components:mediaPlayer:download": "Descarrega",
 	"components:mediaPlayer:exitFullscreen": "Sortir de pantalla completa",
 	"components:mediaPlayer:fullscreen": "Pantalla completa",
+	"components:mediaPlayer:hideTranscript": "Hide transcript",
 	"components:mediaPlayer:language": "Idioma",
 	"components:mediaPlayer:loadErrorMessage": "Vaja! Hi ha hagut un problema en carregar aquest fitxer multimèdia.",
 	"components:mediaPlayer:loadSuccessMessage": "L’element multimèdia s’ha carregat correctament",
@@ -65,6 +66,7 @@ export default {
 	"components:mediaPlayer:transcriptTxt": "Transcripció (.txt)",
 	"components:mediaPlayer:unableToDownload": "No s’ha pogut descarregar. Actualitzeu la pàgina i torneu-ho a provar.",
 	"components:mediaPlayer:unmute": "Activar el so",
+	"components:mediaPlayer:viewTranscript": "View transcript",
 	"components:mediaPlayer:volumeSlider": "control lliscant de volum",
 	"components:navigation:back": "Enrere",
 	"components:navigation:next": "Següent",

package/src/lang/cy.js

@@ -41,6 +41,7 @@ export default {
 	"components:mediaPlayer:download": "Lawrlwytho",
 	"components:mediaPlayer:exitFullscreen": "Gadael sgrîn lawn",
 	"components:mediaPlayer:fullscreen": "Sgrin Lawn",
+	"components:mediaPlayer:hideTranscript": "Hide transcript",
 	"components:mediaPlayer:language": "Iaith",
 	"components:mediaPlayer:loadErrorMessage": "Wps, roedd problem wrth lwytho’r ffeil gyfryngau hon",
 	"components:mediaPlayer:loadSuccessMessage": "Mae’r cyfryngau wedi llwytho’n llwyddiannus",
@@ -65,6 +66,7 @@ export default {
 	"components:mediaPlayer:transcriptTxt": "Trawsgrifiad (.txt)",
 	"components:mediaPlayer:unableToDownload": "Methu lawrlwytho. Adnewyddwch y dudalen neu rhowch gynnig arall arni.",
 	"components:mediaPlayer:unmute": "Dad-dewi",
+	"components:mediaPlayer:viewTranscript": "View transcript",
 	"components:mediaPlayer:volumeSlider": "llithrydd sain",
 	"components:navigation:back": "Yn ôl",
 	"components:navigation:next": "Nesaf",

package/src/lang/da.js

@@ -41,6 +41,7 @@ export default {
 	"components:mediaPlayer:download": "Download",
 	"components:mediaPlayer:exitFullscreen": "Afslut fuld skærm",
 	"components:mediaPlayer:fullscreen": "Fuld skærm",
+	"components:mediaPlayer:hideTranscript": "Hide transcript",
 	"components:mediaPlayer:language": "Sprog",
 	"components:mediaPlayer:loadErrorMessage": "Hovsa, der opstod et problem med at indlæse denne mediefil",
 	"components:mediaPlayer:loadSuccessMessage": "Mediet er indlæst",
@@ -65,6 +66,7 @@ export default {
 	"components:mediaPlayer:transcriptTxt": "Afskrift (.txt)",
 	"components:mediaPlayer:unableToDownload": "Kan ikke downloade. Opdater siden, og prøv igen.",
 	"components:mediaPlayer:unmute": "Slå lyd til",
+	"components:mediaPlayer:viewTranscript": "View transcript",
 	"components:mediaPlayer:volumeSlider": "lydstyrkeskyder",
 	"components:navigation:back": "Tilbage",
 	"components:navigation:next": "Næste",

package/src/lang/de.js

@@ -41,6 +41,7 @@ export default {
 	"components:mediaPlayer:download": "Herunterladen",
 	"components:mediaPlayer:exitFullscreen": "Vollbildmodus beenden",
 	"components:mediaPlayer:fullscreen": "Vollbildmodus",
+	"components:mediaPlayer:hideTranscript": "Hide transcript",
 	"components:mediaPlayer:language": "Sprache",
 	"components:mediaPlayer:loadErrorMessage": "Hoppla, beim Laden dieser Mediendatei ist ein Problem aufgetreten",
 	"components:mediaPlayer:loadSuccessMessage": "Diese Medien wurden erfolgreich geladen",
@@ -65,6 +66,7 @@ export default {
 	"components:mediaPlayer:transcriptTxt": "Transkript (txt)",
 	"components:mediaPlayer:unableToDownload": "Herunterladen nicht möglich. Aktualisieren Sie die Seite und versuchen Sie es erneut.",
 	"components:mediaPlayer:unmute": "Stummschaltung aufheben",
+	"components:mediaPlayer:viewTranscript": "View transcript",
 	"components:mediaPlayer:volumeSlider": "Lautstärkeregler",
 	"components:navigation:back": "Zurück",
 	"components:navigation:next": "Weiter",

package/src/lang/en-gb.js

@@ -41,6 +41,7 @@ export default {
 	"components:mediaPlayer:download": "Download",
 	"components:mediaPlayer:exitFullscreen": "Exit fullscreen",
 	"components:mediaPlayer:fullscreen": "Fullscreen",
+	"components:mediaPlayer:hideTranscript": "Hide transcript",
 	"components:mediaPlayer:language": "Language",
 	"components:mediaPlayer:loadErrorMessage": "Oops, there was a problem loading this media file",
 	"components:mediaPlayer:loadSuccessMessage": "The media has loaded successfully",
@@ -65,6 +66,7 @@ export default {
 	"components:mediaPlayer:transcriptTxt": "Transcript (.txt)",
 	"components:mediaPlayer:unableToDownload": "Unable to download. Please refresh the page and try again.",
 	"components:mediaPlayer:unmute": "Unmute",
+	"components:mediaPlayer:viewTranscript": "View transcript",
 	"components:mediaPlayer:volumeSlider": "volume slider",
 	"components:navigation:back": "Back",
 	"components:navigation:next": "Next",

package/src/lang/en.js

@@ -41,6 +41,7 @@ export default {
 	"components:mediaPlayer:download": "Download",
 	"components:mediaPlayer:exitFullscreen": "Exit fullscreen",
 	"components:mediaPlayer:fullscreen": "Fullscreen",
+	"components:mediaPlayer:hideTranscript": "Hide transcript",
 	"components:mediaPlayer:language": "Language",
 	"components:mediaPlayer:loadErrorMessage": "Oops, there was a problem loading this media file",
 	"components:mediaPlayer:loadSuccessMessage": "The media has loaded successfully",
@@ -65,6 +66,7 @@ export default {
 	"components:mediaPlayer:transcriptTxt": "Transcript (.txt)",
 	"components:mediaPlayer:unableToDownload": "Unable to download. Please refresh the page and try again.",
 	"components:mediaPlayer:unmute": "Unmute",
+	"components:mediaPlayer:viewTranscript": "View transcript",
 	"components:mediaPlayer:volumeSlider": "volume slider",
 	"components:navigation:back": "Back",
 	"components:navigation:next": "Next",

package/src/lang/es-es.js

@@ -41,6 +41,7 @@ export default {
 	"components:mediaPlayer:download": "Descargar",
 	"components:mediaPlayer:exitFullscreen": "Salir de la pantalla completa",
 	"components:mediaPlayer:fullscreen": "Pantalla completa",
+	"components:mediaPlayer:hideTranscript": "Hide transcript",
 	"components:mediaPlayer:language": "Idioma",
 	"components:mediaPlayer:loadErrorMessage": "Lo sentimos. Ha surgido un problema al cargar este archivo multimedia",
 	"components:mediaPlayer:loadSuccessMessage": "El archivo multimedia se ha cargado correctamente",
@@ -65,6 +66,7 @@ export default {
 	"components:mediaPlayer:transcriptTxt": "Transcripción (.txt)",
 	"components:mediaPlayer:unableToDownload": "Se ha producido un error al descargar. Actualice la página e inténtelo de nuevo.",
 	"components:mediaPlayer:unmute": "Activar sonido",
+	"components:mediaPlayer:viewTranscript": "View transcript",
 	"components:mediaPlayer:volumeSlider": "control deslizante del volumen",
 	"components:navigation:back": "Volver",
 	"components:navigation:next": "Siguiente",