@brightspace-ui/labs 2.63.5 → 2.63.6

package/package.json

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

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

@@ -51,6 +51,8 @@ A Lit element based media player component, designed for similarity across brows
 | poster | String | null | URL of the image to display in place of the media before it has loaded. |
 | src | String |  | URL of the media to play. If multiple sources are desired, use `<source>` tags instead (see below). |
 | thumbnails | String |  | If set, will show thumbnails on preview. See below for required format. |
+| transcript-viewer | Boolean | false | If set and captions tracks are available, adds a "View transcript" item to the settings menu that toggles the transcript viewer. |
+| transcript-viewer-on | Boolean | false | Whether the transcript viewer is shown. Reflected to the attribute. |
 | play-in-view | Boolean | false | If set, will stop the media playback if not in view
 
 ```
@@ -98,7 +100,10 @@ this.document.querySelector('d2l-labs-media-player').pause();
 | Event | Description |
 |--|--|
 | cuechange | Dispatched when the currently-displayed captions cue changes. |
+| close-transcript | Dispatched when the transcript viewer's close button is clicked. |
 | descriptioncuechange | Dispatched when a new audio description cue is reached. Read the cue from `activeDescriptionCue`. |
+| download-captions | Dispatched when "Captions (.vtt)" is selected in the transcript viewer's download menu. |
+| download-transcript | Dispatched when "Transcript (.txt)" is selected in the transcript viewer's download menu. |
 | durationchange | Dispatched when the video or media displayed has changed its duration |
 | ended | Dispatched when the media has reached the end of its duration. |
 | error | Dispatched when the media failed to load. |
@@ -112,6 +117,7 @@ this.document.querySelector('d2l-labs-media-player').pause();
 | trackloaded | Dispatched when a track element has loaded. |
 | trackloadfailed | Dispatched when a track element could not be loaded from the provided src attribute. |
 | tracksmenuitemchanged | Dispatched when the tracks menu item has changed. |
+| transcriptviewertoggle | Dispatched when the transcript viewer is opened or closed from within the player. |
 ```
 // Listen for the loadeddata event
 

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

@@ -0,0 +1,158 @@
+import { css, html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+// Expects the host to provide _duration, _hovering, _hoverTime, _getPercentageTime() and _getTheme()
+export const MediaPlayerChaptersMixin = superclass => class extends superclass {
+
+	static properties = {
+		metadata: { type: Object },
+		_chapters: { state: true },
+	};
+
+	static styles = [super.styles, css`
+		.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;
+		}
+	`];
+
+	constructor() {
+		super();
+		this._chapters = [];
+	}
+
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+
+		if (changedProperties.has('metadata')) {
+			this._getMetadata();
+		}
+
+		// A chapter starting at the very end of the media has no visible range
+		if (this._chapters.at(-1)?.time === Math.floor(this._duration)) {
+			this._chapters = this._chapters.slice(0, -1);
+		}
+	}
+
+	_getChapterMarkersView() {
+		if (this._chapters.length === 0) return;
+
+		let start, end;
+		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];
+			}
+		}
+	}
+
+	_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;
+	}
+};

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

@@ -0,0 +1,266 @@
+import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
+import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
+import '@brightspace-ui/core/components/icons/icon.js';
+import '@brightspace-ui/core/components/menu/menu.js';
+import '@brightspace-ui/core/components/menu/menu-item.js';
+import { css, html, nothing } from 'lit';
+
+// Expects the host to provide _media, _tracks, mediaType, currentTime, _selectedTrackIdentifier, _getSrclangFromTrackIdentifier(), _onCueChange() and localize()
+export const MediaPlayerTranscriptMixin = superclass => class extends superclass {
+
+	static properties = {
+		transcriptViewer: { type: Boolean, attribute: 'transcript-viewer' },
+		transcriptViewerOn: { type: Boolean, attribute: 'transcript-viewer-on', reflect: true },
+	};
+
+	static styles = [super.styles, css`
+		:host([transcript-viewer-on]) #video,
+		:host([transcript-viewer-on]) #video-poster {
+			height: 30%;
+			left: 0;
+			min-height: 30%;
+			position: absolute;
+			top: 0;
+			width: 30%;
+		}
+		.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() {
+		super();
+		this.afterCaptions = [];
+		this.beforeCaptions = [];
+		this.transcriptViewer = false;
+		this.transcriptViewerOn = false;
+	}
+
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		// The viewer element is re-created each time it is shown
+		if (changedProperties.has('transcriptViewerOn')) this._transcriptViewer = null;
+	}
+
+	_closeTranscript() {
+		this._setTranscriptViewerOn(false);
+		this.dispatchEvent(new CustomEvent('close-transcript', { bubbles: true, composed: true }));
+	}
+
+	_downloadCaptions() {
+		this.dispatchEvent(new CustomEvent('download-captions', { bubbles: true, composed: true }));
+	}
+
+	_downloadTranscript() {
+		this.dispatchEvent(new CustomEvent('download-transcript', { bubbles: true, composed: true }));
+	}
+
+	async _onTranscriptCueChange() {
+		if (!this._transcriptViewer) {
+			this._transcriptViewer = this.shadowRoot.getElementById('video-transcript-viewer')
+				|| this.shadowRoot.getElementById('audio-transcript-viewer');
+		}
+		this._updateTranscriptViewerCues();
+		await this.requestUpdate();
+		this._scrollTranscriptViewer();
+	}
+
+	_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 === '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>
+		`;
+	}
+
+	_renderTranscriptViewerMenuItem() {
+		if (!this.transcriptViewer || this._tracks.length === 0) return nothing;
+		return html`
+			<d2l-menu-item
+				id="transcript-viewer-menu-item"
+				text="${this.transcriptViewerOn ? this.localize('components:mediaPlayer:hideTranscript') : this.localize('components:mediaPlayer:viewTranscript')}"
+				@d2l-menu-item-select=${this._toggleTranscriptViewer}
+			></d2l-menu-item>
+		`;
+	}
+
+	_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' });
+			}
+		}
+	}
+
+	_setTranscriptViewerOn(on) {
+		if (this.transcriptViewerOn === on) return;
+		this.transcriptViewerOn = on;
+		this.dispatchEvent(new CustomEvent('transcriptviewertoggle', { bubbles: true, composed: true, detail: { on } }));
+	}
+
+	_toggleTranscriptViewer() {
+		this._setTranscriptViewerOn(!this.transcriptViewerOn);
+	}
+
+	_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);
+			}
+		}
+	}
+};