@gcorevideo/player 2.20.3 → 2.20.5

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

@@ -1,246 +1,172 @@
-import { UICorePlugin, Events, template, PlayerError } from '@clappr/core';
-import { trace } from '@gcorevideo/utils';
-
-import { CLAPPR_VERSION } from '../../build.js';
-import type { TimerId, ZeptoResult } from '../../utils/types.js';
-
-import reloadIcon from '../../../assets/icons/old/reload.svg';
-import templateHtml from '../../../assets/error-screen/error_screen.ejs';
-import '../../../assets/error-screen/error_screen.scss';
-
-const TIME_FOR_UPDATE = 10000;
-const MAX_RETRY = 10;
+import { UICorePlugin, Events, template } from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
+
+import { CLAPPR_VERSION } from '../../build.js'
+
+import reloadIcon from '../../../assets/icons/old/reload.svg'
+import templateHtml from '../../../assets/error-screen/error_screen.ejs'
+import '../../../assets/error-screen/error_screen.scss'
+import { PlaybackErrorCode } from '../../playback.types.js'
+
+export type ErrorDesc = {
+  description: string
+  level: string
+  code: string
+  origin: string
+  scope: string
+  raw?: string
+  UI?: {
+    icon?: string
+    title: string
+    message: string
+  }
+}
 
-type ErrorObject = {
-  description: string;
-  details?: string;
-  level: string;
-  code: string;
-  origin: string;
+type ErrorScreenDesc = {
+  title: string
+  message: string
+  code: string
+  icon?: string
 }
 
-type PresentationalError = {
-  title: string;
-  message: string;
-  code: string;
-  icon: string;
-  reloadIcon: string;
+export type ErrorScreenPluginSettings = {
+  noReload?: boolean
 }
 
 const T = 'plugins.error_screen'
 
 /**
- * Displays a descriptive error in the overlay on top of the player.
+ * Displays an error nicely in the overlay on top of the player.
  * @beta
  */
 export class ErrorScreen extends UICorePlugin {
-  private _retry = 0;
-
-  private err: PresentationalError | null = null;
-
-  private hideValue = false;
-
-  private timeout: TimerId | null = null;
-
-  private reloadButton: ZeptoResult | null = null;
+  private err: ErrorScreenDesc | null = null
 
+  /**
+   * @internal
+   */
   get name() {
-    return 'error_gplayer';
+    return 'error_screen'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
-  get template() {
-    return template(templateHtml);
-  }
-
-  get container() {
-    return this.core.activeContainer;
-  }
+  private static readonly template = template(templateHtml)
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
-      'class': 'player-error-screen',
+      class: 'player-error-screen',
       'data-error-screen': '',
-    };
+    }
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
-    this.listenTo(this.core, Events.ERROR, this.onError);
-    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
-    this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
-    this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.onContainerChanged);
-  }
-
-  private onCoreReady() {
-    trace(`${T} onCoreReady`)
-    if (this.core.activePlayback) {
-      this.listenTo(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay);
-    }
+    this.listenTo(this.core, Events.ERROR, this.onError)
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.onActiveContainerChanged,
+    )
   }
 
   private onPlay() {
     trace(`${T} onPlay`)
-    this.destroyError();
-  }
-
-  private destroyError() {
-    trace(`${T} destroyError`)
-    this._retry = 0;
-    this.err = null;
-    if (this.timeout !== null) {
-      clearTimeout(this.timeout);
-      this.timeout = null;
-    }
-    this.$el.hide();
-  }
-
-  unBindEvents() {
-    // @ts-ignore
-    this.stopListening(this.core, 'core:advertisement:start');
-    // @ts-ignore
-    this.stopListening(this.core, 'core:advertisement:finish');
-    // @ts-ignore
-    this.stopListening(this.core, Events.ERROR);
+    this.unmount()
   }
 
