@gcorevideo/player 2.24.14 → 2.25.0

package/docs/api/player.md

@@ -204,7 +204,7 @@ Description
 
 </td><td>
 
-**_(BETA)_** `PLUGIN` that provides basic playback controls UI and a foundation for developing custom UI.
+**_(BETA)_** `PLUGIN` that provides framework for building media control UI.
 
 
 </td></tr>
@@ -869,51 +869,38 @@ An ISO 639-1 language code.
 
 </td><td>
 
-**_(BETA)_** Built-in media control elements.
+**_(BETA)_** Media control element. Each element's token in the media control layout settings determines where the element is rendered.
 
 
 </td></tr>
 <tr><td>
 
-[MediaControlLayerElement](./player.mediacontrollayerelement.md)
+[MediaControlPluginSettings](./player.mediacontrolpluginsettings.md)
 
 
 </td><td>
 
-**_(BETA)_** Media control elements that appear in main layer, spanning the entire width of the player.
-
 
 </td></tr>
 <tr><td>
 
-[MediaControlLeftElement](./player.mediacontrolleftelement.md)
+[MediaControlSettings](./player.mediacontrolsettings.md)
 
 
 </td><td>
 
-**_(BETA)_** Media control elements that appear in the left area.
+**_(BETA)_** Specifies the layout of media control elements. Actual elements will be rendered according to the playback settings. Custom elements rendered by the plugins will be mounted at the specified locations.
 
 
 </td></tr>
 <tr><td>
 
-[MediaControlRightElement](./player.mediacontrolrightelement.md)
+[MediaControlSlotMountPoint](./player.mediacontrolslotmountpoint.md)
 
 
 </td><td>
 
-**_(BETA)_** Media control elements that appear in the right area.
-
-
-</td></tr>
-<tr><td>
-
-[MediaControlSettings](./player.mediacontrolsettings.md)
-
-
-</td><td>
-
-**_(BETA)_** Specifies the allowed media control elements in each area. Can be used to restrict rendered media control elements.
+**_(BETA)_** Identifies a location for mounting custom media control elements.
 
 
 </td></tr>
@@ -1064,6 +1051,17 @@ A media source to fetch the media data from
 **_(BETA)_** Configuration options for the SeekTime plugin.
 
 
+</td></tr>
+<tr><td>
+
+[StandardMediaControlElement](./player.standardmediacontrolelement.md)
+
+
+</td><td>
+
+**_(BETA)_** Built-in media control elements.
+
+
 </td></tr>
 <tr><td>
 

package/docs/api/player.mediacontrol.defaultsettings.md

@@ -0,0 +1,32 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [MediaControl](./player.mediacontrol.md) &gt; [defaultSettings](./player.mediacontrol.defaultsettings.md)
+
+## MediaControl.defaultSettings() method
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+**Signature:**
+
+```typescript
+static defaultSettings(): any;
+```
+**Returns:**
+
+any
+
+Default media control layout settings  The method can be used to change the default dashboard layout, for example, removing the standard UI elements
+
+## Example
+
+
+```ts
+const settings = MediaControl.defaultSettings()
+settings.left = settings.filter(item => item !== 'playpause' && item !== 'playstop')
+...
+new Player({
+  mediaControl: settings,
+})
+```
+

package/docs/api/player.mediacontrol.extendsettings.md

