ddplayer 1.0.0 → 25.12.1

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ddplayer",
-  "version": "1.0.0",
+  "version": "25.12.1",
   "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
-  "homepage": "https://plyr.io",
-  "author": "Sam Potts <sam@potts.es>",
+  "homepage": "https://github.com/leduong/ddplayer",
+  "author": "Duong Le <me@leduong.com>",
   "main": "dist/plyr.js",
   "types": "src/js/plyr.d.ts",
   "module": "dist/plyr.min.mjs",
@@ -21,12 +21,15 @@
     "HLS"
   ],
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "repository": {
     "type": "git",
-    "url": "git://github.com/sampotts/plyr.git"
+    "url": "git://github.com/leduong/ddplayer.git"
   },
   "bugs": {
-    "url": "https://github.com/sampotts/plyr/issues"
+    "url": "https://github.com/leduong/ddplayer/issues"
   },
   "browserslist": "> 1%",
   "scripts": {
@@ -38,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",
@@ -66,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",
@@ -81,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

@@ -61,7 +61,7 @@ const defaults = {
   // Sprite (for icons)
   loadSprite: true,
   iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.6.1/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.6.2/plyr.svg',
 
   // Blank video (used to prevent errors on source change)
   blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -204,16 +204,16 @@ 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: {
       sdk: 'https://player.vimeo.com/api/player.js',
       iframe: 'https://player.vimeo.com/video/{0}?{1}',
-      api: 'https://vimeo.com/api/v2/video/{0}.json',
+      api: 'https://vimeo.com/api/oembed.json?url={0}',
     },
     youtube: {
       sdk: 'https://www.youtube.com/iframe_api',

package/src/js/plugins/vimeo.js

@@ -121,21 +121,15 @@ const vimeo = {
       wrapper.appendChild(iframe);
       player.media = replaceElement(wrapper, player.media);
     }
-
+    
     // Get poster image
-    fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
-      if (is.empty(response)) {
+    fetch(format(player.config.urls.vimeo.api, src)).then(response => {
+      if (is.empty(response) || !response.thumbnail_url) {
         return;
       }
-
-      // Get the URL for thumbnail
-      const url = new URL(response[0].thumbnail_large);
-
-      // Get original image
-      url.pathname = `${url.pathname.split('_')[0]}.jpg`;
-
+      
       // Set and show poster
-      ui.setPoster.call(player, url.href).catch(() => {});
+      ui.setPoster.call(player, response.thumbnail_url).catch(() => { });
     });
 
     // Setup instance

package/src/js/plyr.d.ts

@@ -357,7 +357,7 @@ declare namespace Plyr {
     /**
      * Specify a URL or path to a blank video file used to properly cancel network requests.
      */
-    blankUrl?: string;
+    blankVideo?: string;
 
     /**
      * Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled by default in some browsers.
@@ -534,7 +534,7 @@ declare namespace Plyr {
 
   interface FullScreenOptions {
     enabled?: boolean;
-    fallback?: boolean;
+    fallback?: boolean | 'force';
     allowAudio?: boolean;
     iosNative?: boolean;
   }

package/src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.6.1
+// plyr.js v3.6.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

package/src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.6.1
+// plyr.js v3.6.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

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;
 }