@gcorevideo/player 2.18.3 → 2.19.0

package/src/plugins/seek-time/SeekTime.ts

@@ -0,0 +1,191 @@
+// Copyright 2014 Globo.com Player authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core';
+import { TimeUpdate } from '../..//playback.types';
+
+import { CLAPPR_VERSION } from '../build.js';
+
+import seekTimeHTML from '../../../assets/seek-time/seek-time.html';
+import '../../../assets/seek-time/seek-time.scss';
+import { ZeptoResult } from '../types.js';
+
+const { formatTime } = Utils;
+
+export class SeekTime extends UICorePlugin {
+  get name() {
+    return 'seek_time';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  get template() {
+    return template(seekTimeHTML);
+  }
+
+  override get attributes() {
+    return {
+      'class': 'seek-time',
+      'data-seek-time': ''
+    };
+  }
+
+  get mediaControl() {
+    return this.core.mediaControl;
+  }
+
+  get mediaControlContainer() {
+    return this.mediaControl.container;
+  }
+
+  get isLiveStreamWithDvr() {
+    return this.mediaControlContainer &&
+      this.mediaControlContainer.getPlaybackType() === Playback.LIVE &&
+      this.mediaControlContainer.isDvrEnabled();
+  }
+
+  get durationShown() {
+    return !this.isLiveStreamWithDvr;
+  }
+
+  private hoveringOverSeekBar = false;
+
+  private hoverPosition = 0;
+
+  private displayedDuration: string | null = null;
+
+  private displayedSeekTime: string| null = null;
+
+  private duration = 0;
+  // private firstFragDateTime = 0;
+
+  private rendered = false;
+
+  private $durationEl: ZeptoResult | null = null;
+
+  private $seekTimeEl: ZeptoResult | null = null;
+
+  override bindEvents() {
+    this.listenTo(this.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+    this.listenTo(this.mediaControl, Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this.showTime);
+    this.listenTo(this.mediaControl, Events.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this.hideTime);
+    this.listenTo(this.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.onContainerChanged);
+    if (this.mediaControlContainer) {
+      this.listenTo(this.mediaControlContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.update);
+      this.listenTo(this.mediaControlContainer, Events.CONTAINER_TIMEUPDATE, this.updateDuration);
+    }
+  }
+
+  private onContainerChanged() {
+    // @ts-ignore
+    this.stopListening();
+    this.bindEvents();
+  }
+
+  private updateDuration(timeProgress: TimeUpdate) {
+    this.duration = timeProgress.total;
+    // this.firstFragDateTime = timeProgress.firstFragDateTime;
+    this.update();
+  }
+
+  private showTime(event: MouseEvent) {
+    this.hoveringOverSeekBar = true;
+    this.calculateHoverPosition(event);
+    this.update();
+  }
+
+  private hideTime() {
+    this.hoveringOverSeekBar = false;
+    this.update();
+  }
+
+  private calculateHoverPosition(event: MouseEvent) {
+    const offset = event.pageX - this.mediaControl.$seekBarContainer.offset().left;
+
+    // proportion into the seek bar that the mouse is hovered over 0-1
+    this.hoverPosition = Math.min(1, Math.max(offset/this.mediaControl.$seekBarContainer.width(), 0));
+  }
+
+  getSeekTime() {
+    let seekTime;
+
+    if (this.isLiveStreamWithDvr) {
+      seekTime = this.duration - this.hoverPosition * this.duration;
+    } else {
+      seekTime = this.hoverPosition * this.duration;
+    }
+
+    return { seekTime };
+  }
+
+  update() {
+    if (!this.rendered) {
+      // update() is always called after a render
+      return;
+    }
+    if (!this.shouldBeVisible()) {
+      this.$el.hide();
+      this.$el.css('left', '-100%');
+    } else {
+      const seekTime = this.getSeekTime();
+      let currentSeekTime = formatTime(seekTime.seekTime, false);
+
+      if (this.isLiveStreamWithDvr) {
+        currentSeekTime = `-${currentSeekTime}`;
+      }
+
+      // only update dom if necessary, ie time actually changed
+      if (currentSeekTime !== this.displayedSeekTime) {
+        this.$seekTimeEl.text(currentSeekTime);
+        this.displayedSeekTime = currentSeekTime;
+      }
+
+      if (this.durationShown) {
+        this.$durationEl.show();
+        const currentDuration = formatTime(this.duration, false);
+
+        if (currentDuration !== this.displayedDuration) {
+          this.$durationEl.text(currentDuration);
+          this.displayedDuration = currentDuration;
+        }
+      } else {
+        this.$durationEl.hide();
+      }
+
+      // the element must be unhidden before its width is requested, otherwise it's width will be reported as 0
+      this.$el.show();
+      const containerWidth = this.mediaControl.$seekBarContainer.width();
+      const elWidth = this.$el.width();
+      let elLeftPos = this.hoverPosition * containerWidth;
+
+      elLeftPos -= elWidth / 2;
+      elLeftPos = Math.max(0, Math.min(elLeftPos, containerWidth - elWidth));
+      this.$el.css('left', elLeftPos);
+    }
+  }
+
+  shouldBeVisible() {
+    return this.mediaControlContainer &&
+      this.mediaControlContainer.settings.seekEnabled &&
+      this.hoveringOverSeekBar &&
+      this.hoverPosition !== null &&
+      this.duration !== null;
+  }
+
+  override render() {
+    this.rendered = true;
+    this.displayedDuration = null;
+    this.displayedSeekTime = null;
+    this.$el.html(this.template());
+    this.$el.hide();
+    this.mediaControl.$el.append(this.el);
+    this.$seekTimeEl = this.$el.find('[data-seek-time]');
+    this.$durationEl = this.$el.find('[data-duration]');
+    this.$durationEl.hide();
+    this.update();
+    return this;
+  }
+}

package/src/plugins/share/Share.ts

@@ -0,0 +1,148 @@
+import { Container, Events, UICorePlugin, template } from '@clappr/core';
+
+import { CLAPPR_VERSION } from '../build.js';
+
+import pluginHtml from '../../../assets/share/share.ejs';
+import '../../../assets/share/style.scss';
+import shareIcon from '../../../assets/icons/old/share.svg';
+import closeIcon from '../../../assets/icons/old/close-share.svg';
+import fbIcon from '../../../assets/icons/old/fb.svg';
+import twIcon from '../../../assets/icons/old/twitter.svg';
+
+export class Share extends UICorePlugin {
+  private hide = false;
+
+  private container: Container | null = null;
+
+  get name() {
+    return 'share';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  get template() {
+    return template(pluginHtml);
+  }
+
+  override get attributes() {
+    return {
+      'class': this.name + '_plugin',
+      'data-share': ''
+    };
+  }
+
+  override get events() {
+    return {
+      'click [data-share-button]': 'onShareShow',
+      'click [data-share-close]': 'onShareHide',
+      'click [data-share-fb]': 'onShareFB',
+      'click [data-share-tw]': 'onShareTW',
+      'click [data-share-link]': 'onShareLinkClick',
+      'click [data-share-embed]': 'onShareEmbedClick'
+    };
+  }
+
+  override bindEvents() {
+    this.listenTo(this.core, Events.CORE_READY, this.onReady);
+    // this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideShare);
+    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_SHOW, this.showShare);
+  }
+
+  unBindEvents() {
+    // @ts-ignore
+    this.stopListening(this.core, Events.CORE_READY);
+    // @ts-ignore
+    // this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
+    // @ts-ignore
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED);
+    // @ts-ignore
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE);
+    // @ts-ignore
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_SHOW);
+  }
+
+  canShowShare() {
+    this.hide = false;
+  }
+
+  private onReady() {
+    this.hide = true;
+    this.container = this.core.activeContainer;
+    if (this.container) {
+      this.listenTo(this.container, 'container:settingsupdate', this.canShowShare);
+    }
+    this.hideShare();
+  }
+
+  override render() {
+    this.$el.html(this.template({
+      'url':this.options.shareURL,
+      'embed': this.options.embed,
+      'embed_title': this.core.i18n.t('embed_title'),
+      'share_title': this.core.i18n.t('share_title'),
+      'link_title': this.core.i18n.t('link_title'),
+      'social_title': this.core.i18n.t('social_title'),
+    }));
+    this.core.mediaControl.$el.append(this.el);
+    this.$el.find('.share-container').hide();
+    this.initializeIcons();
+
+    return this;
+  }
+
+  hideShare() {
+    this.$el.addClass('share-hide');
+  }
+
+  showShare() {
+    if (this.hide) {
+      return;
+    }
+    this.$el.removeClass('share-hide');
+  }
+
+  initializeIcons() {
+    this.$el.find('button.media-control-button[data-share-button]')
+      .addClass('gcore-skin-button-color')
+      .append(shareIcon);
+    this.$el.find('div.share-container-header--close').append(closeIcon);
+    this.$el.find('div.share-container-header--socialicon_fb').append(fbIcon);
+    this.$el.find('div.share-container-header--socialicon_tw').append(twIcon);
+  }
+
+  onShareShow() {
+    this.$el.find('.share-container').show();
+  }
+
+  onShareHide() {
+    this.$el.find('.share-container').hide();
+  }
+
+  onShareFB() {
+    if (this.options.shareURL) {
+      const url = 'https://www.facebook.com/sharer.php?u='+this.options.shareURL;
+
+      window.open(url, '_blank');
+    }
+  }
+
+  onShareTW() {
+    if (this.options.shareURL) {
+      const url = 'https://twitter.com/intent/tweet?url='+this.options.shareURL;
+
+      window.open(url, '_blank');
+    }
+  }
+
+  onShareLinkClick() {
+    this.$el.find('.share-container-header--link')[0].setSelectionRange(0, this.options.shareURL.length);
+  }
+
+  onShareEmbedClick() {
+    this.$el.find('.share-container-header--embed')[0].setSelectionRange(0, this.options.embed.length);
+  }
+}

