@eluvio/elv-player-js 1.0.67 → 1.0.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/package-lock.json +1 -1
  2. package/package.json +1 -1
  3. package/src/PlayerControls.js +8 -9
  4. package/src/index.js +11 -4
  5. package/src/static/icons/Settings icon.svg +4 -0
  6. package/src/static/icons/media/.DS_Store +0 -0
  7. package/src/static/icons/media/Full Screen icon.svg +3 -0
  8. package/src/static/icons/media/LargePlayIcon.svg +4 -0
  9. package/src/static/icons/media/Pause icon.svg +13 -0
  10. package/src/static/icons/media/Play icon.svg +10 -0
  11. package/src/static/icons/media/Settings icon.svg +4 -0
  12. package/src/static/icons/media/Skip backward icon.svg +4 -0
  13. package/src/static/icons/media/Skip forward icon.svg +9 -0
  14. package/src/static/icons/media/Volume icon.svg +5 -0
  15. package/src/static/icons/media/loop icon.svg +12 -0
  16. package/src/static/icons/media/low volume icon.svg +12 -0
  17. package/src/static/icons/media/no volume icon.svg +12 -0
  18. package/src/static/icons/media/shuffle icon.svg +13 -0
  19. package/src/static/icons/media/skip back icon.svg +9 -0
  20. package/src/static/stylesheets/player.scss +6 -24
package/package-lock.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eluvio/elv-player-js",
3
- "version": "1.0.67",
3
+ "version": "1.0.68",
4
4
  "lockfileVersion": 1,
5
5
  "requires": true,
6
6
  "dependencies": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eluvio/elv-player-js",
3
- "version": "1.0.67",
3
+ "version": "1.0.68",
4
4
  "description": "![Eluvio Logo](src/static/images/Logo.png \"Eluvio Logo\")",
5
5
  "main": "src/index.js",
6
6
  "license": "MIT",
package/src/PlayerControls.js CHANGED
@@ -1,13 +1,12 @@
1
- import PlayCircleIcon from "./static/icons/play circle.svg";
2
-
3
- import PlayIcon from "./static/icons/play.svg";
4
- import PauseIcon from "./static/icons/pause.svg";
5
- import FullscreenIcon from "./static/icons/full screen.svg";
1
+ import PlayCircleIcon from "./static/icons/media/LargePlayIcon.svg";
2
+ import PlayIcon from "./static/icons/media/Play icon.svg";
3
+ import PauseIcon from "./static/icons/media/Pause icon.svg";
4
+ import FullscreenIcon from "./static/icons/media/Full Screen icon.svg";
6
5
  import ExitFullscreenIcon from "./static/icons/minimize.svg";
7
- import SettingsIcon from "./static/icons/settings.svg";
8
- import MutedIcon from "./static/icons/muted.svg";
9
- import VolumeLowIcon from "./static/icons/unmuted.svg";
10
- import VolumeHighIcon from "./static/icons/unmuted.svg";
6
+ import SettingsIcon from "./static/icons/media/Settings icon.svg";
7
+ import MutedIcon from "./static/icons/media/no volume icon.svg";
8
+ import VolumeLowIcon from "./static/icons/media/low volume icon.svg";
9
+ import VolumeHighIcon from "./static/icons/media/Volume icon.svg";
11
10
  import MultiViewIcon from "./static/icons/multiview.svg";
12
11
 
13
12
  import Logo from "./static/images/ELUV.IO white 20 px V2.png";
package/src/index.js CHANGED
@@ -610,10 +610,17 @@ export class EluvioPlayer {
610
610
  controlsPromise.then(() => this.controls.InitializeMultiViewControls(multiviewOptions));
611
611
  }
612
612
 
613
- this.controls.SetQualityControls({
614
- GetLevels: () => hlsPlayer.levels.map((level, index) => ({index, active: index === hlsPlayer.currentLevel, resolution: level.attrs.RESOLUTION, bitrate: level.bitrate})),
615
- SetLevel: levelIndex => hlsPlayer.nextLevel = levelIndex
616
- });
613
+ if(this.controls) {
614
+ this.controls.SetQualityControls({
615
+ GetLevels: () => hlsPlayer.levels.map((level, index) => ({
616
+ index,
617
+ active: index === hlsPlayer.currentLevel,
618
+ resolution: level.attrs.RESOLUTION,
619
+ bitrate: level.bitrate
620
+ })),
621
+ SetLevel: levelIndex => hlsPlayer.nextLevel = levelIndex
622
+ });
623
+ }
617
624
 
