Fixed incorrect BEM formatting, fixed buffer alignment

dist/plyr.js

@@ -1303,7 +1303,7 @@ var utils = {
     // Get a nested value in an object
     getDeep: function getDeep(object, path) {
         return path.split('.').reduce(function (obj, key) {
-            return obj && obj[key] || undefined;
+            return obj && obj[key];
         }, object);
     },
 
@@ -1727,6 +1727,13 @@ var html5 = {
 
                 player.media.src = supported[0].getAttribute('src');
 
+                // Restore time
+                var onLoadedMetaData = function onLoadedMetaData() {
+                    player.currentTime = currentTime;
+                    player.off('loadedmetadata', onLoadedMetaData);
+                };
+                player.on('loadedmetadata', onLoadedMetaData);
+
                 // Load new source
                 player.media.load();
 
@@ -1735,9 +1742,6 @@ var html5 = {
                     player.play();
                 }
 
-                // Restore time
-                player.currentTime = currentTime;
-
                 // Trigger change event
                 utils.dispatchEvent.call(player, player.media, 'qualitychange', false, {
                     quality: input
@@ -2491,13 +2495,13 @@ var controls = {
 
             case 'quality':
                 if (utils.is.number(value)) {
-                    var qualityName = i18n.get('qualityName.' + value, this.config);
+                    var label = i18n.get('qualityLabel.' + value, this.config);
 
-                    if (!qualityName.length) {
+                    if (!label.length) {
                         return value + 'p';
                     }
 
-                    return qualityName;
+                    return label;
                 }
 
                 return utils.toTitleCase(value);
@@ -3801,9 +3805,8 @@ var defaults$1 = {
         display: {
             currentTime: '.plyr__time--current',
             duration: '.plyr__time--duration',
-            buffer: '.plyr__progress--buffer',
+            buffer: '.plyr__progress__buffer',
-            played: '.plyr__progress--played',
+            loop: '.plyr__progress__loop', // Used later
-            loop: '.plyr__progress--loop',
             volume: '.plyr__volume--display'
         },
         progress: '.plyr__progress',

dist/plyr.polyfilled.js

@@ -20,7 +20,7 @@ if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef
 });
 
 var _core = createCommonjsModule(function (module) {
-var core = module.exports = { version: '2.5.5' };
+var core = module.exports = { version: '2.5.3' };
 if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
 });
 var _core_1 = _core.version;
@@ -991,7 +991,7 @@ var _iterDefine = function (Base, NAME, Constructor, next, DEFAULT, IS_SET, FORC
   var VALUES_BUG = false;
   var proto = Base.prototype;
   var $native = proto[ITERATOR$2] || proto[FF_ITERATOR] || DEFAULT && proto[DEFAULT];
-  var $default = $native || getMethod(DEFAULT);
+  var $default = (!BUGGY && $native) || getMethod(DEFAULT);
   var $entries = DEFAULT ? !DEF_VALUES ? $default : getMethod('entries') : undefined;
   var $anyNative = NAME == 'Array' ? proto.entries || $native : $native;
   var methods, key, IteratorPrototype;
@@ -1002,7 +1002,7 @@ var _iterDefine = function (Base, NAME, Constructor, next, DEFAULT, IS_SET, FORC
       // Set @@toStringTag to native iterators
       _setToStringTag(IteratorPrototype, TAG, true);
       // fix for some old engines
-      if (!_library && typeof IteratorPrototype[ITERATOR$2] != 'function') _hide(IteratorPrototype, ITERATOR$2, returnThis);
+      if (!_library && !_has(IteratorPrototype, ITERATOR$2)) _hide(IteratorPrototype, ITERATOR$2, returnThis);
     }
   }
   // fix Array#{values, @@iterator}.name in V8 / FF
@@ -2496,11 +2496,9 @@ function set(target, propertyKey, V /* , receiver */) {
   }
   if (_has(ownDesc, 'value')) {
     if (ownDesc.writable === false || !_isObject(receiver)) return false;
-    if (existingDescriptor = _objectGopd.f(receiver, propertyKey)) {
+    existingDescriptor = _objectGopd.f(receiver, propertyKey) || _propertyDesc(0);
-      if (existingDescriptor.get || existingDescriptor.set || existingDescriptor.writable === false) return false;
+    existingDescriptor.value = V;
-      existingDescriptor.value = V;
+    _objectDp.f(receiver, propertyKey, existingDescriptor);
-      _objectDp.f(receiver, propertyKey, existingDescriptor);
-    } else _objectDp.f(receiver, propertyKey, _propertyDesc(0, V));
     return true;
   }
   return ownDesc.set === undefined ? false : (ownDesc.set.call(receiver, V), true);
@@ -2755,7 +2753,7 @@ var notify = function (promise, isReject) {
       var resolve = reaction.resolve;
       var reject = reaction.reject;
       var domain = reaction.domain;
-      var result, then, exited;
+      var result, then;
       try {
         if (handler) {
           if (!ok) {
@@ -2765,11 +2763,8 @@ var notify = function (promise, isReject) {
           if (handler === true) result = value;
           else {
             if (domain) domain.enter();
-            result = handler(value); // may throw
+            result = handler(value);
-            if (domain) {
+            if (domain) domain.exit();
-              domain.exit();
-              exited = true;
-            }
           }
           if (result === reaction.promise) {
             reject(TypeError$1('Promise-chain cycle'));
@@ -2778,7 +2773,6 @@ var notify = function (promise, isReject) {
           } else resolve(result);
         } else reject(value);
       } catch (e) {
-        if (domain && !exited) domain.exit();
         reject(e);
       }
     };
@@ -6692,7 +6686,7 @@ var utils = {
     // Get a nested value in an object
     getDeep: function getDeep(object, path) {
         return path.split('.').reduce(function (obj, key) {
-            return obj && obj[key] || undefined;
+            return obj && obj[key];
         }, object);
     },
 
@@ -7116,6 +7110,13 @@ var html5 = {
 
                 player.media.src = supported[0].getAttribute('src');
 
+                // Restore time
+                var onLoadedMetaData = function onLoadedMetaData() {
+                    player.currentTime = currentTime;
+                    player.off('loadedmetadata', onLoadedMetaData);
+                };
+                player.on('loadedmetadata', onLoadedMetaData);
+
                 // Load new source
                 player.media.load();
 
@@ -7124,9 +7125,6 @@ var html5 = {
                     player.play();
                 }
 
-                // Restore time
-                player.currentTime = currentTime;
-
                 // Trigger change event
                 utils.dispatchEvent.call(player, player.media, 'qualitychange', false, {
                     quality: input
@@ -7880,13 +7878,13 @@ var controls = {
 
             case 'quality':
                 if (utils.is.number(value)) {
-                    var qualityName = i18n.get('qualityName.' + value, this.config);
+                    var label = i18n.get('qualityLabel.' + value, this.config);
 
-                    if (!qualityName.length) {
+                    if (!label.length) {
                         return value + 'p';
                     }
 
-                    return qualityName;
+                    return label;
                 }
 
                 return utils.toTitleCase(value);

src/js/defaults.js

@@ -322,9 +322,8 @@ const defaults = {
         display: {
             currentTime: '.plyr__time--current',
             duration: '.plyr__time--duration',
-            buffer: '.plyr__progress--buffer',
+            buffer: '.plyr__progress__buffer',
-            played: '.plyr__progress--played',
+            loop: '.plyr__progress__loop', // Used later
-            loop: '.plyr__progress--loop',
             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';