@gcorevideo/player 2.20.21 → 2.21.1

package/src/plugins/media-control/MediaControl.ts

@@ -27,7 +27,6 @@ import { ZeptoResult } from '../../types.js'
 import { getPageX, isFullscreen } from '../utils.js'
 
 import '../../../assets/media-control/media-control.scss'
-import '../../../assets/media-control/plugins.scss'
 
 import mediaControlHTML from '../../../assets/media-control/media-control.ejs'
 import playIcon from '../../../assets/icons/new/play.svg'
@@ -44,7 +43,6 @@ import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg'
  */
 export type MediaControlElement =
   | 'audioTracksSelector'
-  | 'bottomGear' // an alias of gear
   | 'clipText'
   | 'gear'
   | 'pip'
@@ -143,8 +141,6 @@ export class MediaControl extends UICorePlugin {
 
   private $audioTracksSelector: ZeptoResult | null = null
 
-  private $bottomGear: ZeptoResult | null = null
-
   private $clipText: ZeptoResult | null = null
 
   private $clipTextContainer: ZeptoResult | null = null
@@ -1059,11 +1055,6 @@ export class MediaControl extends UICorePlugin {
     this.$volumeBarBackground = this.$el.find('.bar-background[data-volume]')
     this.$volumeBarFill = this.$el.find('.bar-fill-1[data-volume]')
     this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]')
-    this.$bottomGear = this.$el.find('.media-control-bottomgear')
-    this.$pip = this.$el.find('.media-control-pip')
-    this.$audioTracksSelector = this.$el.find(
-      '.media-control-audio-tracks[data-audiotracks]',
-    )
     this.$subtitlesSelector = this.$el.find(
       '.media-control-subtitles[data-subtitles]',
     )
@@ -1086,6 +1077,7 @@ export class MediaControl extends UICorePlugin {
    * Get a media control element DOM node
    * @param name - The name of the media control element
    * @returns The DOM node to render to or extend
+   * @deprecated  Use {@link MediaControl.putElement} instead
    * @remarks
    * Use this method to render custom media control UI in a plugin
    * @example
@@ -1103,14 +1095,13 @@ export class MediaControl extends UICorePlugin {
   getElement(name: MediaControlElement): ZeptoResult | null {
     switch (name) {
       case 'audioTracksSelector':
-        return this.$audioTracksSelector
+        return null
       case 'clipText':
         return this.$clipText
-      case 'bottomGear':
       case 'gear':
-        return this.$bottomGear
+        return null
       case 'pip':
-        return this.$pip
+        return null
       case 'playbackRate':
         return this.$playbackRate
       case 'seekBarContainer':
@@ -1120,6 +1111,20 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  putElement(name: MediaControlElement, element: ZeptoResult) {
+    switch (name) {
+      case 'audioTracksSelector':
+        this.getRightPanel().append(element)
+        break
+      case 'pip':
+        this.getRightPanel().append(element)
+        break
+      case 'gear':
+        this.getRightPanel().append(element)
+        break
+    }
+  }
+
   /**
    * Get the right panel area to append custom elements to
    * @returns  ZeptoSelector of the right panel element

package/src/plugins/picture-in-picture/PictureInPicture.ts

@@ -52,6 +52,12 @@ export class PictureInPicture extends UICorePlugin {
     };
   }
 
+  override get attributes() {
+    return {
+      'class': 'media-control-pip',
+    };
+  }
+
   private get videoElement() {
     return this.core.activePlayback.el;
   }
@@ -86,7 +92,7 @@ export class PictureInPicture extends UICorePlugin {
 
     const mediaControl = this.core.getPlugin('media_control');
     if (mediaControl) {
-      mediaControl.getElement('pip')?.html(this.el);
+      mediaControl.putElement('pip', this.el);
     }
 
     return this;

package/src/plugins/source-controller/SourceController.ts

@@ -139,7 +139,6 @@ export class SourceController extends CorePlugin {
   private onCoreReady() {
     trace(`${T} onCoreReady`)
     this.core.getPlugin('error_screen')?.disable() //  TODO test
-    // this.core.getPlugin('spinner')?.showOnError()
   }
 
   private onActiveContainerChanged() {

package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts

@@ -73,8 +73,6 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
 
   private hasBuffering = false
 
-  private _showOnError = false
-
   constructor(container: Container) {
     super(container)
     this.listenTo(
@@ -94,10 +92,6 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
     this.listenTo(this.container, ClapprEvents.CONTAINER_READY, this.render)
   }
 
-  public showOnError() {
-    this._showOnError = true
-  }
-
   private onBuffering() {
     this.hasBuffering = true
     this._show()
@@ -117,12 +111,8 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
 
   private onStop() {
     trace(`${T} onStop`, {
-      showOnError: this._showOnError,
       hasFatalError: this.hasFatalError,
     })
-    // if (!(this.hasFatalError && this._showOnError)) {
-    //   this._hide()
-    // }
     this._hide()
   }
 
@@ -130,15 +120,9 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
     this.hasFatalError = e.code === PlaybackErrorCode.MediaSourceUnavailable
     trace(`${T} onError`, {
       e,
-      showOnError: this._showOnError,
       hasFatalError: this.hasFatalError,
       error: e.code,
     })
-    // if (this._showOnError) {
-    //   this._show()
-    // } else {
-    //   this._hide()
-    // }
     this._hide()
   }
 
@@ -189,18 +173,15 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
    * @internal
    */
   override render() {
-    // TODO control via sourcecontroller instead
-    const showOnStart = this.options.spinner?.showOnStart
     trace(`${T} render`, {
       buffering: this.container.buffering,
-      showOnStart,
     })
     this.$el.html(this.template())
     this.el.firstElementChild?.addEventListener('animationiteration', () => {
       this.trigger(SpinnerEvents.SYNC)
     })
     this.container.$el.append(this.$el[0])
-    if (showOnStart || this.container.buffering) {
+    if (this.container.buffering) {
       this._show()
     } else {
       this._hide()

package/src/testUtils.ts

@@ -199,6 +199,8 @@ export function createMockMediaControl(core: any) {
   // @ts-ignore
   mediaControl.getElement = vi.fn().mockImplementation((name) => elements[name])
   // @ts-ignore
+  mediaControl.putElement = vi.fn()
+  // @ts-ignore
   mediaControl.getLeftPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-left-panel'))
   // @ts-ignore
   mediaControl.getRightPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-right-panel'))

package/src/typings/globals.d.ts

@@ -2,6 +2,25 @@ declare interface HTMLVideoElement {
     webkitDisplayingFullscreen?: boolean;
 }
 
+declare interface HTMLMediaElement {
+    audioTracks?: AudioTrackList;
+}
+
+declare interface AudioTrackW3C {
+    readonly id: string;
+    enabled: boolean;
+    readonly kind: string;
+    readonly label: string;
+    readonly language: string;
+    readonly sourceBuffer: SourceBuffer | null;
+}
+
+declare interface AudioTrackList {
+    getTrackById(id: string): AudioTrackW3C | null;
+    length: number;
+    [index: number]: AudioTrackW3C;
+}
+
 declare module "*.css";
 declare module "*.scss";
 declare module "*.svg";

package/temp/player.api.json

@@ -175,7 +175,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@gcorevideo/player!AudioSelector:class",
-          "docComment": "/**\n * `PLUGIN` that adds an audio track selector to the media control UI.\n *\n * @beta\n */\n",
+          "docComment": "/**\n * `PLUGIN` that makes possible to switch audio tracks via the media control UI.\n *\n * @remarks\n *\n * The plugin is activated when there are multiple audio tracks available. The plugin adds a button showing the current audio track and a dropdown to switch to another audio track. Depends on:\n *\n * - {@link MediaControl}\n *\n * @beta\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -196,145 +196,7 @@
           "isAbstract": false,
           "name": "AudioSelector",
           "preserveMemberOrder": false,
-          "members": [
-            {
-              "kind": "Method",
-              "canonicalReference": "@gcorevideo/player!AudioSelector#highlightCurrentTrack:member(1)",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "highlightCurrentTrack(): "
-                },
-                {
-                  "kind": "Content",
-                  "text": "void"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isStatic": false,
-              "returnTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "releaseTag": "Beta",
-              "isProtected": false,
-              "overloadIndex": 1,
-              "parameters": [],
-              "isOptional": false,
-              "isAbstract": false,
-              "name": "highlightCurrentTrack"
-            },
-            {
-              "kind": "Method",
-              "canonicalReference": "@gcorevideo/player!AudioSelector#startTrackSwitch:member(1)",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "startTrackSwitch(): "
-                },
-                {
-                  "kind": "Content",
-                  "text": "void"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isStatic": false,
-              "returnTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "releaseTag": "Beta",
-              "isProtected": false,
-              "overloadIndex": 1,
-              "parameters": [],
-              "isOptional": false,
-              "isAbstract": false,
-              "name": "startTrackSwitch"
-            },
-            {
-              "kind": "Method",
-              "canonicalReference": "@gcorevideo/player!AudioSelector#updateCurrentTrack:member(1)",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "updateCurrentTrack(e: "
-                },
-                {
-                  "kind": "Reference",
-                  "text": "HlsEvents.AUDIO_TRACK_SWITCHED",
-                  "canonicalReference": "hls.js!Events.AUDIO_TRACK_SWITCHED:member"
-                },
-                {
-                  "kind": "Content",
-                  "text": ", info: "
-                },
-                {
-                  "kind": "Reference",
-                  "text": "AudioTrackSwitchedData",
-                  "canonicalReference": "hls.js!AudioTrackSwitchedData:interface"
-                },
-                {
-                  "kind": "Content",
-                  "text": " | "
-                },
-                {
-                  "kind": "Reference",
-                  "text": "AudioTrackLoadedData",
-                  "canonicalReference": "hls.js!AudioTrackLoadedData:interface"
-                },
-                {
-                  "kind": "Content",
-                  "text": "): "
-                },
-                {
-                  "kind": "Content",
-                  "text": "void"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isStatic": false,
-              "returnTypeTokenRange": {
-                "startIndex": 7,
-                "endIndex": 8
-              },
-              "releaseTag": "Beta",
-              "isProtected": false,
-              "overloadIndex": 1,
-              "parameters": [
-                {
-                  "parameterName": "e",
-                  "parameterTypeTokenRange": {
-                    "startIndex": 1,
-                    "endIndex": 2
-                  },
-                  "isOptional": false
-                },
-                {
-                  "parameterName": "info",
-                  "parameterTypeTokenRange": {
-                    "startIndex": 3,
-                    "endIndex": 6
-                  },
-                  "isOptional": false
-                }
-              ],
-              "isOptional": false,
-              "isAbstract": false,
-              "name": "updateCurrentTrack"
-            }
-          ],
+          "members": [],
           "extendsTokenRange": {
             "startIndex": 1,
             "endIndex": 2
@@ -2837,7 +2699,7 @@
             {
               "kind": "Method",
               "canonicalReference": "@gcorevideo/player!MediaControl#getElement:member(1)",
-              "docComment": "/**\n * Get a media control element DOM node\n *\n * @remarks\n *\n * Use this method to render custom media control UI in a plugin\n *\n * @param name - The name of the media control element\n *\n * @returns The DOM node to render to or extend\n *\n * @example\n * ```ts\n * class MyPlugin extends UICorePlugin {\n *   override render() {\n *     const mediaControl = this.core.getPlugin('media_control')\n *     const clipText = mediaControl.getElement('clipText')\n *     clipText?.el.text('Here we go')\n *     return this\n *   }\n * }\n * ```\n *\n */\n",
+              "docComment": "/**\n * Get a media control element DOM node\n *\n * @remarks\n *\n * Use this method to render custom media control UI in a plugin\n *\n * @deprecated\n *\n * Use {@link MediaControl.putElement} instead\n *\n * @param name - The name of the media control element\n *\n * @returns The DOM node to render to or extend\n *\n * @example\n * ```ts\n * class MyPlugin extends UICorePlugin {\n *   override render() {\n *     const mediaControl = this.core.getPlugin('media_control')\n *     const clipText = mediaControl.getElement('clipText')\n *     clipText?.el.text('Here we go')\n *     return this\n *   }\n * }\n * ```\n *\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -2980,6 +2842,72 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@gcorevideo/player!MediaControl#putElement:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "putElement(name: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "MediaControlElement",
+                  "canonicalReference": "@gcorevideo/player!MediaControlElement:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ", element: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "ZeptoResult",
+                  "canonicalReference": "@gcorevideo/player!ZeptoResult:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 5,
+                "endIndex": 6
+              },
+              "releaseTag": "Beta",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "name",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": false
+                },
+                {
+                  "parameterName": "element",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 3,
+                    "endIndex": 4
+                  },
+                  "isOptional": false
+                }
+              ],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "putElement"
+            },
             {
               "kind": "Method",
               "canonicalReference": "@gcorevideo/player!MediaControl#setInitialVolume:member(1)",
@@ -3123,7 +3051,7 @@
             },
             {
               "kind": "Content",
-              "text": "'audioTracksSelector' | 'bottomGear' | 'clipText' | 'gear' | 'pip' | 'playbackRate' | 'seekBarContainer' | 'subtitlesSelector'"
+              "text": "'audioTracksSelector' | 'clipText' | 'gear' | 'pip' | 'playbackRate' | 'seekBarContainer' | 'subtitlesSelector'"
             },
             {
               "kind": "Content",
@@ -3602,7 +3530,38 @@
           "isAbstract": false,
           "name": "PictureInPicture",
           "preserveMemberOrder": false,
-          "members": [],
+          "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@gcorevideo/player!PictureInPicture#attributes:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "get attributes(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "{\n        class: string;\n    }"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": true,
+              "isOptional": false,
+              "releaseTag": "Beta",
+              "name": "attributes",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            }
+          ],
           "extendsTokenRange": {
             "startIndex": 1,
             "endIndex": 2