@eluvio/elv-player-js 1.0.115 → 1.0.117

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "1.0.115",
+  "version": "1.0.117",
   "description": "![Eluvio Logo](src/static/images/Logo.png \"Eluvio Logo\")",
   "main": "src/index.js",
   "license": "MIT",
@@ -9,7 +9,8 @@
     "bump-version": "npm --git-tag-version --no-commit-hooks version patch",
     "serve": "TEST_PAGE=true webpack-dev-server --hot --port 8089 --host=0.0.0.0 --disable-host-check --useLocalIp",
     "serve-example": "EXAMPLE_PAGE=true webpack-dev-server --hot --port 8089 --host=0.0.0.0 --disable-host-check --useLocalIp",
-    "build": "rm -rf dist/* && NODE_ENV=production node ./node_modules/webpack-cli/bin/cli.js -p --progress --colors --devtool none",
+    "build": "npm run build-icons && rm -rf dist/* && NODE_ENV=production node ./node_modules/webpack-cli/bin/cli.js -p --progress --colors --devtool none",
+    "build-icons": "node src/BuildIcons.js",
     "build-analyze": "rm -rf dist/* && NODE_ENV=production ANALYZE_BUNDLE=true node ./node_modules/webpack-cli/bin/cli.js -p --progress --colors --devtool none",
     "build-test": " rm -rf test/dist/* && TEST_PAGE=true NODE_ENV=production node ./node_modules/webpack-cli/bin/cli.js -p --progress --colors --devtool none",
     "build-example": " rm -rf examples/dist/* && EXAMPLE_PAGE=true NODE_ENV=production node ./node_modules/webpack-cli/bin/cli.js -p --progress --colors --devtool none",

package/src/BuildIcons.js

@@ -0,0 +1,27 @@
+const fs = require("fs");
+const Path = require("path");
+
+const iconSource = {
+  PlayCircleIcon: Path.resolve(__dirname, "./static/icons/media/LargePlayIcon.svg"),
+  PlayIcon: Path.resolve(__dirname, "./static/icons/media/Play icon.svg"),
+  PauseIcon: Path.resolve(__dirname, "./static/icons/media/Pause icon.svg"),
+  FullscreenIcon: Path.resolve(__dirname, "./static/icons/media/Full Screen icon.svg"),
+  ExitFullscreenIcon: Path.resolve(__dirname, "./static/icons/minimize.svg"),
+  SettingsIcon: Path.resolve(__dirname, "./static/icons/media/Settings icon.svg"),
+  CloseIcon: Path.resolve(__dirname, "./static/icons/x.svg"),
+  MutedIcon: Path.resolve(__dirname, "./static/icons/media/no volume icon.svg"),
+  VolumeLowIcon: Path.resolve(__dirname, "./static/icons/media/low volume icon.svg"),
+  VolumeHighIcon: Path.resolve(__dirname, "./static/icons/media/Volume icon.svg"),
+  MultiViewIcon: Path.resolve(__dirname, "./static/icons/multiview.svg"),
+  LeftArrowIcon: Path.resolve(__dirname, "./static/icons/arrow-left.svg"),
+};
+
+let iconFile = "";
+Object.keys(iconSource).map(iconName => {
+  iconFile += `export const ${iconName} = "${fs.readFileSync(iconSource[iconName]).toString("utf8").replaceAll("\n", "").replaceAll("\"", "\\\"")}";\n`;
+});
+
+fs.writeFileSync(
+  Path.resolve(__dirname, "./static/icons/Icons.js"),
+  iconFile
+);

package/src/PlayerControls.js

