@gcorevideo/player 2.22.5 → 2.22.7

package/lib/plugins/media-control/MediaControl.js

@@ -9,7 +9,8 @@ import { reportError, trace } from '@gcorevideo/utils';
 // TODO replace Kibo with mousetrap
 import { Kibo } from '../kibo/index.js';
 import { CLAPPR_VERSION } from '../../build.js';
-import { getPageX, isFullscreen } from '../utils.js';
+import { getPageX } from '../utils.js';
+import { fullscreenEnabled, isFullscreen } from '../utils/fullscreen.js';
 import '../../../assets/media-control/media-control.scss';
 import mediaControlHTML from '../../../assets/media-control/media-control.ejs';
 import playIcon from '../../../assets/icons/new/play.svg';
@@ -20,20 +21,29 @@ import volumeOffIcon from '../../../assets/icons/new/volume-off.svg';
 import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg';
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg';
 const DEFAULT_SETTINGS = {
-    left: [],
+    default: [],
+    left: [
+        'dvr'
+    ],
     right: [
+        'audiotracks',
+        'cc',
+        // 'dvr',
+        // 'duration',
         'fullscreen',
-        'pip',
         'gear',
-        'cc',
         'multicamera',
-        // 'playbackrate',
+        'pip',
         'vr',
-        'audiotracks',
     ],
-    default: [],
     seekEnabled: true,
 };
+const INITIAL_SETTINGS = {
+    left: [],
+    right: [],
+    default: [],
+    seekEnabled: false,
+};
 const T = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
