Merge branch 'develop' of github.com:selz/plyr into develop

Conflicts:
	.gitignore

11 files changed, 280 insertions, 161 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 034b4d56..86144e9d 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,7 +1,8 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.0.17
+// plyr.js v1.0.20
 // https://github.com/sampotts/plyr
+// License: The MIT License (MIT)
 // ==========================================================================
 // Credits: http://paypal.github.io/accessible-html5-video-player/
 // ==========================================================================
@@ -23,6 +24,7 @@
             container:          ".player",
             controls:           ".player-controls",
             buttons: {
+                seek:           "[data-player='seek']",
                 play:           "[data-player='play']",
                 pause:          "[data-player='pause']",
                 restart:        "[data-player='restart']",
@@ -39,8 +41,7 @@
                 played:         ".player-progress-played"
             },
             captions:           ".player-captions",
-            duration:           ".player-duration",
-            seekTime:           ".player-seek-time"
+            duration:           ".player-duration"
         },
         classes: {
             video:              "player-video",
@@ -67,7 +68,68 @@
         },
         storage: {
             enabled:            true
-        }
+        },
+        html: (function() {
+                return ["<div class='player-controls'>",
+                "<div class='player-progress'>",
+                    "<label for='seek{id}' class='sr-only'>Seek</label>",
+                    "<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
+                    "<progress class='player-progress-played' max='100' value='0'>",
+                        "<span>0</span>% played",
+                    "</progress>",
+                    "<progress class='player-progress-buffer' max='100' value='0'>",
+                        "<span>0</span>% buffered",
+                    "</progress>",
+                "</div>",
+                "<span class='player-controls-playback'>",
+                    "<button type='button' data-player='restart'>",
+                        "<svg><use xlink:href='#icon-restart'></use></svg>",
+                        "<span class='sr-only'>Restart</span>",
+                    "</button>",
+                    "<button type='button' data-player='rewind'>",
+                        "<svg><use xlink:href='#icon-rewind'></use></svg>",
+                        "<span class='sr-only'>Rewind {seektime} seconds</span>",
+                    "</button>",
+                    "<button type='button' data-player='play'>",
+                        "<svg><use xlink:href='#icon-play'></use></svg>",
+                        "<span class='sr-only'>Play</span>",
+                    "</button>",
+                    "<button type='button' data-player='pause'>",
+                        "<svg><use xlink:href='#icon-pause'></use></svg>",
+                        "<span class='sr-only'>Pause</span>",
+                    "</button>",
+                    "<button type='button' data-player='fast-forward'>",
+                        "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
+                        "<span class='sr-only'>Fast forward {seektime} seconds</span>",
+                    "</button>",
+                    "<span class='player-time'>",
+                        "<span class='sr-only'>Time</span>",
+                        "<span class='player-duration'>00:00</span>",
+                    "</span>",
+                "</span>",
+                "<span class='player-controls-sound'>",
+                    "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
+                    "<label id='mute{id}' for='mute{id}'>",
+                        "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
+                        "<svg><use xlink:href='#icon-volume'></use></svg>",
+                        "<span class='sr-only'>Toggle Mute</span>",
+                    "</label>",
+                    "<label for='volume{id}' class='sr-only'>Volume</label>",
+                    "<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>",
+                    "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
+                    "<label for='captions{id}'>",
+                        "<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
+                        "<svg><use xlink:href='#icon-captions-off'></use></svg>",
+                        "<span class='sr-only'>Toggle Captions</span>",
+                    "</label>",
+                    "<button type='button' data-player='fullscreen'>",
+                        "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
+                        "<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
+                        "<span class='sr-only'>Toggle fullscreen</span>",
+                    "</button>",
+                "</span>",
+            "</div>"].join("\n");
+        })()
     };
 
     // Debugging
@@ -215,33 +277,6 @@
         return Math.floor((current / max) * 100);
     }
 