-  private bindReload() {
-    this.reloadButton = this.$el.find('.player-error-screen__reload');
-    this.reloadButton && this.reloadButton.on('click', this.reload.bind(this));
+  private unmount() {
+    trace(`${T} unmount`)
+    this.err = null
+    this.$el.empty()
+    // this.$el.hide();
   }
 
-  private reload() {
-    this._retry++;
-    this.core.configure({
-      ...this.options, 
-        autoPlay: true
-    });
-    this.core.activeContainer.mediaControlDisabled = false;
-    this.unbindReload();
-  }
-
-  private unbindReload() {
-    this.reloadButton && this.reloadButton.off('click');
-  }
-
-  private onContainerChanged() {
-    this.err = null;
-    if (this.core.getPlugin('error_screen')) {
-      this.core.getPlugin('error_screen').disable();
-    }
-    this.unbindReload();
-    this.hide();
-  }
-
-  private onStartAd() {
-    this.hideValue = true;
-    if (this.err) {
-      this.hide();
+  /**
+   * @internal
+   */
+  override get events() {
+    return {
+      'click .player-error-screen__reload': 'reload',
     }
   }
 
-  private onFinishAd() {
-    this.hideValue = false;
-    if (this.err) {
-      this.container.disableMediaControl();
-      this.container.stop();
-      this.show();
+  private reload() {
+    setTimeout(() => {
+      this.core.configure({
+        reloading: true,
+        source: this.core.options.source,
+        sources: this.core.options.sources,
+      })
+    }, 0)
+  }
+
+  private onActiveContainerChanged() {
+    trace(`${T} onActiveContainerChanged`, {
+      reloading: this.core.options.reloading,
+    })
+    this.err = null
+    this.listenTo(
+      this.core.activeContainer.playback,
+      Events.PLAYBACK_PLAY,
+      this.onPlay,
+    )
+    if (this.core.options.reloading) {
+      setTimeout(() => {
+        this.core.options.reloading = false
+        this.unmount()
+        this.core.activeContainer.play({
+          reloading: true,
+        })
+      }, 0)
     }
   }
 
-  private onError(err: ErrorObject) {
+  private onError(err: ErrorDesc) {
     trace(`${T} onError`, { err })
-    if (
-      err.level === PlayerError.Levels.FATAL ||
-      err.details === 'bufferStalledError' ||
-      err.details === 'manifestParsingError'
-    ) {
-      this.err = {
-        title: this.core.i18n.t('no_broadcast'),
-        message: '',
-        code: '',
-        // icon: (this.err.UI && this.err.UI.icon) || '',
-        icon: '',
-        reloadIcon,
-      };
-
-      if (this.options.errorScreen?.reloadOnError === false) {
-        return;
-      }
-
-      if (this.options.errorScreen?.neverStopToRetry) {
-        this._retry = 0;
-      }
-
-      if (this._retry >= MAX_RETRY) {
-        this.drying();
-
-        return;
+    if (err.UI) {
+      if (this.err) {
+        this.unmount()
       }
-
-      const ctp = this.container.getPlugin('click_to_pause_custom');
-
-      const toggleCTP = !!ctp?.enabled;
-      if (toggleCTP) {
-        // clickToPausePlugin.afterEnabled = true;
-        ctp.disable();
-      }
-
-      this.timeout = setTimeout(() => {
-        if (toggleCTP) {
-          ctp.enable();
-        }
-        this.reload();
-      }, TIME_FOR_UPDATE);
-
-      const spinnerPlugin = this.container.getPlugin('spinner');
-      if (spinnerPlugin) {
-        spinnerPlugin.show(); // TODO remove?
-        setTimeout(() => spinnerPlugin.show(), 0);
+      this.err = {
+        title: err.UI.title,
+        message: err.UI.message,
+        code: err.code,
+        icon: err.UI.icon,
       }
+      this.render()
     }
   }
 
-  private drying() {
-    const spinnerPlugin = this.container.getPlugin('spinner');
-
-    spinnerPlugin?.hide();
-
-    this._retry = 0;
-    if (!this.hideValue) {
-      this.container.disableMediaControl();
-      this.container.stop();
-      this.show();
-    }
-  }
-
-  show(err?: PresentationalError) {
-    if (err) {
-      this.err = err;
-    }
-    // TODO use container.disableMediaControl() instead
-    this.core.mediaControl.disable();
-    this.render();
-    this.$el.show();
-  }
-
-  hide() {
-    this.$el.hide();
-  }
-
+  /**
+   * @internal
+   */
   override render() {
     if (!this.err) {
-      return this;
+      return this
+    }
+    this.$el.html(
+      ErrorScreen.template({
+        ...this.err,
+        reloadIcon: this.options.errorScreen?.noReload ? null : reloadIcon,
+      }),
+    )
+
+    // TODO append to container instead of core?
+    if (!this.el.parentElement) {
+      this.core.$el.append(this.el)
     }
-    this.$el.html(this.template(this.err));
-
-    this.core.$el.append(this.el);
-
-    this.bindReload();
 
-    return this;
+    return this
   }
 }

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

@@ -0,0 +1,113 @@
+import { createMockContainer, createMockCore, createMockPlayback } from '../../../testUtils'
+import { ErrorScreen } from '../ErrorScreen'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+describe('ErrorScreen', () => {
+  let core: any
+  let container: any
+  let playback: any
+  let errorScreen: ErrorScreen
+  beforeEach(() => {
+    core = createMockCore()
+    container = createMockContainer()
+    playback = createMockPlayback()
+    container.playback = playback
+    core.activeContainer = container
+  })
+  describe('on error', () => {
+    describe.each([
+      [
+        'targeted at UI',
+        {
+          code: "foo",
+          UI: {
+            title: 'My error',
+            message: 'Lorem ipsum dolor sit amet',
+            icon: '<svg>...</svg>'
+          },
+        },
+        true,
+      ],
+      [
+        'other',
+        {
+          code: 'MEDIA_SOURCE_ACCESS_DENIED',
+          title: 'The server refused to serve the protected media',
+          message: 'Wrong credentials',
+        },
+        false,
+      ],
+    ])("%s", (_, err, shouldRender) => {
+      beforeEach(() => {
+        errorScreen = new ErrorScreen(core)
+        core.emit('core:ready')
+        core.emit('core:active:container:changed')
+        core.emit('error', err)
+      })
+      if (shouldRender) {
+        it('should render', () => {
+          expect(errorScreen.el.innerHTML).toBeTruthy()
+          expect(errorScreen.el.innerHTML).toMatchSnapshot()
+        })
+      } else {
+        it('should not render', () => {
+          expect(errorScreen.el.innerHTML).toBeFalsy()
+        })
+      }
+    })
+    describe('reload button', () => {
+      describe('basically', () => {
+        beforeEach(() => {
+          core.options.source = 'https://222/master.mpd'
+          errorScreen = new ErrorScreen(core)
+          core.emit('core:ready')
+          core.emit('core:active:container:changed')
+          core.emit('error', {
+            code: 'foo',
+            UI: {
+              title: 'My error',
+              message: 'Lorem ipsum dolor sit amet',
+              icon: '<svg>...</svg>'
+            },
+          })
+          core.configure.mockClear()
+        })
+        describe('when clicked', () => {
+          beforeEach(async () => {
+            (errorScreen.el.querySelector('.player-error-screen__reload') as HTMLElement)?.click()
+            return new Promise(resolve => setTimeout(resolve, 0))
+          })
+          it('should reload the player', () => {
+            expect(core.configure).toHaveBeenCalledWith(expect.objectContaining({
+              reloading: true,
+              source: 'https://222/master.mpd'
+            }))
+          })
+        })
+      })
+      describe('when disabled', () => {
+        beforeEach(() => {
+          core.options.errorScreen = {
+            noReload: true
+          }
+          errorScreen = new ErrorScreen(core)
+          core.emit('core:ready')
+          core.emit('core:active:container:changed')
+          core.emit('error', {
+            code: 'foo',
+            UI: {
+              title: 'My error',
+              message: 'Lorem ipsum dolor sit amet',
+              icon: '<svg>...</svg>'
+            },
+          })
+        })
+        it('should not render the reload button', () => {
+          expect(errorScreen.el.querySelector('.player-error-screen__reload')).toBeNull()
+        })
+      })
+    })
+  })
+})
+
+

package/src/plugins/error-screen/__tests__/__snapshots__/ErrorScreen.test.ts.snap

@@ -0,0 +1,20 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ErrorScreen > on error > targeted at UI > should render 1`] = `
+"<div class="player-error-screen__content" data-error-screen="">
+    
+        <div class="player-error-screen__icon" data-error-screen=""><svg>...</svg></div>
+    
+    <div class="player-error-screen__title" data-error-screen="">My error</div>
+    
+        <div class="player-error-screen__message" data-error-screen="">Lorem ipsum dolor sit amet</div>
+    
+    
+        <div class="player-error-screen__code" data-error-screen="">Error code: foo</div>
+    
+    
+        <div class="player-error-screen__reload" data-error-screen="">/assets/icons/old/reload.svg</div>
+    
+</div>
+"
+`;

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

@@ -1,9 +1,9 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { UICorePlugin } from '@clappr/core'
 import FakeTimers from '@sinonjs/fake-timers'
-import EventLite from 'event-lite'
 import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
 import { LevelSelector } from '../LevelSelector.js'
+import { createMockCore, createMockPlayback } from '../../../testUtils.js'
 
 setTracer(new LogTracer('LevelSelector.test'))
 Logger.enable('*')
@@ -41,28 +41,25 @@ describe('LevelSelector', () => {
   })
   describe('basically', () => {
     beforeEach(() => {
-      const activeContainer = createContainer()
-      activePlayback = createPlayback()
+      // const activeContainer = createMockContainer()
       let mediaControl: UICorePlugin | null = null
       let bottomGear: UICorePlugin | null = null
-      core = Object.assign(new EventLite(), {
-        activeContainer,
-        activePlayback,
-        options: {
-          levelSelector: {
-            // restrictResolution: 360,
-            labels: { 360: '360p', 720: 'HD' },
-          },
+      // TODO create mock core
+      core = createMockCore({
+        levelSelector: {
+          // restrictResolution: 360,
+          labels: { 360: '360p', 720: 'HD' },
         },
-        getPlugin: vi.fn().mockImplementation((name: string) => {
-          if (name === 'media_control') {
-            return mediaControl
-          }
-          if (name === 'bottom_gear') {
-            return bottomGear
-          }
-          return null
-        }),
+      })
+      activePlayback = core.activePlayback
+      core.getPlugin.mockImplementation((name: string) => {
+        if (name === 'media_control') {
+          return mediaControl
+        }
+        if (name === 'bottom_gear') {
+          return bottomGear
+        }
+        return null
       })
       mediaControl = createMediaControl(core)
       bottomGear = createBottomGear(core)
@@ -75,7 +72,7 @@ describe('LevelSelector', () => {
         activePlayback.emit('playback:levels:available', LEVELS)
         await clock.tickAsync(1)
       })
-      it('should render the proper level label', () => {
+      it('should render proper level label', () => {
         // @ts-ignore
         expect(levelSelector.el.textContent).toMatchQualityLevelLabel('Auto')
       })
@@ -111,28 +108,23 @@ describe('LevelSelector', () => {
   })
   describe('options.restrictResolution', () => {
     beforeEach(() => {
-      const activeContainer = createContainer()
-      activePlayback = createPlayback()
       let mediaControl: UICorePlugin | null = null
       let bottomGear: UICorePlugin | null = null
-      core = Object.assign(new EventLite(), {
-        activeContainer,
-        activePlayback,
-        options: {
-          levelSelector: {
-            restrictResolution: 360,
-            labels: { 360: '360p', 720: '720p' },
-          },
+      core = createMockCore({
+        levelSelector: {
+          restrictResolution: 360,
+          labels: { 360: '360p', 720: '720p' },
         },
-        getPlugin: vi.fn().mockImplementation((name: string) => {
-          if (name === 'media_control') {
-            return mediaControl
-          }
-          if (name === 'bottom_gear') {
-            return bottomGear
-          }
-          return null
-        }),
+      })
+      activePlayback = core.activePlayback
+      core.getPlugin.mockImplementation((name: string) => {
+        if (name === 'media_control') {
+          return mediaControl
+        }
+        if (name === 'bottom_gear') {
+          return bottomGear
+        }
+        return null
       })
       mediaControl = createMediaControl(core)
       bottomGear = createBottomGear(core)
@@ -196,23 +188,6 @@ describe('LevelSelector', () => {
   })
 })
 
-function createContainer() {
-  const container = Object.assign(new EventLite(), {
-    $el: {
-      html: vi.fn(),
-    },
-  })
-  return container
-}
-
-function createPlayback() {
-  const playback = Object.assign(new EventLite(), {
-    currentLevel: -1,
-    levels: [],
-  })
-  return playback
-}
-
 expect.extend({
   toMatchQualityLevelLabel(received, expected) {
     const { isNot } = this

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

@@ -13,7 +13,8 @@ import {
   $,
   Core,
 } from '@clappr/core'
-import { reportError } from '@gcorevideo/utils'
+import { reportError, trace } from '@gcorevideo/utils'
+
 import { type TimeProgress } from '../../playback.types.js'
 
 import { Kibo } from '../kibo/index.js'
@@ -417,9 +418,10 @@ export class MediaControl extends UICorePlugin {
   }
 
   /**
-   * Disables the plugin and unmounts its UI
+   * Hides the media control UI
    */
   override disable() {
+    trace(`${T} disable`)
     this.userDisabled = true
     this.hide()
     this.unbindKeyEvents()
@@ -430,6 +432,7 @@ export class MediaControl extends UICorePlugin {
    * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
    */
   override enable() {
+    trace(`${T} enable`)
     if (this.options.chromeless) {
       return
     }
@@ -1273,14 +1276,14 @@ export class MediaControl extends UICorePlugin {
   override destroy() {
     $(document).unbind('mouseup', this.stopDrag)
     $(document).unbind('mousemove', this.updateDrag)
+    $(document).unbind('touchend', this.stopDrag)
+    $(document).unbind('touchmove', this.updateDrag)
     this.unbindKeyEvents()
-    // @ts-ignore
-    this.stopListening()
     return super.destroy()
   }
 
   private configure() {
-    this.advertisementPlaying ? this.disable() : this.enable()
+    // this.advertisementPlaying ? this.disable() : this.enable()
     this.trigger(Events.MEDIACONTROL_OPTIONS_CHANGE)
   }