@brightspace-ui/labs 2.63.4 → 2.63.6

package/package.json

@@ -112,5 +112,5 @@
     "parse-srt": "^1.0.0-alpha",
     "webvtt-parser": "^2"
   },
-  "version": "2.63.4"
+  "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-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}
 		`;
 	}
 
@@ -346,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-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-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>
+		`;
+	}
+};