@brightspace-ui/labs 2.19.1 → 2.20.1

package/package.json

@@ -14,6 +14,7 @@
     "./components/community-link.js": "./src/components/community/community-link.js",
     "./components/file-uploader.js": "./src/components/file-uploader/file-uploader.js",
     "./components/community-url-factory.js": "./src/components/community/community-url-factory.js",
+    "./components/media-player.js": "./src/components/media-player/media-player.js",
     "./components/navigation/navigation-band.js": "./src/components/navigation/navigation-band.js",
     "./components/navigation/navigation-button-icon.js": "./src/components/navigation/navigation-button-icon.js",
     "./components/navigation/navigation-dropdown-button-custom.js": "./src/components/navigation/navigation-dropdown-button-custom.js",
@@ -73,7 +74,7 @@
     "eslint": "^9",
     "eslint-config-brightspace": "^2",
     "messageformat-validator": "^2",
-    "sinon": "^19",
+    "sinon": "^20",
     "stylelint": "^16"
   },
   "files": [
@@ -88,9 +89,14 @@
     "@brightspace-ui/core": "^3",
     "@brightspace-ui/intl": "^3",
     "@lit/context": "^1.1.3",
+    "fuse.js": "^6.4.6",
     "lit": "^3",
+    "lodash-es": "^4.17.21",
     "mobx": "^5",
-    "page": "^1"
+    "page": "^1",
+    "parse-srt": "^1.0.0-alpha",
+    "resize-observer-polyfill": "^1",
+    "webvtt-parser": "^2.1.2"
   },
-  "version": "2.19.1"
+  "version": "2.20.1"
 }

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