package/src/plugins/skip-time/SkipTime.ts

@@ -0,0 +1,109 @@
+import { UICorePlugin as UICorePluginOriginal, Browser, Playback, Events, template } from '@clappr/core';
+
+import { CLAPPR_VERSION } from '../build.js';
+
+import pluginHtml from '../../../assets/skip-time/skip-time.ejs';
+import '../../../assets/skip-time/style.scss';
+
+type Position = 'mid' | 'left' | 'right';
+
+export class SkipTime extends UICorePluginOriginal {
+  get name() {
+    return 'skip_time';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  get container() {
+    return this.core && this.core.activeContainer;
+  }
+
+  get template() {
+    return template(pluginHtml);
+  }
+
+  override get attributes() {
+    return {
+      'class': this.name + '_plugin',
+      'data-skip-time': ''
+    };
+  }
+
+  private position: Position = 'mid';
+
+  override get events() {
+    return {
+      'click [data-skip-left]': 'setBack',
+      'click [data-skip-mid]': 'setMidClick',
+      'click [data-skip-right]': 'setForward',
+    };
+  }
+
+  override bindEvents() {
+    this.listenTo(this.core, Events.CORE_READY, this.render);
+    if (!this.container) {
+      return;
+    }
+    this.listenTo(this.container, Events.CONTAINER_DBLCLICK, this.handleRewindClicks);
+  }
+
+  setBack() {
+    this.position = 'left';
+  }
+
+  handleRewindClicks() {
+    if (this.core.getPlaybackType() === Playback.LIVE && !this.container.isDvrEnabled()) {
+      this.toggleFullscreen();
+
+      return;
+    }
+    if (Browser.isMobile) {
+      if (this.position === 'left') {
+        const seekPos = this.container.getCurrentTime() - 10;
+
+        if (seekPos < 0) {
+          return;
+        }
+        this.container.seek(seekPos);
+      } else if (this.position === 'right') {
+        const seekPos = this.container.getCurrentTime() + 30;
+
+        if (seekPos > this.container.getDuration()) {
+          return;
+        }
+
+        this.container.seek(seekPos);
+      } else {
+        this.toggleFullscreen();
+      }
+    }
+  }
+
+  setMidClick() {
+    this.position = 'mid';
+  }
+
+  setForward() {
+    this.position = 'right';
+  }
+
+  toggleFullscreen() {
+    this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name);
+    this.container.fullscreen();
+    this.core.toggleFullscreen();
+  }
+
+  override render() {
+    this.$el.html(template(pluginHtml));
+
+    if (this.core.activeContainer) {
+      this.core.activeContainer.$el.append(this.el);
+    }
+
+    this.bindEvents();
+
+    return this;
+  }
+}

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