@@ -0,0 +1,77 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [MediaControl](./player.mediacontrol.md) &gt; [extendSettings](./player.mediacontrol.extendsettings.md)
+
+## MediaControl.extendSettings() method
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Extend the default media control layout settings
+
+**Signature:**
+
+```typescript
+static extendSettings(settings: Partial<MediaControlSettings>): {
+        left: string[];
+        right: string[];
+        default: string[];
+    };
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+settings
+
+
+</td><td>
+
+Partial&lt;[MediaControlSettings](./player.mediacontrolsettings.md)<!-- -->&gt;
+
+
+</td><td>
+
+Additional settings
+
+
+</td></tr>
+</tbody></table>
+**Returns:**
+
+{ left: string\[\]; right: string\[\]; default: string\[\]; }
+
+The extended settings
+
+## Remarks
+
+This method allows adding custom elements to the media control dashboard. The default settings are not modified.
+
+## Example
+
+
+```ts
+new Player({
+  mediaControl: MediaControl.extendSettings({
+    left: ['*'], // add all custom elements to the left panel
+  }),
+})
+```
+

package/docs/api/player.mediacontrol.md

@@ -7,7 +7,7 @@
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-`PLUGIN` that provides basic playback controls UI and a foundation for developing custom UI.
+`PLUGIN` that provides framework for building media control UI.
 
 **Signature:**
 
@@ -20,13 +20,15 @@ export declare class MediaControl extends UICorePlugin
 
 The methods exposed are to be used by the other plugins that extend the media control UI.
 
-Configuration options:
+Configuration options (root level)
 
-- `mediaControl`<!-- -->: [MediaControlSettings](./player.mediacontrolsettings.md) - specifies the allowed media control elements in each area
+- `hideMediaControlDelay`<!-- -->: number - specifies the delay in milliseconds before the media control UI is hidden after the last user interaction
+
+- `mediaControl`<!-- -->: [MediaControlSettings](./player.mediacontrolsettings.md) - specifies the media control dashboard layout
 
 - `persistConfig`<!-- -->: boolean - `common` option, makes the plugin persist the media control settings
 
-- `chromeless`<!-- -->: boolean
+- `chromeless`<!-- -->: boolean - `common` option, hides the media control UI
 
 ## Constructors
 
@@ -170,21 +172,23 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-[disable()](./player.mediacontrol.disable.md)
+[defaultSettings()](./player.mediacontrol.defaultsettings.md)
 
 
 </td><td>
 
+`static`
+
 
 </td><td>
 
-**_(BETA)_** Hides the media control UI
+**_(BETA)_**
 
 
 </td></tr>
 <tr><td>
 
-[disabledControlButton()](./player.mediacontrol.disabledcontrolbutton.md)
+[disable()](./player.mediacontrol.disable.md)
 
 
 </td><td>
@@ -192,7 +196,7 @@ Description
 
 </td><td>
 
-**_(BETA)_** Disable the user interaction for the control buttons
+**_(BETA)_** Hides the media control UI
 
 
 </td></tr>
@@ -212,15 +216,17 @@ Description
 </td></tr>
 <tr><td>
 
-[enableControlButton()](./player.mediacontrol.enablecontrolbutton.md)
+[extendSettings(settings)](./player.mediacontrol.extendsettings.md)
 
 
 </td><td>
 
+`static`
+
 
 </td><td>
 
-**_(BETA)_** Enable the user interaction disabled earlier
+**_(BETA)_** Extend the default media control layout settings
 
 
 </td></tr>
@@ -248,7 +254,7 @@ Description
 
 </td><td>
 
-**_(BETA)_** Get a media control element DOM node
+**_(BETA)_** Mounts a media control element at a specific location
 
 
 </td></tr>
@@ -279,6 +285,20 @@ Description
 **_(BETA)_** Set the volume
 
 
+</td></tr>
+<tr><td>
+
+[slot(name, element)](./player.mediacontrol.slot.md)
+
+
+</td><td>
+
+
+</td><td>
+
+**_(BETA)_** Mount a media control to its configured location
+
+
 </td></tr>
 <tr><td>
 

package/docs/api/player.mediacontrol.mount.md

@@ -7,12 +7,12 @@
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-Get a media control element DOM node
+Mounts a media control element at a specific location
 
 **Signature:**
 
 ```typescript
-mount(name: MediaControlElement, element: ZeptoResult): void;
+mount(name: MediaControlSlotMountPoint, element: ZeptoResult): void;
 ```
 
 ## Parameters
@@ -40,12 +40,12 @@ name
 
 </td><td>
 
-[MediaControlElement](./player.mediacontrolelement.md)
+[MediaControlSlotMountPoint](./player.mediacontrolslotmountpoint.md)
 
 
 </td><td>
 
-The name of the media control element
+The location to mount the element
 
 
 </td></tr>
@@ -61,6 +61,8 @@ element
 
 </td><td>
 
+The element to mount
+
 
 </td></tr>
 </tbody></table>
@@ -68,8 +70,6 @@ element
 
 void
 
-The DOM node to render to or extend
-
 ## Remarks
 
 Use this method to render custom media control UI in a plugin
@@ -80,8 +80,8 @@ Use this method to render custom media control UI in a plugin
 ```ts
 class MyPlugin extends UICorePlugin {
   override render() {
-    this.$el.html('<div data-clips>Here we go</div>')
-    this.core.getPlugin('media_control').mount('clips', this.$el)
+    this.$el.html('<div id="my-element" class="my-class">Here we go</div>')
+    this.core.getPlugin('media_control').mount('left', this.$el)
     return this
   }
 }

package/docs/api/player.mediacontrol.slot.md