@@ -0,0 +1,216 @@
+# media-player
+
+A Lit element based media player component, designed for similarity across browsers. Capable of playing video and audio contents.
+
+
+## d2l-labs-media-player
+
+```html
+<script type="module">
+    import '@brightspace-ui/labs/components/media-player.js';
+</script>
+<d2l-labs-media-player src="/video.webm"></d2l-labs-media-player>
+```
+
+**Attributes:**
+
+| Attribute | Type | Default | Description |
+|--|--|--|--|
+| allow-download| Boolean | false | If set, will allow the media to be downloaded.
+| autoplay | Boolean | false | If set, will play the media as soon as it has been loaded. |
+| crossorigin | String | null | If set, will set the `crossorigin` attribute on the underlying media element to the set value.
+| download-filename | String | null | If set along with `allow-download`, will use the provided value as the base of the filename (the extension will be automatically appended)
+| duration-hint | Number | 1 | Measured in seconds. If set and the duration cannot be determined automatically, this value will be used instead.
+| hide-captions-selection | Boolean | false | If set, the menu item to configure captions is hidden. |
+| hide-seek-bar | Boolean | false | If set, the seek bar will not be shown. |
+| loop | Boolean | false | If set, once the media has finished playing it will replay from the beginning. |
+| media-type | ["video", "audio"] | null | Whether the video or audio player should be rendered. If not set, a loading indicator will be displayed until set.
+| metadata | JSON | false | Metadata JSON of the video, contains chapters and cuts data. |
+| 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. |
+| play-in-view | Boolean | false | If set, will stop the media playback if not in view
+
+```
+<!-- Render a media player with a source file and loop the media when it reaches the end -->
+
+<d2l-labs-media-player loop src="./local-video.mp4"></d2l-labs-media-player>
+```
+
+**Properties:**
+
+| Property | Type | Get/Set | Description |
+|--|--|--|--|
+| currentTime | Number | Get & Set | Current time playback time of the media in seconds. |
+| activeCue | Object | Get | VTTCue instance for the currently-displayed captions cue. If no cue is currently displayed, the value is null. |
+| duration | Number | Get | Total duration of the media in seconds. |
+| ended | Boolean | Get | Whether or not the video has ended. |
+| paused | Boolean | Get | Whether or not the video is currently paused. |
+| sourceType | ["audio", "video", "unknown"] | Get | The source type of the media.
+| textTracks | [TextTrack] | Get | The TextTracks, for handling WebVTT. (See [MDN link](https://developer.mozilla.org/en-US/docs/Web/API/TextTrack))
+
+```
+// Programatically determine the current playback time of the media player
+
+console.log(`Current playback time of the media player = ${this.document.querySelector('d2l-labs-media-player').currentTime} sec`);
+```
+
+**Methods:**
+
+| Method | Type | Description |
+|--|--|--|
+| exitFullscreen() | void | Requests to exit fullscreen mode from the browser. Ignored if it is not playing video content, or if the video is not in fullscreen mode.
+| play() | void | Begins playing the media. Ignored if the media is already playing.
+| pause() | void | Pauses the media. Ignored if the media is already paused.
+| requestFullscreen() | void | Requests fullscreen mode from the browser. Ignored if it is not playing video content, or the video is already in fullscreen mode.
+
+```
+// Programatically pause the media player
+
+this.document.querySelector('d2l-labs-media-player').pause();
+```
+
+**Events:**
+
+| Event | Description |
+|--|--|
+| cuechange | Dispatched when the currently-displayed captions cue changes. |
+| 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. |
+| loadeddata | Dispatched when the media at the current playback position has finished loading. Often the first frame. |
+| loadedmetadata | Dispatched when the metadata for the media has finished loading. |
+| play | Dispatched when the media begins playing. |
+| pause | Dispatched when the media is paused. |
+| seeked | Dispatched when the user finishes navigating through the media's timeline using the seek bar. |
+| seeking | Dispatched when the user starts navigating through the media's timeline using the seek bar. |
+| timeupdate | Dispatched when the currentTime of the media player has been updated. |
+| 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. |
+```
+// Listen for the loadeddata event
+
+this.document.querySelector('d2l-labs-media-player').addEventListener('loadeddata', () => {
+	console.log('loadeddata event has been dispatched');
+});
+```
+
+## Multiple qualities using `<source>`
+The media player supports switching to different qualities. If multiple `<source>` tags are present, a quality selector will be available in the menu. In this case, do not set `src` on `d2l-labs-media-player`.
+
+```
+<d2l-labs-media-player>
+  <source src="sample-video-144p.mp4" label="SD">
+  <source src="sample-video.mp4" label="HD" default>
+</d2l-labs-media-player
+```
+
+**Attributes**
+
+| Attribute | Type | Default | Description |
+|--|--|--|--|
+| label | String, required | | The label for the track, displayed to the user for selection.
+| src | String, required | | The URL of the source file.
+| default | Boolean | false | The source to be selected by default. If no source has the `default` attribute, then the first `<source>` tag is selected by default. Only one default should be set.
+
+## Showing thumbnails preview with `thumbnails` attribute
+
+Provide a url to the thumbnails sprite image. This sprite is a grid of images taken from the video, at a set interval.
+
+The thumbnail file name must use the following format:
+`th<height>w<width>i<interval>-<hash>.[png|jpg]`
+
+- `width` and `height` are the width/height px of each individual thumbnail
+- `interval` indicates how many seconds apart each thumbnail is
+
+For example, a sprite image named `th90w160i5-<hash>png` has the thumbnails 5 seconds apart, with width 160px and height 90px.
+
+| Attribute | Required | Default | Description |
+|--|--|--|--|
+| hash | optional |  |
+| height | optional | 90px | Height px of each individual thumbnail in the sprite.
+| interval | required | | Interval in seconds between each thumbnail.
+| width | optional | 160px | Width px of each individual thumbnail in the sprite.
+
+## Chapters with `metadata` attribute
+
+Provide metadata JSON e.g. [getMetadata endpoint](http://d2l-content-service-docs.s3-website-us-east-1.amazonaws.com/#operation/getMetadata)
+
+Example format:
+```
+{
+    "cuts": [
+      "in": 20,
+      "out": 30
+    ],
+    "chapters": [
+      {
+        "time": 0,
+        "title": {
+          "en": "Chapter One",
+          "fr": "Chapitre Un"
+        }
+      },
+      {
+        "time": 30,
+        "title": {
+          "en": "Chapter Two",
+          "fr": "Chapitre Deux"
+        }
+      },
+      {
+        "time": 70,
+        "title": {
+          "en": "Chapter Three",
+          "fr": "Chapitre Trois"
+        }
+      }
+    ]
+}
+```
+
+## Captions and Subtitles Using `<track>`
+
+The media player supports captions and subtitles, provided as `.srt` or `.vtt` files. If any valid tracks are present, a captions menu will be presented in the settings menu with an item for each track.
+
+```html
+<script type="module">
+    import '@brightspace-ui/labs/components/media-player.js';
+</script>
+<d2l-labs-media-player src="/video.webm">
+	<track src="/english-captions.srt" srclang="en" label="English" kind="captions">
+	<track src="/french-captions.vtt" srclang="fr" label="French" kind="captions">
+</d2l-labs-media-player>
+```
+
+**Attributes**
+
+| Attribute | Type | Default | Description |
+|--|--|--|--|
+| kind | ["captions", "subtitles"], required | | The kind of track.
+| label | String, required | | The label for the track, displayed to the user for selection.
+| src | String, required | | The URL of the source file.
+| srclang | String, required | | The language's code.
+| default | Boolean | false | The track to be selected by default. If D2L.MediaPlayer.Preferences.Track is defined in local storage, then it will take precedence over this attribute.
+| default-ignore-preferences | Boolean | false | Same as default, but if D2L.MediaPlayer.Preferences.Track is defined, it will be ignored and this track will be selected instead.
+
+## Local Storage
+
+The media player uses local storage to persist the user's playback speed, track selections, and volume.
+
+**Items**
+
+| Key | Description |
+| -- | -- |
+| D2L.MediaPlayer.Preferences.Speed | Playback speed that was last selected.
+| D2L.MediaPlayer.Preferences.Track | Identifier for the kind and language of the track that was last selected.
+| D2L.MediaPlayer.Preferences.Volume | Volume that was last selected.
+
+## Accessibility
+
+The following features are implemented to improve accessibility:
+
+- all controls can be accessed using the mouse or keyboard
+- captions can be provided to the media player
+- important events, such as a media source failing to load, are displayed visually and announced by screen readers

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

@@ -0,0 +1,149 @@
+class FullscreenApi {
+	static getNamesMap() {
+		const names = [
+			[
+				'requestFullscreen',
+				'exitFullscreen',
+				'fullscreenElement',
+				'fullscreenEnabled',
+				'fullscreenchange',
+				'fullscreenerror',
+			],
+			// New WebKit
+			[
+				'webkitRequestFullscreen',
+				'webkitExitFullscreen',
+				'webkitFullscreenElement',
+				'webkitFullscreenEnabled',
+				'webkitfullscreenchange',
+				'webkitfullscreenerror',
+			],
+			// Old WebKit
+			[
+				'webkitRequestFullScreen',
+				'webkitCancelFullScreen',
+				'webkitCurrentFullScreenElement',
+				'webkitCancelFullScreen',
+				'webkitfullscreenchange',
+				'webkitfullscreenerror',
+			],
+			[
+				'mozRequestFullScreen',
+				'mozCancelFullScreen',
+				'mozFullScreenElement',
+				'mozFullScreenEnabled',
+				'mozfullscreenchange',
+				'mozfullscreenerror',
+			],
+			[
+				'msRequestFullscreen',
+				'msExitFullscreen',
+				'msFullscreenElement',
+				'msFullscreenEnabled',
+				'MSFullscreenChange',
+				'MSFullscreenError',
+			]
+		];
+
+		const map = {};
+		for (let i = 0; i < names.length; i++) {
+			const val = names[i];
+			if (val && val[1] in document) {
+				for (i = 0; i < val.length; i++) {
+					map[names[0][i]] = val[i];
+				}
+				return map;
+			}
+		}
+
+		return false;
+	}
+
+	constructor() {
+		this.namesMap = FullscreenApi.getNamesMap();
+		this.eventNamesMap = {
+			change: this.namesMap.fullscreenchange,
+			error: this.namesMap.fullscreenerror
+		};
+	}
+
+	get element() {
+		return document[this.namesMap.fullscreenElement];
+	}
+
+	get isEnabled() {
+		return Boolean(document[this.namesMap.fullscreenEnabled]);
+	}
+
+	get isFullscreen() {
+		return Boolean(document[this.namesMap.fullscreenElement]);
+	}
+
+	exit() {
+		return new Promise((resolve, reject) => {
+			if (!this.isFullscreen) {
+				resolve();
+				return;
+			}
+
+			const onFullScreenExit = () => {
+				this.off('change', onFullScreenExit);
+				resolve();
+			};
+
+			this.on('change', onFullScreenExit);
+
+			const returnPromise = document[this.namesMap.exitFullscreen]();
+			if (returnPromise instanceof Promise) {
+				returnPromise.then(onFullScreenExit).catch(reject);
+			}
+		});
+	}
+
+	off(event, callback) {
+		const eventName = this.eventNamesMap[event];
+		if (eventName) {
+			document.removeEventListener(eventName, callback, false);
+		}
+	}
+
+	on(event, callback) {
+		const eventName = this.eventNamesMap[event];
+		if (eventName) {
+			document.addEventListener(eventName, callback, false);
+		}
+	}
+
+	onchange(callback) {
+		this.on('change', callback);
+	}
+
+	onerror(callback) {
+		this.on('error', callback);
+	}
+
+	request(element) {
+		return new Promise((resolve, reject) => {
+			const onFullScreenEntered = () => {
+				this.off('change', onFullScreenEntered);
+				resolve();
+			};
+
+			this.on('change', onFullScreenEntered);
+
+			element = element || document.documentElement;
+
+			const returnPromise = element[this.namesMap.requestFullscreen]();
+
+			if (returnPromise instanceof Promise) {
+				returnPromise.then(onFullScreenEntered).catch(reject);
+			}
+		});
+	}
+
+	toggle(element) {
+		return this.isFullscreen ? this.exit() : this.request(element);
+	}
+}
+
+export default new FullscreenApi();

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

@@ -0,0 +1,274 @@
+import { css, html, LitElement } from 'lit';
+import ResizeObserver from 'resize-observer-polyfill';
+import { styleMap } from 'lit/directives/style-map.js';
+
+const AUDIO_BARS_GRADIENTS = [
+	{
+		from: '29A6FF',
+		weight: 9
+	},
+	{
+		from: '00D2ED',
+		weight: 9
+	},
+	{
+		from: '2DE2C0',
+		weight: 2
+	},
+	{
+		start: true,
+		from: '29A6FF',
+		weight: 76
+	}
+];
+const { AUDIO_BARS_GRADIENTS_OFFSET, AUDIO_BARS_GRADIENTS_DISPLAYED_WEIGHT } = AUDIO_BARS_GRADIENTS.reduce((r, gradient) => {
+	if (gradient.start || r.AUDIO_BARS_GRADIENTS_DISPLAYED_WEIGHT > 0) {
+		r.AUDIO_BARS_GRADIENTS_DISPLAYED_WEIGHT += gradient.weight;
+	} else {
+		r.AUDIO_BARS_GRADIENTS_OFFSET += gradient.weight;
+	}
+
+	return r;
+}, { AUDIO_BARS_GRADIENTS_OFFSET: 0, AUDIO_BARS_GRADIENTS_DISPLAYED_WEIGHT: 0 });
+
+AUDIO_BARS_GRADIENTS.forEach((gradient, i) => {
+	gradient.fractionPassedNonInclusive = 0;
+	gradient.fractionPassedInclusive = gradient.weight / (AUDIO_BARS_GRADIENTS_OFFSET + AUDIO_BARS_GRADIENTS_DISPLAYED_WEIGHT);
+
+	if (i > 0) {
+		gradient.fractionPassedNonInclusive = AUDIO_BARS_GRADIENTS[i - 1].fractionPassedInclusive;
+		gradient.fractionPassedInclusive += gradient.fractionPassedNonInclusive;
+	}
+
+	if (i < AUDIO_BARS_GRADIENTS.length - 1) {
+		gradient.to = AUDIO_BARS_GRADIENTS[i + 1].from;
+	} else {
+		gradient.to = AUDIO_BARS_GRADIENTS[0].from;
+	}
+});
+const AUDIO_BAR_HEIGHTS = [35, 54, 65, 86, 81, 67, 100, 90, 100, 98, 75, 99, 98, 96, 96, 95, 65, 50, 50, 60, 64, 54, 50, 44, 45, 46, 47, 45, 53, 67, 68, 76, 65, 63, 67, 91, 97, 86, 88, 86, 84, 84, 82, 0, 0, 0, 0, 0, 0, 0, 0, 69, 70, 68, 67, 72, 76, 86, 81, 83, 67, 65, 67, 21, 44, 45, 97, 86, 85, 81, 84, 70, 65, 67, 67, 72, 79, 76, 76, 63, 44, 42, 50, 54, 49, 33, 42, 44, 33, 38, 38, 36, 37, 35, 34];
+const AUDIO_BAR_HORIZONTAL_MARGIN_REM = 0.05;
+const AUDIO_BAR_WIDTH_REM = 0.25;
+const FULL_BYTE = 255;
+const GAMMA = 0.43;
+const GAMMA_ADJUSTMENT_EXPONENT = 2.4;
+const LINEAR_OFFSET = 0.055;
+const UNDER_LINEAR_THRESHOLD_FACTOR = 12.92;
+const UPDATE_PERIOD_MS = 50;
+
+const FONT_SIZE = getComputedStyle(document.documentElement).fontSize;
+const PX_PER_REM = FONT_SIZE.substr(0, FONT_SIZE.indexOf('px'));
+const AUDIO_BAR_WIDTH_PX = AUDIO_BAR_WIDTH_REM * PX_PER_REM;
+const AUDIO_BAR_HORIZONTAL_MARGIN_PX = AUDIO_BAR_HORIZONTAL_MARGIN_REM * PX_PER_REM;
+
+class MediaPlayerAudioBars extends LitElement {
+	static get properties() {
+		return {
+			playing: { type: Boolean },
+			_visibleAudioBars: { type: Array, attribute: false },
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				width: 100%;
+			}
+
+			#d2l-labs-media-player-audio-bars-row {
+				align-items: center;
+				display: flex;
+				flex-direction: row;
+				height: 100%;
+				justify-content: center;
+			}
+
+			#d2l-labs-media-player-audio-bar-container {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
+			.d2l-labs-media-player-audio-bar {
+				border-top-left-radius: 0.075rem;
+				border-top-right-radius: 0.075rem;
+				margin: 0 ${AUDIO_BAR_HORIZONTAL_MARGIN_REM}rem;
+				width: ${AUDIO_BAR_WIDTH_REM}rem;
+			}
+`;
+	}
+
+	constructor() {
+		super();
+
+		this._audioBarColours = [];
+		this._changingAudioBarsInterval = null;
+		this._gradientAudioBars = [];
+		this._numVisibleAudioBars = 0;
+		this._visibleAudioBars = [];
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width } = entry.contentRect;
+
+				const numAudioBarsThatCanFit = Math.floor(width / (AUDIO_BAR_WIDTH_PX + 2 * AUDIO_BAR_HORIZONTAL_MARGIN_PX));
+				const numAudioBarsThatCanFitNextOdd = numAudioBarsThatCanFit % 2 === 1 ? numAudioBarsThatCanFit : numAudioBarsThatCanFit - 1;
+				this._numVisibleAudioBars = Math.min(numAudioBarsThatCanFitNextOdd, AUDIO_BAR_HEIGHTS.length);
+				const numAudioBarColours = Math.floor(this._numVisibleAudioBars * (1 + (AUDIO_BARS_GRADIENTS_OFFSET / AUDIO_BARS_GRADIENTS_DISPLAYED_WEIGHT)));
+
+				this._audioBarColours = [];
+				this._visibleAudioBars = [];
+				for (let i = 0; i < this._numVisibleAudioBars; i++) {
+
+					let height;
+
+					if (this._numVisibleAudioBars < AUDIO_BAR_HEIGHTS.length) {
+						height = AUDIO_BAR_HEIGHTS[i + Math.floor((AUDIO_BAR_HEIGHTS.length - this._numVisibleAudioBars) / 2)];
+					} else {
+						height = AUDIO_BAR_HEIGHTS[i];
+					}
+
+					this._visibleAudioBars.push({
+						height
+					});
+				}
+
+				for (let i = 0; i < numAudioBarColours; i++) {
+					this._audioBarColours.push(0);
+				}
+
+				for (let i = 0; i < numAudioBarColours; i++) {
+					this._audioBarColours[i] = this._getRgbOfAudioBar(i);
+				}
+
+				this._startChangingAudioBars();
+			}
+		}).observe(this.shadowRoot.getElementById('d2l-labs-media-player-audio-bars-row'));
+	}
+
+	render() {
+		return html`
+			<div id="d2l-labs-media-player-audio-bars-row">
+				${this._visibleAudioBars.map(audioBar => html`
+					<div id="d2l-labs-media-player-audio-bar-container">
+						<div style="flex: auto;"></div>
+						<div class="d2l-labs-media-player-audio-bar" style=${styleMap({ backgroundColor: `rgba(${audioBar.red}, ${audioBar.green}, ${audioBar.blue}, 1)`, height: `${audioBar.height}%` })}></div>
+					</div>
+				`)}
+			</div>
+		`;
+	}
+
+	_changeColoursOfAudioBars() {
+		const newVisibleAudioBars = [];
+
+		this._visibleAudioBars.forEach((visibleAudioBar, i) => {
+			const audioBarI = (i + this._visibleAudioBarsOffset) % this._audioBarColours.length;
+
+			const colour = this._audioBarColours[audioBarI];
+
+			newVisibleAudioBars.push({
+				...visibleAudioBar,
+				...colour
+			});
+		});
+
+		this._visibleAudioBars = newVisibleAudioBars;
+
+		this._visibleAudioBarsOffset = this._visibleAudioBarsOffset === 0 ? this._audioBarColours.length - 1 : this._visibleAudioBarsOffset - 1;
+	}
+
+	/**
+	 * Converts a [0..255] SRGB value to a [0..1] linear value.
+	 * @param {Number} rgb SRGB representation of the colour.
+	 * @returns {Number} Linear value of the colour.
+	 */
+	static _fromSRGB(rgb) {
+		rgb /= FULL_BYTE;
+
+		return rgb <= 0.04045 ? rgb / UNDER_LINEAR_THRESHOLD_FACTOR : Math.pow((rgb + LINEAR_OFFSET) / (1 + LINEAR_OFFSET), GAMMA_ADJUSTMENT_EXPONENT);
+	}
+
+	static _getGradientFromFraction(fraction) {
+		for (let i = 0; i < AUDIO_BARS_GRADIENTS.length; i++) {
+			if (fraction < AUDIO_BARS_GRADIENTS[i].fractionPassedInclusive) return AUDIO_BARS_GRADIENTS[i];
+		}
+	}
+
+	_getRgbOfAudioBar(i) {
+		const fraction = i / this._audioBarColours.length;
+
+		const { from, to, fractionPassedNonInclusive, fractionPassedInclusive } = MediaPlayerAudioBars._getGradientFromFraction(fraction);
+
+		const innerFraction = (fraction - fractionPassedNonInclusive) / (fractionPassedInclusive - fractionPassedNonInclusive);
+
+		const fromRedSRGB = parseInt(from.substr(0, 2), 16);
+		const fromRedLinear = MediaPlayerAudioBars._fromSRGB(fromRedSRGB);
+		const fromGreenSRGB = parseInt(from.substr(2, 2), 16);
+		const fromGreenLinear = MediaPlayerAudioBars._fromSRGB(fromGreenSRGB);
+		const fromBlueSRGB = parseInt(from.substr(4, 2), 16);
+		const fromBlueLinear = MediaPlayerAudioBars._fromSRGB(fromBlueSRGB);
+		const fromBrightness = Math.pow(fromRedLinear + fromGreenLinear + fromBlueLinear, GAMMA);
+
+		const toRedSRGB = parseInt(to.substr(0, 2), 16);
+		const toRedLinear = MediaPlayerAudioBars._fromSRGB(toRedSRGB);
+		const toGreenSRGB = parseInt(to.substr(2, 2), 16);
+		const toGreenLinear = MediaPlayerAudioBars._fromSRGB(toGreenSRGB);
+		const toBlueSRGB = parseInt(to.substr(4, 2), 16);
+		const toBlueLinear = MediaPlayerAudioBars._fromSRGB(toBlueSRGB);
+		const toBrightness = Math.pow(toRedLinear + toGreenLinear + toBlueLinear, GAMMA);
+
+		const brightness = Math.pow(MediaPlayerAudioBars._weightedAverage(fromBrightness, toBrightness, innerFraction), 1 / GAMMA);
+
+		const redWithoutBrightness = MediaPlayerAudioBars._weightedAverage(fromRedLinear, toRedLinear, innerFraction);
+		const greenWithoutBrightness = MediaPlayerAudioBars._weightedAverage(fromGreenLinear, toGreenLinear, innerFraction);
+		const blueWithoutBrightness = MediaPlayerAudioBars._weightedAverage(fromBlueLinear, toBlueLinear, innerFraction);
+
+		const sumWithoutBrightness = redWithoutBrightness + greenWithoutBrightness + blueWithoutBrightness;
+
+		return {
+			red: MediaPlayerAudioBars._toSRGB(redWithoutBrightness * brightness / sumWithoutBrightness),
+			green: MediaPlayerAudioBars._toSRGB(greenWithoutBrightness * brightness / sumWithoutBrightness),
+			blue: MediaPlayerAudioBars._toSRGB(blueWithoutBrightness * brightness / sumWithoutBrightness)
+		};
+	}
+
+	_startChangingAudioBars() {
+		this._visibleAudioBarsOffset = this._audioBarColours.length - this._visibleAudioBars.length + 1;
+
+		this._changeColoursOfAudioBars();
+
+		clearInterval(this._changingAudioBarsInterval);
+
+		this._changingAudioBarsInterval = setInterval(() => {
+			if (!this.playing) return;
+
+			this._changeColoursOfAudioBars();
+		}, UPDATE_PERIOD_MS);
+	}
+
+	/**
+	 * Converts a [0..1] linear value to a [0..255] SRGB value.
+	 * @param {Number} rgb Linear representation of the colour.
+	 * @returns {Number} SRGB value of the colour.
+	 */
+	static _toSRGB(rgb) {
+		if (rgb <= 0.0031308) {
+			rgb *= UNDER_LINEAR_THRESHOLD_FACTOR;
+		} else {
+			rgb = ((1 + LINEAR_OFFSET) * (Math.pow(rgb, 1 / GAMMA_ADJUSTMENT_EXPONENT))) - LINEAR_OFFSET;
+		}
+
+		return (FULL_BYTE + 1) * rgb;
+	}
+
+	static _weightedAverage(a, b, weightOfB) {
+		return a + (b - a) * weightOfB;
+	}
+}
+
+customElements.define('d2l-labs-media-player-audio-bars', MediaPlayerAudioBars);