Menu work

2 files changed, 35 insertions, 34 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index c2000234..7a4f19e0 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -98,7 +98,10 @@
                 },
                 captions: '.plyr__captions',
                 currentTime: '.plyr__time--current',
-                duration: '.plyr__time--duration'
+                duration: '.plyr__time--duration',
+                menu: {
+                    quality: '.js-plyr__menu__list--quality'
+                }
             },
             classes: {
                 setup: 'plyr--setup',
@@ -976,7 +979,7 @@
                         '</button>',
                         '<div class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">',
                             '<div>',
-                                '<div class="plyr__menu__primary" id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
+                                '<div id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
                                     '<ul>',
                                         '<li role="tab">',
                                             '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">',
@@ -998,7 +1001,7 @@
                                         '</li>',
                                     '</ul>',
                                 '</div>',
-                                '<div class="plyr__menu__secondary" id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">',
+                                '<div id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">',
                                     '<ul>',
                                         '<li role="tab">',
                                             '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
@@ -1013,7 +1016,7 @@
                                         '</li>',
                                     '</ul>',
                                 '</div>',
-                                '<div class="plyr__menu__secondary" id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">',
+                                '<div id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">',
                                     '<ul>',
                                         '<li role="tab">',
                                             '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
@@ -1034,8 +1037,8 @@
                                         '</li>',
                                     '</ul>',
                                 '</div>',
-                                '<div class="plyr__menu__secondary" id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
-                                    '<ul>',
+                                '<div id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
+                                    '<ul class="js-plyr__menu__list--quality">',
                                         '<li role="tab">',
                                             '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
                                                 config.i18n.quality,
@@ -1216,7 +1219,7 @@
                     return [
                         '<li>',
                             '<label class="plyr__control">',
-                                '<input type="radio" name="quality" value="' + quality + '"' + (quality === current ? ' checked' : '') + '>',
+                                '<input type="radio" name="quality" value="' + quality + '"' + (quality === plyr.quality.current ? ' checked' : '') + '>',
                                 getLabel(quality),
                                 getBadge(quality),
                             '</label>',
@@ -1232,7 +1235,7 @@
                     '</li>'
                 ].join(''));
 
-                console.warn(list);
+                getElement(config.selectors.menu.quality).innerHTML = list.join('');
             }
         }
 
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 76d46dbe..9e1dee8d 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -12,13 +12,13 @@
     to { background-position: @plyr-progress-loading-size 0; }
 }
 @keyframes plyr-popup {
-    from { 
-        transform: translateY(10px); 
-        opacity: .5; 
+    from {
+        transform: translateY(10px);
+        opacity: .5;
     }
-    to { 
-        transform: translateY(0); 
-        opacity: 1; 
+    to {
+        transform: translateY(0);
+        opacity: 1;
     }
 }
 
@@ -77,14 +77,14 @@
         height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
         width: 100%;
         margin: 0;
-        padding: 0; 
+        padding: 0;
         vertical-align: middle;
-        
+
         appearance: none;
         cursor: pointer;
         border: none;
         background: transparent;
-        
+
         // WebKit
         &::-webkit-slider-runnable-track {
             .plyr-range-track();
@@ -102,7 +102,7 @@
         &::-moz-range-thumb {
             .plyr-range-thumb();
         }
-        
+
         // Microsoft
         &::-ms-track {
             height: @plyr-range-track-height;
@@ -120,7 +120,7 @@
         &::-ms-thumb {
             .plyr-range-thumb();
             // For some reason, Edge uses the -webkit margin above
-            margin-top: 0; 
+            margin-top: 0;
         }
         &::-ms-tooltip {
             display: none;
@@ -132,11 +132,11 @@
         }
         &::-moz-focus-outer {
             border: 0;
-        }        
+        }
         &.tab-focus:focus {
             outline-offset: 3px;
         }
-        
+
         // Pressed styles
         &:active {
             &::-webkit-slider-thumb {
@@ -280,7 +280,7 @@
 // Playback controls
 .plyr__controls {
     display: flex;
-    align-items: center; 
+    align-items: center;
     line-height: 1;
     text-align: center;
 
@@ -302,8 +302,6 @@
         margin-left: 0;
     }
 
-
-
     @media (min-width: @plyr-bp-screen-sm) {
         > .plyr__control,
         .plyr__progress,
@@ -319,7 +317,7 @@
         }
     }
 }
-// Hide controls 
+// Hide controls
 .plyr--hide-controls .plyr__controls {
     opacity: 0;
     pointer-events: none;
@@ -489,7 +487,7 @@
             display: none;
         }
     }
-    
+
     // The actual menu container
     &__container {
         position: absolute;
@@ -530,8 +528,8 @@
             list-style: none;
             overflow: hidden;
         }
-        
-        // Options 
+
+        // Options
         .plyr__control {
             display: flex;
             width: 100%;
@@ -547,7 +545,7 @@
                 transform: translateY(-50%);
                 border: 5px solid transparent;
             }
-            
+
             &--forward {
                 padding-right: ceil(@plyr-control-padding * 4);
 
@@ -556,7 +554,7 @@
                     border-left-color: fade(@plyr-menu-color, 80%);
                 }
             }
-            
+
             &--back {
                 position: relative;
                 padding-top: floor(@plyr-control-padding * .7);
@@ -657,7 +655,7 @@
         height: 0;
         left: 50%;
         transform: translateX(-50%);
-    
+
         // The background triangle
         bottom: -@plyr-tooltip-arrow-size;
         border-right: @plyr-tooltip-arrow-size solid transparent;
@@ -807,16 +805,16 @@
     }
     &::-moz-progress-bar {
         transition: width .2s ease;
-    }    
+    }
     &::-ms-fill {
         transition: width .2s ease;
-    }            
+    }
 }
 .plyr--video .plyr__progress--buffer,
 .plyr--video .plyr__volume--display {
     background: @plyr-video-range-track-bg;
 }
-.plyr--video .plyr__progress--buffer { 
+.plyr--video .plyr__progress--buffer {
     color: @plyr-video-progress-buffered-bg;
 }
 .plyr--audio .plyr__progress--buffer,