@gcorevideo/player 2.20.5 → 2.20.7

package/lib/testUtils.d.ts

@@ -1,3 +1,4 @@
+import { UICorePlugin } from '@clappr/core';
 import Events from 'eventemitter3';
 /**
  * @internal
@@ -35,10 +36,7 @@ export declare class _MockPlayback extends Events {
 }
 export declare function createMockCore(options?: Record<string, unknown>, container?: any): Events<string | symbol, any> & {
     el: HTMLDivElement;
-    $el: {
-        0: HTMLDivElement;
-        append: import("vitest").Mock<(...args: any[]) => any>;
-    };
+    $el: any;
     activePlayback: any;
     activeContainer: any;
     options: {
@@ -47,6 +45,7 @@ export declare function createMockCore(options?: Record<string, unknown>, contai
     configure: import("vitest").Mock<(...args: any[]) => any>;
     getPlugin: import("vitest").Mock<(...args: any[]) => any>;
     load: import("vitest").Mock<(...args: any[]) => any>;
+    trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };
 export declare function createMockPlugin(): Events<string | symbol, any> & {
     enable: import("vitest").Mock<(...args: any[]) => any>;
@@ -87,12 +86,10 @@ export declare function createMockPlayback(name?: string): Events<string | symbo
     trigger(event: string, ...args: any[]): void;
 };
 export declare function createMockContainer(playback?: any): Events<string | symbol, any> & {
-    $el: {
-        html: import("vitest").Mock<(...args: any[]) => any>;
-        0: HTMLDivElement;
-    };
+    $el: any;
     el: HTMLDivElement;
     getPlugin: import("vitest").Mock<(...args: any[]) => any>;
     playback: any;
 };
+export declare function createMockMediaControl(core: any): UICorePlugin;
 //# sourceMappingURL=testUtils.d.ts.map

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAAC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EAAE,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;EAiB3G;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;mBA2C7B,MAAM,WAAW,GAAG,EAAE;EAIxC;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;EAWvE"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAAC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EAAE,SAAS,GAAE,GAA2B;;;;;;;;;;;;EAgB3G;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;mBA2C7B,MAAM,WAAW,GAAG,EAAE;EAIxC;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;EAQvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAQ/C"}

package/lib/testUtils.js

@@ -1,3 +1,4 @@
+import { $, UICorePlugin } from '@clappr/core';
 import Events from 'eventemitter3';
 import { vi } from 'vitest';
 /**
@@ -61,12 +62,10 @@ export class _MockPlayback extends Events {
 }
 export function createMockCore(options = {}, container = createMockContainer()) {
     const el = document.createElement('div');
-    return Object.assign(new Events(), {
+    const emitter = new Events();
+    return Object.assign(emitter, {
         el,
-        $el: {
-            [0]: el,
-            append: vi.fn(),
-        },
+        $el: $(el),
         activePlayback: container.playback,
         activeContainer: container,
         options: {
@@ -75,6 +74,7 @@ export function createMockCore(options = {}, container = createMockContainer())
         configure: vi.fn(),
         getPlugin: vi.fn(),
         load: vi.fn(),
+        trigger: emitter.emit,
     });
 }
 export function createMockPlugin() {
@@ -140,12 +140,18 @@ export function createMockPlayback(name = 'mock') {
 export function createMockContainer(playback = createMockPlayback()) {
     const el = document.createElement('div');
     return Object.assign(new Events(), {
-        $el: {
-            html: vi.fn(),
-            [0]: el,
-        },
+        $el: $(el),
         el,
         getPlugin: vi.fn(),
         playback,
     });
 }
+export function createMockMediaControl(core) {
+    const mediaControl = new UICorePlugin(core);
+    const elements = {
+        gear: $(document.createElement('div')),
+    };
+    // @ts-ignore
+    mediaControl.getElement = vi.fn().mockImplementation((name) => elements[name]);
+    return mediaControl;
+}

package/package.json

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

package/src/playback/BasePlayback.ts

@@ -34,8 +34,8 @@ export class BasePlayback extends HTML5Video {
     return super.createError(errorData, options)
   }
 
-  override _onProgress() {
-    super._onProgress()
+  override _onPlaying() {
+    super._onPlaying()
     this.trigger(Events.PLAYBACK_MEDIACONTROL_ENABLE)
   }
 }

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

@@ -521,7 +521,7 @@ export default class DashPlayback extends BasePlayback {
     )
   }
 
-  _onProgress() {
+  override _onProgress() {
     if (!this._dash) {
       return
     }
@@ -554,7 +554,6 @@ export default class DashPlayback extends BasePlayback {
     if (!this._dash) {
       return
     }
-
     super.pause()
     if (this.dvrEnabled) {
       this._updateDvr(true)

package/src/playback/hls-playback/HlsPlayback.ts

@@ -763,7 +763,7 @@ export default class HlsPlayback extends BasePlayback {
     this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name)
   }
 
-  _onDurationChange() {
+  override _onDurationChange() {
     const duration = this.getDuration()
 
     if (this._lastDuration === duration) {
@@ -773,7 +773,7 @@ export default class HlsPlayback extends BasePlayback {
     super._onDurationChange() // will call _onTimeUpdate
   }
 
-  _onProgress() {
+  override _onProgress() {
     if (!(this.el as HTMLMediaElement).buffered.length) {
       return
     }

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

@@ -10,6 +10,7 @@ import '../../../assets/bottom-gear/gear-sub-menu.scss';
 import gearIcon from '../../../assets/icons/new/gear.svg';
 import gearHdIcon from '../../../assets/icons/new/gear-hd.svg';
 import { ZeptoResult } from '../../utils/types.js';
+import { MediaControlEvents } from '../media-control/MediaControl';
 
 const VERSION = '2.19.12';
 
@@ -127,13 +128,9 @@ export class BottomGear extends UICorePlugin {
   }
 
   private highDefinitionUpdate(isHd: boolean) {
-    trace(`${this.name} highDefinitionUpdate`, { isHd });
+    trace(`${T} highDefinitionUpdate`, { isHd });
     this.isHd = isHd;
-    if (isHd) {
-      this.$el.find('.gear-icon').html(gearHdIcon);
-    } else {
-      this.$el.find('.gear-icon').html(gearIcon);
-    }
+    this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
   }
 
   /**
@@ -154,7 +151,8 @@ export class BottomGear extends UICorePlugin {
 
     mediaControl.getElement('gear')?.html(this.el);
     this.core.trigger('gear:rendered'); // @deprecated
-    mediaControl.trigger(GearEvents.MEDIACONTROL_GEAR_RENDERED);
+    mediaControl.trigger(GearEvents.MEDIACONTROL_GEAR_RENDERED); // TODO drop
+    mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
     return this;
   }
 

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

@@ -0,0 +1,36 @@
+import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { BottomGear } from '../BottomGear'
+import { createMockCore, createMockMediaControl } from '../../../testUtils'
+import { MediaControlEvents } from '../../media-control/MediaControl'
+
+describe('BottomGear', () => {
+  let mediaControl: any
+  let core: any
+  let bottomGear: BottomGear
+  let onGearRendered: MockedFunction<() => void>
+  beforeEach(() => {
+    core = createMockCore()
+    mediaControl = createMockMediaControl(core)
+    core.getPlugin = vi
+      .fn()
+      .mockImplementation((name) =>
+        name === 'media_control' ? mediaControl : null,
+      )
+    bottomGear = new BottomGear(core)
+    onGearRendered = vi.fn()
+    mediaControl.on(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, onGearRendered, null)
+    bottomGear.render()
+  })
+  it('should render', () => {
+    expect(bottomGear.el.innerHTML).toMatchSnapshot()
+  })
+  it('should attach to media control', () => {
+    const gearElement = mediaControl.getElement('gear')
+    expect(gearElement[0].innerHTML).not.toEqual('')
+    expect(gearElement[0].innerHTML).toMatchSnapshot()
+  })
+  it('should emit event', () => {
+    expect(onGearRendered).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BottomGear > should attach to media control 1`] = `
+"<div class="bottom_gear" data-track-selector=""><div class="media-control-gear" data-="">
+    <button type="button" class="button-gear gplayer-lite-btn gcore-skin-button-color" data-gear-button="-1">
+        <span class="gear-icon">/assets/icons/new/gear.svg</span>
+    </button>
+    <div class="gear-wrapper gcore-skin-bg-color">
+        <ul class="gear-options-list">
+            
+                <li data-quality=""></li>
+            
+                <li data-rate=""></li>
+            
+                <li data-nerd=""></li>
+            
+        </ul>
+    </div>
+</div>
+</div>"
+`;
+
+exports[`BottomGear > should render 1`] = `
+"<div class="media-control-gear" data-="">
+    <button type="button" class="button-gear gplayer-lite-btn gcore-skin-button-color" data-gear-button="-1">
+        <span class="gear-icon">/assets/icons/new/gear.svg</span>
+    </button>
+    <div class="gear-wrapper gcore-skin-bg-color">
+        <ul class="gear-options-list">
+            
+                <li data-quality=""></li>
+            
+                <li data-rate=""></li>
+            
+                <li data-nerd=""></li>
+            
+        </ul>
+    </div>
+</div>
+"
+`;

package/src/plugins/error-screen/ErrorScreen.ts

@@ -88,8 +88,7 @@ export class ErrorScreen extends UICorePlugin {
   private unmount() {
     trace(`${T} unmount`)
     this.err = null
-    this.$el.empty()
-    // this.$el.hide();
+    this.$el.remove()
   }
 
   /**

package/src/plugins/level-selector/LevelSelector.ts

@@ -1,5 +1,6 @@
 import { Events, template, UICorePlugin } from '@clappr/core'
 import { reportError, trace } from '@gcorevideo/utils'
+import assert from 'assert'
 
 import { type QualityLevel } from '../../playback.types.js'
 import { CLAPPR_VERSION } from '../../build.js'
@@ -14,12 +15,26 @@ import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg'
 import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg'
 import checkIcon from '../../../assets/icons/new/check.svg'
 import '../../../assets/level-selector/style.scss'
-import assert from 'assert'
-
+import { MediaControl } from '../media-control/MediaControl.js'
 
 const T = 'plugins.level_selector'
 const VERSION = '2.19.4'
 
+export interface LevelSelectorPluginSettings {
+  /**
+   * The maximum resolution to allow in the level selector.
+   */
+  restrictResolution?: number
+  /**
+   * The labels to show in the level selector.
+   * @example
+   * ```ts
+   * { 360: 'SD', 720: 'HD' }
+   * ```
+   */
+  labels?: Record<number, string>
+}
+
 /**
  * A {@link MediaControl | media control} plugin that provides a UI to control the quality level of the playback.
  * @beta
@@ -35,11 +50,7 @@ const VERSION = '2.19.4'
  *
  * When clicked, it shows a list of quality levels to choose from.
  *
- * Configuration options:
- *
- * - `labels`: The labels to show in the level selector. [video resolution]: string
- *
- * - `restrictResolution`: The maximum resolution to allow in the level selector.
+ * Configuration options - {@link LevelSelectorPluginSettings}
  *
  * @example
  * ```ts
@@ -62,7 +73,8 @@ export class LevelSelector extends UICorePlugin {
 
   private isOpen = false
 
-  private static readonly buttonTemplate: TemplateFunction = template(buttonHtml)
+  private static readonly buttonTemplate: TemplateFunction =
+    template(buttonHtml)
 
   private static readonly listTemplate: TemplateFunction = template(listHtml)
 
@@ -113,8 +125,13 @@ export class LevelSelector extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, () => this.bindPlaybackEvents())
-    this.listenTo(this.core, 'gear:rendered', this.render)
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
+    assert(mediaControl, 'media_control plugin is required')
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.bindPlaybackEvents,
+    )
   }
 
   private bindPlaybackEvents() {
@@ -123,8 +140,10 @@ export class LevelSelector extends UICorePlugin {
 
     const activePlayback = this.core.activePlayback
 
-    this.listenTo(activePlayback, Events.PLAYBACK_LEVELS_AVAILABLE, (levels: QualityLevel[]) =>
-      this.fillLevels(levels),
+    this.listenTo(
+      activePlayback,
+      Events.PLAYBACK_LEVELS_AVAILABLE,
+      this.fillLevels,
     )
     this.listenTo(
       activePlayback,
@@ -150,32 +169,27 @@ export class LevelSelector extends UICorePlugin {
         this.deferRender()
       },
     )
-    if (activePlayback?.levels?.length > 0) {
+    if (activePlayback.levels?.length > 0) {
       this.fillLevels(activePlayback.levels)
     }
   }
 
   private onStop() {
     trace(`${T} onStop`)
-    const currentPlayback = this.core.activePlayback
-
-    this.listenToOnce(currentPlayback, Events.PLAYBACK_PLAY, () => {
-      trace(`${T} on PLAYBACK_PLAY after stop`, { selectedLevelId: this.selectedLevelId })
-      if (currentPlayback.getPlaybackType() === 'live') {
+    this.listenToOnce(this.core.activePlayback, Events.PLAYBACK_PLAY, () => {
+      trace(`${T} on PLAYBACK_PLAY after stop`, {
+        selectedLevelId: this.selectedLevelId,
+      })
+      if (this.core.activePlayback.getPlaybackType() === 'live') {
         if (this.selectedLevelId !== -1) {
-          currentPlayback.currentLevel = this.selectedLevelId
+          this.core.activePlayback.currentLevel = this.selectedLevelId
         }
       }
     })
   }
 
   private shouldRender() {
-    if (!this.core.activeContainer) {
-      return false
-    }
-
     const activePlayback = this.core.activePlayback
-
     if (!activePlayback) {
       return false
     }
@@ -192,8 +206,6 @@ export class LevelSelector extends UICorePlugin {
    * @internal
    */
   override render() {
-    assert(this.core.getPlugin('bottom_gear'), 'bottom_gear plugin is required')
-
     if (!this.shouldRender()) {
       return this
     }
@@ -213,7 +225,10 @@ export class LevelSelector extends UICorePlugin {
       })
       this.$el.html(html)
       const gear = this.core.getPlugin('bottom_gear') as BottomGear