618
625
  hlsPlayer.on(HLSPlayer.Events.FRAG_LOADED, () => {
619
626
  this.errors = 0;
package/src/static/icons/Settings icon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <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"/>
3
+ <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"/>
4
+ </svg>
package/src/static/icons/media/.DS_Store ADDED
Binary file
package/src/static/icons/media/Full Screen icon.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <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"/>
3
+ </svg>
package/src/static/icons/media/LargePlayIcon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="16" cy="16" r="16" fill="white"/>
3
+ <path d="M22 15.5L13.75 21.1292L13.75 9.87083L22 15.5Z" fill="black"/>
4
+ </svg>
package/src/static/icons/media/Pause icon.svg ADDED
@@ -0,0 +1,13 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:#FFFFFF;}
7
+ </style>
8
+ <circle class="st0" cx="16" cy="16" r="16"/>
9
+ <g>
10
+ <rect x="10.4" y="9" width="4.1" height="14.1"/>
11
+ <rect x="17.5" y="9" width="4.1" height="14.1"/>
12
+ </g>
13
+ </svg>
package/src/static/icons/media/Play icon.svg ADDED
@@ -0,0 +1,10 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:#FFFFFF;}
7
+ </style>
8
+ <circle class="st0" cx="16" cy="16" r="16"/>
9
+ <path d="M22.8,16l-11.6,7V9L22.8,16z"/>
10
+ </svg>
package/src/static/icons/media/Settings icon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <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"/>
3
+ <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"/>
4
+ </svg>
package/src/static/icons/media/Skip backward icon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M0.922852 5.53841L9.2305 0.741991L9.2305 10.3348L0.922852 5.53841Z" fill="white"/>
3
+ <rect y="1.84619" width="1.84614" height="7.38457" fill="white"/>
4
+ </svg>
package/src/static/icons/media/Skip forward icon.svg ADDED
@@ -0,0 +1,9 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 30.8 32" style="enable-background:new 0 0 30.8 32;" xml:space="preserve">
5
+ <g>
6
+ <path d="M27.7,16L0,32V0L27.7,16z"/>
7
+ <rect x="24.6" y="3.7" width="6.2" height="24.6"/>
8
+ </g>
9
+ </svg>
package/src/static/icons/media/Volume icon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <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"/>
3
+ <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"/>
4
+ <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"/>
5
+ </svg>
package/src/static/icons/media/loop icon.svg ADDED
@@ -0,0 +1,12 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 18.6 15.7" style="enable-background:new 0 0 18.6 15.7;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
7
+ </style>
8
+ <path class="st0" d="M0.9,9L0.9,9c0-3.5,2.8-6.3,6.3-6.3h5.9"/>
9
+ <polygon points="17.7,2.7 13.1,0 13.1,5.4 "/>
10
+ <path class="st0" d="M17.7,6.7L17.7,6.7c0,3.5-2.8,6.3-6.3,6.3H5.5"/>
11
+ <polygon points="0.9,13 5.5,15.7 5.5,10.4 "/>
12
+ </svg>
package/src/static/icons/media/low volume icon.svg ADDED
@@ -0,0 +1,12 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 13 12" style="enable-background:new 0 0 10.2 12;" xml:space="preserve">
5
+ <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
6
+ 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"/>
7
+ <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
8
+ 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
9
+ 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
10
+ 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
11
+ 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"/>
12
+ </svg>
package/src/static/icons/media/no volume icon.svg ADDED
@@ -0,0 +1,12 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 13 12" style="enable-background:new 0 0 10.2 12;" xml:space="preserve">
5
+ <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
6
+ 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
7
+ 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"/>
8
+ <g>
9
+ <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"/>
10
+ <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"/>
11
+ </g>
12
+ </svg>
package/src/static/icons/media/shuffle icon.svg ADDED
@@ -0,0 +1,13 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 18.6 15.7" style="enable-background:new 0 0 18.6 15.7;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
7
+ </style>
8
+ <path class="st0" d="M10.1,10.2c1.4,1.9,3.3,2.9,5.3,2.9h1.9"/>
9
+ <path class="st0" d="M0,2.7h1.2c2,0,3.9,1,5.3,2.9l0.1,0.2"/>
10
+ <polygon points="18.6,13.1 14,10.4 14,15.7 "/>
11
+ <path class="st0" d="M0,13.1h1.2c2,0,3.9-1,5.3-2.9l3.5-4.6c1.4-1.9,3.3-2.9,5.3-2.9h1.9"/>
12
+ <polygon points="18.6,2.7 14,0 14,5.3 "/>
13
+ </svg>
package/src/static/icons/media/skip back icon.svg ADDED
@@ -0,0 +1,9 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 30.8 32" style="enable-background:new 0 0 30.8 32;" xml:space="preserve">
5
+ <g>
6
+ <path d="M3.1,16L30.8,0v32L3.1,16z"/>
7
+ <rect y="3.7" width="6.2" height="24.6"/>
8
+ </g>
9
+ </svg>
package/src/static/stylesheets/player.scss CHANGED
@@ -15,7 +15,7 @@ $border-color: #252525;
15
15
  $modal-color: #121212;
16
16
  $error-color: #a32;
17
17
  $controls-height: 40px;
18
- $controls-padding: 10px;
18
+ $controls-padding: 5px;
19
19
  $button-height: 35px;
20
20
 
21
21
  .eluvio-player {
@@ -182,17 +182,17 @@ $button-height: 35px;
182
182
  margin-right: 2px;
183
183
  }
184
184
 
185
+ &-volume {
186
+ // Move volume button closer to volume slider
187
+ padding-right: 0;
188
+ }
189
+
185
190
  svg {
186
191
  height: 100%;
187
192
  max-height: 100%;
188
193
  max-width: 100%;
189
194
  overflow: visible;
190
195
  width: 100%;
191
-
192
- * {
193
- stroke: $button-color;
194
- stroke-width: 3px;
195
- }
196
196
  }
197
197
  }
198
198
 
@@ -281,14 +281,6 @@ $button-height: 35px;
281
281
  height: 100%;
282
282
  }
283
283
 
284
- &__button-settings {
285
- svg {
286
- * {
287
- stroke-width: 2px;
288
- }
289
- }
290
- }
291
-
292
284
  &.eluvio-player__controls-no-progress {
293
285
  .eluvio-player__controls__time,
294
286
  .eluvio-player__controls__progress-slider {
@@ -395,16 +387,6 @@ $button-height: 35px;
395
387
  transition: opacity 0.1s linear;
396
388
  width: 100%;
397
389
  z-index: 11;
398
-
399
- * {
400
- stroke: $button-color;
401
- stroke-width: 4px;
402
- }
403
-
404
- polygon {
405
- fill: $button-color;
406
- stroke: $button-color;
407
- }
408
390
  }
409
391
 
410
392
  &:hover {