@gcorevideo/player 2.18.3 → 2.19.0

package/src/plugins/ga-events/GaEvents.js

@@ -0,0 +1,395 @@
+// Clappr player is Copyright 2014 Globo.com Player authors. All rights reserved.
+
+import { CorePlugin, Events, Playback, $ } from '@clappr/core';
+import gaTrackingSnippet from './ga-tracking';
+
+export class GaEvents extends CorePlugin {
+  get name() {
+    return 'ga_events';
+  }
+
+  constructor(core) {
+    super(core);
+    this._volumeTimer = null;
+    this._doSendPlay = true;
+    this.readPluginConfig(this.options.gaEventsPlugin);
+    gaTrackingSnippet(this._gaCfg.name, this._gaCfg.debug, this._gaCfg.trace);
+    this._ga('create', this._trackingId, this._createFieldsObject);
+  }
+
+  bindEvents() {
+    const eventsToAlwaysBind = [
+      { event: Events.CONTAINER_TIMEUPDATE, handler: this.onTimeUpdate },
+      { event: Events.CONTAINER_PLAY, handler: this.onPlay },
+      { event: Events.CONTAINER_SEEK, handler: (event) => this.onSeek(event) },
+      { event: Events.CONTAINER_PAUSE, handler: this.onPause },
+      { event: Events.CONTAINER_STOP, handler: this.onStop },
+      { event: Events.CONTAINER_ENDED, handler: this.onEnded },
+    ];
+
+    const conditionalEvents = [
+      { condition: 'ready', event: Events.CONTAINER_READY, handler: this.onReady },
+      { condition: 'buffering', event: Events.CONTAINER_STATE_BUFFERING, handler: this.onBuffering },
+      { condition: 'bufferfull', event: Events.CONTAINER_STATE_BUFFERFULL, handler: this.onBufferFull },
+      { condition: 'loadedmetadata', event: Events.CONTAINER_LOADEDMETADATA, handler: this.onLoadedMetadata },
+      { condition: 'volume', event: Events.CONTAINER_VOLUME, handler: (event) => this.onVolumeChanged(event) },
+      { condition: 'fullscreen', event: Events.CONTAINER_FULLSCREEN, handler: this.onFullscreen },
+      { condition: 'playbackstate', event: Events.CONTAINER_PLAYBACKSTATE, handler: this.onPlaybackChanged },
+      { condition: 'highdefinitionupdate', event: Events.CONTAINER_HIGHDEFINITIONUPDATE, handler: this.onHD },
+      { condition: 'playbackdvrstatechanged', event: Events.CONTAINER_PLAYBACKDVRSTATECHANGED, handler: this.onDVR },
+      { condition: 'error', event: Events.CONTAINER_ERROR, handler: this.onError },
+    ];
+
+    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.containerChanged);
+    this._container = this.core.activeContainer;
+    if (this._container) {
+      // Set resolved source as eventLabel if not defined in plugin configuration
+      if (!this._label) {
+        this._label = this._container.options.src;
+      }
+
+      eventsToAlwaysBind.forEach(({ event, handler }) => {
+        this.listenTo(this._container, event, handler);
+      });
+
+      conditionalEvents.forEach(({ condition, event, handler }) => {
+        if (this._hasEvent(condition)) {
+          this.listenTo(this._container, event, handler);
+        }
+      });
+    }
+  }
+
+  getExternalInterface() {
+    // Expose player method only if tracker name is available
+    if (this._trackerName) {
+      return {
+        gaEventsTracker: this.gaTracker
+      };
+    }
+
+    return {};
+  }
+
+  containerChanged() {
+    this.stopListening();
+    this.bindEvents();
+  }
+
+  get _ga() {
+    return window[window.GoogleAnalyticsObject];
+  }
+
+  gaTracker() {
+    return this._ga.getByName && this._ga.getByName(this._trackerName);
+  }
+
+  gaEvent(category, action, label, value) {
+    this._ga(this._send, 'event', category, action, label, value);
+  }
+
+  gaException(desc, isFatal=false) {
+    this._ga(this._send, 'exception', {
+      'exDescription': desc,
+      'exFatal': isFatal
+    });
+  }
+
+  readPluginConfig(cfg) {
+    if (!cfg) {
+      throw new Error(this.name + ' plugin config is missing');
+    }
+    if (!cfg.trackingId) {
+      throw new Error(this.name + ' plugin "trackingId" required config parameter is missing');
+    }
+
+    this._gaCfg = cfg.gaCfg || { name: 'ga', debug: false, trace: false };
+    this._trackingId = cfg.trackingId;
+    this._createFieldsObject = cfg.createFieldsObject;
+    this._trackerName = this._createFieldsObject && this._createFieldsObject.name;
+    this._send = this._trackerName ? this._trackerName + '.send' : 'send';
+    this._category = cfg.eventCategory || 'Video';
+    this._label = cfg.eventLabel; // Otherwise filled in bindEvents()
+    this._setValue = cfg.eventValueAuto === true;
+    this._events = $.isArray(cfg.eventToTrack) && cfg.eventToTrack || this._defaultEvents;
+    this._eventMap = $.isPlainObject(cfg.eventMapping) && cfg.eventMapping || this._defaultEventMap;
+    this._gaPlayOnce = cfg.sendPlayOnce === true;
+    this._gaEx = cfg.sendExceptions === true;
+    this._gaExDesc = cfg.sendExceptionsMsg === true;
+
+    // Add 'error' to tracked events if GA exceptions are enabled
+    if (this._gaEx && !this._hasEvent('error')) {
+      this._events.push('error');
+    }
+
+    this._gaPercent = $.isArray(cfg.progressPercent) && cfg.progressPercent || [];
+    this._gaPercentCat = cfg.progressPercentCategory || this._category;
+    this._gaPercentAct = $.isFunction(cfg.progressPercentAction) && cfg.progressPercentAction || function(i) {
+      return 'progress_' + i + 'p';
+    };
+    this._processGaPercent = this._gaPercent.length > 0;
+    this._gaSeconds = $.isArray(cfg.progressSeconds) && cfg.progressSeconds || [];
+    this._gaSecondsCat = cfg.progressSecondsCategory || this._category;
+    this._gaSecondsAct = $.isFunction(cfg.progressSecondsAction) && cfg.progressSecondsAction || function(i) {
+      return 'progress_' + i + 's';
+    };
+    this._gaSecondsTimerStarted = false;
+    this._processGaSeconds = this._gaSeconds.length > 0;
+  }
+
+  get _defaultEventMap() {
+    return {
+      'ready': 'ready',
+      'buffering': 'buffering',
+      'bufferfull': 'bufferfull',
+      'loadedmetadata': 'loadedmetadata',
+      'play': 'play',
+      'seek': 'seek',
+      'pause': 'pause',
+      'stop': 'stop',
+      'ended': 'ended',
+      'volume': 'volume',
+      'fullscreen': 'fullscreen',
+      'error': 'error',
+      'playbackstate': 'playbackstate',
+      'highdefinitionupdate': 'highdefinitionupdate',
+      'playbackdvrstatechanged': 'playbackdvrstatechanged'
+    };
+  }
+
+  get _defaultEvents() {
+    return [
+      'play',
+      'seek',
+      'pause',
+      'stop',
+      'ended',
+      'volume'
+    ];
+  }
+
+  _hasEvent(e) {
+    return this._events.indexOf(e) !== -1;
+  }
+
+  _action(e) {
+    return this._eventMap[e];
+  }
+
+  _value(v) {
+    if (this._setValue) {
+      return v;
+    }
+  }
+
+  get position() {
+    return this.isLive ? 0 : this._position;
+  }
+
+  get duration() {
+    return this.isLive ? 0 : this._container && this._container.getDuration();
+  }
+
+  get isLive() {
+    return this._container.getPlaybackType() === Playback.LIVE;
+  }
+
+  get isPlaying() {
+    return this._container.isPlaying();
+  }
+
+  trunc(v) {
+    return parseInt(v, 10);
+  }
+
+  onTimeUpdate(o){
+    this._position = o.current && this.trunc(o.current) || 0;
+
+    if (this.isLive || !this.isPlaying) {
+      return;
+    }
+
+    // Check for "seconds" progress event
+    this._processGaSeconds && this.processGaSeconds(this._position);
+
+    // Check for "percent" progress event
+    this._processGaPercent && this.processGaPercent(this._position);
+  }
+
+  processGaSeconds(pos) {
+    if (this._gaSecondsPrev !== pos && this._gaSeconds.indexOf(pos) !== -1) {
+      this._gaSecondsPrev = pos;
+      this.gaEvent(this._gaSecondsCat, this._gaSecondsAct(pos), this._label);
+    }
+  }
+
+  processGaPercent(pos) {
+    // FIXME: check if (duration > 0) ?
+    const percent = this.trunc((pos * 100) / this.duration);
+
+    $.each(this._gaPercent, (i, v) => {
+      // Percentage value may never match expected value. To fix that, we compare to previous and current.
+      // This introduce a small approximation, but this function is called multiples time per seconds.
+      if (this._gaPercentPrev < v && percent >= v) {
+        this.gaEvent(this._gaPercentCat, this._gaPercentAct(v), this._label);
+
+        return false;
+      }
+    });
+    this._gaPercentPrev = percent;
+  }
+
+  onReady() {
+    this.gaEvent(this._category, this._action('ready'), this._label);
+  }
+
+  onBuffering() {
+    this.gaEvent(this._category, this._action('buffering'), this._label);
+  }
+
+  onBufferFull() {
+    this.gaEvent(this._category, this._action('bufferfull'), this._label);
+  }
+
+  onLoadedMetadata() {
+    this.gaEvent(this._category, this._action('loadedmetadata'), this._label);
+  }
+
+  onPlay() {
+    if (this._gaPlayOnce) {
+      if (!this._doSendPlay) {
+        return;
+      }
+      this._doSendPlay = false;
+    }
+    this.gaEvent(this._category, this._action('play'), this._label, this._value(this.position));
+
+    // Start "seconds" progress event timer (if LIVE playback type)
+    this.isLive && this._processGaSeconds && this._startGaSecondsTimer();
+  }
+
+  _startGaSecondsTimer() {
+    if (this._gaSecondsTimerStarted) {
+      return;
+    }
+
+    this._gaSecondsTimerStarted = true;
+    this._gaSecondsElapsed = 0;
+    this.processGaSeconds(this._gaSecondsElapsed);
+    this._gaSecondsTimerId = setInterval(() => {
+      this._gaSecondsElapsed++;
+      this.processGaSeconds(this._gaSecondsElapsed);
+    }, 1000);
+  }
+
+  _stopGaSecondsTimer() {
+    clearInterval(this._gaSecondsTimerId);
+    this._gaSecondsPrev = -1;
+    this._gaSecondsTimerStarted = false;
+  }
+
+  onSeek(pos) {
+    if (this._hasEvent('seek')) {
+      this.gaEvent(this._category, this._action('seek'), this._label, this._value(this.trunc(pos)));
+    }
+    if (this._gaPlayOnce) {
+      this._doSendPlay = true;
+    }
+
+    // Adjust previous "percent" event value
+    if (!this.isLive && this._processGaPercent) {
+      this._gaPercentPrev = this.trunc((this.trunc(pos) * 100) / this.duration) - 1;
+    }
+
+    // Stop "seconds" progress event timer (if LIVE playback type)
+    this.isLive && this._processGaSeconds && this._stopGaSecondsTimer();
+  }
+
+  onPause() {
+    if (this._hasEvent('pause')) {
+      this.gaEvent(this._category, this._action('pause'), this._label, this._value(this.position));
+    }
+    if (this._gaPlayOnce) {
+      this._doSendPlay = true;
+    }
+
+    // Stop "seconds" progress event timer (if LIVE playback type)
+    this.isLive && this._processGaSeconds && this._stopGaSecondsTimer();
+  }
+
+  onStop() {
+    if (this._hasEvent('stop')) {
+      this.gaEvent(this._category, this._action('stop'), this._label, this._value(this.position));
+    }
+    if (this._gaPlayOnce) {
+      this._doSendPlay = true;
+    }
+
+    // Stop "seconds" progress event timer (if LIVE playback type)
+    this.isLive && this._processGaSeconds && this._stopGaSecondsTimer();
+  }
+
+  onEnded() {
+    if (this._hasEvent('ended')) {
+      this.gaEvent(this._category, this._action('ended'), this._label, this._value(this.position));
+    }
+    if (this._gaPlayOnce) {
+      this._doSendPlay = true;
+    }
+
+    // Check for video ended progress events
+    this._processGaSeconds && this.processGaSeconds(this.duration);
+    this._processGaPercent && this.processGaPercent(this.duration);
+  }
+
+  onVolumeChanged(e) {
+    // Rate limit to avoid HTTP hammering
+    clearTimeout(this._volumeTimer);
+    this._volumeTimer = setTimeout(() => {
+      this.gaEvent(this._category, this._action('volume'), this._label, this._value(this.trunc(e)));
+    }, 400);
+  }
+
+  onFullscreen() {
+    this.gaEvent(this._category, this._action('fullscreen'), this._label);
+  }
+
+  onPlaybackChanged() {
+    this.gaEvent(this._category, this._action('playbackstate'), this._label);
+  }
+
+  onHD() {
+    this.gaEvent(this._category, this._action('highdefinitionupdate'), this._label);
+  }
+
+  onDVR() {
+    this.gaEvent(this._category, this._action('playbackdvrstatechanged'), this._label);
+  }
+
+  resolveErrMsg(o) {
+    if (!this._gaExDesc) {
+      return 'error';
+    }
+
+    let msg;
+
+    if (typeof o.error === 'string') {
+      msg = o.error;
+    } else if ($.isPlainObject(o.error) && o.error.message) {
+      msg = o.error.message;
+    } else {
+      // FIXME: find out a more elegant way
+      msg = 'Error: ' + o.error;
+    }
+
+    return msg;
+  }
+
+  onError(errorObj) {
+    if (this._gaEx) {
+      this.gaException(this.resolveErrMsg(errorObj), true);
+    } else {
+      this.gaEvent(this._category, this._action('error'), this._label);
+    }
+  }
+}