@@ -55,11 +65,17 @@ function orderByOrderPattern(arr, order) {
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
+ *
+ * Configuration options:
+ *
+ * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
+ *
+ * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
+ *
+ * - `chromeless`: boolean
  */
 export class MediaControl extends UICorePlugin {
     // private advertisementPlaying = false
-    customAreaElements = {};
-    customAreaHandler;
     buttonsColor = null;
     currentDurationValue = 0;
     currentPositionValue = 0;
@@ -70,7 +86,7 @@ export class MediaControl extends UICorePlugin {
     displayedSeekBarPercentage = null;
     draggingSeekBar = false;
     draggingVolumeBar = false;
-    fullScreenOnVideoTagSupported = null;
+    fullScreenOnVideoTagSupported = false;
     hideId = null;
     hideVolumeId = null;
     intendedVolume = 100;
@@ -78,9 +94,10 @@ export class MediaControl extends UICorePlugin {
     kibo;
     lastMouseX = 0;
     lastMouseY = 0;
+    needsUpdate = false;
     persistConfig;
     rendered = false;
-    settings = DEFAULT_SETTINGS;
+    settings = INITIAL_SETTINGS;
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
@@ -91,7 +108,6 @@ export class MediaControl extends UICorePlugin {
     $multiCameraSelector = null;
     $playPauseToggle = null;
     $playStopToggle = null;
-    $playbackRate = null;
     $position = null;
     $seekBarContainer = null;
     $seekBarHover = null;
@@ -305,7 +321,8 @@ export class MediaControl extends UICorePlugin {
         const video = this.core.activePlayback?.el;
         // video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
         // see https://github.com/clappr/clappr/issues/1127
-        if (!Fullscreen.fullscreenEnabled() && video.webkitSupportsFullscreen) {
+        if (!fullscreenEnabled() && video.webkitSupportsFullscreen) {
+            // TODO sort out, use single utility function
             this.fullScreenOnVideoTagSupported = true;
         }
         this.updateSettings();
@@ -537,22 +554,21 @@ export class MediaControl extends UICorePlugin {
         }
     }
     onActiveContainerChanged() {
-        this.fullScreenOnVideoTagSupported = null;
+        this.fullScreenOnVideoTagSupported = false;
         // set the new container to match the volume of the last one
         this.setInitialVolume();
         this.changeTogglePlay();
         this.bindContainerEvents();
+        // TODO remove?
         this.updateSettings();
-        // TODO remove
-        this.core.activeContainer.trigger(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
-        // TODO test
+        // TODO test, figure out if this is needed
         if (this.core.activeContainer.mediaControlDisabled) {
             this.disable();
         }
         else {
             this.enable();
         }
-        this.trigger(Events.MEDIACONTROL_CONTAINERCHANGED); // TODO check
+        this.trigger(Events.MEDIACONTROL_CONTAINERCHANGED); // TODO figure out
         if (this.core.activeContainer.$el) {
             this.core.activeContainer.$el.addClass('container-skin-1');
         }
@@ -723,11 +739,13 @@ export class MediaControl extends UICorePlugin {
         }
     }
     updateSettings() {
+        trace(`${T} updateSettings`, { settings: this.settings });
         const newSettings = $.extend(true, {
             left: [],
             default: [],
             right: [],
         }, this.core.activeContainer.settings);
+        trace(`${T} updateSettings`, { newSettings });
         // TODO make order controlled via CSS
         newSettings.left = orderByOrderPattern([...newSettings.left, 'clipsText', 'volume'], LEFT_ORDER);
         if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
@@ -735,10 +753,15 @@ export class MediaControl extends UICorePlugin {
             newSettings.left.push('dvr');
         }
         // actual order of the items appear rendered is controlled by CSS
-        newSettings.right = DEFAULT_SETTINGS.right;
+        newSettings.right = DEFAULT_SETTINGS.right; // TODO get from the options
         if ((!this.fullScreenOnVideoTagSupported &&
-            !Fullscreen.fullscreenEnabled()) ||
+            !fullscreenEnabled()) ||
             this.options.fullscreenDisable) {
+            trace(`${T} updateSettings removing fullscreen`, {
+                supported: this.fullScreenOnVideoTagSupported,
+                enabled: Fullscreen.fullscreenEnabled(),
+                optionsDisable: this.options.fullscreenDisable,
+            });
             // remove fullscreen from settings if it is not available
             removeArrayItem(newSettings.default, 'fullscreen');
             removeArrayItem(newSettings.left, 'fullscreen');
@@ -753,6 +776,7 @@ export class MediaControl extends UICorePlugin {
         const settingsChanged = serializeSettings(this.settings) !== serializeSettings(newSettings);
         if (settingsChanged) {
             this.settings = newSettings;
+            this.needsUpdate = true;
             this.render();
         }
     }
@@ -777,7 +801,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.$playbackRate = this.$el.find('.media-control-playbackrate[data-playbackrate]');
         this.$multiCameraSelector = this.$el.find('.media-control-multicamera[data-multicamera]');
         this.$clipText = this.$el.find('.media-clip-text[data-clipstext]'); // TODO
         this.$clipTextContainer = this.$el.find('.media-clip-container[data-clipstext]');
@@ -809,8 +832,6 @@ export class MediaControl extends UICorePlugin {
                 return null;
             case 'clipText':
                 return this.$clipText;
-            case 'playbackRate':
-                return this.$playbackRate;
             case 'seekBarContainer':
                 return this.$seekBarContainer;
         }
@@ -834,13 +855,6 @@ export class MediaControl extends UICorePlugin {
             return;
         }
     }
-    handleCustomArea(handler) {
-        this.customAreaHandler = handler;
-        Object.entries(this.customAreaElements).forEach(([name, element]) => {
-            handler(name, element);
-        });
-        this.customAreaElements = {};
-    }
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
@@ -938,8 +952,8 @@ export class MediaControl extends UICorePlugin {
         keys.forEach((i) => {
             this.bindKeyAndShow(i, () => {
                 this.settings.seekEnabled &&
-                    this.container &&
-                    this.container.seekPercentage(Number(i) * 10);
+                    this.core.activeContainer &&
+                    this.core.activeContainer.seekPercentage(Number(i) * 10);
                 return false;
             });
         });
@@ -1005,10 +1019,12 @@ export class MediaControl extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T} render`);
+        trace(`${T} render`, { needsUpdate: this.needsUpdate });
+        if (!this.needsUpdate) {
+            return this;
+        }
         const timeout = this.options.hideMediaControlDelay || 2000;
-        const html = MediaControl.template({ settings: this.settings ?? {} });
-        this.$el.html(html);
+        this.$el.html(MediaControl.template({ settings: this.settings }));
         // const style = Styler.getStyleFor(mediaControlStyle, { baseUrl: this.options.baseUrl });
         // this.$el.append(style[0]);
         this.createCachedElements();
@@ -1054,7 +1070,8 @@ export class MediaControl extends UICorePlugin {
         this.core.$el.append(this.el);
         this.rendered = true;
         this.updateVolumeUI();
-        // TODO setTimeout
+        this.needsUpdate = false;
+        // TODO setTimeout?
         this.trigger(Events.MEDIACONTROL_RENDERED);
         return this;
     }
@@ -1120,6 +1137,7 @@ export class MediaControl extends UICorePlugin {
             element.el.css({ 'pointer-events': 'none' });
         });
     }
+    // TODO drop
     isSeekEnabledForHtml5Playback() {
         if (this.core.getPlaybackType() === Playback.LIVE) {
             return this.options.dvrEnabled;

package/lib/plugins/playback-rate/PlaybackRate.d.ts

@@ -40,12 +40,11 @@ export type PlaybackRateSettings = {
  *       { value: 1, label: '1x' },
  *     ],
  *     defaultValue: 1,
- *   } as PlaybackRateSettings,
+ *   },
  * })
  * ```
  */
 export declare class PlaybackRate extends UICorePlugin {
-    private playbackRates;
     private selectedRate;
     /**
      * @internal
@@ -60,6 +59,7 @@ export declare class PlaybackRate extends UICorePlugin {
     private static readonly buttonTemplate;
     private static readonly listTemplate;
     constructor(core: Core);
+    private get playbackRates();
     /**
      * @internal
      */
@@ -81,17 +81,18 @@ export declare class PlaybackRate extends UICorePlugin {
     private onActiveContainerChange;
     private onMediaControlRendered;
     private onGearRendered;
-    private addGearItem;
+    private mount;
     private onMetaDataLoaded;
     private allRateElements;
     private rateElement;
     private onPlaybackRateChange;
-    private shouldRender;
+    private shouldMount;
     /**
      * @internal
      */
     render(): this;
     private onPlay;
+    private syncRate;
     private resetPlaybackRate;
     private onStop;
     private onSelect;

package/lib/plugins/playback-rate/PlaybackRate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,IAAI,EAAK,MAAM,cAAc,CAAA;AAiBhF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAgBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,aAAa,CAA+C;IAKpE,OAAO,CAAC,YAAY,CAAwB;IAE5C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAqB;gBAE7C,IAAI,EAAE,IAAI;IAQtB;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,uBAAuB;IAgB/B,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,YAAY;IAepB;;OAEG;IACM,MAAM;IAwCf,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,qBAAqB;CAI9B"}
+{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,IAAI,EAAK,MAAM,cAAc,CAAA;AAiBhF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAgBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAI5C,OAAO,CAAC,YAAY,CAAwB;IAE5C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAqB;gBAE7C,IAAI,EAAE,IAAI;IAOtB,OAAO,KAAK,aAAa,GAExB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,uBAAuB;IAgB/B,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,KAAK;IAsBb,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,WAAW;IAenB;;OAEG;IACM,MAAM;IAoCf,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,qBAAqB;CAM9B"}

package/lib/plugins/playback-rate/PlaybackRate.js

@@ -48,12 +48,11 @@ const T = 'plugins.playback_rate';
  *       { value: 1, label: '1x' },
  *     ],
  *     defaultValue: 1,
- *   } as PlaybackRateSettings,
+ *   },
  * })
  * ```
  */
 export class PlaybackRate extends UICorePlugin {
-    playbackRates = DEFAULT_PLAYBACK_RATES;
     // Saved when an ad starts to restore after it finishes
     // private prevSelectedRate: string | undefined
     selectedRate = DEFAULT_PLAYBACK_RATE;
@@ -73,10 +72,12 @@ export class PlaybackRate extends UICorePlugin {
     static listTemplate = template(listHtml);
     constructor(core) {
         super(core);
-        this.playbackRates =
-            core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
-        this.selectedRate =
-            core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
+        if (this.core.options.playbackRate?.defaultValue) {
+            this.setSelectedRate(this.core.options.playbackRate.defaultValue);
+        }
+    }
+    get playbackRates() {
+        return this.core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
     }
     /**
      * @internal
@@ -124,10 +125,15 @@ export class PlaybackRate extends UICorePlugin {
     }
     onGearRendered() {
         trace(`${T} onGearRendered`);
-        this.addGearItem();
+        this.mount();
     }
-    addGearItem() {
-        trace(`${T} addGearItem`);
+    mount() {
+        trace(`${T} mount`, {
+            shouldMount: this.shouldMount(),
+        });
+        if (!this.shouldMount()) {
+            return;
+        }
         this.core
             .getPlugin('bottom_gear')
             ?.addItem('rate', this.$el)
@@ -160,7 +166,7 @@ export class PlaybackRate extends UICorePlugin {
             });
         }
     }
-    shouldRender() {
+    shouldMount() {
         if (!this.core.activePlayback) {
             return false;
         }
@@ -175,11 +181,8 @@ export class PlaybackRate extends UICorePlugin {
      */
     render() {
         trace(`${T} render`, {
-            shouldRender: this.shouldRender(),
+            shouldMount: this.shouldMount(),
         });
-        if (!this.shouldRender()) {
-            return this;
-        }
         this.$el.html(PlaybackRate.listTemplate({
             arrowLeftIcon,
             checkIcon,
@@ -187,7 +190,7 @@ export class PlaybackRate extends UICorePlugin {
             i18n: this.core.i18n,
             playbackRates: this.playbackRates,
         }));
-        this.addGearItem();
+        this.mount();
         return this;
     }
     // private onStartAd() {
@@ -210,11 +213,21 @@ export class PlaybackRate extends UICorePlugin {
             this.resetPlaybackRate();
         }
         else {
-            this.setSelectedRate(this.selectedRate);
+            this.syncRate();
         }
     }
+    syncRate() {
+        trace(`${T} syncRate`, {
+            selectedRate: this.selectedRate,
+        });
+        this.core.activePlayback?.setPlaybackRate(this.selectedRate);
+    }
     resetPlaybackRate() {
-        this.setSelectedRate(DEFAULT_PLAYBACK_RATE);
+        trace(`${T} resetPlaybackRate`, {
+            selectedRate: this.selectedRate,
+        });
+        this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
+        this.selectedRate = DEFAULT_PLAYBACK_RATE;
     }
     onStop() { }
     onSelect(event) {
@@ -222,8 +235,6 @@ export class PlaybackRate extends UICorePlugin {
         const rate = parseFloat(event.currentTarget.dataset.rate || '');
         if (rate) {
             this.setSelectedRate(rate);
-            this.highlightCurrentRate();
-            this.updateGearOptionLabel();
         }
         return false;
     }
@@ -233,14 +244,23 @@ export class PlaybackRate extends UICorePlugin {
         }, 0);
     }
     setSelectedRate(rate) {
-        this.core.activePlayback?.setPlaybackRate(rate);
+        if (rate === this.selectedRate) {
+            return;
+        }
         this.selectedRate = rate;
+        this.syncRate();
+        this.highlightCurrentRate();
+        this.updateGearOptionLabel();
     }
     getTitle() {
-        return (this.playbackRates.find((r) => r.value === this.selectedRate)?.label ||
-            `x${this.selectedRate}`);
+        const rate = this.selectedRate;
+        return (this.playbackRates.find((r) => r.value === rate)?.label ||
+            `x${rate}`);
     }
     highlightCurrentRate() {
+        trace(`${T} highlightCurrentRate`, {
+            selectedRate: this.selectedRate,
+        });
         this.allRateElements().removeClass('current');
         this.allRateElements().find('a').removeClass('gcore-skin-active');
         this.rateElement(this.selectedRate)
@@ -249,7 +269,9 @@ export class PlaybackRate extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     updateGearOptionLabel() {
-        trace(`${T} updateGearOptionLabel`);
-        this.addGearItem();
+        trace(`${T} updateGearOptionLabel`, {
+            selectedRate: this.selectedRate,
+        });
+        this.mount();
     }
 }

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -7,7 +7,7 @@ import subtitlesOffIcon from '../../../assets/icons/new/subtitles-off.svg';
 import subtitlesOnIcon from '../../../assets/icons/new/subtitles-on.svg';
 import comboboxHTML from '../../../assets/subtitles/combobox.ejs';
 import stringHTML from '../../../assets/subtitles/string.ejs';
-import { isFullscreen } from '../utils.js';
+import { isFullscreen } from '../utils/fullscreen.js';
 const VERSION = '2.19.14';
 const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
 const T = 'plugins.cc';

package/lib/plugins/utils/fullscreen.d.ts

@@ -0,0 +1,4 @@
+import { Utils } from '@clappr/core';
+export declare const fullscreenEnabled: typeof Utils.Fullscreen.fullscreenEnabled;
+export declare function isFullscreen(el: HTMLElement): boolean;
+//# sourceMappingURL=fullscreen.d.ts.map

package/lib/plugins/utils/fullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen.d.ts","sourceRoot":"","sources":["../../../src/plugins/utils/fullscreen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,EAAE,MAAM,cAAc,CAAC;AAG9C,eAAO,MAAM,iBAAiB,2CAAqC,CAAA;AAEnE,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,CAYrD"}

package/lib/plugins/utils/fullscreen.js

@@ -0,0 +1,30 @@
+import { Browser, Utils } from '@clappr/core';
+import { reportError } from '@gcorevideo/utils';
+export const fullscreenEnabled = Utils.Fullscreen.fullscreenEnabled;
+export function isFullscreen(el) {
+    const video = el.nodeName === 'video'
+        ? el
+        : el.querySelector('video');
+    if (!video) {
+        return false;
+    }
+    if (Browser.isiOS) {
+        return FullscreenIOS.isFullscreen(video);
+    }
+    return !!document.fullscreenElement;
+}
+const FullscreenIOS = {
+    isFullscreen: function (el) {
+        try {
+            // @ts-ignore
+            if (el.webkitDisplayingFullscreen !== undefined) {
+                // @ts-ignore
+                return !!el.webkitDisplayingFullscreen;
+            }
+        }
+        catch (e) {
+            reportError(e);
+        }
+        return false;
+    },
+};

package/lib/plugins/utils.d.ts

@@ -1,5 +1,4 @@
 export declare function getLocation(href: string): HTMLAnchorElement;
 export declare function strtimeToMiliseconds(str: string): number;
-export declare function isFullscreen(el: HTMLElement): boolean;
 export declare function getPageX(event: MouseEvent | TouchEvent): number;
 //# sourceMappingURL=utils.d.ts.map

package/lib/plugins/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/plugins/utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,qBAMvC;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAyBxD;AAGD,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,CASrD;AAkBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAU/D"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/plugins/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,qBAMvC;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAyBxD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAU/D"}

package/lib/plugins/utils.js

@@ -1,5 +1,3 @@
-import { Browser } from '@clappr/core';
-import { reportError } from '@gcorevideo/utils';
 export function getLocation(href) {
     const l = document.createElement('a');
     l.href = href;
@@ -31,32 +29,6 @@ export function strtimeToMiliseconds(str) {
     }
     return (h + m + s);
 }
-// TODO refactor
-export function isFullscreen(el) {
-    const video = el.nodeName === "video" ? el : el.querySelector('video');
-    if (!video) {
-        return false;
-    }
-    if (Browser.isiOS) {
-        return FullscreenIOS.isFullscreen(video);
-    }
-    return !!(document.fullscreenElement);
-}
-const FullscreenIOS = {
-    isFullscreen: function (el) {
-        try {
-            // @ts-ignore
-            if (el.webkitDisplayingFullscreen !== undefined) {
-                // @ts-ignore
-                return !!(el.webkitDisplayingFullscreen);
-            }
-        }
-        catch (e) {
-            reportError(e);
-        }
-        return false;
-    }
-};
 export function getPageX(event) {
     if (event.pageX) {
         return event.pageX;

package/lib/utils/fullscreen.d.ts

@@ -0,0 +1,3 @@
+import { Utils } from '@clappr/core';
+export declare const fullscreenEnabled: typeof Utils.Fullscreen.fullscreenEnabled;
+//# sourceMappingURL=fullscreen.d.ts.map

package/lib/utils/fullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen.d.ts","sourceRoot":"","sources":["../../src/utils/fullscreen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAEpC,eAAO,MAAM,iBAAiB,2CAAqC,CAAA"}

package/lib/utils/fullscreen.js

@@ -0,0 +1,2 @@
+import { Utils } from '@clappr/core';
+export const fullscreenEnabled = Utils.Fullscreen.fullscreenEnabled;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.22.5",
+  "version": "2.22.7",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/playback/dash-playback/DashPlayback.ts

@@ -604,11 +604,8 @@ export default class DashPlayback extends BasePlayback {
   }
 
   _updatePlaybackType() {
-    assert.ok(
-      this._dash,
-      'An instance of dashjs MediaPlayer is required to update the playback type',
-    )
     const prevPlaybackType = this._playbackType
+    // @ts-ignore
     this._playbackType = this._dash.isDynamic() ? Playback.LIVE : Playback.VOD
     if (prevPlaybackType !== this._playbackType) {
       this._updateSettings()

package/src/plugins/bottom-gear/BottomGear.ts

@@ -235,7 +235,6 @@ export class BottomGear extends UICorePlugin {
       .hide()
 
     // TODO make non-clickable when there are no items
-    mediaControl.putElement('gear', this.$el)
 
     setTimeout(() => {
       this.trigger(GearEvents.RENDERED)
@@ -276,6 +275,7 @@ export class BottomGear extends UICorePlugin {
 
   private onMediaControlRendered() {
     trace(`${T} onMediaControlRendered`)
-    this.render()
+    const mediaControl = this.core.getPlugin('media_control')
+    mediaControl.putElement('gear', this.$el)
   }
 }

package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts

@@ -2,6 +2,7 @@ import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { BottomGear, GearEvents } from '../BottomGear'
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
+import { Events } from '@clappr/core'
 
 describe('BottomGear', () => {
   let mediaControl: any
@@ -20,13 +21,11 @@ describe('BottomGear', () => {
     onGearRendered = vi.fn()
     bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
     bottomGear.render()
+    core.emit(Events.CORE_READY)
   })
   it('should render', () => {
     expect(bottomGear.el.innerHTML).toMatchSnapshot()
   })
-  it('should attach to media control', () => {
-    expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.$el)
-  })
   it('should emit event in the next cycle', async () => {
     expect(onGearRendered).not.toHaveBeenCalled()
     await new Promise((resolve) => setTimeout(resolve, 0))
@@ -37,6 +36,19 @@ describe('BottomGear', () => {
       'none',
     )
   })
+  describe('until media control is rendered', () => {
+    it('should not attach to media control', () => {
+      expect(mediaControl.putElement).not.toHaveBeenCalledWith('gear', expect.anything())
+    })
+  })
+  describe('when media control is rendered', () => {
+    beforeEach(() => {
+      mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+    })
+    it('should attach to media control', () => {
+      expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.$el)
+    })
+  })
   describe('when clicked', () => {
     beforeEach(() => {
       bottomGear.$el.find('#gear-button').click()