From 46f82a4af375164355315f08b5724a25961aa39b Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Wed, 7 Sep 2016 22:18:05 +1000
Subject: Added quality in menu

---
 src/js/plyr.js          |  8 +++++++-
 src/less/plyr.less      | 12 ++++++------
 src/less/variables.less |  7 ++++++-
 3 files changed, 19 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 53af4cda..d113882c 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -150,7 +150,8 @@
             frameTitle:         'Player for {title}',
             captions:           'Captions',
             settings:           'Settings',
-            speed:              'Speed'
+            speed:              'Speed',
+            quality:            'Quality'
         },
         types: {
             embed:              ['youtube', 'vimeo', 'soundcloud'],
@@ -886,6 +887,11 @@
                                         config.i18n.speed + ' <span class="plyr__menu__value">{speed}</span>',
                                     '</button>',
                                 '</li>',
+                                '<li>',
+                                    '<button type="button" data-plyr="slide-speed">',
+                                        config.i18n.quality + ' <span class="plyr__menu__value">Auto</span>',
+                                    '</button>',
+                                '</li>',
                             '</ul>',
                         '</div>',
                     '</div>'
diff --git a/src/less/plyr.less b/src/less/plyr.less
index a3dd8e83..20550b80 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -482,12 +482,12 @@
         right: -5px;
         margin-bottom: 10px;
         animation: plyr-popup .2s ease;
-        background: fade(@plyr-video-controls-bg, 90%);
+        background: @plyr-menu-bg;
         box-shadow: 0 1px 0 fade(#000, 20%);
         border-radius: 4px;
         white-space: nowrap;
         text-align: left;
-        color: @plyr-video-control-color;
+        color: @plyr-menu-color;
         font-size: @plyr-font-size-small;
 
         ul {
@@ -500,7 +500,7 @@
             display: flex;
             width: 100%;
             padding: 10px 30px 10px 12px;
-            color: @plyr-video-control-color;
+            color: @plyr-menu-color;
             font-weight: 600;
 
             // Arrow
@@ -511,7 +511,7 @@
                 transform: translateY(-50%);
                 right: 5px;
                 border: 5px solid transparent;
-                border-left-color: fade(@plyr-video-control-color, 80%);
+                border-left-color: fade(@plyr-menu-color, 80%);
             }
         }
 
@@ -520,7 +520,7 @@
             margin-left: auto;
             padding-left: 25px;
             font-weight: 400;
-            color: fade(@plyr-video-control-color, 80%);
+            color: fade(@plyr-menu-color, 80%);
         }
 
         // Arrow
@@ -532,7 +532,7 @@
             height: 0;
             width: 0;
             border: 6px solid transparent;
-            border-top-color: fade(@plyr-video-controls-bg, 90%);
+            border-top-color: @plyr-menu-bg;
         }
     }
 }
diff --git a/src/less/variables.less b/src/less/variables.less
index 8a601571..c7eab243 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -38,12 +38,17 @@
 @plyr-audio-control-bg-hover:           @plyr-color-main;
 
 // Tooltips
-@plyr-tooltip-bg:                       fade(#343f4a, 85%);
+@plyr-tooltip-bg:                       fade(#343f4a, 90%);
 @plyr-tooltip-color:                    #fff;
 @plyr-tooltip-padding:                  (@plyr-control-spacing / 2);
 @plyr-tooltip-arrow-size:               4px;
 @plyr-tooltip-radius:                   3px;
 
+// Menus
+@plyr-menu-bg: 							@plyr-tooltip-bg;
+@plyr-menu-color:                    	@plyr-tooltip-color;
+@plyr-menu-arrow-size: 					6px;
+
 // Progress
 @plyr-progress-loading-size:            25px;
 @plyr-progress-loading-bg:              fade(#343f4a, 20%);
-- 
cgit v1.2.3