-      gear.getElement('quality')?.html(this.el)
+      if (!gear) {
+        trace(`${T} renderButton: bottom_gear plugin not found`)
+      }
+      gear?.getElement('quality')?.html(this.el)
     }
   }
 
@@ -228,6 +243,7 @@ export class LevelSelector extends UICorePlugin {
     })
     this.$el.html(html)
     const gear = this.core.getPlugin('bottom_gear') as BottomGear
+    trace(`${T} renderDropdown: bottom_gear plugin not found`)
     gear?.setContent(this.el)
   }
 
@@ -236,7 +252,8 @@ export class LevelSelector extends UICorePlugin {
     return maxRes
       ? this.levels.findIndex(
           (level) =>
-            (level.height > level.width ? level.width : level.height) === maxRes,
+            (level.height > level.width ? level.width : level.height) ===
+            maxRes,
         )
       : -1
   }
@@ -248,7 +265,11 @@ export class LevelSelector extends UICorePlugin {
     if (maxResolution) {
       this.removeAuto = true
       const initialLevel = levels
-        .filter((level) => (level.width > level.height ? level.height : level.width) <= maxResolution)
+        .filter(
+          (level) =>
+            (level.width > level.height ? level.height : level.width) <=
+            maxResolution,
+        )
         .pop()
       this.setLevel(initialLevel?.level ?? 0)
     }

package/src/plugins/level-selector/__tests__/LevelSelector.test.ts

@@ -1,9 +1,14 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { UICorePlugin } from '@clappr/core'
+import { $, UICorePlugin } from '@clappr/core'
 import FakeTimers from '@sinonjs/fake-timers'
 import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
 import { LevelSelector } from '../LevelSelector.js'
-import { createMockCore, createMockPlayback } from '../../../testUtils.js'
+import {
+  createMockCore,
+  createMockMediaControl,
+  createMockPlayback,
+} from '../../../testUtils.js'
+import { MediaControlEvents } from '../../media-control/MediaControl.js'
 
 setTracer(new LogTracer('LevelSelector.test'))
 Logger.enable('*')
@@ -33,6 +38,8 @@ describe('LevelSelector', () => {
   let core: any
   let levelSelector: LevelSelector
   let activePlayback: any
+  let mediaControl: UICorePlugin
+  let bottomGear: UICorePlugin | null
   beforeEach(() => {
     clock = FakeTimers.install()
   })
@@ -41,10 +48,6 @@ describe('LevelSelector', () => {
   })
   describe('basically', () => {
     beforeEach(() => {
-      // const activeContainer = createMockContainer()
-      let mediaControl: UICorePlugin | null = null
-      let bottomGear: UICorePlugin | null = null
-      // TODO create mock core
       core = createMockCore({
         levelSelector: {
           // restrictResolution: 360,
@@ -61,7 +64,7 @@ describe('LevelSelector', () => {
         }
         return null
       })
-      mediaControl = createMediaControl(core)
+      mediaControl = createMockMediaControl(core)
       bottomGear = createBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
@@ -126,7 +129,7 @@ describe('LevelSelector', () => {
         }
         return null
       })
-      mediaControl = createMediaControl(core)
+      mediaControl = createMockMediaControl(core)
       bottomGear = createBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
@@ -219,17 +222,13 @@ expect.extend({
   },
 })
 
-function createMediaControl(core: any) {
-  const mediaControl = new UICorePlugin(core)
-  // @ts-ignore
-  mediaControl.getElement = vi.fn().mockReturnValue(null)
-  return mediaControl
-}
-
 function createBottomGear(core: any) {
   const bottomGear = new UICorePlugin(core)
+  const elemets = {
+    quality: $(document.createElement('div')),
+  }
   // @ts-ignore
-  bottomGear.getElement = vi.fn().mockReturnValue(null)
+  bottomGear.getElement = vi.fn().mockImplementation((name) => elemets[name])
   // @ts-ignore
   bottomGear.setContent = vi.fn()
   return bottomGear

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

@@ -49,6 +49,17 @@ export type MediaControlElement =
   | 'seekBarContainer'
   | 'subtitlesSelector'
 
+/**
+ * Custom events emitted by the plugins to communicate with one another
+ * @beta
+ */
+export enum MediaControlEvents {
+  /**
+   * Emitted when the gear menu is rendered
+   */
+  MEDIACONTROL_GEAR_RENDERED = 'mediacontrol:gear:rendered',
+}
+
 const T = 'plugins.media_control'
 
 const LEFT_ORDER = [
@@ -422,7 +433,7 @@ export class MediaControl extends UICorePlugin {
    */
   override disable() {
     trace(`${T} disable`)
-    this.userDisabled = true
+    this.userDisabled = true // TODO distinguish between user and system (e.g., unplayable) disabled?
     this.hide()
     this.unbindKeyEvents()
     this.$el.hide()
@@ -740,8 +751,13 @@ export class MediaControl extends UICorePlugin {
         Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
         this.core.activeContainer.isDvrInUse(),
       )
-    this.core.activeContainer && this.core.activeContainer.mediaControlDisabled && this.disable()
-    this.trigger(Events.MEDIACONTROL_CONTAINERCHANGED)
+    // TODO test
+    if (this.core.activeContainer.mediaControlDisabled) {
+      this.disable()
+    } else {
+      this.enable()
+    }
+    this.trigger(Events.MEDIACONTROL_CONTAINERCHANGED) // TODO check
 
     if (this.core.activeContainer.$el) {
       this.core.activeContainer.$el.addClass('container-skin-1')

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

@@ -90,6 +90,8 @@ export class SourceController extends CorePlugin {
 
   private active = false
 
+  private switching = false
+
   private sync: SyncFn = noSync
 
   /**
@@ -166,15 +168,18 @@ export class SourceController extends CorePlugin {
             description: error?.description,
             level: error?.level,
           },
+          switching: this.switching,
           retrying: this.active,
           currentSource: this.sourcesList[this.currentSourceIndex],
         })
+        if (this.switching) {
+          return
+        }
         switch (error.code) {
           case PlaybackErrorCode.MediaSourceUnavailable:
             this.core.activeContainer?.getPlugin('poster_custom')?.disable()
-            setTimeout(() => this.retryPlayback(), 0)
+            this.retryPlayback()
             break
-          // TODO handle other errors
           default:
             break
         }
@@ -187,7 +192,6 @@ export class SourceController extends CorePlugin {
       })
       if (this.active) {
         this.reset()
-        // TODO make poster reset its state on enable
         this.core.activeContainer?.getPlugin('poster_custom')?.enable()
         this.core.activeContainer?.getPlugin('spinner')?.hide()
       }
@@ -205,6 +209,7 @@ export class SourceController extends CorePlugin {
       currentSource: this.sourcesList[this.currentSourceIndex],
     })
     this.active = true
+    this.switching = true
     this.core.activeContainer?.getPlugin('spinner')?.show(0)
     this.getNextMediaSource().then((nextSource: PlayerMediaSourceDesc) => {
       trace(`${T} retryPlayback syncing...`, {
@@ -213,12 +218,12 @@ export class SourceController extends CorePlugin {
       const rnd = RETRY_DELAY_BLUR * Math.random()
       this.sync(() => {
         trace(`${T} retryPlayback loading...`)
+        this.switching = false
         this.core.load(nextSource.source, nextSource.mimeType)
         trace(`${T} retryPlayback loaded`, {
           nextSource,
         })
         setTimeout(() => {
-          // this.core.activePlayback.consent()
           this.core.activePlayback.play()
           trace(`${T} retryPlayback playing`)
         }, rnd)