@@ -0,0 +1,97 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [MediaControl](./player.mediacontrol.md) &gt; [slot](./player.mediacontrol.slot.md)
+
+## MediaControl.slot() method
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Mount a media control to its configured location
+
+**Signature:**
+
+```typescript
+slot(name: MediaControlElement, element: ZeptoResult): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+name
+
+
+</td><td>
+
+[MediaControlElement](./player.mediacontrolelement.md)
+
+
+</td><td>
+
+The name of the media control element
+
+
+</td></tr>
+<tr><td>
+
+element
+
+
+</td><td>
+
+[ZeptoResult](./player.zeptoresult.md)
+
+
+</td><td>
+
+The DOM node/fragment to mount
+
+
+</td></tr>
+</tbody></table>
+**Returns:**
+
+void
+
+## Remarks
+
+Media controls layout is configured via [MediaControlSettings](./player.mediacontrolsettings.md)<!-- -->. A plugin implementing custom elements on the media control dashboard, should use this method to mount the element to the correct location. The actual location is defined by the occurence of the element token in the `left`<!-- -->, `right` or `default` section of the [MediaControlSettings](./player.mediacontrolsettings.md)<!-- -->.
+
+## Example
+
+
+```ts
+class MyPlugin extends UICorePlugin {
+  override render() {
+    // mount the element where it is configured in the layout
+    this.core.getPlugin('media_control').slot('my-element', this.$el)
+  }
+}
+...
+Player.registerPlugin(MyPlugin)
+...
+// Configuration of the media control layout
+new Player({
+  mediaControl: {
+    left: ['my-element'], // the element will be mounted to the left panel
+  },
+})
+```
+

package/docs/api/player.mediacontrolelement.md

@@ -7,12 +7,15 @@
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-Built-in media control elements.
+Media control element. Each element's token in the media control layout settings determines where the element is rendered.
 
 **Signature:**
 
 ```typescript
-export type MediaControlElement = MediaControlLeftElement | MediaControlLayerElement | MediaControlRightElement;
+export type MediaControlElement = string;
 ```
-**References:** [MediaControlLeftElement](./player.mediacontrolleftelement.md)<!-- -->, [MediaControlLayerElement](./player.mediacontrollayerelement.md)<!-- -->, [MediaControlRightElement](./player.mediacontrolrightelement.md)
+
+## Remarks
+
+Standard media control elements are defined in the [StandardMediaControlElement](./player.standardmediacontrolelement.md) type. Custom media control elements can be identified by a unique token.
 

package/docs/api/player.mediacontrolpluginsettings.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [MediaControlPluginSettings](./player.mediacontrolpluginsettings.md)
+
+## MediaControlPluginSettings type
+
+**Signature:**
+
+```typescript
+export type MediaControlPluginSettings = {
+    hideMediaControlDelay?: number;
+};
+```

package/docs/api/player.mediacontrolsettings.md

@@ -7,17 +7,17 @@
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-Specifies the allowed media control elements in each area. Can be used to restrict rendered media control elements.
+Specifies the layout of media control elements. Actual elements will be rendered according to the playback settings. Custom elements rendered by the plugins will be mounted at the specified locations.
 
 **Signature:**
 
 ```typescript
 export type MediaControlSettings = {
-    left: MediaControlLeftElement[];
-    right: MediaControlRightElement[];
-    default: MediaControlLayerElement[];
+    left: MediaControlElement[];
+    right: MediaControlElement[];
+    default: MediaControlElement[];
     seekEnabled: boolean;
 };
 ```
-**References:** [MediaControlLeftElement](./player.mediacontrolleftelement.md)<!-- -->, [MediaControlRightElement](./player.mediacontrolrightelement.md)<!-- -->, [MediaControlLayerElement](./player.mediacontrollayerelement.md)
+**References:** [MediaControlElement](./player.mediacontrolelement.md)
 

package/docs/api/{player.mediacontrol.enablecontrolbutton.md → player.mediacontrolslotmountpoint.md}

@@ -1,20 +1,16 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [MediaControl](./player.mediacontrol.md) &gt; [enableControlButton](./player.mediacontrol.enablecontrolbutton.md)
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [MediaControlSlotMountPoint](./player.mediacontrolslotmountpoint.md)
 
-## MediaControl.enableControlButton() method
+## MediaControlSlotMountPoint type
 
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-Enable the user interaction disabled earlier
+Identifies a location for mounting custom media control elements.
 
 **Signature:**
 
 ```typescript
-enableControlButton(): void;
+export type MediaControlSlotMountPoint = 'root' | 'base' | 'left' | 'right' | 'center' | 'seekbar';
 ```
-**Returns:**
-
-void
-

package/docs/api/{player.mediacontrol.disabledcontrolbutton.md → player.standardmediacontrolelement.md}

@@ -1,20 +1,16 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [MediaControl](./player.mediacontrol.md) &gt; [disabledControlButton](./player.mediacontrol.disabledcontrolbutton.md)
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [StandardMediaControlElement](./player.standardmediacontrolelement.md)
 
-## MediaControl.disabledControlButton() method
+## StandardMediaControlElement type
 
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-Disable the user interaction for the control buttons
+Built-in media control elements.
 
 **Signature:**
 
 ```typescript