@@ -0,0 +1,239 @@
+import {
+  Events as ClapprEvents,
+  CorePlugin,
+  type Core as ClapprCore,
+} from '@clappr/core'
+import {
+  type PlaybackError,
+  PlaybackErrorCode,
+} from '../..//playback.types'
+import {
+  type PlayerMediaSourceDesc,
+} from '../..//types'
+import { trace } from '@gcorevideo/utils'
+
+import { CLAPPR_VERSION } from '../build'
+
+const T = 'plugins.source_controller'
+
+const INITIAL_RETRY_DELAY = 1000
+
+const MAX_RETRY_DELAY = 5000
+
+const RETRY_DELAY_BLUR = 500
+
+const VERSION = '0.0.1'
+
+type SyncFn = (cb: () => void) => void
+
+function noSync(cb: () => void) {
+  queueMicrotask(cb)
+}
+
+/**
+ * This plugin is responsible for managing the automatic failover between sources.
+ * @beta
+ * @remarks
+ * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
+ * on how sources ordering and selection works.
+ *
+ * This plugin does not expose any public methods apart from required by the Clappr plugin interface.
+ * It is supposed to work autonomously.
+ *
+ * @example
+ * ```ts
+ * import { SourceController } from '@gcorevideo/player-plugins'
+ * 
+ * Player.registerPlugin(SourceController)
+ * ```
+ */
+export class SourceController extends CorePlugin {
+  /*
+   * The Logic itself is quite simple:
+   * * Here is the short diagram:
+   *
+   * sources_list:  
+   *       - a.mpd  |    +--------------------+
+   *       - b.m3u8 |--->|         init       |
+   *       - ...    |    |--------------------|
+   *                     | current_source = 0 |
+   *                     +--------------------+
+   *                            |
+   *                            |  source = a.mpd
+   *                            |  playback = dash.js
+   *                            v
+   *                      +------------------+
+   *                  +-->|   load source    |
+   *                  |   +---------|--------+
+   *                  |             v
+   *                  |   +------------------+
+   *                  |   |       play       |
+   *                  |   +---------|--------+
+   *                  |             |
+   *                  |             v
+   *                  |   +-----------------------+
+   *                  |   |  on playback_error    |
+   *                  |   |-----------------------|
+   *                  |   | current_source =      |
+   *                  |   |  (current_source + 1) |
+   *                  |   |  % len sources_list   |
+   *                  |   |                       |
+   *                  |   | delay 1..3s           |
+   *                  |   +---------------|-------+
+   *                  |                   |
+   *                  |   source=b.m3u8   |
+   *                  |   playback=hls.js |
+   *                  +-------------------+
+   *
+   */
+  private sourcesList: PlayerMediaSourceDesc[] = []
+
+  private currentSourceIndex = 0
+
+  private sourcesDelay: Record<string, number> = {}
+
+  private active = false
+
+  private sync: SyncFn = noSync
+
+  get name() {
+    return 'source_controller'
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION }
+  }
+
+  constructor(core: ClapprCore) {
+    super(core)
+    this.sourcesList = this.core.options.sources
+    if (this.core.options.source !== undefined) {
+      // prevent Clappr from loading all sources simultaneously
+      this.core.options.sources = [this.core.options.source]
+    } else {
+      this.core.options.sources = this.core.options.sources.slice(0, 1)
+    }
+  }
+
+  /**
+   * @internal
+   */
+  override bindEvents() {
+    super.bindEvents()
+
+    this.listenTo(this.core, ClapprEvents.CORE_READY, () => this.onReady())
+  }
+
+  private onReady() {
+    trace(`${T} onReady`, {
+      retrying: this.active,
+    })
+    const spinner = this.core.activeContainer?.getPlugin('spinner')
+    if (spinner) {
+      this.sync = (cb: () => void) => {
+        spinner.once('spinner:sync', cb)
+      }
+    } else {
+      this.sync = noSync
+    }
+    this.bindContainerEventListeners()
+    if (this.active) {
+      this.core.activeContainer?.getPlugin('poster_custom')?.disable()
+      spinner?.show()
+    }
+  }
+
+  private bindContainerEventListeners() {
+    trace(`${T} bindContainerEventListeners`, {
+      activePlayback: this.core.activePlayback?.name,
+    })
+    this.core.activePlayback.on(
+      ClapprEvents.PLAYBACK_ERROR,
+      (error: PlaybackError) => {
+        trace(`${T} on PLAYBACK_ERROR`, {
+          error: {
+            code: error?.code,
+            description: error?.description,
+            level: error?.level,
+          },
+          retrying: this.active,
+          currentSource: this.sourcesList[this.currentSourceIndex],
+        })
+        switch (error.code) {
+          case PlaybackErrorCode.MediaSourceUnavailable:
+            this.core.activeContainer?.getPlugin('poster_custom')?.disable()
+            this.retryPlayback()
+            break
+          // TODO handle other errors
+          default:
+            break
+        }
+      },
+    )
+    this.core.activePlayback.on(ClapprEvents.PLAYBACK_PLAY, () => {
+      trace(`${T} on PLAYBACK_PLAY`, {
+        currentSource: this.sourcesList[this.currentSourceIndex],
+        retrying: this.active,
+      })
+      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()
+      }
+    })
+  }
+
+  private reset() {
+    this.active = false
+    this.sourcesDelay = {}
+  }
+
+  private retryPlayback() {
+    trace(`${T} retryPlayback enter`, {
+      currentSourceIndex: this.currentSourceIndex,
+      currentSource: this.sourcesList[this.currentSourceIndex],
+      sourcesList: this.sourcesList,
+    })
+    this.active = true
+    this.getNextMediaSource().then((nextSource: PlayerMediaSourceDesc) => {
+      trace(`${T} retryPlayback syncing...`, {
+        nextSource,
+      })
+      const rnd = RETRY_DELAY_BLUR * Math.random()
+      this.sync(() => {
+        trace(`${T} retryPlayback loading...`, {
+          nextSource,
+        })
+        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)
+      })
+    })
+  }
+
+  private getNextMediaSource(): Promise<PlayerMediaSourceDesc> {
+    return new Promise((resolve) => {
+      this.sourcesDelay[this.currentSourceIndex] = Math.min(
+        MAX_RETRY_DELAY,
+        (this.sourcesDelay[this.currentSourceIndex] || INITIAL_RETRY_DELAY) * 2,
+      )
+      this.currentSourceIndex =
+        (this.currentSourceIndex + 1) % this.sourcesList.length
+      const delay =
+        this.sourcesDelay[this.currentSourceIndex] || INITIAL_RETRY_DELAY
+      const s = this.sourcesList[this.currentSourceIndex]
+      setTimeout(() => resolve(s), delay)
+    })
+  }
+
+  static get version() {
+    return VERSION
+  }
+}