package/src/plugins/ga-events/ga-tracking.js

@@ -0,0 +1,46 @@
+// Based on Google Analytics JavaScript Tracking Snippet
+// See original @ https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference
+
+/**
+ * Creates a temporary global ga object and lazy loads analytics.js.
+ * @function
+ * @param {string} Global name of analytics object. Defaults to 'ga'.
+ * @param {boolean} Set to true to load the debug version of the analytics.js library.
+ * @param {boolean} Set to true to enable trace debugging.
+ */
+export default function(name='ga', debug, trace) {
+  // Preserve renaming support and minification
+  const win = window, doc = document, el = 'script';
+
+  // Ensure analytics.js is not already loaded
+  if (win[name]) {
+    return;
+  }
+
+  if (trace) {
+    win['ga_debug'] = { trace: true };
+  }
+
+  // Acts as a pointer to support renaming
+  win.GoogleAnalyticsObject = name;
+
+  // Creates an initial ga() function
+  // The queued commands will be executed once analytics.js loads
+  win[name] = function() {
+    win[name].q.push(arguments);
+  };
+  win[name].q = [];
+
+  // Sets the time (as an integer) this tag was executed
+  // Used for timing hits
+  win[name].l = 1 * new Date();
+
+  // Insert script element above the first script element in document
+  // (async + https)
+  const first = doc.getElementsByTagName(el)[0];
+  const script = doc.createElement(el);
+
+  script.src = 'https://www.google-analytics.com/analytics' + (debug ? '_debug.js' : '.js');
+  script.async = true;
+  first.parentNode.insertBefore(script, first);
+}

