aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorSam Potts <me@sampotts.me>2016-05-14 00:48:21 +1000
committerSam Potts <me@sampotts.me>2016-05-14 00:48:21 +1000
commit7f624ebbb7f32bc54bb57d77a8408446e819f43a (patch)
tree7bef9c09a5824fbffcea32bc439ef2e0381d0fc8 /src
parentcc5b363d662cf9a4f60919a4cf94913e6b588149 (diff)
downloadplyr-7f624ebbb7f32bc54bb57d77a8408446e819f43a.tar.lz
plyr-7f624ebbb7f32bc54bb57d77a8408446e819f43a.tar.xz
plyr-7f624ebbb7f32bc54bb57d77a8408446e819f43a.zip
Icon tweaks, IE button fix
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js2
-rw-r--r--src/less/plyr.less22
-rw-r--r--src/less/variables.less12
-rw-r--r--src/scss/plyr.scss18
-rw-r--r--src/scss/variables.scss12
-rw-r--r--src/sprite/icon-captions-off.svg9
-rw-r--r--src/sprite/icon-captions-on.svg12
-rw-r--r--src/sprite/icon-enter-fullscreen.svg10
-rw-r--r--src/sprite/icon-exit-fullscreen.svg8
-rw-r--r--src/sprite/icon-fast-forward.svg13
-rw-r--r--src/sprite/icon-muted.svg11
-rw-r--r--src/sprite/icon-pause.svg15
-rw-r--r--src/sprite/icon-play.svg13
-rwxr-xr-xsrc/sprite/icon-restart.svg12
-rw-r--r--src/sprite/icon-rewind.svg13
-rwxr-xr-xsrc/sprite/icon-volume.svg13
16 files changed, 89 insertions, 106 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 832df4af..db9f8a77 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
-// plyr.js v1.6.5
+// plyr.js v1.6.6
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 69846a10..ee07ed47 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -199,9 +199,9 @@
left: 0;
width: 100%;
padding: (@plyr-control-spacing * 2);
- transform: translateY(-(@plyr-control-spacing * 6));
+ transform: translateY(-(@plyr-control-spacing * 4));
transition: transform .3s ease;
- color: #fff;
+ color: @plyr-captions-color;
font-size: @plyr-font-size-captions-base;
text-align: center;
font-weight: 400;
@@ -209,7 +209,7 @@
span {
border-radius: 2px;
padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
- background: fade(#000, 85%);
+ background: @plyr-captions-bg;
}
span:empty {
display: none;
@@ -226,7 +226,7 @@
font-size: @plyr-font-size-captions-large;
}
.plyr--hide-controls .plyr__captions {
- transform: translateY(-(@plyr-control-spacing * 2));
+ transform: translateY(-(@plyr-control-spacing * 1.5));
}
// Controls
@@ -263,8 +263,9 @@
position: relative;
display: inline-block;
flex-shrink: 0;
+ overflow: visible; // IE11
vertical-align: middle;
- padding: (@plyr-control-spacing / 2);
+ padding: (@plyr-control-spacing * .7);
border: 0;
background: transparent;
border-radius: 3px;
@@ -298,9 +299,6 @@
.plyr__time {
margin-left: @plyr-control-spacing;
}
- button {
- padding: (@plyr-control-spacing / 2) @plyr-control-spacing;
- }
}
}
// Hide controls
@@ -328,11 +326,6 @@
color: @plyr-video-control-color-hover;
}
}
-
- @media (min-width: @plyr-bp-screen-sm) {
- padding-left: (@plyr-control-spacing * 1.5);
- padding-right: (@plyr-control-spacing * 1.5);
- }
}
// Audio controls
@@ -431,7 +424,6 @@
opacity: 0;
background: @plyr-tooltip-bg;
- box-shadow: @plyr-tooltip-shadow;
border-radius: @plyr-tooltip-radius;
color: @plyr-tooltip-color;
@@ -542,12 +534,14 @@
max-width: 99%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
+ transition: none;
}
&::-moz-progress-bar {
min-width: @plyr-range-track-height;
max-width: 99%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
+ transition: none;
}
&::-ms-fill {
display: none;
diff --git a/src/less/variables.less b/src/less/variables.less
index ea5c6b8e..ef3b4e45 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -11,7 +11,9 @@
@plyr-font-size-base: 16px;
// Captions
-@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25);
+@plyr-captions-bg: fade(#000, 70%);
+@plyr-captions-color: #fff;
+@plyr-font-size-captions-base: @plyr-font-size-base;
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
@@ -29,12 +31,8 @@
@plyr-audio-control-bg-hover: @plyr-color-main;
// Tooltips
-@plyr-tooltip-bg: @plyr-video-controls-bg;
-@plyr-tooltip-border-color: fade(darken(@plyr-video-controls-bg, 75%), 10%);
-@plyr-tooltip-arrow-border-color: fade(darken(@plyr-video-controls-bg, 75%), 20%);
-@plyr-tooltip-border-width: 1px;
-@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
-@plyr-tooltip-color: @plyr-video-control-color;
+@plyr-tooltip-bg: fade(#000, 70%);
+@plyr-tooltip-color: #fff;
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index 0cb8968d..0d6f28a7 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -201,7 +201,7 @@
padding: ($plyr-control-spacing * 2);
transform: translateY(-($plyr-control-spacing * 6));
transition: transform .3s ease;
- color: #fff;
+ color: $plyr-captions-color;
font-size: $plyr-font-size-captions-base;
text-align: center;
font-weight: 400;
@@ -209,7 +209,7 @@
span {
border-radius: 2px;
padding: floor($plyr-control-spacing / 3) $plyr-control-spacing;
- background: transparentize(#000, .15);
+ background: $plyr-captions-bg;
}
span:empty {
display: none;
@@ -263,8 +263,9 @@
position: relative;
display: inline-block;
flex-shrink: 0;
+ overflow: visible; // IE11
vertical-align: middle;
- padding: ($plyr-control-spacing / 2);
+ padding: ($plyr-control-spacing * .7);
border: 0;
background: transparent;
border-radius: 3px;
@@ -298,9 +299,6 @@
.plyr__time {
margin-left: $plyr-control-spacing;
}
- button {
- padding: ($plyr-control-spacing / 2) $plyr-control-spacing;
- }
}
}
// Hide controls
@@ -328,11 +326,6 @@
color: $plyr-video-control-color-hover;
}
}
-
- @media (min-width: $plyr-bp-screen-sm) {
- padding-left: ($plyr-control-spacing * 1.5);
- padding-right: ($plyr-control-spacing * 1.5);
- }
}
// Audio controls
@@ -431,7 +424,6 @@
opacity: 0;
background: $plyr-tooltip-bg;
- box-shadow: $plyr-tooltip-shadow;
border-radius: $plyr-tooltip-radius;
color: $plyr-tooltip-color;
@@ -542,12 +534,14 @@
max-width: 99%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
+ transition: none;
}
&::-moz-progress-bar {
min-width: $plyr-range-track-height;
max-width: 99%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
+ transition: none;
}
&::-ms-fill {
display: none;
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index baf47e25..ad63423a 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -12,7 +12,9 @@ $plyr-font-size-small: 14px !default;
$plyr-font-size-base: 16px !default;
// Captions
-$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default;
+$plyr-captions-bg: transparentize(#000, .3) !default;
+$plyr-captions-color: #fff !default;
+$plyr-font-size-captions-base: $plyr-font-size-base !default;
$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
@@ -30,12 +32,8 @@ $plyr-audio-control-color-hover: #fff !default;
$plyr-audio-control-bg-hover: $plyr-color-main;
// Tooltips
-$plyr-tooltip-bg: $plyr-video-controls-bg !default;
-$plyr-tooltip-border-color: transparentize(darken($plyr-video-controls-bg, 75%), .9) !default;
-$plyr-tooltip-arrow-border-color: transparentize(darken($plyr-video-controls-bg, 75%), .8) !default;
-$plyr-tooltip-border-width: 1px !default;
-$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color !default;
-$plyr-tooltip-color: $plyr-video-control-color !default;
+$plyr-tooltip-bg: transparentize(#000, .3) !default;
+$plyr-tooltip-color: #fff !default;
$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
$plyr-tooltip-arrow-size: 4px !default;
$plyr-tooltip-radius: 3px !default;
diff --git a/src/sprite/icon-captions-off.svg b/src/sprite/icon-captions-off.svg
index 788e4de4..48503285 100644
--- a/src/sprite/icon-captions-off.svg
+++ b/src/sprite/icon-captions-off.svg
@@ -1,6 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg 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">
- <g>
- <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"></path>
+<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">
+ <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+ <g fill-rule="evenodd" fill-opacity="0.5">
+ <path d="M1,1 C0.4,1 0,1.4 0,2 L0,13 C0,13.6 0.4,14 1,14 L5.6,14 L8.3,16.7 C8.5,16.9 8.7,17 9,17 C9.3,17 9.5,16.9 9.7,16.7 L12.4,14 L17,14 C17.6,14 18,13.6 18,13 L18,2 C18,1.4 17.6,1 17,1 L1,1 Z M5.52,11.15 C7.51,11.15 8.53,9.83 8.8,8.74 L7.51,8.35 C7.32,9.01 6.73,9.8 5.52,9.8 C4.38,9.8 3.32,8.97 3.32,7.46 C3.32,5.85 4.44,5.09 5.5,5.09 C6.73,5.09 7.28,5.84 7.45,6.52 L8.75,6.11 C8.47,4.96 7.46,3.76 5.5,3.76 C3.6,3.76 1.89,5.2 1.89,7.46 C1.89,9.72 3.54,11.15 5.52,11.15 Z M13.09,11.15 C15.08,11.15 16.1,9.83 16.37,8.74 L15.08,8.35 C14.89,9.01 14.3,9.8 13.09,9.8 C11.95,9.8 10.89,8.97 10.89,7.46 C10.89,5.85 12.01,5.09 13.07,5.09 C14.3,5.09 14.85,5.84 15.02,6.52 L16.32,6.11 C16.04,4.96 15.03,3.76 13.07,3.76 C11.17,3.76 9.46,5.2 9.46,7.46 C9.46,9.72 11.11,11.15 13.09,11.15 Z"></path>
</g>
-</svg>
+</svg> \ No newline at end of file
diff --git a/src/sprite/icon-captions-on.svg b/src/sprite/icon-captions-on.svg
index c02dfcb1..b524abcb 100644
--- a/src/sprite/icon-captions-on.svg
+++ b/src/sprite/icon-captions-on.svg
@@ -1,9 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <g>
- <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"></path>
- <rect x="3" y="11" width="3" height="2"></rect>
- <rect x="12" y="11" width="3" height="2"></rect>
- <rect x="7" y="11" width="4" height="2"></rect>
+<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">
+ <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+ <g fill-rule="evenodd">
+ <path d="M1,1 C0.4,1 0,1.4 0,2 L0,13 C0,13.6 0.4,14 1,14 L5.6,14 L8.3,16.7 C8.5,16.9 8.7,17 9,17 C9.3,17 9.5,16.9 9.7,16.7 L12.4,14 L17,14 C17.6,14 18,13.6 18,13 L18,2 C18,1.4 17.6,1 17,1 L1,1 Z M5.52,11.15 C7.51,11.15 8.53,9.83 8.8,8.74 L7.51,8.35 C7.32,9.01 6.73,9.8 5.52,9.8 C4.38,9.8 3.32,8.97 3.32,7.46 C3.32,5.85 4.44,5.09 5.5,5.09 C6.73,5.09 7.28,5.84 7.45,6.52 L8.75,6.11 C8.47,4.96 7.46,3.76 5.5,3.76 C3.6,3.76 1.89,5.2 1.89,7.46 C1.89,9.72 3.54,11.15 5.52,11.15 Z M13.09,11.15 C15.08,11.15 16.1,9.83 16.37,8.74 L15.08,8.35 C14.89,9.01 14.3,9.8 13.09,9.8 C11.95,9.8 10.89,8.97 10.89,7.46 C10.89,5.85 12.01,5.09 13.07,5.09 C14.3,5.09 14.85,5.84 15.02,6.52 L16.32,6.11 C16.04,4.96 15.03,3.76 13.07,3.76 C11.17,3.76 9.46,5.2 9.46,7.46 C9.46,9.72 11.11,11.15 13.09,11.15 Z"></path>
</g>
-</svg>
+</svg> \ No newline at end of file
diff --git a/src/sprite/icon-enter-fullscreen.svg b/src/sprite/icon-enter-fullscreen.svg
index e8d1ab1a..2bc7036c 100644
--- a/src/sprite/icon-enter-fullscreen.svg
+++ b/src/sprite/icon-enter-fullscreen.svg
@@ -1,7 +1,9 @@
<?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">
- <g transform="translate(9.000000, 9.000000) rotate(-180.000000) translate(-9.000000, -9.000000) translate(0.000000, 2.000000)">
- <path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
- <path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
+ <g>
+ <path d="M3,7 L1,7 L1,2 C1,1.4 1.4,1 2,1 L7,1 L7,3 L3,3 L3,7 L3,7 Z"></path>
+ <path d="M17,7 L15,7 L15,3 L11,3 L11,1 L16,1 C16.6,1 17,1.4 17,2 L17,7 L17,7 Z"></path>
+ <path d="M16,17 L11,17 L11,15 L15,15 L15,11 L17,11 L17,16 C17,16.6 16.6,17 16,17 L16,17 Z"></path>
+ <path d="M7,17 L2,17 C1.4,17 1,16.6 1,16 L1,11 L3,11 L3,15 L7,15 L7,17 L7,17 Z"></path>
</g>
-</svg>
+</svg> \ No newline at end of file
diff --git a/src/sprite/icon-exit-fullscreen.svg b/src/sprite/icon-exit-fullscreen.svg
index 0fdd6b45..d02726ab 100644
--- a/src/sprite/icon-exit-fullscreen.svg
+++ b/src/sprite/icon-exit-fullscreen.svg
@@ -1,7 +1,7 @@
<?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">
- <g transform="translate(0.000000, 2.000000)">
- <path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
- <path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
+ <g>
+ <path d="M10.7,8.4 L9.3,7 L3,13.3 L3,8.7 L1,8.7 L1,15.7 C1,16.3 1.4,16.7 2,16.7 L9,16.7 L9,14.7 L4.4,14.7 L10.7,8.4 L10.7,8.4 Z"></path>
+ <path d="M16,16 L12,16 L12,14 L15,14 L15,3 L4,3 L4,6 L2,6 L2,2 C2,1.4 2.4,1 3,1 L16,1 C16.6,1 17,1.4 17,2 L17,15 C17,15.6 16.6,16 16,16 L16,16 Z"></path>
</g>
-</svg>
+</svg> \ No newline at end of file
diff --git a/src/sprite/icon-fast-forward.svg b/src/sprite/icon-fast-forward.svg
index 3ae96af6..a441bd27 100644
--- a/src/sprite/icon-fast-forward.svg
+++ b/src/sprite/icon-fast-forward.svg
@@ -1,7 +1,6 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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"
- width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-<polygon points="7,6.4 0,1 0,15 7,9.6 7,15 16,8 7,1 "/>
-</svg>
+<?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">
+ <g>
+ <polygon points="7.875 7.17142857 0 1 0 17 7.875 10.8285714 7.875 17 18 9 7.875 1"></polygon>
+ </g>
+</svg> \ No newline at end of file
diff --git a/src/sprite/icon-muted.svg b/src/sprite/icon-muted.svg
index 8a0014f1..41c66821 100644
--- a/src/sprite/icon-muted.svg
+++ b/src/sprite/icon-muted.svg
@@ -1,8 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <g transform="translate(0.000000, 2.000000)">
- <path d="M9.214,0 C9.103,0 8.989,0.032 8.88,0.101 L4.832,2.911 C4.749,2.969 4.65,3 4.549,3 L0.996,3 C0.446,3 1.33226763e-15,3.448 1.33226763e-15,4 L1.33226763e-15,10 C1.33226763e-15,10.552 0.446,11 0.996,11 L4.549,11 C4.651,11 4.749,11.031 4.832,11.089 L8.88,13.899 C8.989,13.968 9.103,14 9.214,14 C9.606,14 9.961,13.6 9.961,13.051 L9.961,0.95 C9.961,0.4 9.606,0.001 9.214,0.001 L9.214,0 Z M7.969,10.834 L5.582,9.177 C5.416,9.062 5.218,8.999 5.016,8.999 L2.491,8.999 C2.216,8.999 1.993,8.775 1.993,8.499 L1.993,5.499 C1.993,5.223 2.216,4.999 2.491,4.999 L5.016,4.999 C5.218,4.999 5.416,4.937 5.582,4.821 L7.969,3.164 L7.969,10.833 L7.969,10.834 Z"></path>
- <path d="M14.934,6.799 C14.848,5.051 13.42,3.808 12.427,3.15 C11.957,2.838 11.333,3.028 11.102,3.558 L11.064,3.644 C10.876,4.075 11.019,4.583 11.4,4.838 C12.106,5.311 12.986,6.085 13.024,6.903 C13.056,7.579 12.471,8.371 11.361,9.173 C10.963,9.461 10.832,10.012 11.076,10.448 L11.118,10.523 C11.384,10.998 11.984,11.147 12.418,10.835 C14.158,9.584 15.004,8.229 14.934,6.798 L14.934,6.799 Z"></path>
- <path d="M17.934,6.799 C17.848,5.051 16.42,3.808 15.427,3.15 C14.957,2.838 14.333,3.028 14.102,3.558 L14.064,3.644 C13.876,4.075 14.019,4.583 14.4,4.838 C15.106,5.311 15.986,6.085 16.024,6.903 C16.056,7.579 15.471,8.371 14.361,9.173 C13.963,9.461 13.832,10.012 14.076,10.448 L14.118,10.523 C14.384,10.998 14.984,11.147 15.418,10.835 C17.158,9.584 18.004,8.229 17.934,6.798 L17.934,6.799 Z" transform="translate(15.945467, 6.999165) rotate(-180.000000) translate(-15.945467, -6.999165) "></path>
+<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">
+ <g>
+ <polygon points="12.4 12.5 14.5 10.4 16.6 12.5 18 11.1 15.9 9 18 6.9 16.6 5.5 14.5 7.6 12.4 5.5 11 6.9 13.1 9 11 11.1"></polygon>
+ <path d="M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"></path>
</g>
-</svg>
+</svg> \ No newline at end of file
diff --git a/src/sprite/icon-pause.svg b/src/sprite/icon-pause.svg
index db51a807..a4dae883 100644
--- a/src/sprite/icon-pause.svg
+++ b/src/sprite/icon-pause.svg
@@ -1,8 +1,7 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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"
- width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-<path d="M5,1H2C1.4,1,1,1.4,1,2v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C6,1.4,5.6,1,5,1z"/>
-<path d="M14,1h-3c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C15,1.4,14.6,1,14,1z"/>
-</svg>
+<?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">
+ <g>
+ <path d="M6,1 L3,1 C2.4,1 2,1.4 2,2 L2,16 C2,16.6 2.4,17 3,17 L6,17 C6.6,17 7,16.6 7,16 L7,2 C7,1.4 6.6,1 6,1 L6,1 Z"></path>
+ <path d="M12,1 C11.4,1 11,1.4 11,2 L11,16 C11,16.6 11.4,17 12,17 L15,17 C15.6,17 16,16.6 16,16 L16,2 C16,1.4 15.6,1 15,1 L12,1 Z"></path>
+ </g>
+</svg> \ No newline at end of file
diff --git a/src/sprite/icon-play.svg b/src/sprite/icon-play.svg
index 069af73c..cc551902 100644
--- a/src/sprite/icon-play.svg
+++ b/src/sprite/icon-play.svg
@@ -1,7 +1,6 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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"
- width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-<path d="M13.6,7.2l-10-7C2.9-0.3,2,0.2,2,1v14c0,0.8,0.9,1.3,1.6,0.8l10-7C14.1,8.4,14.1,7.6,13.6,7.2z"/>
-</svg>
+<?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">
+ <g>
+ <path d="M15.5615866,8.10002147 L3.87056367,0.225209313 C3.05219207,-0.33727727 2,0.225209313 2,1.12518784 L2,16.8748122 C2,17.7747907 3.05219207,18.3372773 3.87056367,17.7747907 L15.5615866,9.89997853 C16.1461378,9.44998927 16.1461378,8.55001073 15.5615866,8.10002147 L15.5615866,8.10002147 Z"></path>
+ </g>
+</svg> \ No newline at end of file
diff --git a/src/sprite/icon-restart.svg b/src/sprite/icon-restart.svg
index 2a889021..efb99cce 100755
--- a/src/sprite/icon-restart.svg
+++ b/src/sprite/icon-restart.svg
@@ -1,6 +1,6 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg viewBox="0 0 16 16" 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">
-<path d="M7.7,1.2l0.7,6.4l2.1-2.1c1.9,1.9,1.9,5.1,0,7C9.6,13.5,8.3,14,7,14c-1.3,0-2.6-0.5-3.5-1.5
- c-1.9-1.9-1.9-5.1,0-7c0.6-0.6,1.4-1.1,2.3-1.3L5.2,2.3C4,2.6,2.9,3.2,2,4.1c-2.7,2.7-2.7,7.1,0,9.9c1.3,1.3,3.1,2,4.9,2
- c1.9,0,3.6-0.7,4.9-2c2.7-2.7,2.7-7.1,0-9.9l2.2-2.2L7.7,1.2z"/>
-</svg>
+<?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">
+ <g>
+ <path d="M9.7,1.2 L10.4,7.6 L12.5,5.5 C14.4,7.4 14.4,10.6 12.5,12.5 C11.6,13.5 10.3,14 9,14 C7.7,14 6.4,13.5 5.5,12.5 C3.6,10.6 3.6,7.4 5.5,5.5 C6.1,4.9 6.9,4.4 7.8,4.2 L7.2,2.3 C6,2.6 4.9,3.2 4,4.1 C1.3,6.8 1.3,11.2 4,14 C5.3,15.3 7.1,16 8.9,16 C10.8,16 12.5,15.3 13.8,14 C16.5,11.3 16.5,6.9 13.8,4.1 L16,1.9 L9.7,1.2 L9.7,1.2 Z"></path>
+ </g>
+</svg> \ No newline at end of file
diff --git a/src/sprite/icon-rewind.svg b/src/sprite/icon-rewind.svg
index fbc252d2..dec85456 100644
--- a/src/sprite/icon-rewind.svg
+++ b/src/sprite/icon-rewind.svg
@@ -1,7 +1,6 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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"
- width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-<polygon points="9,1 0,8 9,15 9,9.6 16,15 16,1 9,6.4 "/>
-</svg>
+<?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">
+ <g>
+ <polygon points="10.125 1 0 9 10.125 17 10.125 10.8285714 18 17 18 1 10.125 7.17142857"></polygon>
+ </g>
+</svg> \ No newline at end of file
diff --git a/src/sprite/icon-volume.svg b/src/sprite/icon-volume.svg
index 9de20690..bc533f40 100755
--- a/src/sprite/icon-volume.svg
+++ b/src/sprite/icon-volume.svg
@@ -1,5 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <path d="M10.214 2c-0.111 0-0.225 0.032-0.334 0.101l-4.048 2.81c-0.083 0.058-0.182 0.089-0.283 0.089h-3.553c-0.55 0-0.996 0.448-0.996 1v6c0 0.552 0.446 1 0.996 1h3.553c0.102 0 0.2 0.031 0.283 0.089l4.048 2.81c0.109 0.069 0.223 0.101 0.334 0.101 0.392 0 0.747-0.4 0.747-0.949v-12.101c0-0.55-0.355-0.949-0.747-0.949zM8.969 12.834l-2.387-1.657c-0.166-0.115-0.364-0.178-0.566-0.178h-2.525c-0.275 0-0.498-0.224-0.498-0.5v-3c0-0.276 0.223-0.5 0.498-0.5h2.525c0.202 0 0.4-0.062 0.566-0.178l2.387-1.657v7.669z"></path>
- <path d="M16.934 8.799c-0.086-1.748-1.514-2.991-2.507-3.649-0.47-0.312-1.094-0.122-1.325 0.408l-0.038 0.086c-0.188 0.431-0.045 0.939 0.336 1.194 0.706 0.473 1.586 1.247 1.624 2.065 0.032 0.676-0.553 1.468-1.663 2.27-0.398 0.288-0.529 0.839-0.285 1.275l0.042 0.075c0.266 0.475 0.866 0.624 1.3 0.312 1.74-1.251 2.586-2.606 2.516-4.037z"></path>
-</svg>
+<?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">
+ <g>
+ <path d="M15.5999996,3.3 C15.1999996,2.9 14.5999996,2.9 14.1999996,3.3 C13.7999996,3.7 13.7999996,4.3 14.1999996,4.7 C15.3999996,5.9 15.9999996,7.4 15.9999996,9 C15.9999996,10.6 15.3999996,12.1 14.1999996,13.3 C13.7999996,13.7 13.7999996,14.3 14.1999996,14.7 C14.3999996,14.9 14.6999996,15 14.8999996,15 C15.1999996,15 15.3999996,14.9 15.5999996,14.7 C17.0999996,13.2 17.9999996,11.2 17.9999996,9 C17.9999996,6.8 17.0999996,4.8 15.5999996,3.3 L15.5999996,3.3 Z"></path>
+ <path d="M11.2819745,5.28197449 C10.9060085,5.65794047 10.9060085,6.22188944 11.2819745,6.59785542 C12.0171538,7.33303477 12.2772954,8.05605449 12.2772954,9.00000021 C12.2772954,9.93588462 11.851678,10.9172014 11.2819745,11.4869049 C10.9060085,11.8628709 10.9060085,12.4268199 11.2819745,12.8027859 C11.4271642,12.9479755 11.9176724,13.0649528 12.2998149,12.9592565 C12.4124479,12.9281035 12.5156669,12.8776063 12.5978555,12.8027859 C13.773371,11.732654 14.1311161,10.1597914 14.1312523,9.00000021 C14.1312723,8.8299555 14.1286311,8.66015647 14.119665,8.4897429 C14.0674781,7.49784946 13.8010171,6.48513613 12.5978554,5.28197449 C12.2218894,4.9060085 11.6579405,4.9060085 11.2819745,5.28197449 Z"></path>
+ <path d="M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"></path>
+ </g>
+</svg> \ No newline at end of file