-disabledControlButton(): void;
+export type StandardMediaControlElement = 'duration' | 'fullscreen' | 'hd-indicator' | 'playpause' | 'playstop' | 'position' | 'seekbar' | 'volume';
 ```
-**Returns:**
-
-void
-

package/lib/plugins/clips/Clips.d.ts

@@ -62,6 +62,7 @@ export declare class Clips extends UICorePlugin {
     private onMcRender;
     private onContainerChanged;
     private playerResize;
+    private toggleCompact;
     private onTimeUpdate;
     private parseClips;
     private makeSvg;

package/lib/plugins/clips/Clips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Clips.d.ts","sourceRoot":"","sources":["../../../src/plugins/clips/Clips.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAe,MAAM,cAAc,CAAA;AAI3E,OAAO,EAAgB,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAEjE,OAAO,kCAAkC,CAAA;AAOzC;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAKD;;;;;;;;;;;GAWG;AACH,qBAAa,KAAM,SAAQ,YAAY;IACrC,OAAO,CAAC,QAAQ,CAAgC;IAEhD,OAAO,CAAC,KAAK,CAAiB;IAE9B,OAAO,CAAC,YAAY,CAAuB;IAE3C,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAsB;IAEtD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,IAAI,OAAO,WAEV;IAED,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACM,UAAU;IAUV,MAAM;IAUN,OAAO;IAQP,OAAO;IAQP,MAAM;IAKf;;;;OAIG;IACH,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS;IAK5C,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,WAAW;CAOpB"}
+{"version":3,"file":"Clips.d.ts","sourceRoot":"","sources":["../../../src/plugins/clips/Clips.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAe,MAAM,cAAc,CAAA;AAI3E,OAAO,EAAgB,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAEjE,OAAO,kCAAkC,CAAA;AAOzC;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAOD;;;;;;;;;;;GAWG;AACH,qBAAa,KAAM,SAAQ,YAAY;IACrC,OAAO,CAAC,QAAQ,CAAgC;IAEhD,OAAO,CAAC,KAAK,CAAiB;IAE9B,OAAO,CAAC,YAAY,CAAuB;IAE3C,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAsB;IAEtD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,IAAI,OAAO,WAEV;IAED,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACM,UAAU;IAUV,MAAM;IAUN,OAAO;IAQP,OAAO;IAQP,MAAM;IAKf;;;;OAIG;IACH,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS;IAK5C,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,kBAAkB;IAwB1B,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,WAAW;CAOpB"}

package/lib/plugins/clips/Clips.js

@@ -7,6 +7,7 @@ import clipsHTML from '../../../assets/clips/clips.ejs';
 const T = 'plugins.clips';
 const VERSION = '2.22.16';
 const CLAPPR_VERSION = '0.11.4';
+const COMPACT_WIDTH = 495;
 /**
  * `PLUGIN` that allows marking up the timeline of the video
  * @beta
@@ -36,7 +37,7 @@ export class Clips extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: 'media-control-clips',
+            class: 'media-control-clips gplayer-mc-clips',
         };
     }
     get version() {
@@ -104,6 +105,7 @@ export class Clips extends UICorePlugin {
     onContainerChanged() {
         trace(`${T} onContainerChanged`);
         // TODO figure out the conditions of changing the container (without destroying the previous one)
+        // probably it is the case with the MultiCamera plugin
         if (this.oldContainer) {
             this.stopListening(this.oldContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         }
@@ -113,12 +115,24 @@ export class Clips extends UICorePlugin {
             this.svgMask = null;
         }
         this.listenTo(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+        this.toggleCompact();
     }
     playerResize() {
         const duration = this.core.activeContainer.getDuration();
+        // TODO check
         if (duration) {
             this.makeSvg(duration);
         }
+        this.toggleCompact();
+    }
+    toggleCompact() {
+        const elText = this.$el.find('#gplayer-mc-clips-text');
+        if (this.core.activeContainer.el.clientWidth <= COMPACT_WIDTH) {
+            elText.addClass('compact');
+        }
+        else {
+            elText.removeClass('compact');
+        }
     }
     onTimeUpdate(event) {
         if (!this.svgMask) {
@@ -156,7 +170,7 @@ export class Clips extends UICorePlugin {
     }
     setClipText(text) {
         if (text) {
-            this.$el.show().find('#clips-text').text(text);
+            this.$el.show().find('#gplayer-mc-clips-text').text(text);
         }
         else {
             this.$el.hide();

package/lib/plugins/dvr-controls/DvrControls.js

@@ -99,7 +99,7 @@ export class DvrControls extends UICorePlugin {
         // TODO -> to MediaControl (auto hide)
         mediaControl.toggleElement('duration', false);
         mediaControl.toggleElement('position', false);
-        mediaControl.mount('left', this.$el); // TODO use independent mount point
+        mediaControl.slot('dvr', this.$el); // TODO use independent mount point
     }
     onDvrStateChanged(dvrInUse) {
         this.toggleState(dvrInUse);