ddplayer 1.11.1 → 25.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ddplayer",
-  "version": "1.11.1",
+  "version": "25.12.1",
   "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "https://github.com/leduong/ddplayer",
   "author": "Duong Le <me@leduong.com>",
@@ -41,11 +41,11 @@
     "format": "prettier --write \"./{src,demo/src}/**/*.{js,scss}\""
   },
   "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
     "ansi-colors": "^4.1.1",
     "autoprefixer": "^9.7.6",
     "aws-sdk": "^2.668.0",
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
     "babel-eslint": "^10.1.0",
     "browser-sync": "^2.26.7",
     "del": "^5.1.0",
@@ -69,7 +69,7 @@
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.0.0",
-    "gulp-sass": "^4.1.0",
+    "gulp-sass": "latest",
     "gulp-size": "^3.0.0",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-svgstore": "^7.0.1",
@@ -84,6 +84,7 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "sass": "^1.94.2",
     "stylelint": "^13.3.3",
     "stylelint-config-prettier": "^8.0.1",
     "stylelint-config-recommended": "^3.0.0",

package/src/js/config/defaults.js

@@ -204,10 +204,10 @@ const defaults = {
   // URLs
   urls: {
     hlsjs: {
-      sdk: 'https://cdn.jsdelivr.net/npm/hls.js@0.14.10/dist/hls.min.js',
+      sdk: 'https://cdn.jsdelivr.net/npm/hls.js@1.6.15/dist/hls.min.js',
     },
     dashjs: {
-      sdk: 'https://cdn.jsdelivr.net/npm/dashjs@3.1.2/dist/dash.all.min.js',
+      sdk: 'https://cdn.jsdelivr.net/npm/dashjs@5.1.0/dist/legacy/umd/dash.all.min.js',
     },
     download: null,
     vimeo: {

package/src/js/plugins/youtube.js

@@ -315,19 +315,18 @@ const youtube = {
           // Setup buffering
           player.timers.buffering = setInterval(() => {
             // Get loaded % from YouTube
-            if (player.media && player.media.buffered && player.media.lastBuffered) {
-              player.media.buffered = instance.getVideoLoadedFraction() || player.media.buffered;
+            player.media.buffered = instance.getVideoLoadedFraction();
 
-              // Set last buffer point
-              player.media.lastBuffered = player.media.buffered;
-
-              // Trigger progress only when we actually buffer something
-              if (player.media.lastBuffered === null || player.media.lastBuffered < player.media.buffered) {
-                triggerEvent.call(player, player.media, 'progress');
-              }
+            // Trigger progress only when we actually buffer something
+            if (player.media.lastBuffered === null || player.media.lastBuffered < player.media.buffered) {
+              triggerEvent.call(player, player.media, 'progress');
             }
+
+            // Set last buffer point
+            player.media.lastBuffered = player.media.buffered;
+
             // Bail if we're at 100%
-            if (player.media && player.media.buffered && player.media.buffered === 1) {
+            if (player.media.buffered === 1) {
               clearInterval(player.timers.buffering);
 
               // Trigger event

package/src/sass/base.scss

@@ -1,19 +1,23 @@
+@use "lib/mixins";
+@use "settings/helpers";
+@use "settings/type";
+
 // --------------------------------------------------------------
 // Base styling
 // --------------------------------------------------------------
 
 // Base
 .plyr {
-  @include plyr-font-smoothing($plyr-font-smoothing);
+  @include mixins.plyr-font-smoothing(type.$plyr-font-smoothing);
   align-items: center;
   direction: ltr;
   display: flex;
   flex-direction: column;
-  font-family: $plyr-font-family;
+  font-family: type.$plyr-font-family;
   font-variant-numeric: tabular-nums; // Force monosace-esque number widths
-  font-weight: $plyr-font-weight-regular;
+  font-weight: type.$plyr-font-weight-regular;
   height: 100%;
-  line-height: $plyr-line-height;
+  line-height: type.$plyr-line-height;
   max-width: 100%;
   min-width: 200px;
   position: relative;
@@ -44,7 +48,7 @@
 
 // border-box everything
 // http://paulirish.com/2012/box-sizing-border-box-ftw/
-@if $plyr-border-box {
+@if helpers.$plyr-border-box {
   .plyr--full-ui {
     box-sizing: border-box;
 
@@ -57,7 +61,7 @@
 }
 
 // Fix 300ms delay
-@if $plyr-touch-action {
+@if helpers.$plyr-touch-action {
   .plyr--full-ui {
     a,
     button,

package/src/sass/components/badges.scss

@@ -1,12 +1,15 @@
+@use "settings/badges";
+@use "settings/type";
+
 // --------------------------------------------------------------
 // Badges
 // --------------------------------------------------------------
 
 .plyr__badge {
-  background: $plyr-badge-background;
-  border-radius: $plyr-badge-border-radius;
-  color: $plyr-badge-text-color;
-  font-size: $plyr-font-size-badge;
+  background: badges.$plyr-badge-background;
+  border-radius: badges.$plyr-badge-border-radius;
+  color: badges.$plyr-badge-text-color;
+  font-size: type.$plyr-font-size-badge;
   line-height: 1;
   padding: 3px 4px;
 }

package/src/sass/components/captions.scss

@@ -1,3 +1,7 @@
+@use "settings/breakpoints";
+@use "settings/captions";
+@use "settings/controls";
+
 // --------------------------------------------------------------
 // Captions
 // --------------------------------------------------------------
@@ -11,9 +15,9 @@
   animation: plyr-fade-in 0.3s ease;
   bottom: 0;
   display: none;
-  font-size: $plyr-font-size-captions-small;
+  font-size: captions.$plyr-font-size-captions-small;
   left: 0;
-  padding: $plyr-control-spacing;
+  padding: controls.$plyr-control-spacing;
   position: absolute;
   text-align: center;
   transition: transform 0.4s ease-in-out;
@@ -23,13 +27,13 @@
     display: none;
   }
 
-  @media (min-width: $plyr-bp-sm) {
-    font-size: $plyr-font-size-captions-base;
-    padding: calc(#{$plyr-control-spacing} * 2);
+  @media (min-width: breakpoints.$plyr-bp-sm) {
+    font-size: captions.$plyr-font-size-captions-base;
+    padding: calc(#{controls.$plyr-control-spacing} * 2);
   }
 
-  @media (min-width: $plyr-bp-md) {
-    font-size: $plyr-font-size-captions-medium;
+  @media (min-width: breakpoints.$plyr-bp-md) {
+    font-size: captions.$plyr-font-size-captions-medium;
   }
 }
 
@@ -39,14 +43,14 @@
 
 // If the lower controls are shown and not empty
 .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
-  transform: translateY(calc(#{$plyr-control-spacing} * -4));
+  transform: translateY(calc(#{controls.$plyr-control-spacing} * -4));
 }
 
 .plyr__caption {
-  background: $plyr-captions-background;
+  background: captions.$plyr-captions-background;
   border-radius: 2px;
   box-decoration-break: clone;
-  color: $plyr-captions-text-color;
+  color: captions.$plyr-captions-text-color;
   line-height: 185%;
   padding: 0.2em 0.5em;
   white-space: pre-wrap;

package/src/sass/components/control.scss

@@ -1,3 +1,6 @@
+@use "lib/mixins";
+@use "settings/controls";
+
 // --------------------------------------------------------------
 // Control buttons
 // --------------------------------------------------------------
@@ -5,21 +8,21 @@
 .plyr__control {
   background: transparent;
   border: 0;
-  border-radius: $plyr-control-radius;
+  border-radius: controls.$plyr-control-radius;
   color: inherit;
   cursor: pointer;
   flex-shrink: 0;
   overflow: visible; // IE11
-  padding: $plyr-control-padding;
+  padding: controls.$plyr-control-padding;
   position: relative;
   transition: all 0.3s ease;
 
   svg {
     display: block;
     fill: currentColor;
-    height: $plyr-control-icon-size;
+    height: controls.$plyr-control-icon-size;
     pointer-events: none;
-    width: $plyr-control-icon-size;
+    width: controls.$plyr-control-icon-size;
   }
 
   // Default focus
@@ -29,7 +32,7 @@
 
   // Tab focus
   &.plyr__tab-focus {
-    @include plyr-tab-focus();
+    @include mixins.plyr-tab-focus();
   }
 }
 

package/src/sass/components/controls.scss

@@ -1,3 +1,5 @@
+@use "settings/controls";
+
 // --------------------------------------------------------------
 // Controls
 // --------------------------------------------------------------
@@ -21,7 +23,7 @@
 
   // Spacing
   .plyr__controls__item {
-    margin-left: calc(#{$plyr-control-spacing} / 4);
+    margin-left: calc(#{controls.$plyr-control-spacing} / 4);
 
     &:first-child {
       margin-left: 0;
@@ -29,11 +31,11 @@
     }
 
     &.plyr__progress__container {
-      padding-left: calc(#{$plyr-control-spacing} / 4);
+      padding-left: calc(#{controls.$plyr-control-spacing} / 4);
     }
 
     &.plyr__time {
-      padding: 0 calc(#{$plyr-control-spacing} / 2);
+      padding: 0 calc(#{controls.$plyr-control-spacing} / 2);
     }
 
     &.plyr__progress__container:first-child,

package/src/sass/components/menus.scss

@@ -1,3 +1,8 @@
+@use "settings/colors";
+@use "settings/controls";
+@use "settings/menus";
+@use "settings/type";
+
 // --------------------------------------------------------------
 // Menus
 // --------------------------------------------------------------
@@ -24,12 +29,12 @@
   // The actual menu container
   &__container {
     animation: plyr-popup 0.2s ease;
-    background: $plyr-menu-background;
+    background: menus.$plyr-menu-background;
     border-radius: 4px;
     bottom: 100%;
-    box-shadow: $plyr-menu-shadow;
-    color: $plyr-menu-color;
-    font-size: $plyr-font-size-base;
+    box-shadow: menus.$plyr-menu-shadow;
+    color: menus.$plyr-menu-color;
+    font-size: type.$plyr-font-size-base;
     margin-bottom: 10px;
     position: absolute;
     right: -3px;
@@ -44,18 +49,18 @@
 
     // Arrow
     &::after {
-      border: $plyr-menu-arrow-size solid transparent;
-      border-top-color: $plyr-menu-background;
+      border: menus.$plyr-menu-arrow-size solid transparent;
+      border-top-color: menus.$plyr-menu-background;
       content: '';
       height: 0;
       position: absolute;
-      right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
+      right: calc(((#{controls.$plyr-control-icon-size} / 2) + #{controls.$plyr-control-padding}) - (#{menus.$plyr-menu-arrow-size} / 2));
       top: 100%;
       width: 0;
     }
 
     [role='menu'] {
-      padding: $plyr-control-padding;
+      padding: controls.$plyr-control-padding;
     }
 
     [role='menuitem'],
@@ -70,13 +75,13 @@
     // Options
     .plyr__control {
       align-items: center;
-      color: $plyr-menu-color;
+      color: menus.$plyr-menu-color;
       display: flex;
-      font-size: $plyr-font-size-menu;
-      padding-bottom: calc(#{$plyr-control-padding} / 1.5);
-      padding-left: calc(#{$plyr-control-padding} * 1.5);
-      padding-right: calc(#{$plyr-control-padding} * 1.5);
-      padding-top: calc(#{$plyr-control-padding} / 1.5);
+      font-size: type.$plyr-font-size-menu;
+      padding-bottom: calc(#{controls.$plyr-control-padding} / 1.5);
+      padding-left: calc(#{controls.$plyr-control-padding} * 1.5);
+      padding-right: calc(#{controls.$plyr-control-padding} * 1.5);
+      padding-top: calc(#{controls.$plyr-control-padding} / 1.5);
       user-select: none;
       width: 100%;
 
@@ -87,7 +92,7 @@
       }
 
       &::after {
-        border: $plyr-menu-item-arrow-size solid transparent;
+        border: menus.$plyr-menu-item-arrow-size solid transparent;
         content: '';
         position: absolute;
         top: 50%;
@@ -95,11 +100,11 @@
       }
 
       &--forward {
-        padding-right: calc(#{$plyr-control-padding} * 4);
+        padding-right: calc(#{controls.$plyr-control-padding} * 4);
 
         &::after {
-          border-left-color: $plyr-menu-item-arrow-color;
-          right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
+          border-left-color: menus.$plyr-menu-item-arrow-color;
+          right: calc((#{controls.$plyr-control-padding} * 1.5) - #{menus.$plyr-menu-item-arrow-size});
         }
 
         &.plyr__tab-focus::after,
@@ -109,25 +114,25 @@
       }
 
       &--back {
-        font-weight: $plyr-font-weight-regular;
-        margin: $plyr-control-padding;
-        margin-bottom: calc(#{$plyr-control-padding} / 2);
-        padding-left: calc(#{$plyr-control-padding} * 4);
+        font-weight: type.$plyr-font-weight-regular;
+        margin: controls.$plyr-control-padding;
+        margin-bottom: calc(#{controls.$plyr-control-padding} / 2);
+        padding-left: calc(#{controls.$plyr-control-padding} * 4);
         position: relative;
-        width: calc(100% - (#{$plyr-control-padding} * 2));
+        width: calc(100% - (#{controls.$plyr-control-padding} * 2));
 
         &::after {
-          border-right-color: $plyr-menu-item-arrow-color;
-          left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
+          border-right-color: menus.$plyr-menu-item-arrow-color;
+          left: calc((#{controls.$plyr-control-padding} * 1.5) - #{menus.$plyr-menu-item-arrow-size});
         }
 
         &::before {
-          background: $plyr-menu-back-border-color;
-          box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
+          background: menus.$plyr-menu-back-border-color;
+          box-shadow: 0 1px 0 menus.$plyr-menu-back-border-shadow-color;
           content: '';
           height: 1px;
           left: 0;
-          margin-top: calc(#{$plyr-control-padding} / 2);
+          margin-top: calc(#{controls.$plyr-control-padding} / 2);
           overflow: hidden;
           position: absolute;
           right: 0;
@@ -142,7 +147,7 @@
     }
 
     .plyr__control[role='menuitemradio'] {
-      padding-left: $plyr-control-padding;
+      padding-left: controls.$plyr-control-padding;
 
       &::before,
       &::after {
@@ -155,7 +160,7 @@
         display: block;
         flex-shrink: 0;
         height: 16px;
-        margin-right: $plyr-control-spacing;
+        margin-right: controls.$plyr-control-spacing;
         transition: all 0.3s ease;
         width: 16px;
       }
@@ -174,7 +179,7 @@
 
       &[aria-checked='true'] {
         &::before {
-          background: $plyr-control-toggle-checked-background;
+          background: controls.$plyr-control-toggle-checked-background;
         }
         &::after {
           opacity: 1;
@@ -184,7 +189,7 @@
 
       &.plyr__tab-focus::before,
       &:hover::before {
-        background: rgba($plyr-color-gray-900, 0.1);
+        background: rgba(colors.$plyr-color-gray-900, 0.1);
       }
     }
 
@@ -193,9 +198,9 @@
       align-items: center;
       display: flex;
       margin-left: auto;
-      margin-right: calc((#{$plyr-control-padding} - 2) * -1);
+      margin-right: calc((#{controls.$plyr-control-padding} - 2) * -1);
       overflow: hidden;
-      padding-left: calc(#{$plyr-control-padding} * 3.5);
+      padding-left: calc(#{controls.$plyr-control-padding} * 3.5);
       pointer-events: none;
     }
   }

package/src/sass/components/progress.scss

@@ -1,9 +1,13 @@
+@use "settings/progress";
+@use "settings/sliders";
+@use "settings/type";
+
 // --------------------------------------------------------------
 // Playback progress
 // --------------------------------------------------------------
 
 // Offset the range thumb in order to be able to calculate the relative progress (#954)
-$plyr-progress-offset: $plyr-range-thumb-height;
+$plyr-progress-offset: sliders.$plyr-range-thumb-height;
 
 .plyr__progress {
   left: calc(#{$plyr-progress-offset} * 0.5);
@@ -24,7 +28,7 @@ $plyr-progress-offset: $plyr-range-thumb-height;
 
   // Seek tooltip to show time
   .plyr__tooltip {
-    font-size: $plyr-font-size-time;
+    font-size: type.$plyr-font-size-time;
     left: 0;
   }
 }
@@ -34,9 +38,9 @@ $plyr-progress-offset: $plyr-range-thumb-height;
   background: transparent;
   border: 0;
   border-radius: 100px;
-  height: $plyr-range-track-height;
+  height: sliders.$plyr-range-track-height;
   left: 0;
-  margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
+  margin-top: calc((#{sliders.$plyr-range-track-height} / 2) * -1);
   padding: 0;
   position: absolute;
   top: 50%;
@@ -48,7 +52,7 @@ $plyr-progress-offset: $plyr-range-thumb-height;
   &::-webkit-progress-value {
     background: currentColor;
     border-radius: 100px;
-    min-width: $plyr-range-track-height;
+    min-width: sliders.$plyr-range-track-height;
     transition: width 0.2s ease;
   }
 
@@ -56,7 +60,7 @@ $plyr-progress-offset: $plyr-range-thumb-height;
   &::-moz-progress-bar {
     background: currentColor;
     border-radius: 100px;
-    min-width: $plyr-range-track-height;
+    min-width: sliders.$plyr-range-track-height;
     transition: width 0.2s ease;
   }
 
@@ -72,23 +76,23 @@ $plyr-progress-offset: $plyr-range-thumb-height;
   animation: plyr-progress 1s linear infinite;
   background-image: linear-gradient(
     -45deg,
-    $plyr-progress-loading-background 25%,
+    progress.$plyr-progress-loading-background 25%,
     transparent 25%,
     transparent 50%,
-    $plyr-progress-loading-background 50%,
-    $plyr-progress-loading-background 75%,
+    progress.$plyr-progress-loading-background 50%,
+    progress.$plyr-progress-loading-background 75%,
     transparent 75%,
     transparent
   );
   background-repeat: repeat-x;
-  background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
+  background-size: progress.$plyr-progress-loading-size progress.$plyr-progress-loading-size;
   color: transparent;
 }
 
 .plyr--video.plyr--loading .plyr__progress__buffer {
-  background-color: $plyr-video-progress-buffered-background;
+  background-color: progress.$plyr-video-progress-buffered-background;
 }
 
 .plyr--audio.plyr--loading .plyr__progress__buffer {
-  background-color: $plyr-audio-progress-buffered-background;
+  background-color: progress.$plyr-audio-progress-buffered-background;
 }

package/src/sass/components/sliders.scss

@@ -1,3 +1,7 @@
+@use "lib/css-vars";
+@use "lib/mixins";
+@use "settings/sliders";
+
 // --------------------------------------------------------------
 // Slider inputs - <input type="range">
 // --------------------------------------------------------------
@@ -7,60 +11,60 @@
   -webkit-appearance: none; /* stylelint-disable-line */
   background: transparent;
   border: 0;
-  border-radius: calc(#{$plyr-range-thumb-height} * 2);
+  border-radius: calc(#{sliders.$plyr-range-thumb-height} * 2);
   // `color` property is used in JS to populate lower fill for WebKit
-  color: $plyr-range-fill-background;
+  color: sliders.$plyr-range-fill-background;
   display: block;
-  height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
+  height: calc((#{sliders.$plyr-range-thumb-active-shadow-width} * 2) + #{sliders.$plyr-range-thumb-height});
   margin: 0;
   padding: 0;
   transition: box-shadow 0.3s ease;
   width: 100%;
 
   &::-webkit-slider-runnable-track {
-    @include plyr-range-track();
-    background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
+    @include mixins.plyr-range-track();
+    background-image: linear-gradient(to right, currentColor css-vars.var(--value, 0%), transparent css-vars.var(--value, 0%));
   }
 
   &::-webkit-slider-thumb {
-    @include plyr-range-thumb();
+    @include mixins.plyr-range-thumb();
     -webkit-appearance: none; /* stylelint-disable-line */
-    margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
+    margin-top: calc(((#{sliders.$plyr-range-thumb-height} - #{sliders.$plyr-range-track-height}) / 2) * -1);
   }
 
   // Mozilla
   &::-moz-range-track {
-    @include plyr-range-track();
+    @include mixins.plyr-range-track();
   }
 
   &::-moz-range-thumb {
-    @include plyr-range-thumb();
+    @include mixins.plyr-range-thumb();
   }
 
   &::-moz-range-progress {
     background: currentColor;
-    border-radius: calc(#{$plyr-range-track-height} / 2);
-    height: $plyr-range-track-height;
+    border-radius: calc(#{sliders.$plyr-range-track-height} / 2);
+    height: sliders.$plyr-range-track-height;
   }
 
   // Microsoft
   &::-ms-track {
-    @include plyr-range-track();
+    @include mixins.plyr-range-track();
     color: transparent;
   }
 
   &::-ms-fill-upper {
-    @include plyr-range-track();
+    @include mixins.plyr-range-track();
   }
 
   &::-ms-fill-lower {
-    @include plyr-range-track();
+    @include mixins.plyr-range-track();
 
     background: currentColor;
   }
 
   &::-ms-thumb {
-    @include plyr-range-thumb();
+    @include mixins.plyr-range-thumb();
     // For some reason, Edge uses the -webkit margin above
     margin-top: 0;
   }
@@ -80,15 +84,15 @@
 
   &.plyr__tab-focus {
     &::-webkit-slider-runnable-track {
-      @include plyr-tab-focus();
+      @include mixins.plyr-tab-focus();
     }
 
     &::-moz-range-track {
-      @include plyr-tab-focus();
+      @include mixins.plyr-tab-focus();
     }
 
     &::-ms-track {
-      @include plyr-tab-focus();
+      @include mixins.plyr-tab-focus();
     }
   }
 }

package/src/sass/components/times.scss

@@ -1,9 +1,13 @@
+@use "settings/breakpoints";
+@use "settings/controls";
+@use "settings/type";
+
 // --------------------------------------------------------------
 // Time
 // --------------------------------------------------------------
 
 .plyr__time {
-  font-size: $plyr-font-size-time;
+  font-size: type.$plyr-font-size-time;
 }
 
 // Media duration hidden on small screens
@@ -11,10 +15,10 @@
   // Add a slash in before
   &::before {
     content: '\2044';
-    margin-right: $plyr-control-spacing;
+    margin-right: controls.$plyr-control-spacing;
   }
 
-  @media (max-width: calc(#{$plyr-bp-md} - 1)) {
+  @media (max-width: calc(#{breakpoints.$plyr-bp-md} - 1)) {
     display: none;
   }
 }