-    // Get click position relative to parent
-    // http://www.kirupa.com/html5/getting_mouse_click_position.htm
-    function _getClickPosition(event) {
-        var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget);
-
-        return {
-            x: event.clientX - parentPosition.x,
-            y: event.clientY - parentPosition.y
-        };
-    }
-    // Get element position
-    function _getPosition(element) {
-        var xPosition = 0;
-        var yPosition = 0;
-
-        while (element) {
-            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
-            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
-            element = element.offsetParent;
-        }
-        
-        return { 
-            x: xPosition, 
-            y: yPosition 
-        };
-    }
-
     // Deep extend/merge two Objects
     // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/
     // Removed call to arguments.callee (used explicit function name instead)
@@ -449,6 +484,7 @@
 
                 // Buttons
                 player.buttons = {};
+                player.buttons.seek             = _getElement(config.selectors.buttons.seek);
                 player.buttons.play             = _getElement(config.selectors.buttons.play);
                 player.buttons.pause            = _getElement(config.selectors.buttons.pause);
                 player.buttons.restart          = _getElement(config.selectors.buttons.restart);
@@ -489,11 +525,11 @@
 
         // Setup aria attributes
         function _setupAria() {
-            var label = player.buttons.play.innerText;
+            var label = player.buttons.play.innerText || "Play";
 
             // If there's a media title set, use that for the label
             if (typeof(config.title) !== "undefined" && config.title.length) {
-                label = player.buttons.play.innerText + ", " + config.title;
+                label += ", " + config.title;
             }
 
             player.buttons.play.setAttribute("aria-label", label);
@@ -697,13 +733,6 @@
             }
         }
 