package/src/plugins/google-analytics/GoogleAnalytics.ts

@@ -0,0 +1,147 @@
+// 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 { Container, ContainerPlugin, Events } from '@clappr/core';
+
+import { CLAPPR_VERSION } from '../build.js';
+
+declare const _gaq: {
+  push(args: string[]): void;
+};
+
+export class GoogleAnalytics extends ContainerPlugin {
+  private account: string = '';
+
+  private trackerName: string = '';
+
+  private domainName: string = '';
+
+  private currentHDState: string | undefined
+
+  get name() {
+    return 'google_analytics';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  constructor(container: Container) {
+    super(container);
+    if (this.container.options.gaAccount) {
+      this.account = this.container.options.gaAccount;
+      this.trackerName = (this.container.options.gaTrackerName) ? this.container.options.gaTrackerName + '.' : 'Player.';
+      this.domainName = this.container.options.gaDomainName;
+      this.embedScript();
+    }
+  }
+
+  embedScript() {
+    if (!('_gat' in window)) { // TODO
+      const script = document.createElement('script');
+
+      script.setAttribute('type', 'text/javascript');
+      script.setAttribute('async', 'async');
+      script.setAttribute('src', '//www.google-analytics.com/ga.js');
+      script.onload = () => this.addEventListeners();
+      document.body.appendChild(script);
+    } else {
+      this.addEventListeners();
+    }
+  }
+
+  addEventListeners() {
+    if (this.container) {
+      this.listenTo(this.container, Events.CONTAINER_READY, this.onReady);
+      this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay);
+      this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
+      this.listenTo(this.container, Events.CONTAINER_PAUSE, this.onPause);
+      this.listenTo(this.container, Events.CONTAINER_ENDED, this.onEnded);
+      this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERING, this.onBuffering);
+      this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERFULL, this.onBufferFull);
+      this.listenTo(this.container, Events.CONTAINER_ERROR, this.onError);
+      this.listenTo(this.container, Events.CONTAINER_PLAYBACKSTATE, this.onPlaybackChanged);
+      this.listenTo(this.container, Events.CONTAINER_VOLUME, this.onVolumeChanged);
+      this.listenTo(this.container, Events.CONTAINER_SEEK, this.onSeek);
+      this.listenTo(this.container, Events.CONTAINER_FULLSCREEN, this.onFullscreen);
+      this.listenTo(this.container, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.onHD);
+      this.listenTo(this.container, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDVR);
+    }
+    _gaq.push([this.trackerName + '_setAccount', this.account]);
+    if (this.domainName) {
+      _gaq.push([this.trackerName + '_setDomainName', this.domainName]);
+    }
+  }
+
+  onReady() {
+    this.push(['Video', 'Playback', this.container.playback.name]);
+  }
+
+  onPlay() {
+    this.push(['Video', 'Play', this.container.playback.src]);
+  }
+
+  onStop() {
+    this.push(['Video', 'Stop', this.container.playback.src]);
+  }
+
+  onEnded() {
+    this.push(['Video', 'Ended', this.container.playback.src]);
+  }
+
+  onBuffering() {
+    this.push(['Video', 'Buffering', this.container.playback.src]);
+  }
+
+  onBufferFull() {
+    this.push(['Video', 'Bufferfull', this.container.playback.src]);
+  }
+
+  onError() {
+    this.push(['Video', 'Error', this.container.playback.src]);
+  }
+
+  onHD(isHD: boolean) {
+    const status = isHD ? 'ON': 'OFF';
+
+    if (status !== this.currentHDState) {
+      this.currentHDState = status;
+      this.push(['Video', 'HD - ' + status, this.container.playback.src]);
+    }
+  }
+
+  private onPlaybackChanged(playbackState: { type: string | null }) {
+    if (playbackState.type !== null) {
+      this.push(['Video', 'Playback Type - ' + playbackState.type, this.container.playback.src]);
+    }
+  }
+
+  onDVR(dvrInUse: boolean) {
+    const status = dvrInUse? 'ON': 'OFF';
+
+    this.push(['Interaction', 'DVR - ' + status, this.container.playback.src]);
+  }
+
+  onPause() {
+    this.push(['Video', 'Pause', this.container.playback.src]);
+  }
+
+  onSeek() {
+    this.push(['Video', 'Seek', this.container.playback.src]);
+  }
+
+  onVolumeChanged() {
+    this.push(['Interaction', 'Volume', this.container.playback.src]);
+  }
+
+  onFullscreen() {
+    this.push(['Interaction', 'Fullscreen', this.container.playback.src]);
+  }
+
+  push(array: string[]) {
+    const res = [this.trackerName + '_trackEvent'].concat(array);
+
+    _gaq.push(res);
+  }
+}

