ddplayer 1.0.0 → 25.12.1

package/src/sass/settings/controls.scss

@@ -1,33 +1,36 @@
+@use "lib/css-vars";
+@use "settings/colors";
+
 // ==========================================================================
 // Controls
 // ==========================================================================
 
-$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
-$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
+$plyr-control-icon-size: css-vars.var(--plyr-control-icon-size, 18px) !default;
+$plyr-control-spacing: css-vars.var(--plyr-control-spacing, 10px) !default;
 $plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);
-$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;
-$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
+$plyr-control-padding: css-vars.var(--plyr-control-padding, $plyr-control-padding) !default;
+$plyr-control-radius: css-vars.var(--plyr-control-radius, 3px) !default;
 
-$plyr-control-toggle-checked-background: var(
+$plyr-control-toggle-checked-background: css-vars.var(
   --plyr-control-toggle-checked-background,
-  var(--plyr-color-main, $plyr-color-main)
+  css-vars.var(--plyr-color-main, colors.$plyr-color-main)
 ) !default;
 
-$plyr-video-controls-background: var(
+$plyr-video-controls-background: css-vars.var(
   --plyr-video-controls-background,
   linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
 ) !default;
-$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;
-$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;
-$plyr-video-control-background-hover: var(
+$plyr-video-control-color: css-vars.var(--plyr-video-control-color, #fff) !default;
+$plyr-video-control-color-hover: css-vars.var(--plyr-video-control-color-hover, #fff) !default;
+$plyr-video-control-background-hover: css-vars.var(
   --plyr-video-control-background-hover,
-  var(--plyr-color-main, $plyr-color-main)
+  css-vars.var(--plyr-color-main, colors.$plyr-color-main)
 ) !default;
 
-$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
-$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
-$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
-$plyr-audio-control-background-hover: var(
+$plyr-audio-controls-background: css-vars.var(--plyr-audio-controls-background, #fff) !default;
+$plyr-audio-control-color: css-vars.var(--plyr-audio-control-color, colors.$plyr-color-gray-700) !default;
+$plyr-audio-control-color-hover: css-vars.var(--plyr-audio-control-color-hover, #fff) !default;
+$plyr-audio-control-background-hover: css-vars.var(
   --plyr-audio-control-background-hover,
-  var(--plyr-color-main, $plyr-color-main)
+  css-vars.var(--plyr-color-main, colors.$plyr-color-main)
 ) !default;

package/src/sass/settings/cosmetics.scss

@@ -1,5 +1,8 @@
+@use "lib/css-vars";
+@use "settings/colors";
+
 // ==========================================================================
 // Cosmetic
 // ==========================================================================
 
-$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;
+$plyr-tab-focus-color: css-vars.var(--plyr-tab-focus-color, css-vars.var(--plyr-color-main, colors.$plyr-color-main)) !default;

package/src/sass/settings/menus.scss

@@ -1,15 +1,18 @@
+@use "lib/css-vars";
+@use "settings/colors";
+
 // ==========================================================================
 // Menus
 // ==========================================================================
 
-$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
-$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
-$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
-$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
-$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
+$plyr-menu-background: css-vars.var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
+$plyr-menu-radius: css-vars.var(--plyr-menu-radius, 4px) !default;
+$plyr-menu-color: css-vars.var(--plyr-menu-color, colors.$plyr-color-gray-700) !default;
+$plyr-menu-shadow: css-vars.var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
+$plyr-menu-arrow-size: css-vars.var(--plyr-menu-arrow-size, 4px) !default;
 
-$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
-$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
+$plyr-menu-item-arrow-size: css-vars.var(--plyr-menu-item-arrow-size, 4px) !default;
+$plyr-menu-item-arrow-color: css-vars.var(--plyr-menu-arrow-color, colors.$plyr-color-gray-500) !default;
 
-$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
-$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;
+$plyr-menu-back-border-color: css-vars.var(--plyr-menu-back-border-color, colors.$plyr-color-gray-100) !default;
+$plyr-menu-back-border-shadow-color: css-vars.var(--plyr-menu-back-border-shadow-color, #fff) !default;

package/src/sass/settings/progress.scss

@@ -1,14 +1,17 @@
+@use "lib/css-vars";
+@use "settings/colors";
+
 // ==========================================================================
 // Progress
 // ==========================================================================
 
 // Loading
-$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;
-$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;
+$plyr-progress-loading-size: css-vars.var(--plyr-progress-loading-size, 25px) !default;
+$plyr-progress-loading-background: css-vars.var(--plyr-progress-loading-background, rgba(colors.$plyr-color-gray-900, 0.6)) !default;
 
 // Buffered
-$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
-$plyr-audio-progress-buffered-background: var(
+$plyr-video-progress-buffered-background: css-vars.var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
+$plyr-audio-progress-buffered-background: css-vars.var(
   --plyr-audio-progress-buffered-background,
-  rgba($plyr-color-gray-200, 0.6)
+  rgba(colors.$plyr-color-gray-200, 0.6)
 ) !default;

package/src/sass/settings/sliders.scss

@@ -1,40 +1,44 @@
+@use "lib/css-vars";
+@use "settings/colors";
+@use "settings/progress";
+
 // ==========================================================================
 // Sliders
 // ==========================================================================
 
 // Thumb
-$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
-$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
-$plyr-range-thumb-shadow: var(
+$plyr-range-thumb-height: css-vars.var(--plyr-range-thumb-height, 13px) !default;
+$plyr-range-thumb-background: css-vars.var(--plyr-range-thumb-background, #fff) !default;
+$plyr-range-thumb-shadow: css-vars.var(
   --plyr-range-thumb-shadow,
-  0 1px 1px rgba($plyr-color-gray-900, 0.15),
-  0 0 0 1px rgba($plyr-color-gray-900, 0.2)
+  0 1px 1px rgba(colors.$plyr-color-gray-900, 0.15),
+  0 0 0 1px rgba(colors.$plyr-color-gray-900, 0.2)
 ) !default;
 
 // Active state
-$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
+$plyr-range-thumb-active-shadow-width: css-vars.var(--plyr-range-thumb-active-shadow-width, 3px) !default;
 
 // Track
-$plyr-range-track-height: var(--plyr-range-track-height, 3px) !default;
+$plyr-range-track-height: css-vars.var(--plyr-range-track-height, 3px) !default;
 
 // Fill
-$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
+$plyr-range-fill-background: css-vars.var(--plyr-range-fill-background, css-vars.var(--plyr-color-main, colors.$plyr-color-main)) !default;
 
 // Type specific
-$plyr-video-range-track-background: var(
+$plyr-video-range-track-background: css-vars.var(
   --plyr-video-range-track-background,
-  $plyr-video-progress-buffered-background
+  progress.$plyr-video-progress-buffered-background
 ) !default;
-$plyr-video-range-thumb-active-shadow-color: var(
+$plyr-video-range-thumb-active-shadow-color: css-vars.var(
   --plyr-audio-range-thumb-active-shadow-color,
   rgba(#fff, 0.5)
 ) !default;
 
-$plyr-audio-range-track-background: var(
+$plyr-audio-range-track-background: css-vars.var(
   --plyr-audio-range-track-background,
-  $plyr-audio-progress-buffered-background
+  progress.$plyr-audio-progress-buffered-background
 ) !default;
-$plyr-audio-range-thumb-active-shadow-color: var(
+$plyr-audio-range-thumb-active-shadow-color: css-vars.var(
   --plyr-audio-range-thumb-active-shadow-color,
-  rgba($plyr-color-gray-900, 0.1)
+  rgba(colors.$plyr-color-gray-900, 0.1)
 ) !default;

package/src/sass/settings/tooltips.scss

@@ -1,11 +1,15 @@
+@use "lib/css-vars";
+@use "settings/colors";
+@use "settings/controls";
+
 // ==========================================================================
 // Tooltips
 // ==========================================================================
 
-$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
-$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
-$plyr-tooltip-padding: calc(#{$plyr-control-spacing} / 2);
-$plyr-tooltip-padding: var(--plyr-tooltip-padding, $plyr-tooltip-padding) !default;
-$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
-$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
-$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;
+$plyr-tooltip-background: css-vars.var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
+$plyr-tooltip-color: css-vars.var(--plyr-tooltip-color, colors.$plyr-color-gray-700) !default;
+$plyr-tooltip-padding: calc(#{controls.$plyr-control-spacing} / 2);
+$plyr-tooltip-padding: css-vars.var(--plyr-tooltip-padding, $plyr-tooltip-padding) !default;
+$plyr-tooltip-arrow-size: css-vars.var(--plyr-tooltip-arrow-size, 4px) !default;
+$plyr-tooltip-radius: css-vars.var(--plyr-tooltip-radius, 3px) !default;
+$plyr-tooltip-shadow: css-vars.var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;

package/src/sass/settings/type.scss

@@ -1,20 +1,22 @@
+@use "lib/css-vars";
+
 // ==========================================================================
 // Typography
 // ==========================================================================
 
 $plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
-$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
-$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
-$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
-$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
+$plyr-font-size-base: css-vars.var(--plyr-font-size-base, 15px) !default;
+$plyr-font-size-small: css-vars.var(--plyr-font-size-small, 13px) !default;
+$plyr-font-size-large: css-vars.var(--plyr-font-size-large, 18px) !default;
+$plyr-font-size-xlarge: css-vars.var(--plyr-font-size-xlarge, 21px) !default;
 
-$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
-$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
-$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
+$plyr-font-size-time: css-vars.var(--plyr-font-size-time, $plyr-font-size-small) !default;
+$plyr-font-size-menu: css-vars.var(--plyr-font-size-menu, $plyr-font-size-small) !default;
+$plyr-font-size-badge: css-vars.var(--plyr-font-size-badge, 9px) !default;
 
-$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
-$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
+$plyr-font-weight-regular: css-vars.var(--plyr-font-weight-regular, 400) !default;
+$plyr-font-weight-bold: css-vars.var(--plyr-font-weight-bold, 600) !default;
 
-$plyr-line-height: var(--plyr-line-height, 1.7) !default;
+$plyr-line-height: css-vars.var(--plyr-line-height, 1.7) !default;
 
-$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;
+$plyr-font-smoothing: css-vars.var(--plyr-font-smoothing, false) !default;

package/src/sass/states/fullscreen.scss

@@ -1,29 +1,31 @@
+@use "lib/mixins";
+
 // --------------------------------------------------------------
 // Fullscreen
 // --------------------------------------------------------------
 
 .plyr:fullscreen {
-  @include plyr-fullscreen-active();
+  @include mixins.plyr-fullscreen-active();
 }
 
 /* stylelint-disable-next-line */
 .plyr:-webkit-full-screen {
-  @include plyr-fullscreen-active();
+  @include mixins.plyr-fullscreen-active();
 }
 
 /* stylelint-disable-next-line */
 .plyr:-moz-full-screen {
-  @include plyr-fullscreen-active();
+  @include mixins.plyr-fullscreen-active();
 }
 
 /* stylelint-disable-next-line */
 .plyr:-ms-fullscreen {
-  @include plyr-fullscreen-active();
+  @include mixins.plyr-fullscreen-active();
 }
 
 // Fallback for unsupported browsers
 .plyr--fullscreen-fallback {
-  @include plyr-fullscreen-active();
+  @include mixins.plyr-fullscreen-active();
   bottom: 0;
   display: block;
   left: 0;

package/src/sass/types/audio.scss

@@ -1,3 +1,8 @@
+@use "lib/mixins";
+@use "settings/controls";
+@use "settings/progress";
+@use "settings/sliders";
+
 // --------------------------------------------------------------
 // Audio styles
 // --------------------------------------------------------------
@@ -9,10 +14,10 @@
 
 // Controls container
 .plyr--audio .plyr__controls {
-  background: $plyr-audio-controls-background;
+  background: controls.$plyr-audio-controls-background;
   border-radius: inherit;
-  color: $plyr-audio-control-color;
-  padding: $plyr-control-spacing;
+  color: controls.$plyr-audio-control-color;
+  padding: controls.$plyr-control-spacing;
 }
 
 // Control elements
@@ -20,42 +25,42 @@
   &.plyr__tab-focus,
   &:hover,
   &[aria-expanded='true'] {
-    background: $plyr-audio-control-background-hover;
-    color: $plyr-audio-control-color-hover;
+    background: controls.$plyr-audio-control-background-hover;
+    color: controls.$plyr-audio-control-color-hover;
   }
 }
 
 // Range inputs
 .plyr--full-ui.plyr--audio input[type='range'] {
   &::-webkit-slider-runnable-track {
-    background-color: $plyr-audio-range-track-background;
+    background-color: sliders.$plyr-audio-range-track-background;
   }
 
   &::-moz-range-track {
-    background-color: $plyr-audio-range-track-background;
+    background-color: sliders.$plyr-audio-range-track-background;
   }
 
   &::-ms-track {
-    background-color: $plyr-audio-range-track-background;
+    background-color: sliders.$plyr-audio-range-track-background;
   }
 
   // Pressed styles
   &:active {
     &::-webkit-slider-thumb {
-      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
+      @include mixins.plyr-range-thumb-active(sliders.$plyr-audio-range-thumb-active-shadow-color);
     }
 
     &::-moz-range-thumb {
-      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
+      @include mixins.plyr-range-thumb-active(sliders.$plyr-audio-range-thumb-active-shadow-color);
     }
 
     &::-ms-thumb {
-      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
+      @include mixins.plyr-range-thumb-active(sliders.$plyr-audio-range-thumb-active-shadow-color);
     }
   }
 }
 
 // Progress
 .plyr--audio .plyr__progress__buffer {
-  color: $plyr-audio-progress-buffered-background;
+  color: progress.$plyr-audio-progress-buffered-background;
 }

package/src/sass/types/video.scss

@@ -1,3 +1,10 @@
+@use "lib/functions";
+@use "lib/mixins";
+@use "settings/breakpoints";
+@use "settings/controls";
+@use "settings/progress";
+@use "settings/sliders";
+
 // --------------------------------------------------------------
 // Video styles
 // --------------------------------------------------------------
@@ -22,12 +29,12 @@
 }
 
 // Default to 16:9 ratio but this is set by JavaScript based on config
-$embed-padding: ((100 / 16) * 9);
+$embed-padding: calc((100 / 16) * 9);
 
 .plyr__video-embed,
 .plyr__video-wrapper--fixed-ratio {
   height: 0;
-  padding-bottom: to-percentage($embed-padding);
+  padding-bottom: functions.to-percentage($embed-padding);
 }
 
 .plyr__video-embed iframe,
@@ -41,11 +48,11 @@ $embed-padding: ((100 / 16) * 9);
 // If the full custom UI is supported
 .plyr--full-ui .plyr__video-embed {
   $height: 240;
-  $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+  $offset: functions.to-percentage(calc(($height - $embed-padding) / ($height / 50)));
 
   // Only used for Vimeo
   > .plyr__video-embed__container {
-    padding-bottom: to-percentage($height);
+    padding-bottom: functions.to-percentage($height);
     position: relative;
     transform: translateY(-$offset);
   }
@@ -53,22 +60,22 @@ $embed-padding: ((100 / 16) * 9);
 
 // Controls container
 .plyr--video .plyr__controls {
-  background: $plyr-video-controls-background;
+  background: controls.$plyr-video-controls-background;
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
   bottom: 0;
-  color: $plyr-video-control-color;
+  color: controls.$plyr-video-control-color;
   left: 0;
-  padding: calc(#{$plyr-control-spacing} / 2);
-  padding-top: calc(#{$plyr-control-spacing} * 2);
+  padding: calc(#{controls.$plyr-control-spacing} / 2);
+  padding-top: calc(#{controls.$plyr-control-spacing} * 2);
   position: absolute;
   right: 0;
   transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
   z-index: 3;
 
-  @media (min-width: $plyr-bp-sm) {
-    padding: $plyr-control-spacing;
-    padding-top: calc(#{$plyr-control-spacing} * 3.5);
+  @media (min-width: breakpoints.$plyr-bp-sm) {
+    padding: controls.$plyr-control-spacing;
+    padding-top: calc(#{controls.$plyr-control-spacing} * 3.5);
   }
 }
 
@@ -85,21 +92,21 @@ $embed-padding: ((100 / 16) * 9);
   &.plyr__tab-focus,
   &:hover,
   &[aria-expanded='true'] {
-    background: $plyr-video-control-background-hover;
-    color: $plyr-video-control-color-hover;
+    background: controls.$plyr-video-control-background-hover;
+    color: controls.$plyr-video-control-color-hover;
   }
 }
 
 // Large play button (video only)
 .plyr__control--overlaid {
-  background: $plyr-video-control-background-hover;
+  background: controls.$plyr-video-control-background-hover;
   border: 0;
   border-radius: 100%;
-  color: $plyr-video-control-color;
+  color: controls.$plyr-video-control-color;
   display: none;
   left: 50%;
   opacity: 0.9;
-  padding: calc(#{$plyr-control-spacing} * 1.5);
+  padding: calc(#{controls.$plyr-control-spacing} * 1.5);
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -130,34 +137,34 @@ $embed-padding: ((100 / 16) * 9);
 // Video range inputs
 .plyr--full-ui.plyr--video input[type='range'] {
   &::-webkit-slider-runnable-track {
-    background-color: $plyr-video-range-track-background;
+    background-color: sliders.$plyr-video-range-track-background;
   }
 
   &::-moz-range-track {
-    background-color: $plyr-video-range-track-background;
+    background-color: sliders.$plyr-video-range-track-background;
   }
 
   &::-ms-track {
-    background-color: $plyr-video-range-track-background;
+    background-color: sliders.$plyr-video-range-track-background;
   }
 
   // Pressed styles
   &:active {
     &::-webkit-slider-thumb {
-      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
+      @include mixins.plyr-range-thumb-active(sliders.$plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-moz-range-thumb {
-      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
+      @include mixins.plyr-range-thumb-active(sliders.$plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-ms-thumb {
-      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
+      @include mixins.plyr-range-thumb-active(sliders.$plyr-video-range-thumb-active-shadow-color);
     }
   }
 }
 
 // Progress
 .plyr--video .plyr__progress__buffer {
-  color: $plyr-video-progress-buffered-background;
+  color: progress.$plyr-video-progress-buffered-background;
 }

package/src/sass/utils/hidden.scss

@@ -1,3 +1,5 @@
+@use "settings/helpers";
+
 // --------------------------------------------------------------
 // Hiding content nicely
 // --------------------------------------------------------------
@@ -8,7 +10,7 @@
   overflow: hidden;
 
   // !important is not always needed
-  @if $plyr-sr-only-important {
+  @if helpers.$plyr-sr-only-important {
     border: 0 !important;
     height: 1px !important;
     padding: 0 !important;

package/src/sass/youtube.scss

@@ -1,3 +1,8 @@
+@use "components/progress";
+@use "settings/controls";
+@use "settings/sliders";
+@use "settings/type";
+
 
 .plyr__progress__buffer {
     -webkit-appearance: none; /* stylelint-disable-line */
@@ -6,7 +11,7 @@
     border-radius: 100px;
     height: 3px;
     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%;
@@ -18,7 +23,7 @@
     &::-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;
     }
   
@@ -26,7 +31,7 @@
     &::-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;
     }
   
@@ -39,16 +44,16 @@
 
 .plyr__progress {
     position: absolute;
-    left:  calc(#{$plyr-control-spacing} * 2);
-    margin-right: calc(#{$plyr-control-spacing} * 2);
-    bottom: calc(#{$plyr-control-spacing} * 4);
-    width: calc(100% - #{$plyr-control-spacing} * 4);
+    left:  calc(#{controls.$plyr-control-spacing} * 2);
+    margin-right: calc(#{controls.$plyr-control-spacing} * 2);
+    bottom: calc(#{controls.$plyr-control-spacing} * 4);
+    width: calc(100% - #{controls.$plyr-control-spacing} * 4);
   
     input[type='range'],
     &__buffer {
-      margin-left: calc(#{$plyr-progress-offset} * -0.5);
-      margin-right: calc(#{$plyr-progress-offset} * -0.5);
-      width: calc(100% + #{$plyr-progress-offset});
+      margin-left: calc(#{progress.$plyr-progress-offset} * -0.5);
+      margin-right: calc(#{progress.$plyr-progress-offset} * -0.5);
+      width: calc(100% + #{progress.$plyr-progress-offset});
     }
   
     input[type='range'] {
@@ -58,7 +63,7 @@
   
     // Seek tooltip to show time
     .plyr__tooltip {
-      font-size: $plyr-font-size-time;
+      font-size: type.$plyr-font-size-time;
       left: 0;
     }
   }

package/tasks/build.js

@@ -13,7 +13,7 @@ const babel = require('rollup-plugin-babel');
 const commonjs = require('rollup-plugin-commonjs');
 const resolve = require('rollup-plugin-node-resolve');
 // CSS
-const sass = require('gulp-sass');
+const sass = require('gulp-sass')(require('sass'));
 const postcss = require('gulp-postcss');
 const autoprefixer = require('autoprefixer');
 const clean = require('postcss-clean');
@@ -75,8 +75,8 @@ const tasks = {
 const sizeOptions = { showFiles: true, gzip: true };
 
 // Clean out /dist
-gulp.task('clean', (done) => {
-  const dirs = [paths.plyr.output, paths.demo.output].map((dir) => path.join(dir, '**/*'));
+gulp.task('clean', done => {
+  const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));
 
   // Don't delete the mp4
   dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`);
@@ -101,7 +101,7 @@ Object.entries(build.static).forEach(([filename, entry]) => {
 Object.entries(build.js).forEach(([filename, entry]) => {
   const { dist, formats, namespace, polyfill, src } = entry;
 
-  formats.forEach((format) => {
+  formats.forEach(format => {
     const name = `js:${filename}:${format}`;
     const extension = format === 'es' ? 'mjs' : 'js';
     tasks.js.push(name);

package/.travis.yml

@@ -1,12 +0,0 @@
-sudo: false
-language: node_js
-node_js:
-  - '8'
-  - '10'
-  - '12'
-  - '14'
-cache:
-  directories:
-    - node_modules
-before_install: if [[ `npm -v` != 6* ]]; then npm i -g npm@6; fi
-script: npm run build