@@ -1,15 +1,18 @@
-import PlayCircleIcon from "./static/icons/media/LargePlayIcon.svg";
-import PlayIcon from "./static/icons/media/Play icon.svg";
-import PauseIcon from "./static/icons/media/Pause icon.svg";
-import FullscreenIcon from "./static/icons/media/Full Screen icon.svg";
-import ExitFullscreenIcon from "./static/icons/minimize.svg";
-import SettingsIcon from "./static/icons/media/Settings icon.svg";
-import CloseIcon from "./static/icons/x.svg";
-import MutedIcon from "./static/icons/media/no volume icon.svg";
-import VolumeLowIcon from "./static/icons/media/low volume icon.svg";
-import VolumeHighIcon from "./static/icons/media/Volume icon.svg";
-import MultiViewIcon from "./static/icons/multiview.svg";
-import LeftArrow from "./static/icons/arrow-left.svg";
+import {
+  PlayCircleIcon,
+  PlayIcon,
+  PauseIcon,
+  FullscreenIcon,
+  ExitFullscreenIcon,
+  SettingsIcon,
+  CloseIcon,
+  MutedIcon,
+  VolumeLowIcon,
+  VolumeHighIcon,
+  MultiViewIcon,
+  LeftArrowIcon
+} from "./static/icons/Icons";
+// Icons are generated from .svg files to an importable JS file. To add a new icon, modify and run src/BuildIcons.js
 
 import Logo from "./static/images/ELUV.IO white 20 px V2.png";
 
@@ -37,6 +40,15 @@ export const LocalStorage = {
   }
 };
 
+export const PlayPause = async (videoElement, play) => {
+  try {
+    play ? await videoElement.play() : videoElement.pause();
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+};
+
 export const CreateElement = ({parent, type="div", label, options={}, classes=[], prepend=false}) => {
   const element = document.createElement(type);
   classes.filter(c => c).forEach(c => element.classList.add(c));
@@ -363,7 +375,7 @@ class PlayerControls {
       }
 
       clearTimeout(this.timeouts.playPause);
-      this.timeouts.playPause = setTimeout(() => this.video.paused ? this.video.play() : this.video.pause(), 200);
+      this.timeouts.playPause = setTimeout(() => PlayPause(this.video, this.video.paused), 200);
     });
 
     // Big play icon