package/src/plugins/index.ts

@@ -0,0 +1,42 @@
+/**
+ * @packageDocumentation
+ * @beta
+ * A collection of plugins for the Gcore video player
+ */
+
+import '../assets/style/main.scss';
+
+export * from "./audio-selector/AudioSelector.js";
+export * from "./big-mute-button/BigMuteButton.js";
+export * from "./bottom-gear/BottomGear.js";
+export * from "./clappr-nerd-stats/ClapprNerdStats.js";
+export * from "./clappr-stats/ClapprStats.js";
+export * from "./click-to-pause/ClickToPause.js";
+export * from "./clips/Clips.js";
+export * from "./context-menu/ContextMenu.js";
+export * from "./disable-controls/DisableControls.js";
+export * from "./dvr-controls/DvrControls.js";
+export * from "./error-screen/ErrorScreen.js";
+export * from "./favicon/Favicon.js";
+// _ ga-events
+export * from "./google-analytics/GoogleAnalytics.js";
+export * from "./kibo/index.js";
+export * from "./level-selector/LevelSelector.js";
+export * from "./logo/Logo.js";
+export * from "./media-control/MediaControl.js";
+export * from "./multi-camera/MultiCamera.js";
+export * from "./picture-in-picture/PictureInPicture.js";
+export * from "./playback-rate/PlaybackRate.js";
+export * from "./poster/Poster.js";
+export * from "./seek-time/SeekTime.js";
+export * from "./share/Share.js";
+export * from "./skip-time/SkipTime.js";
+export * from "./spinner-three-bounce/SpinnerThreeBounce.js";
+export * from "./statistics/Statistics.js";
+export * from "./subtitles/Subtitles.js";
+export * from "./thumbnails/Thumbnails.js";
+export { setTracer} from "@gcorevideo/utils";
+export * from "./source-controller/SourceController.js";
+// _ vast-ads
+// _ video360
+export * from "./volume-fade/VolumeFade.js";