@gcorevideo/player 2.18.3 → 2.19.0

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

@@ -0,0 +1,241 @@
+import { UICorePlugin, Events, template, PlayerError } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
+
+import { CLAPPR_VERSION } from '../build.js';
+import type { TimerId, ZeptoResult } from '../types';
+
+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;
+
+type ErrorObject = {
+  description: string;
+  details?: string;
+  level: string;
+  code: string;
+  origin: string;
+}
+
+type PresentationalError = {
+  title: string;
+  message: string;
+  code: string;
+  icon: string;
+  reloadIcon: string;
+}
+
+const T = 'plugins.error_screen'
+
+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;
+
+  get name() {
+    return 'error_gplayer';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  get template() {
+    return template(templateHtml);
+  }
+
+  get container() {
+    return this.core.activeContainer;
+  }
+
+  override get attributes() {
+    return {
+      'class': 'player-error-screen',
+      'data-error-screen': '',
+    };
+  }
+
+  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);
+    }
+  }
+
+  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);
+  }
+
+  private bindReload() {
+    this.reloadButton = this.$el.find('.player-error-screen__reload');
+    this.reloadButton && this.reloadButton.on('click', this.reload.bind(this));
+  }
+
+  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();
+    }
+  }
+
+  private onFinishAd() {
+    this.hideValue = false;
+    if (this.err) {
+      this.container.disableMediaControl();
+      this.container.stop();
+      this.show();
+    }
+  }
+
+  private onError(err: ErrorObject) {
+    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;
+      }
+
+      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);
+      }
+    }
+  }
+
+  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;
+    }
+    this.core.mediaControl.disable();
+    this.render();
+    this.$el.show();
+  }
+
+  hide() {
+    this.$el.hide();
+  }
+
+  override render() {
+    if (!this.err) {
+      return this;
+    }
+    this.$el.html(this.template(this.err));
+
+    this.core.$el.append(this.el);
+
+    this.bindReload();
+
+    return this;
+  }
+}

package/src/plugins/favicon/Favicon.ts

@@ -0,0 +1,137 @@
+import { CorePlugin, Events, $, Core, Container } from '@clappr/core';
+
+import { CLAPPR_VERSION } from '../build.js';
+import { ZeptoResult } from '../types.js';
+
+import playIcon from '../../../assets/icons/new/play.svg';
+import pauseIcon from '../../../assets/icons/new/pause.svg';
+import stopIcon from '../../../assets/icons/new/stop.svg';
+
+const FAVICON_COLOR = '#567';
+const FAVICON_SELECTOR = 'link[rel="shortcut icon"]';
+
+// const oldIcon = $(FAVICON_SELECTOR);
+
+export class Favicon extends CorePlugin {
+  private _container: Container | null = null;
+
+  private oldIcon: ZeptoResult;
+
+  private playIcon: ZeptoResult | null = null;
+
+  private pauseIcon: ZeptoResult | null = null;
+
+  private stopIcon: ZeptoResult | null = null;
+
+  get name() {
+    return 'favicon';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  //   get oldIcon() {
+  //     return oldIcon;
+  //   }
+
+  constructor(core: Core) {
+    super(core);
+    this.oldIcon = $(FAVICON_SELECTOR);
+    if (this.oldIcon.length === 0) {
+      this.stopIcon = this.createIcon(stopIcon);
+      this.changeIcon(this.stopIcon);
+    }
+    this.configure();
+  }
+
+  configure() {
+    if (this.core.options.changeFavicon) {
+      if (!this.enabled) {
+        // @ts-ignore
+        this.stopListening(this.core, Events.CORE_OPTIONS_CHANGE);
+        this.enable();
+      }
+    } else if (this.enabled) {
+      this.disable();
+      this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure);
+    }
+  }
+
+  override bindEvents() {
+    this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure);
+    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.containerChanged);
+    this.core.activeContainer && this.containerChanged();
+  }
+
+  private containerChanged() {
+    // @ts-ignore
+    this._container && this.stopListening(this._container);
+    this._container = this.core.activeContainer;
+    this.listenTo(this._container, Events.CONTAINER_PLAY, this.setPlayIcon);
+    this.listenTo(this._container, Events.CONTAINER_PAUSE, this.setPauseIcon);
+    this.listenTo(this._container, Events.CONTAINER_STOP, this.resetIcon);
+    this.listenTo(this._container, Events.CONTAINER_ENDED, this.resetIcon);
+    this.listenTo(this._container, Events.CONTAINER_ERROR, this.resetIcon);
+    this.resetIcon();
+  }
+
+  override disable() {
+    super.disable();
+    this.resetIcon();
+  }
+
+  override destroy() {
+    super.destroy();
+    this.resetIcon();
+  }
+
+  private createIcon(svg: string) {
+    const canvas = $('<canvas/>');
+
+    canvas[0].width = 24;
+    canvas[0].height = 24;
+    const ctx = canvas[0].getContext('2d');
+
+    ctx.fillStyle = this.core.options.faviconColor || FAVICON_COLOR;
+    const d = $(svg).find('path').attr('d');
+    const path = new Path2D(d);
+
+    ctx.fill(path);
+    const icon = $('<link rel="shortcut icon" type="image/png"/>');
+
+    icon.attr('href', canvas[0].toDataURL('image/png'));
+
+    return icon;
+  }
+
+  private setPlayIcon() {
+    if (!this.playIcon) {
+      this.playIcon = this.createIcon(playIcon);
+    }
+
+    this.changeIcon(this.playIcon);
+  }
+
+  private setPauseIcon() {
+    if (!this.pauseIcon) {
+      this.pauseIcon = this.createIcon(pauseIcon);
+    }
+
+    this.changeIcon(this.pauseIcon);
+  }
+
+  private resetIcon() {
+    $(FAVICON_SELECTOR).remove();
+    const icon = this.oldIcon.length > 0 ? this.oldIcon : this.stopIcon;
+
+    this.changeIcon(icon);
+  }
+
+  private changeIcon(icon: ZeptoResult | null) {
+    if (icon) {
+      $('link[rel="shortcut icon"]').remove();
+      $('head').append(icon);
+    }
+  }
+}