Updated icons to make them more obvious

10 files changed, 53 insertions, 38 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index e8d852e8..f91985ae 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -81,7 +81,7 @@
                 "</div>",
                 "<span class='player-controls-playback'>",
                     "<button type='button' data-player='restart'>",
-                        "<svg><use xlink:href='#icon-refresh'></use></svg>",
+                        "<svg><use xlink:href='#icon-restart'></use></svg>",
                         "<span class='sr-only'>Restart</span>",
                     "</button>",
                     "<button type='button' data-player='rewind'>",
@@ -109,19 +109,20 @@
                     "<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-sound'></use></svg>",
-                        "<span class='sr-only'>Mute</span>",
+                        "<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><use xlink:href='#icon-bubble'></use></svg>",
-                        "<span class='sr-only'>Captions</span>",
+                        "<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-collapse'></use></svg>",
-                        "<svg><use xlink:href='#icon-expand'></use></svg>",
+                        "<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>",
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 232f9b9c..9a53715b 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -196,13 +196,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 +210,19 @@
 			background: transparent;
 			overflow: hidden;
 		}
-		input:focus + label,
+		[type="checkbox"]:focus + label,
 		button:focus {
 			.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 {
@@ -295,15 +296,6 @@
 		display: inline-block;
 	}
 
-	// Muted
-	&.muted .player-controls .icon-muted {
-		display: block;
-
-		& + svg {
-			display: none;
-		}
-	}
-
 	// Volume control
 	// <input[type='range']> element
 	// Specificity is for bootstrap compatibility
@@ -407,8 +399,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/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