Fixed incorrect BEM formatting, fixed buffer alignment

src/js/defaults.js

@@ -322,9 +322,8 @@ const defaults = {
         display: {
             currentTime: '.plyr__time--current',
             duration: '.plyr__time--duration',
-            buffer: '.plyr__progress--buffer',
-            played: '.plyr__progress--played',
-            loop: '.plyr__progress--loop',
+            buffer: '.plyr__progress__buffer',
+            loop: '.plyr__progress__loop', // Used later
             volume: '.plyr__volume--display',
         },
         progress: '.plyr__progress',

src/sass/components/progress.scss

@@ -5,16 +5,21 @@
 .plyr__progress {
     display: flex;
     flex: 1;
-    position: relative;
-    margin-right: $plyr-range-thumb-height;
     left: $plyr-range-thumb-height / 2;
+    margin-right: $plyr-range-thumb-height;
+    position: relative;
+
+    input[type='range'],
+    &__buffer {
+        margin-left: -($plyr-range-thumb-height / 2);
+        margin-right: -($plyr-range-thumb-height / 2);
+        // Offset the range thumb in order to be able to calculate the relative progress (#954)
+        width: calc(100% + #{$plyr-range-thumb-height});
+    }
 
     input[type='range'] {
         position: relative;
         z-index: 2;
-        // Offset the range thumb in order to be able to calculate the relative progress (#954)
-        width: calc(100% + #{$plyr-range-thumb-height}) !important;
-        margin: 0 -#{$plyr-range-thumb-height / 2} !important;
     }
 
     // Seek tooltip to show time
@@ -24,18 +29,17 @@
     }
 }
 
-.plyr__progress--buffer {
+.plyr__progress__buffer {
     -webkit-appearance: none; /* stylelint-disable-line */
     background: transparent;
     border: 0;
     border-radius: 100px;
     height: $plyr-range-track-height;
     left: 0;
-    margin: -($plyr-range-track-height / 2) 0 0;
+    margin-top: -($plyr-range-track-height / 2);
     padding: 0;
     position: absolute;
     top: 50%;
-    width: 100%;
 
     &::-webkit-progress-bar {
         background: transparent;
@@ -63,17 +67,17 @@
     }
 }
 
-.plyr--video .plyr__progress--buffer {
+.plyr--video .plyr__progress__buffer {
     box-shadow: 0 1px 1px rgba(#000, 0.15);
     color: $plyr-video-progress-buffered-bg;
 }
 
-.plyr--audio .plyr__progress--buffer {
+.plyr--audio .plyr__progress__buffer {
     color: $plyr-audio-progress-buffered-bg;
 }
 
 // Loading state
-.plyr--loading .plyr__progress--buffer {
+.plyr--loading .plyr__progress__buffer {
     animation: plyr-progress 1s linear infinite;
     background-image: linear-gradient(
         -45deg,
@@ -90,10 +94,10 @@
     color: transparent;
 }
 
-.plyr--video.plyr--loading .plyr__progress--buffer {
+.plyr--video.plyr--loading .plyr__progress__buffer {
     background-color: $plyr-video-progress-buffered-bg;
 }
 
-.plyr--audio.plyr--loading .plyr__progress--buffer {
+.plyr--audio.plyr--loading .plyr__progress__buffer {
     background-color: $plyr-audio-progress-buffered-bg;
 }

src/sass/plyr.scss

@@ -31,12 +31,12 @@
 @import 'components/controls';
 @import 'components/embed';
 @import 'components/menus';
-@import 'components/progress';
-@import 'components/poster';
 @import 'components/sliders';
+@import 'components/poster';
 @import 'components/times';
 @import 'components/tooltips';
 @import 'components/video';
+@import 'components/progress';
 @import 'components/volume';
 
 @import 'states/fullscreen';