@@ -383,7 +395,7 @@ class PlayerControls {
     this.video.addEventListener("pause", () => this.FadeIn({key: "big-play-button", elements: [this.bigPlayButton]}));
 
     this.bigPlayButton.style.display = this.video.paused ? null : "none";
-    this.bigPlayButton.addEventListener("click", () => this.video.play());
+    this.bigPlayButton.addEventListener("click", () => PlayPause(this.video, true));
 
     // Controls container
     const controls = CreateElement({
@@ -402,9 +414,7 @@ class PlayerControls {
       label: this.video.paused ? "Play" : "Pause"
     });
 
-    playPauseButton.addEventListener("click", () => {
-      this.video.paused ? this.video.play() : this.video.pause();
-    });
+    playPauseButton.addEventListener("click", () => PlayPause(this.video, this.video.paused));
 
     // Volume
     const volumeButton = CreateImageButton({
@@ -677,7 +687,7 @@ class PlayerControls {
       }
     });
 
-    this.target.addEventListener("keydown", event => {
+    this.target.addEventListener("keydown", async event => {
       switch (event.key) {
         case "ArrowLeft":
           this.Seek({relative: -10});
@@ -701,7 +711,7 @@ class PlayerControls {
 
         case "Enter":
         case " ":
-          this.video.paused ? this.video.play() : this.video.pause();
+          PlayPause(this.video, this.video.paused);
           event.preventDefault();
           break;
       }
@@ -755,7 +765,7 @@ class PlayerControls {
         CreateElement({
           parent: backButton,
           classes: ["eluvio-player__controls__settings-menu__option-back__icon"]
-        }).innerHTML = LeftArrow;
+        }).innerHTML = LeftArrowIcon;
 
         CreateElement({
           parent: backButton,

package/src/index.js

@@ -9,7 +9,7 @@ import URI from "urijs";
 import ResizeObserver from "resize-observer-polyfill";
 
 import {InitializeFairPlayStream} from "./FairPlay";
-import PlayerControls, {CreateElement} from "./PlayerControls";
+import PlayerControls, {CreateElement, PlayPause} from "./PlayerControls";
 
 export const EluvioPlayerParameters = {
   networks: {
@@ -176,14 +176,14 @@ export class EluvioPlayer {
     }
 
     let lastPlayPauseAction, lastMuteAction;
-    const Callback = ([bodyElement]) => {
+    const Callback = async ([bodyElement]) => {
       // Play / pause when entering / leaving viewport
       if(this.playerOptions.autoplay === EluvioPlayerParameters.autoplay.WHEN_VISIBLE) {
         if(lastPlayPauseAction !== "play" && bodyElement.isIntersecting && this.video.paused) {
-          this.video.play();
+          PlayPause(this.video, true);
           lastPlayPauseAction = "play";
         } else if(lastPlayPauseAction !== "pause" && !bodyElement.isIntersecting && !this.video.paused) {
-          this.video.pause();
+          PlayPause(this.video, false);
           lastPlayPauseAction = "pause";
         }
       }
@@ -297,6 +297,9 @@ export class EluvioPlayer {
       }
     }
 
+    options.ignore_trimming = this.sourceOptions.playoutParameters.ignoreTrimming;
+    options.resolve = this.sourceOptions.playoutParameters.resolve;
+
     if(this.sourceOptions.playoutParameters.directLink) {
       const availableOfferings = await client.AvailableOfferings({
         objectId: this.sourceOptions.playoutParameters.objectId,
@@ -370,7 +373,7 @@ export class EluvioPlayer {
     this.Log("Destroying player");
 
     if(this.video) {
-      this.video.pause();
+      PlayPause(this.video, false);
     }
 
     if(this.player.destroy) {
@@ -512,13 +515,13 @@ export class EluvioPlayer {
       });
 
       if(restartParameters) {
-        this.video.addEventListener("loadedmetadata", () => {
+        this.video.addEventListener("loadedmetadata", async () => {
           this.video.volume = restartParameters.volume;
           this.video.muted = restartParameters.muted;
           this.video.currentTime = restartParameters.currentTime;
 
           if(restartParameters.playing) {
-            this.video.play();
+            PlayPause(this.video, true);
           }
         });
       }
@@ -623,12 +626,12 @@ export class EluvioPlayer {
       }
 
       if(this.playerOptions.autoplay === EluvioPlayerParameters.autoplay.ON) {
-        this.video.play();
+        PlayPause(this.video, true);
 
-        setTimeout(() => {
+        setTimeout(async () => {
           if(this.playerOptions.muted === EluvioPlayerParameters.muted.OFF_IF_POSSIBLE && this.video.paused && !this.video.muted) {
             this.video.muted = true;
-            this.video.play();
+            PlayPause(this.video, true);
           }
         }, 250);
       }
@@ -659,6 +662,7 @@ export class EluvioPlayer {
           });
 
           if(permissionErrorMessage) {
+            error.permission_message = permissionErrorMessage;
             const errorMessage = CreateElement({
               parent: this.target,
               classes: ["eluvio-player__error-message"]
@@ -672,7 +676,7 @@ export class EluvioPlayer {
             this.target.classList.add("eluvio-player--error");
           }
         // eslint-disable-next-line no-empty
-        } catch(error) {}
+        } catch (error) {}
       }
 
       error.permission_message = permissionErrorMessage;

package/src/static/icons/Icons.js

@@ -0,0 +1,12 @@
+export const PlayCircleIcon = "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/><path d=\"M22 15.5L13.75 21.1292L13.75 9.87083L22 15.5Z\" fill=\"black\"/></svg>";
+export const PlayIcon = "<?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"	 viewBox=\"0 0 32 32\" style=\"enable-background:new 0 0 32 32;\" xml:space=\"preserve\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/><path d=\"M22.8,16l-11.6,7V9L22.8,16z\" fill=\"black\"/></svg>";
+export const PauseIcon = "<?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"	 viewBox=\"0 0 32 32\" style=\"enable-background:new 0 0 32 32;\" xml:space=\"preserve\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/><g>	<rect x=\"10.4\" y=\"9\" width=\"4.1\" height=\"14.1\" fill=\"black\"/>	<rect x=\"17.5\" y=\"9\" width=\"4.1\" height=\"14.1\" fill=\"black\"/></g></svg>";
+export const FullscreenIcon = "<svg width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.46154 18.9985L5.84615 18.9942C6.03997 18.9942 6.22584 18.9172 6.36289 18.7801C6.49993 18.6431 6.57692 18.4572 6.57692 18.2634C6.57692 18.0696 6.49993 17.8837 6.36289 17.7467C6.22584 17.6096 6.03997 17.5326 5.84615 17.5326L1.46154 17.537V13.1538C1.46154 12.96 1.38455 12.7742 1.2475 12.6371C1.11046 12.5001 0.924581 12.4231 0.730769 12.4231C0.536957 12.4231 0.351083 12.5001 0.214037 12.6371C0.0769915 12.7742 0 12.96 0 13.1538V19H1.46154V18.9985ZM1.46154 0.00146249V3.57628e-07H0V5.84615C0 6.03997 0.0769915 6.22584 0.214037 6.36289C0.351083 6.49993 0.536957 6.57692 0.730769 6.57692C0.924581 6.57692 1.11046 6.49993 1.2475 6.36289C1.38455 6.22584 1.46154 6.03997 1.46154 5.84615V1.463L5.84615 1.46738C6.03997 1.46738 6.22584 1.39039 6.36289 1.25335C6.49993 1.1163 6.57692 0.930427 6.57692 0.736615C6.57692 0.542803 6.49993 0.35693 6.36289 0.219884C6.22584 0.0828385 6.03997 0.00584609 5.84615 0.00584609L1.46154 0.00146249V0.00146249ZM17.5385 18.9985V19H19V13.1538C19 12.96 18.923 12.7742 18.786 12.6371C18.6489 12.5001 18.463 12.4231 18.2692 12.4231C18.0754 12.4231 17.8895 12.5001 17.7525 12.6371C17.6155 12.7742 17.5385 12.96 17.5385 13.1538V17.537L13.1538 17.5326C12.96 17.5326 12.7742 17.6096 12.6371 17.7467C12.5001 17.8837 12.4231 18.0696 12.4231 18.2634C12.4231 18.4572 12.5001 18.6431 12.6371 18.7801C12.7742 18.9172 12.96 18.9942 13.1538 18.9942L17.5385 18.9985V18.9985ZM17.5385 0.00146249L13.1538 0.00584609C12.96 0.00584609 12.7742 0.0828385 12.6371 0.219884C12.5001 0.35693 12.4231 0.542803 12.4231 0.736615C12.4231 0.930427 12.5001 1.1163 12.6371 1.25335C12.7742 1.39039 12.96 1.46738 13.1538 1.46738L17.5385 1.463V5.84615C17.5385 6.03997 17.6155 6.22584 17.7525 6.36289C17.8895 6.49993 18.0754 6.57692 18.2692 6.57692C18.463 6.57692 18.6489 6.49993 18.786 6.36289C18.923 6.22584 19 6.03997 19 5.84615V3.57628e-07H17.5385V0.00146249V0.00146249Z\" fill=\"white\"/></svg>";
+export const ExitFullscreenIcon = "<svg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51.94 50.82\"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;}</style></defs><polyline class=\"cls-1\" points=\"12.1 49.82 12.1 35.59 1 35.59\"/><polyline class=\"cls-1\" points=\"39.84 1 39.84 15.22 50.94 15.22\"/><polyline class=\"cls-1\" points=\"12.1 1 12.1 15.22 1 15.22\"/><polyline class=\"cls-1\" points=\"39.84 49.82 39.84 35.59 50.94 35.59\"/></svg>";
+export const SettingsIcon = "<svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.4999 6.23932C9.94038 6.23932 9.38635 6.34952 8.86942 6.56364C8.3525 6.77776 7.88281 7.09159 7.48717 7.48723C7.09153 7.88287 6.7777 8.35256 6.56358 8.86948C6.34946 9.38641 6.23926 9.94044 6.23926 10.5C6.23926 11.0595 6.34946 11.6135 6.56358 12.1304C6.7777 12.6474 7.09153 13.1171 7.48717 13.5127C7.88281 13.9083 8.3525 14.2222 8.86942 14.4363C9.38635 14.6504 9.94038 14.7606 10.4999 14.7606C11.6299 14.7606 12.7136 14.3117 13.5126 13.5127C14.3117 12.7137 14.7605 11.63 14.7605 10.5C14.7605 9.36997 14.3117 8.28626 13.5126 7.48723C12.7136 6.68821 11.6299 6.23932 10.4999 6.23932V6.23932ZM7.55184 10.5C7.55184 9.71809 7.86244 8.96824 8.41531 8.41537C8.96817 7.8625 9.71803 7.5519 10.4999 7.5519C11.2818 7.5519 12.0316 7.8625 12.5845 8.41537C13.1374 8.96824 13.448 9.71809 13.448 10.5C13.448 11.2818 13.1374 12.0317 12.5845 12.5846C12.0316 13.1374 11.2818 13.448 10.4999 13.448C9.71803 13.448 8.96817 13.1374 8.41531 12.5846C7.86244 12.0317 7.55184 11.2818 7.55184 10.5Z\" fill=\"white\"/><path d=\"M12.8574 1.76214C12.1657 -0.58738 8.83433 -0.58738 8.1426 1.76214L8.01922 2.18085C7.97091 2.34486 7.88651 2.49599 7.77221 2.62314C7.65791 2.75029 7.51661 2.85026 7.35865 2.91571C7.2007 2.98115 7.0301 3.01042 6.85936 3.00137C6.68863 2.99232 6.52208 2.94518 6.37193 2.8634L5.98866 2.65338C3.83602 1.48256 1.48256 3.83733 2.6547 5.98866L2.8634 6.37193C2.94518 6.52208 2.99232 6.68863 3.00137 6.85936C3.01042 7.0301 2.98115 7.2007 2.91571 7.35865C2.85026 7.51661 2.75029 7.65791 2.62314 7.77221C2.49599 7.88651 2.34486 7.97091 2.18085 8.01922L1.76214 8.1426C-0.58738 8.83433 -0.58738 12.1657 1.76214 12.8574L2.18085 12.9808C2.34486 13.0291 2.49599 13.1135 2.62314 13.2278C2.75029 13.3421 2.85026 13.4834 2.91571 13.6413C2.98115 13.7993 3.01042 13.9699 3.00137 14.1406C2.99232 14.3114 2.94518 14.4779 2.8634 14.6281L2.65338 15.0113C1.48256 17.164 3.83602 19.5188 5.98866 18.3453L6.37193 18.1366C6.52208 18.0548 6.68863 18.0077 6.85936 17.9986C7.0301 17.9896 7.2007 18.0188 7.35865 18.0843C7.51661 18.1497 7.65791 18.2497 7.77221 18.3769C7.88651 18.504 7.97091 18.6551 8.01922 18.8191L8.1426 19.2379C8.83433 21.5874 12.1657 21.5874 12.8574 19.2379L12.9808 18.8191C13.0291 18.6551 13.1135 18.504 13.2278 18.3769C13.3421 18.2497 13.4834 18.1497 13.6413 18.0843C13.7993 18.0188 13.9699 17.9896 14.1406 17.9986C14.3114 18.0077 14.4779 18.0548 14.6281 18.1366L15.0113 18.3466C17.164 19.5188 19.5188 17.1627 18.3453 15.0113L18.1366 14.6281C18.0548 14.4779 18.0077 14.3114 17.9986 14.1406C17.9896 13.9699 18.0188 13.7993 18.0843 13.6413C18.1497 13.4834 18.2497 13.3421 18.3769 13.2278C18.504 13.1135 18.6551 13.0291 18.8191 12.9808L19.2379 12.8574C21.5874 12.1657 21.5874 8.83433 19.2379 8.1426L18.8191 8.01922C18.6551 7.97091 18.504 7.88651 18.3769 7.77221C18.2497 7.65791 18.1497 7.51661 18.0843 7.35865C18.0188 7.2007 17.9896 7.0301 17.9986 6.85936C18.0077 6.68863 18.0548 6.52208 18.1366 6.37193L18.3466 5.98866C19.5188 3.83602 17.1627 1.48256 15.0113 2.6547L14.6281 2.8634C14.4779 2.94518 14.3114 2.99232 14.1406 3.00137C13.9699 3.01042 13.7993 2.98115 13.6413 2.91571C13.4834 2.85026 13.3421 2.75029 13.2278 2.62314C13.1135 2.49599 13.0291 2.34486 12.9808 2.18085L12.8574 1.76214V1.76214ZM9.40137 2.1336C9.72426 1.0376 11.2757 1.0376 11.5986 2.1336L11.722 2.55232C11.8257 2.9042 12.0069 3.22841 12.2522 3.50118C12.4975 3.77395 12.8008 3.98836 13.1397 4.1287C13.4787 4.26904 13.8447 4.33174 14.211 4.31221C14.5774 4.29268 14.9347 4.19142 15.2568 4.01584L15.6388 3.80583C16.6416 3.26111 17.7389 4.35712 17.1929 5.36124L16.9842 5.74451C16.8088 6.06666 16.7078 6.42394 16.6885 6.79019C16.6692 7.15644 16.7321 7.52237 16.8725 7.86116C17.013 8.19996 17.2274 8.50304 17.5002 8.7482C17.773 8.99335 18.0972 9.17437 18.449 9.27799L18.8664 9.40137C19.9624 9.72426 19.9624 11.2757 18.8664 11.5986L18.4477 11.722C18.0958 11.8257 17.7716 12.0069 17.4988 12.2522C17.226 12.4975 17.0116 12.8008 16.8713 13.1397C16.731 13.4787 16.6683 13.8447 16.6878 14.211C16.7073 14.5774 16.8086 14.9347 16.9842 15.2568L17.1942 15.6388C17.7389 16.6416 16.6429 17.7389 15.6388 17.1929L15.2568 16.9842C14.9346 16.8086 14.5772 16.7074 14.2108 16.6879C13.8444 16.6685 13.4783 16.7313 13.1393 16.8718C12.8003 17.0122 12.4971 17.2268 12.2519 17.4997C12.0066 17.7726 11.8256 18.097 11.722 18.449L11.5986 18.8664C11.2757 19.9624 9.72426 19.9624 9.40137 18.8664L9.27799 18.4477C9.17422 18.096 8.99309 17.7719 8.74787 17.4993C8.50266 17.2267 8.19956 17.0124 7.86078 16.872C7.522 16.7317 7.15612 16.669 6.78995 16.6884C6.42377 16.7078 6.06657 16.8088 5.74451 16.9842L5.36124 17.1942C4.35843 17.7389 3.26111 16.6429 3.80714 15.6388L4.01584 15.2568C4.19167 14.9346 4.29313 14.5772 4.31279 14.2107C4.33244 13.8442 4.2698 13.478 4.12944 13.1389C3.98909 12.7998 3.77458 12.4964 3.50168 12.251C3.22877 12.0056 2.90438 11.8244 2.55232 11.7207L2.1336 11.5973C1.0376 11.2744 1.0376 9.72295 2.1336 9.40006L2.55232 9.27667C2.90383 9.17286 3.22769 8.99176 3.50019 8.74664C3.77268 8.50151 3.98692 8.19856 4.12722 7.85995C4.26752 7.52133 4.33034 7.15564 4.31107 6.78962C4.29179 6.4236 4.19093 6.06652 4.01584 5.74451L3.80583 5.36124C3.26111 4.35843 4.35712 3.26111 5.36124 3.80714L5.74451 4.01584C6.06657 4.19117 6.42377 4.29224 6.78995 4.31164C7.15612 4.33104 7.522 4.26828 7.86078 4.12796C8.19956 3.98764 8.50266 3.77332 8.74787 3.50068C8.99309 3.22805 9.17422 2.90402 9.27799 2.55232L9.40137 2.1336V2.1336Z\" fill=\"white\"/></svg>";
+export const CloseIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-x\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>";
+export const MutedIcon = "<?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"	 viewBox=\"0 0 13 12\" style=\"enable-background:new 0 0 10.2 12;\" xml:space=\"preserve\"><path d=\"M5.3,1.4c0.1,0,0.1,0.1,0.2,0.2c0,0.1,0.1,0.2,0.1,0.2v7.4c0,0.1,0,0.2-0.1,0.2c0,0.1-0.1,0.1-0.2,0.2c-0.1,0-0.2,0.1-0.3,0	c-0.1,0-0.2,0-0.2-0.1L2.6,7.8H0.5c-0.1,0-0.2,0-0.3-0.1C0,7.6,0,7.5,0,7.4V3.7c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.2-0.1,0.3-0.1h2.1	l2.2-1.7C4.9,1.4,4.9,1.4,5,1.4C5.1,1.4,5.2,1.4,5.3,1.4L5.3,1.4z\" fill=\"white\"/><g>	<rect x=\"7.7\" y=\"3.4\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -1.4992 7.4586)\" width=\"1.2\" height=\"4.2\" fill=\"white\"/>	<rect x=\"6.1\" y=\"4.9\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -1.5119 7.4281)\" width=\"4.2\" height=\"1.2\" fill=\"white\"/></g></svg>";
+export const VolumeLowIcon = "<?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"	 viewBox=\"0 0 13 12\" style=\"enable-background:new 0 0 10.2 12;\" xml:space=\"preserve\"><path d=\"M8.4,9.8c0.6-0.6,1-1.2,1.3-1.9c0.3-0.7,0.5-1.5,0.5-2.3c0-0.8-0.2-1.6-0.5-2.3C9.4,2.5,9,1.9,8.4,1.3L7.8,2	c0.5,0.5,0.8,1,1.1,1.6c0.3,0.6,0.4,1.3,0.4,1.9c0,0.7-0.1,1.3-0.4,1.9C8.6,8.1,8.2,8.7,7.8,9.1L8.4,9.8z\" fill=\"white\"/><path d=\"M7.1,8.5C7.5,8.1,7.8,7.6,8,7.1c0.2-0.5,0.3-1,0.3-1.6C8.3,5,8.2,4.5,8,4C7.8,3.4,7.5,3,7.1,2.6L6.5,3.3	c0.3,0.3,0.5,0.7,0.7,1c0.2,0.4,0.2,0.8,0.2,1.2c0,0.4-0.1,0.8-0.2,1.2C7,7.2,6.8,7.5,6.5,7.8L7.1,8.5z M5.3,1.4	c0.1,0,0.1,0.1,0.2,0.2c0,0.1,0.1,0.2,0.1,0.2v7.4c0,0.1,0,0.2-0.1,0.2c0,0.1-0.1,0.1-0.2,0.2c-0.1,0-0.2,0.1-0.3,0	c-0.1,0-0.2,0-0.2-0.1L2.6,7.8H0.5c-0.1,0-0.2,0-0.3-0.1C0,7.6,0,7.5,0,7.4V3.7c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.2-0.1,0.3-0.1h2.1	l2.2-1.7C4.9,1.4,4.9,1.4,5,1.4C5.1,1.4,5.2,1.4,5.3,1.4L5.3,1.4z\" fill=\"white\"/></svg>";
+export const VolumeHighIcon = "<svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.71196 11.08C10.4407 10.3533 11.0186 9.4898 11.4125 8.53906C11.8064 7.58832 12.0085 6.56911 12.0072 5.54C12.0085 4.51089 11.8064 3.49168 11.4125 2.54094C11.0186 1.5902 10.4407 0.726679 9.71196 0L9.05933 0.65171C9.7023 1.2929 10.2122 2.05484 10.5598 2.89374C10.9073 3.73264 11.0856 4.63196 11.0845 5.54C11.0845 7.44904 10.3102 9.17741 9.05933 10.4283L9.71196 11.08V11.08Z\" fill=\"white\"/><path d=\"M8.40781 9.77644C8.96502 9.2207 9.40692 8.56034 9.70812 7.83329C10.0093 7.10624 10.1639 6.32683 10.1629 5.53986C10.1639 4.75289 10.0093 3.97349 9.70812 3.24644C9.40692 2.51939 8.96502 1.85902 8.40781 1.30328L7.7561 1.95499C8.22759 2.42525 8.60149 2.98403 8.85634 3.59924C9.11119 4.21445 9.24195 4.87396 9.24112 5.53986C9.2422 6.20586 9.11164 6.8655 8.85694 7.48087C8.60225 8.09625 8.22845 8.65522 7.75703 9.12565L8.40781 9.77644Z\" fill=\"white\"/><path d=\"M7.10429 8.47307C7.49005 8.08831 7.79596 7.6311 8.00446 7.12773C8.21296 6.62436 8.31993 6.08475 8.31922 5.53991C8.31993 4.99507 8.21296 4.45546 8.00446 3.95209C7.79596 3.44872 7.49005 2.99152 7.10429 2.60675L6.45258 3.25846C6.75261 3.55774 6.99054 3.91337 7.15269 4.30489C7.31483 4.69642 7.39801 5.11614 7.39742 5.53991C7.39795 5.96368 7.31476 6.38338 7.15261 6.7749C6.99047 7.16642 6.75257 7.52205 6.45258 7.82136L7.10429 8.47307ZM5.26991 1.43791C5.348 1.47553 5.4139 1.53441 5.46004 1.60778C5.50618 1.68115 5.5307 1.76605 5.53078 1.85272V9.2271C5.53066 9.31383 5.50607 9.39876 5.45984 9.47214C5.4136 9.54551 5.34761 9.60436 5.26943 9.64191C5.19125 9.67945 5.10407 9.69418 5.01789 9.6844C4.93172 9.67462 4.85005 9.64072 4.78228 9.5866L2.60408 7.8444H0.460899C0.338661 7.8444 0.221429 7.79585 0.134994 7.70941C0.0485588 7.62298 0 7.50574 0 7.38351V3.69632C0 3.57408 0.0485588 3.45685 0.134994 3.37041C0.221429 3.28398 0.338661 3.23542 0.460899 3.23542H2.60408L4.78228 1.49322C4.8501 1.43901 4.93185 1.40506 5.01812 1.39527C5.1044 1.38549 5.19168 1.40027 5.26991 1.43791V1.43791Z\" fill=\"white\"/></svg>";
+export const MultiViewIcon = "<svg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 55.42 55.59\"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}</style></defs><rect class=\"cls-1\" x=\"1\" y=\"1\" width=\"22.81\" height=\"22.81\" rx=\"3.58\"/><rect class=\"cls-1\" x=\"31.61\" y=\"1\" width=\"22.81\" height=\"22.81\" rx=\"3.58\"/><rect class=\"cls-1\" x=\"1\" y=\"31.34\" width=\"22.81\" height=\"22.81\" rx=\"3.58\"/><rect class=\"cls-1\" x=\"31.61\" y=\"31.78\" width=\"22.81\" height=\"22.81\" rx=\"3.58\"/></svg>";
+export const LeftArrowIcon = "<svg width=\"25\" height=\"16\" viewBox=\"0 0 25 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">  <path d=\"M1.5 8L24 8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>  <path d=\"M8.5 1L1.5 8L8.5 15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>";

package/src/static/stylesheets/player.scss

@@ -49,21 +49,21 @@ $button-height: 35px;
   }
 
   &__error-message {
-    position: absolute;
+    align-items: center;
     display: flex;
     height: 100%;
-    width: 100%;
-    z-index: 1000;
-    align-items: center;
     justify-content: center;
     padding: 20px;
+    position: absolute;
+    width: 100%;
+    z-index: 1000;
   }
 
   &__error-message__text {
     color: $error-color;
     font-size: 24px;
-    text-align: center;
     max-width: 600px;
+    text-align: center;
   }
 
   // Seek indicator