-        // Setup seeking
-        function _setupSeeking() {
-            // Update number of seconds in rewind and fast forward buttons
-            player.seekTime[0].innerHTML = config.seekTime;
-            player.seekTime[1].innerHTML = config.seekTime;
-        }
-
         // Setup fullscreen
         function _setupFullscreen() {
             if(player.type === "video" && config.fullscreen.enabled) {
@@ -795,12 +824,12 @@
         }
 
         // Toggle fullscreen
-        function _toggleFullscreen() {
+        function _toggleFullscreen(event) {
             // Check for native support
             var nativeSupport = fullscreen.supportsFullScreen;
 
             // If it's a fullscreen change event, it's probably a native close
-            if(event.type === fullscreen.fullScreenEventName) {
+            if(event && event.type === fullscreen.fullScreenEventName) {
                 config.fullscreen.active = fullscreen.isFullScreen();
             }
             // If there's native support, use it
@@ -913,8 +942,21 @@
                     progress    = player.progress.played.bar;
                     text        = player.progress.played.text;
                     value       = _getPercentage(player.media.currentTime, player.media.duration);
+
+                    // Set seeking value
+                    player.buttons.seek.value = value;
+
+                    break;
+
+                // Seeking
+                case "change":
+                case "input":
+                    progress    = player.progress.played.bar;
+                    text        = player.progress.played.text;
+                    value       = event.target.value;
                     break;
 
+
                 // Check buffer status
                 case "playing":
                 case "progress":
@@ -936,6 +978,8 @@
                 progress.value = value;
                 text.innerHTML = value;
             }
+
+            //_log(event);
         }
 
         // Update the displayed play time
@@ -974,8 +1018,9 @@
             // Fast forward
             _on(player.buttons.forward, "click", _forward);
 
-            // Get the HTML5 range input element and append audio volume adjustment on change
-            _on(player.volume, "change", function() {
+            // Get the HTML5 range input element and append audio volume adjustment on change/input
+            // IE10 doesn't support the "input" event so they have to wait for change
+            _on(player.volume, "change input", function() {
                 _setVolume(this.value);
             });
 
@@ -1005,17 +1050,25 @@
                 });
             }
             
-            // Duration
-            _on(player.media, "timeupdate", _updateTimeDisplay);
+            // Time change on media
+            _on(player.media, "timeupdate", function(event) {
+                // Duration
+                _updateTimeDisplay();
+                // Playing progress
+                _updateProgress(event);
+            });
+
+            // Seek 
+            _on(player.buttons.seek, "change input", function(event) {
+                // Update progress elements
+                _updateProgress(event);
 
-            // Playing progress
-            _on(player.media, "timeupdate", _updateProgress);
+                // Update the text label
+                _updateTimeDisplay();
+
+                // Seek to the selected time
+                player.media.currentTime = ((this.value / this.max) * player.media.duration);
 
-            // Skip when clicking progress bar
-            _on(player.progress.played.bar, "click", function(event) {
-                player.pos = _getClickPosition(event).x / this.offsetWidth;
-                player.media.currentTime = player.pos * player.media.duration;
-                
                 // Special handling for "manual" captions
                 if (!player.isTextTracks && player.type === "video") {
                     _adjustManualCaptions(player);
@@ -1093,9 +1146,6 @@
             // Setup fullscreen
             _setupFullscreen();
 
-            // Seeking
-            _setupSeeking();
-
             // Listeners
             _listeners();
         }
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 1bce3877..11bcd701 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -21,7 +21,6 @@
 @control-bg-hover: 			@blue;
 @control-color: 			@gray-light;
 @control-color-inactive: 	@gray;
-@control-color-focus: 		#fff;
 @control-color-hover: 		#fff;
 
 // Progress
@@ -29,13 +28,13 @@
 @progress-playing-bg: 		@blue;
 @progress-buffered-bg: 		@gray;
 
-// Range
-@range-track-height: 		6px;
-@range-track-bg: 			@gray;
-@range-thumb-height: 		(@range-track-height * 2);
-@range-thumb-width: 		(@range-track-height * 2);
-@range-thumb-bg: 			@control-color;
-@range-thumb-bg-focus: 		@control-bg-hover;
+// Volume
+@volume-track-height: 		6px;
+@volume-track-bg: 			@gray;
+@volume-thumb-height: 		(@volume-track-height * 2);
+@volume-thumb-width: 		(@volume-track-height * 2);
+@volume-thumb-bg: 			@control-color;
+@volume-thumb-bg-focus: 	@control-bg-hover;
 
 // Breakpoints
 @bp-control-split: 			560px; // When controls split into left/right
@@ -64,25 +63,35 @@
 // Tab focus styles
 .tab-focus() {
 	outline: thin dotted #000;
-	outline-offset: 1px;
+	outline-offset: 0;
 }
 
 // Range styling
 // ---------------------------------------
-.range-thumb() {
-	height: @range-thumb-height;
-	width: @range-thumb-width;
-	background: @range-thumb-bg;
+.volume-thumb() {
+	height: @volume-thumb-height;
+	width: @volume-thumb-width;
+	background: @volume-thumb-bg;
 	border: 0;
-	border-radius: (@range-thumb-height / 2);
+	border-radius: (@volume-thumb-height / 2);
 	transition: background .3s ease;
 	cursor: ew-resize;
 }
-.range-track() {
-	height: @range-track-height;
-	background: @range-track-bg;
+.volume-track() {
+	height: @volume-track-height;
+	background: @volume-track-bg;
+	border: 0;
+	border-radius: (@volume-track-height / 2);
+}
+.seek-thumb() {
+	background: transparent;
+	border: 0;
+	width: 2px;
+	height: @control-spacing;
+}
+.seek-track() {
+	background: none;
 	border: 0;
-	border-radius: (@range-track-height / 2);
 }
 
 // Font smoothing
@@ -196,13 +205,13 @@
 				transition: fill .3s ease;
 			}
 		}
-		input + label,
-		input.inverted:checked + label {
+		[type="checkbox"] + label,
+		.inverted:checked + label {
 			color: @control-color-inactive;
 		}
 		button, 
-		input.inverted + label,
-		input:checked + label {
+		.inverted + label,
+		[type="checkbox"]:checked + label {
 			color: @control-color;
 		}
 		button {
@@ -210,18 +219,21 @@
 			background: transparent;
 			overflow: hidden;
 		}
-		input:focus + label,
-		button:focus {
-			.tab-focus();
-			color: @control-color-focus;
-		}
+		
+		button:focus,
 		button:hover,
-		input + label:hover {
+		[type="checkbox"]:focus + label,
+		[type="checkbox"] + label:hover {
 			background: @control-bg-hover;
 			color: @control-color-hover;
 		}
+		button:focus,
+		[type="checkbox"]:focus + label {
+			outline: 0;
+		}
 		.icon-exit-fullscreen,
-		.icon-muted {
+		.icon-muted,
+		.icon-captions-on {
 			display: none;
 		}
 		.player-time {
@@ -247,43 +259,93 @@
 		background: @progress-bg;
 
 		&-buffer,
-		&-played {
+		&-played,
+		&-seek[type=range] {
 			position: absolute;
 			left: 0;
 			top: 0;
 			width: 100%;
-			height: 100%;
+			height: @control-spacing;
 			margin: 0;
+			padding: 0;
 			vertical-align: top;
-			
-			&[value] {
-				-webkit-appearance: none;
-				border: none;
-				background: transparent;
 
-				&::-webkit-progress-bar {
-					background: transparent;
-				}
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			border: none;
+			background: transparent;
+		}
+		&-buffer,
+		&-played {	
+			&::-webkit-progress-bar {
+				background: transparent;
+			}
 
-				// Inherit from currentColor;
-				&::-webkit-progress-value {
-					background: currentColor;
-				}
-				&::-moz-progress-bar {
-					background: currentColor;
-				}
+			// Inherit from currentColor;
+			&::-webkit-progress-value {
+				background: currentColor;
+			}
+			&::-moz-progress-bar {
+				background: currentColor;
 			}
 		}
 		&-played {
 			z-index: 2;
 		}
-		&-played[value] {
-			cursor: pointer;
+		&-played{
 			color: @progress-playing-bg;
 		}
-		&-buffer[value] {
+		&-buffer {
 			color: @progress-buffered-bg;
 		}
+
+		// Seek control
+		// <input[type='range']> element
+		// Specificity is for bootstrap compatibility
+		&-seek[type=range] {
+			z-index: 3;
+			cursor: pointer;
+			outline: 0;
+
+			// Webkit
+			&::-webkit-slider-runnable-track {
+				.seek-track();
+			}
+			&::-webkit-slider-thumb {
+				-webkit-appearance: none;
+				.seek-thumb();
+			}
+
+			// Mozilla
+			&::-moz-range-track {
+				.seek-track();
+			}
+			&::-moz-range-thumb {
+				-moz-appearance: none;
+				.seek-thumb();
+			}
+			
+			// Microsoft
+			&::-ms-track {
+				color: transparent;
+				.seek-track();
+			}
+			&::-ms-fill-lower,
+			&::-ms-fill-upper {
+				.seek-track();
+			}
+			&::-ms-thumb {
+				.seek-thumb();
+			}
+
+			&:focus {
+				//.tab-focus();
+				outline: 0;
+			}
+			&::-moz-focus-outer {
+				border: 0;
+			}
+		}
 	}
 
 	// States
@@ -295,18 +357,9 @@
 		display: inline-block;
 	}
 
-	// Muted
-	&.muted .player-controls .icon-muted {
-		display: block;
-
-		& + svg {
-			display: none;
-		}
-	}
-
 	// Volume control
 	// <input[type='range']> element
-	// Specificty is for bootstrap compatibility
+	// Specificity is for bootstrap compatibility
 	&-volume[type=range] {
 		display: inline-block;
 		vertical-align: middle;
@@ -320,49 +373,49 @@
 		
 		// Webkit
 		&::-webkit-slider-runnable-track {
-			.range-track();
+			.volume-track();
 		}
 		&::-webkit-slider-thumb {
 			-webkit-appearance: none;
-			margin-top: -((@range-thumb-height - @range-track-height) / 2);
-			.range-thumb();
+			margin-top: -((@volume-thumb-height - @volume-track-height) / 2);
+			.volume-thumb();
 		}
 
 		// Mozilla
 		&::-moz-range-track {
-			.range-track();
+			.volume-track();
 		}
 		&::-moz-range-thumb {
-			.range-thumb();
+			.volume-thumb();
 		}
 		
 		// Microsoft
 		&::-ms-track {
-			height: @range-track-height;
+			height: @volume-track-height;
 			background: transparent;
 			border-color: transparent;
-			border-width: ((@range-thumb-height - @range-track-height) / 2) 0;
+			border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0;
 			color: transparent;
 		}
 		&::-ms-fill-lower,
 		&::-ms-fill-upper {
-			.range-track();
+			.volume-track();
 		}
 		&::-ms-thumb {
-			.range-thumb();
+			.volume-thumb();
 		}
 
 		&:focus {
 			outline: 0;
 
 			&::-webkit-slider-thumb {
-				background: @range-thumb-bg-focus;
+				background: @volume-thumb-bg-focus;
 			}
 			&::-moz-range-thumb {
-				background: @range-thumb-bg-focus;
+				background: @volume-thumb-bg-focus;
 			}
 			&::-ms-thumb {
-				background: @range-thumb-bg-focus;
+				background: @volume-thumb-bg-focus;
 			}
 		}
 	}
@@ -407,8 +460,10 @@
 		}
 	}
 
-	// When true full screen, show exit fullscreen icon
-	&.fullscreen-active .icon-exit-fullscreen {
+	// Change icons on state change
+	&.fullscreen-active .icon-exit-fullscreen,
+	&.muted .player-controls .icon-muted,
+	&.captions-active .player-controls .icon-captions-on {
 		display: block;
 
 		& + svg {
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 998398bb..51eae73d 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -202,13 +202,13 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 				transition: fill .3s ease;
 			}
 		}
-		input + label,
-		input.inverted:checked + label {
+		[type="checkbox"] + label,
+		.inverted:checked + label {
 			color: $control-color-inactive;
 		}
 		button,
-		input.inverted + label,
-		input:checked + label {
+		.inverted + label,
+		[type="checkbox"]:checked + label {
 			color: $control-color;
 		}
 		button {
@@ -216,18 +216,19 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 			background: transparent;
 			overflow: hidden;
 		}
-		input:focus + label,
+		[type="checkbox"]:focus + label,
 		button:focus {
 			@include tab-focus();
 			color: $control-color-focus;
 		}
 		button:hover,
-		input + label:hover {
+		[type="checkbox"] + label:hover {
 			background: $control-bg-hover;
 			color: $control-color-hover;
 		}
 		.icon-exit-fullscreen,
-		.icon-muted {
+		.icon-muted,
+		.icon-captions-on {
 			display: none;
 		}
 		.player-time {
@@ -301,18 +302,9 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 		display: inline-block;
 	}
 
-	// Muted
-	&.muted .player-controls .icon-muted {
-		display: block;
-
-		& + svg {
-			display: none;
-		}
-	}
-
 	// Volume control
 	// <input[type='range']> element
-	// Specificty is for bootstrap compatibility
+	// Specificity is for bootstrap compatibility
 	&-volume[type=range] {
 		vertical-align: middle;
 		-webkit-appearance: none;
@@ -412,8 +404,10 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 		}
 	}
 
-	// When true full screen, show exit fullscreen icon
-	&.fullscreen-active .icon-exit-fullscreen {
+	// Change icons on state change
+	&.fullscreen-active .icon-exit-fullscreen,
+	&.muted .player-controls .icon-muted,
+	&.captions-active .player-controls .icon-captions-on {
 		display: block;
 
 		& + svg {
diff --git a/src/sprite/icon-bubble.svg b/src/sprite/icon-bubble.svg
deleted file mode 100755
index 0b279b7c..00000000
--- a/src/sprite/icon-bubble.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M9.016 3c2.748 0 4.984 2.243 4.984 5s-2.236 5-4.97 5l-0.060-0.004c-0.055-0.004-0.11-0.007-0.165-0.010l-0.336-0.014-3.665 1.098 0.629-2.483-0.517-0.747c-0.58-0.839-0.886-1.822-0.886-2.842 0-2.757 2.236-5 4.984-5zM9.016 1c-3.857 0-6.984 3.134-6.984 7 0 1.479 0.46 2.848 1.241 3.978l-1.272 5.022 6.722-2.015c0.098 0.004 0.194 0.015 0.293 0.015 3.857 0 6.984-3.134 6.984-7s-3.127-7-6.984-7v0z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/sprite/icon-captions-off.svg b/src/sprite/icon-captions-off.svg
new file mode 100644
index 00000000..56fc708d
--- /dev/null
+++ b/src/sprite/icon-captions-off.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-captions-off</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
+        <path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/sprite/icon-captions-on.svg b/src/sprite/icon-captions-on.svg
new file mode 100644
index 00000000..4e388e41
--- /dev/null
+++ b/src/sprite/icon-captions-on.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-captions-on</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
+        <path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-1" sketch:type="MSShapeGroup" x="3" y="11" width="3" height="2"></rect>
+        <rect id="Rectangle-3" sketch:type="MSShapeGroup" x="12" y="11" width="3" height="2"></rect>
+        <rect id="Rectangle-2" sketch:type="MSShapeGroup" x="7" y="11" width="4" height="2"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/sprite/icon-expand.svg b/src/sprite/icon-enter-fullscreen.svg
index 5fd651bd..5fd651bd 100644
--- a/src/sprite/icon-expand.svg
+++ b/src/sprite/icon-enter-fullscreen.svg
diff --git a/src/sprite/icon-collapse.svg b/src/sprite/icon-exit-fullscreen.svg
index d41e0402..d41e0402 100644
--- a/src/sprite/icon-collapse.svg
+++ b/src/sprite/icon-exit-fullscreen.svg
diff --git a/src/sprite/icon-refresh.svg b/src/sprite/icon-refresh.svg
deleted file mode 100755
index 10ffb198..00000000
--- a/src/sprite/icon-refresh.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
-<path d="M8.013 14.006h-0.822c-2.372-0.388-4.187-2.453-4.187-4.934 0-0.831 0.213-1.609 0.574-2.299l0.613 0.85c0.446 0.618 1.409 0.446 1.614-0.289l1.162-4.179c0.162-0.58-0.275-1.155-0.877-1.154l-4.174 0.006c-0.741 0.001-1.17 0.841-0.736 1.443l1.128 1.564c-0.817 1.145-1.302 2.544-1.302 4.059 0 3.499 2.566 6.399 5.918 6.917 0.091 0.014 0.18 0.010 0.267-0.001v0.012h0.822c0.545 0 0.987-0.442 0.987-0.987v-0.020c0-0.545-0.442-0.987-0.987-0.987z"></path>
-<path d="M16.82 14.551l-1.129-1.564c0.818-1.145 1.302-2.544 1.302-4.059 0-3.499-2.566-6.399-5.918-6.918-0.091-0.014-0.18-0.010-0.267 0.001v-0.013h-0.822c-0.545 0-0.986 0.442-0.986 0.987v0.020c0 0.546 0.442 0.988 0.986 0.988h0.822c2.372 0.388 4.187 2.453 4.187 4.934 0 0.831-0.213 1.609-0.573 2.299l-0.614-0.85c-0.446-0.618-1.409-0.446-1.613 0.289l-1.163 4.179c-0.161 0.581 0.275 1.155 0.878 1.154l4.174-0.006c0.742-0.001 1.17-0.842 0.736-1.443z"></path>
-</svg>
diff --git a/src/sprite/icon-restart.svg b/src/sprite/icon-restart.svg
new file mode 100644
index 00000000..3a18dfad
--- /dev/null
+++ b/src/sprite/icon-restart.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-restart</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
+        <path d="M17,2 C16.448,2 16,2.448 16,3 L16,7.318 L7,2 C6.448,2 6,2.448 6,3 L6,4.954 L1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L6,13.045 L6,15 C6,15.552 6.448,16 7,16 L16,10.682 L16,15 C16,15.552 16.448,16 17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L17,2 Z M6,10.722 L2,13.086 L2,4.914 L6,7.278 L6,10.722 L6,10.722 Z M8,13.086 L8,4.914 L14.915,9 L8,13.086 L8,13.086 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(9.000000, 9.000000) scale(-1, 1) translate(-9.000000, -9.000000) "></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/sprite/icon-sound.svg b/src/sprite/icon-volume.svg
index 6c6ca54d..6c6ca54d 100755
--- a/src/sprite/icon-sound.svg
+++ b/src/sprite/icon-volume.svg