Upgrade: : Plyr

Resources/Private/Assets/Scripts/captions.js

@@ -47,6 +47,7 @@ const captions = {
     // Inject the container
     if (!is.element(this.elements.captions)) {
       this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions));
+      this.elements.captions.setAttribute('dir', 'auto');
 
       insertAfter(this.elements.captions, this.elements.wrapper);
     }

Resources/Private/Assets/Scripts/controls.js

@@ -1715,13 +1715,17 @@ const controls = {
     if (!is.empty(this.elements.buttons)) {
       const addProperty = (button) => {
         const className = this.config.classNames.controlPressed;
+        button.setAttribute('aria-pressed', 'false');
+
         Object.defineProperty(button, 'pressed', {
+          configurable: true,
           enumerable: true,
           get() {
             return hasClass(button, className);
           },
           set(pressed = false) {
             toggleClass(button, className, pressed);
+            button.setAttribute('aria-pressed', pressed ? 'true' : 'false');
           },
         });
       };

Resources/Private/Assets/Scripts/plyr.d.ts

@@ -341,7 +341,7 @@ declare namespace Plyr {
      * id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See CONTROLS.md for more info on how the html needs to be structured.
      * Defaults to ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']
      */
-    controls?: string[] | ((id: string, seektime: number, title: string) => unknown) | Element;
+    controls?: string | string[] | ((id: string, seektime: number, title: string) => unknown) | Element;
 
     /**
      * If you're using the default controls are used then you can specify which settings to show in the menu
@@ -459,7 +459,7 @@ declare namespace Plyr {
      * Allows binding of event listeners to the controls before the default handlers. See the defaults.js for available listeners.
      * If your handler prevents default on the event (event.preventDefault()), the default handler will not fire.
      */
-    listeners?: {[key: string]: (error: PlyrEvent) => void};
+    listeners?: { [key: string]: (error: PlyrEvent) => void };
 
     /**
      * active: Toggles if captions should be active by default. language: Sets the default language to load (if available). 'auto' uses the browser language.
@@ -606,7 +606,7 @@ declare namespace Plyr {
 
   interface MarkersOptions {
     enabled: boolean;
-    points: MarkersPoints[]
+    points: MarkersPoints[];
   }
 
   export interface Elements {
@@ -700,7 +700,7 @@ declare namespace Plyr {
   }
 
   interface PlyrEvent extends CustomEvent {
-    readonly detail: {readonly plyr: Plyr};
+    readonly detail: { readonly plyr: Plyr };
   }
 
   enum YoutubeState {

Resources/Private/Assets/Scripts/plyr.js

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

Resources/Private/Assets/Scripts/plyr.polyfilled.js

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

Resources/Private/Assets/Scripts/support.js

@@ -38,6 +38,9 @@ const support = {
   // Picture-in-picture support
   // Safari & Chrome only currently
   pip: (() => {
+    // While iPhone's support picture-in-picture for some apps, seemingly Safari isn't one of them
+    // It will throw the following error when trying to enter picture-in-picture
+    // `NotSupportedError: The Picture-in-Picture mode is not supported.`
     if (browser.isIPhone) {
       return false;
     }

Resources/Private/Assets/Scripts/utils/browser.js

@@ -5,12 +5,10 @@
 
 const browser = {
   isIE: Boolean(window.document.documentMode),
-  isEdge: window.navigator.userAgent.includes('Edge'),
-  isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
-  isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
-  isIos:
-    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) ||
-    /(iPad|iPhone|iPod)/gi.test(navigator.platform),
+  isEdge: /Edge/g.test(navigator.userAgent),
+  isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/g.test(navigator.userAgent),
+  isIPhone: /iPhone|iPod/gi.test(navigator.userAgent) && navigator.maxTouchPoints > 1,
+  isIos: /iPad|iPhone|iPod/gi.test(navigator.userAgent) && navigator.maxTouchPoints > 1,
 };
 
 export default browser;

Resources/Private/Assets/Scripts/utils/is.js

@@ -9,7 +9,7 @@ const isObject = (input) => getConstructor(input) === Object;
 const isNumber = (input) => getConstructor(input) === Number && !Number.isNaN(input);
 const isString = (input) => getConstructor(input) === String;
 const isBoolean = (input) => getConstructor(input) === Boolean;
-const isFunction = (input) => getConstructor(input) === Function;
+const isFunction = (input) => typeof input === 'function';
 const isArray = (input) => Array.isArray(input);
 const isWeakMap = (input) => instanceOf(input, WeakMap);
 const isNodeList = (input) => instanceOf(input, NodeList);

Resources/Private/Assets/Styles/components/menus.scss

@@ -26,7 +26,7 @@
   &__container {
     animation: plyr-popup 0.2s ease;
     background: $plyr-menu-background;
-    border-radius: 4px;
+    border-radius: $plyr-menu-radius;
     bottom: 100%;
     box-shadow: $plyr-menu-shadow;
     color: $plyr-menu-color;
@@ -192,7 +192,7 @@
       align-items: center;
       display: flex;
       margin-left: auto;
-      margin-right: calc((#{$plyr-control-padding} - 2) * -1);
+      margin-right: calc((#{$plyr-control-padding} - 2px) * -1);
       overflow: hidden;
       padding-left: calc(#{$plyr-control-padding} * 3.5);
       pointer-events: none;

Resources/Private/Assets/Styles/components/progress.scss

@@ -27,7 +27,6 @@ $plyr-progress-offset: $plyr-range-thumb-height;
     left: 0;
     max-width: 120px;
     overflow-wrap: break-word;
-    white-space: normal;
   }
 }