@gcorevideo/player 2.18.3 → 2.19.0

package/src/plugins/clips/Clips.ts

@@ -0,0 +1,152 @@
+import { Container, Events, UICorePlugin } from '@clappr/core';
+import { TimeProgress } from '../../playback.types';
+
+import { strtimeToMiliseconds } from '../utils.js';
+import '../../../assets/clips/clips.scss';
+
+type ClipDesc = {
+  start: number;
+  text: string;
+  end: number;
+  index: number;
+}
+
+type ClipItem = {
+  start: number;
+  text: string;
+}
+
+export class ClipsPlugin extends UICorePlugin {
+  private clips: Map<number, ClipDesc> = new Map()
+
+  private duration: number = 0;
+
+  private durationGetting = false;
+
+  private _oldContainer: Container | undefined;
+
+  get name() {
+    return 'clips';
+  }
+
+  override get attributes() {
+    return {
+      'class': this.name
+    };
+  }
+
+  override bindEvents() {
+    this.listenToOnce(this.core, Events.CORE_READY, this._onCoreReady);
+    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged);
+    this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
+  }
+
+  private _onCoreReady() {
+    if (!this.options.clips) {
+      this.destroy();
+
+      return;
+    }
+
+    this.parseClips();
+  }
+
+  unbindEvents() {
+    // @ts-ignore
+    this.stopListening(this.core, Events.CORE_READY);
+    // @ts-ignore
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
+  }
+
+  private _onMediaControlContainerChanged() {
+    this._bindContainerEvents();
+  }
+
+  private playerResize() {
+    this.durationGetting = false;
+    if (this.durationGetting) {
+      this.makeSvg(this.duration);
+    }
+  }
+
+  private _bindContainerEvents() {
+    if (this._oldContainer) {
+      this.stopListening(this._oldContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+    }
+
+    this._oldContainer = this.core.mediaControl.container;
+    this.durationGetting = false;
+    this.listenTo(this.core.mediaControl.container, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+  }
+
+  private onTimeUpdate(event: TimeProgress) {
+    if (!this.durationGetting) {
+      this.duration = event.total;
+      this.makeSvg(event.total);
+      this.durationGetting = true;
+    }
+
+    for (const value of this.clips.values()) {
+      if (event.current >= value.start && event.current < value.end) {
+        this.core.mediaControl.setClipText(value.text);
+        break;
+      }
+    }
+  }
+
+  private parseClips() {
+    const textArr = this.options.clips.text.split('\n');
+
+    const clipsArr = textArr.map((val: string) => {
+      const matchRes = val.match(/(\d+:\d+|:\d+) (.+)/i);
+
+      return matchRes ? {
+        start: strtimeToMiliseconds(matchRes[1]),
+        text: matchRes[2],
+      } : null;
+    }).filter((clip: ClipItem | null) => clip !== null);
+
+    clipsArr.sort((a: ClipDesc, b: ClipDesc) => a.start - b.start);
+
+    clipsArr.forEach((clip: ClipDesc, index: number) => {
+      this.clips.set(clip.start, {
+        index,
+        start: clip.start,
+        text: clip.text,
+        end: clipsArr[index + 1] ? clipsArr[index + 1].start : null,
+      });
+    });
+  }
+
+  getText(time: number) {
+    for (const [key, value] of this.clips.entries()) {
+      if (time >= value.start && time < value.end) {
+        return value.text;
+      }
+    }
+    return '';
+  }
+
+  makeSvg(duration: number) {
+    let svg = '<svg width="0" height="0">\n' + '<defs>\n' + '<clipPath id="myClip">\n';
+    const widthOfSeek = this.core.mediaControl.container.$el.width();
+    let finishValue = 0;
+
+    this.clips.forEach(val => {
+      let end = val.end;
+
+      if (!end) {
+        end = val.end = duration;
+      }
+
+      const widthChunk = (end - val.start) * widthOfSeek / duration;
+
+      svg += `<rect x="${finishValue}" y="0" width="${widthChunk - 2}" height="30"/>\n`;
+      finishValue += widthChunk;
+    });
+
+    svg += `<rect x="${finishValue}" y="0" width="${widthOfSeek - finishValue}" height="30"/>\n`;
+    svg += '</clipPath>' + '</defs>' + '</svg>';
+    this.core.mediaControl.setSVGMask(svg);
+  }
+}

package/src/plugins/context-menu/ContextMenu.ts

@@ -0,0 +1,134 @@
+import { UICorePlugin, Events, template, $, Core, Container } from '@clappr/core';
+
+import { CLAPPR_VERSION } from '../build.js';
+
+import '../../../assets/context-menu/context_menu.scss';
+import templateHtml from '../../../assets/context-menu/context_menu.ejs';
+
+type MenuOption = {
+  label: string;
+  name: string;
+}
+
+export class ContextMenu extends UICorePlugin {
+  private _label: string = '';
+
+  private _url: string = '';
+
+  private container: Container | null = null;
+
+  private menuOptions: MenuOption[] = [];
+
+  get name() {
+    return 'context_menu';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  override get attributes() {
+    return { 'class': 'context-menu' };
+  }
+
+  get mediaControl() {
+    return this.core.mediaControl;
+  }
+
+  get template() {
+    return template(templateHtml);
+  }
+
+  get label() {
+    return this._label || 'Gcore player ver. ' + process.env.VERSION;
+  }
+
+  get url() {
+    return this._url || 'https://gcore.com/';
+  }
+
+  get exposeVersion() {
+    return {
+      label: this.label,
+      name: 'version'
+    };
+  }
+
+  override get events() {
+    return {
+      'click [data-version]': 'onOpenMainPage'
+    };
+  }
+
+  constructor(core: Core) {
+    super(core);
+    if (this.options.contextMenu && this.options.contextMenu.label) {
+      this._label = this.options.contextMenu.label;
+    }
+    if (this.options.contextMenu && this.options.contextMenu.url) {
+      this._url = this.options.contextMenu.url;
+    }
+    this.render();
+    this.bindEvents();
+  }
+
+  override bindEvents() {
+    if (this.mediaControl) {
+      this.listenTo(this.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.containerChanged);
+
+      if (this.container) {
+        this.listenTo(this.container, Events.CONTAINER_CONTEXTMENU, this.toggleContextMenu);
+        this.listenTo(this.container, Events.CONTAINER_CLICK, this.hide);
+      }
+    }
+    $('body').on('click', this.hide.bind(this));
+  }
+
+  override destroy() {
+    $('body').off('click', this.hide.bind(this));
+    // @ts-ignore
+    this.stopListening();
+    return super.destroy();
+  }
+
+  private containerChanged() {
+    this.container = this.core.activeContainer;
+    // @ts-ignore
+    this.stopListening();
+    this.bindEvents();
+  }
+
+  private toggleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+    const offset = this.container?.$el.offset();
+
+    this.show(event.pageY - offset.top, event.pageX - offset.left);
+  }
+
+  private show(top: number, left: number) {
+    this.hide();
+    if (this.options.contextMenu && this.options.contextMenu.preventShowContextMenu) {
+      return;
+    }
+    this.$el.css({ top, left });
+    this.$el.show();
+  }
+
+  private hide() {
+    this.$el.hide();
+  }
+
+  private onOpenMainPage() {
+    window.open(this.url, '_blank');
+  }
+
+  override render() {
+    this.menuOptions = [this.exposeVersion];
+    this.$el.html(this.template({ options: this.menuOptions }));
+    this.core.$el.append(this.$el);
+    this.hide();
+    this.disable();
+
+    return this;
+  }
+}

package/src/plugins/disable-controls/DisableControls.ts

@@ -0,0 +1,81 @@
+import { UICorePlugin, Events } from '@clappr/core';
+
+import { CLAPPR_VERSION } from '../build.js';
+
+export class DisableControls extends UICorePlugin {
+  get name() {
+    return 'disable_controls';
+  }
+
+  get container() {
+    return this.core && this.core.activeContainer;
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  override bindEvents() {
+    if (this.container) {
+      this.listenTo(this.container, Events.CONTAINER_MEDIACONTROL_ENABLE, this.enableControls);
+      this.listenTo(this.container, Events.CONTAINER_PLAY, this.enableControls);
+      this.listenTo(this.container, Events.CONTAINER_PAUSE, this.enableControls);
+      this.listenTo(this.container, Events.CONTAINER_STOP, this.enableControls);
+      this.listenTo(this.container, Events.CONTAINER_ENDED, this.enableControls);
+      this.listenTo(this.container, 'container:advertisement:start', this.enableControls);
+    }
+    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_SHOW, this.enableControls);
+    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.enableControls);
+  }
+
+  unbindEvents() {
+    // @ts-ignore
+    this.stopListening(this.core, Events.CORE_READY);
+    // @ts-ignore
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_SHOW);
+    // @ts-ignore
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
+    // @ts-ignore
+    this.stopListening(this.container, Events.CONTAINER_MEDIACONTROL_ENABLE);
+    // @ts-ignore
+    this.stopListening(this.container, Events.CONTAINER_PLAY);
+    // @ts-ignore
+    this.stopListening(this.container, Events.CONTAINER_PAUSE);
+    // @ts-ignore
+    this.stopListening(this.container, Events.CONTAINER_STOP);
+    // @ts-ignore
+    this.stopListening(this.container, Events.CONTAINER_ENDED);
+    // @ts-ignore
+    this.stopListening(this.container, 'container:advertisement:start');
+  }
+
+  private setDisableStyles() {
+    const css = document.createElement('style');
+
+    const styles = '.control-need-disable { display: none!important; }';
+
+    css.appendChild(document.createTextNode(styles));
+
+    this.core.$el.get(0).appendChild(css);
+  }
+
+  private onCoreReady() {
+    this.setDisableStyles();
+    this.bindEvents();
+    this.enableControls();
+  }
+
+  private enableControls() {
+    this.disableAllControls();
+  }
+
+  private disableAllControls() {
+    setTimeout(() => {
+      const spinnerPlugin = this.container.getPlugin('spinner');
+
+      spinnerPlugin?.destroy();
+      this.container.disableMediaControl();
+    }, 0);
+  }
+}

package/src/plugins/dvr-controls/DvrControls.ts

@@ -0,0 +1,131 @@
+import { Core, Events, Playback, UICorePlugin, template } from '@clappr/core';
+
+import { CLAPPR_VERSION } from '../build.js';
+
+import dvrHTML from '../../../assets/dvr-controls/index.ejs';
+import '../../../assets/dvr-controls/dvr_controls.scss';
+
+export class DvrControls extends UICorePlugin {
+  get template() {
+    return template(dvrHTML);
+  }
+
+  get name() {
+    return 'dvr_controls';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  override get events() {
+    return {
+      'click .live-button': 'click'
+    };
+  }
+
+  override get attributes() {
+    return {
+      'class': 'dvr-controls',
+      'data-dvr-controls': ''
+    };
+  }
+
+  constructor(core: Core) {
+    super(core);
+    this.settingsUpdate();
+  }
+
+  override bindEvents() {
+    this.bindCoreEvents();
+    this.bindContainerEvents();
+
+    if (this.core.activeContainer) {
+      this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.dvrChanged);
+    }
+  }
+
+  private bindCoreEvents() {
+    if (this.core.mediaControl.settings) {
+      this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.containerChanged);
+      this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.settingsUpdate);
+      this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render);
+    } else {
+      setTimeout(() => this.bindCoreEvents(), 100);
+    }
+  }
+
+  private bindContainerEvents() {
+    if (this.core.activeContainer) {
+      this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
+      this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.dvrChanged);
+    }
+  }
+
+  private containerChanged() {
+    // @ts-ignore
+    this.stopListening();
+    this.bindEvents();
+  }
+
+  private dvrChanged(dvrEnabled: boolean) {
+    if (this.core.getPlaybackType() !== Playback.LIVE) {
+      return;
+    }
+    this.settingsUpdate();
+    this.core.mediaControl.$el.addClass('live');
+    if (dvrEnabled) {
+      this.core.mediaControl.$playbackRate.removeClass('playbackrate-enable');
+      this.core.mediaControl.$el
+        .addClass('dvr')
+        .find('.media-control-indicator[data-position], .media-control-indicator[data-duration]')
+        .hide();
+    } else {
+      this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
+      this.core.mediaControl.$el.removeClass('dvr');
+    }
+  }
+
+  click() {
+    const mediaControl = this.core.mediaControl;
+    const container = mediaControl.container;
+
+    if (!container.isPlaying()) {
+      container.play();
+    }
+
+    if (mediaControl.$el.hasClass('dvr')) {
+      container.seek(container.getDuration());
+    }
+  }
+
+  settingsUpdate() {
+    // @ts-ignore
+    this.stopListening();
+    this.core.mediaControl.$el.removeClass('live');
+    if (this.shouldRender()) {
+      this.render();
+      this.$el.click(() => this.click());
+    }
+    this.bindEvents();
+  }
+
+  shouldRender() {
+    const useDvrControls = this.core.options.useDvrControls === undefined || !!this.core.options.useDvrControls;
+
+    return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
+  }
+
+  override render() {
+    this.$el.html(this.template({
+      live: this.core.i18n.t('live'),
+      backToLive: this.core.i18n.t('back_to_live')
+    }));
+    if (this.shouldRender()) {
+      this.core.mediaControl.$el.addClass('live');
+      this.core.mediaControl.$('.media-control-left-panel[data-media-control]').append(this.$el);
+    }
+
+    return this;
+  }
+}