cloudinary-video-player 1.6.2-edge.13

package/src/index.js

@@ -0,0 +1,18 @@
+import 'assets/styles/main.scss';
+import cloudinary from 'cloudinary-core';
+import VideoPlayer from './video-player';
+import { assign } from 'utils/assign';
+
+cloudinary.VideoPlayer = VideoPlayer;
+
+const proto = cloudinary.Cloudinary.prototype;
+
+proto.videoPlayer = function(id, options = {}, ready = null) {
+  assign(options, { cloudinaryConfig: this });
+  return new VideoPlayer(id, options, ready);
+};
+
+proto.videoPlayers = function(selector, options = {}, ready = null) {
+  assign(options, { cloudinaryConfig: this });
+  return VideoPlayer.all(selector, options, ready);
+};

package/src/mixins/eventable.js

@@ -0,0 +1,54 @@
+const Eventable = (superclass) => class extends superclass {
+  constructor() {
+    super();
+
+    const eventable = { data: {}, handlers: {} };
+
+    this.on = (...args) => {
+      const lastIndex = args.length - 1;
+      const func = args[lastIndex];
+
+      eventable.handlers[func] = (event, ..._args) => {
+        event.Player = this;
+        func(event, ..._args);
+      };
+
+      args[lastIndex] = eventable.handlers[func];
+
+      return this.videojs.on(...args);
+    };
+
+    this.one = (...args) => {
+      const lastIndex = args.length - 1;
+      const func = args[lastIndex];
+
+      eventable.handlers[func] = (event, ..._args) => {
+        event.Player = this;
+        func(event, ..._args);
+        delete eventable.handlers[func];
+      };
+
+      args[lastIndex] = eventable.handlers[func];
+
+      return this.videojs.one(...args);
+    };
+
+    this.off = (...args) => {
+      const lastIndex = args.length - 1;
+      const func = args[lastIndex];
+
+      args[lastIndex] = eventable.handlers[func];
+
+      const res = this.videojs.off(...args);
+      delete eventable.handlers[func];
+
+      return res;
+    };
+
+    this.trigger = (...args) => {
+      this.videojs.trigger(...args);
+    };
+  }
+};
+
+export default Eventable;

package/src/mixins/playlistable.js

@@ -0,0 +1,106 @@
+import Playlist from 'components/playlist/playlist';
+import Promise from 'promise-polyfill';
+import fetchPF from 'fetch-ponyfill/build/fetch-browser';
+import { sliceProperties } from 'utils/slicing';
+import { normalizeJsonResponse } from 'utils/api';
+import { assign } from 'utils/assign';
+
+const { fetch } = fetchPF({ Promise });
+
+const LIST_BY_TAG_PARAMS = { format: 'json', resource_type: 'video', type: 'list' };
+
+const Playlistable = (superclass) => class extends superclass {
+  constructor(player, options = {}) {
+    super();
+
+    const _chainTarget = sliceProperties(options, 'chainTarget').chainTarget;
+    let _playlist = null;
+    let _playlistDisposer = null;
+
+    this.playlist = (sources, options = {}) => {
+      if (sources === undefined) {
+        return _playlist;
+      }
+
+      if (this.playlist()) {
+        this.disposePlaylist();
+      }
+
+      createPlaylist(sources, options);
+      player.trigger('playlistcreated');
+
+      return _chainTarget;
+    };
+
+    this.disposePlaylist = () => {
+      player.removeClass('vjs-playlist');
+      const playlist = this.playlist();
+      _playlist = undefined;
+      playlist.dispose();
+      this.off('cldsourcechanged', _playlistDisposer);
+    };
+
+    const createPlaylist = (sources, options) => {
+      if (sources instanceof Playlist) {
+        _playlist = sources;
+        _playlist.resetState();
+        _playlist.currentIndex(_playlist.currentIndex());
+      } else {
+        _playlist = new Playlist(this, sources, options);
+        _playlist.currentIndex(0);
+      }
+
+      _playlistDisposer = addSourceChangedListener();
+      player.addClass('vjs-playlist');
+    };
+
+    const addSourceChangedListener = () => {
+      const disposer = () => {
+        if (this.playlist() &&
+          !this.playlist().currentSource().contains(this.player.currentSource())) {
+          this.disposePlaylist();
+        }
+      };
+
+      this.on('cldsourcechanged', disposer);
+
+      return disposer;
+    };
+  }
+
+  playlistByTag(tag, options = {}) {
+    return this.sourcesByTag(tag, options)
+      .then((sources) => this.playlist(sources, options));
+  }
+
+  sourcesByTag(tag, options = {}) {
+    const url = this.cloudinaryConfig().url(tag, LIST_BY_TAG_PARAMS);
+
+    return fetch(url)
+      .then((result) => result.json())
+      .then((json) => {
+        const resources = normalizeJsonResponse(json.resources);
+
+        if (options.sorter) {
+          resources.sort(options.sorter);
+        }
+
+        const sources = resources.map((resource) => {
+          let sourceParams = options.sourceParams || {};
+
+          if (typeof sourceParams === 'function') {
+            sourceParams = sourceParams(resource);
+          }
+
+          const info = resource.context && resource.context.custom || {};
+
+          const source = assign({ info }, sourceParams, { publicId: resource.publicId });
+          return this.buildSource(source);
+        });
+
+        return sources;
+      });
+  }
+};
+
+export default Playlistable;

package/src/plugins/analytics/index.js

@@ -0,0 +1,245 @@
+import videojs from 'video.js';
+import { sliceProperties } from 'utils/slicing';
+import { normalizeEventsParam, default as ExtendedEvents } from 'extended-events';
+
+const DEFAULT_EVENTS = [
+  'play',
+  'pause',
+  'ended',
+  'volumechange',
+  'resize',
+  'error',
+  'fullscreenchange',
+  'start',
+  'videoload',
+  'percentsplayed',
+  'seek',
+  'playerload'
+];
+
+const EVENT_DEFAULTS = {
+  percentsplayed: {
+    percents: [25, 50, 75, 100]
+  }
+};
+
+const DEFAULT_OPTIONS = {
+  events: DEFAULT_EVENTS,
+  category: 'Video',
+  defaultLabel: (player) =>
+    (player.cloudinary && player.cloudinary.currentPublicId()) || player.currentSource().src
+};
+
+class AnalyticsPlugin {
+
+  constructor(player, initOptions = {}) {
+    this.player = player;
+    this.options = videojs.mergeOptions(DEFAULT_OPTIONS, initOptions);
+    this.events = normalizeEventsParam(this.options.events, EVENT_DEFAULTS);
+
+    const extendedEvents = sliceProperties(this.events, 'percentsplayed', 'timeplayed', 'pause', 'seek');
+
+    if (extendedEvents.pause) {
+      delete extendedEvents.pause;
+      extendedEvents.pausenoseek = {};
+    }
+
+    this._extendedEvents = new ExtendedEvents(player, { events: extendedEvents });
+
+    this._currentSource = null;
+    this._startTracked = null;
+    this._endTracked = null;
+
+    this.resetState();
+  }
+
+  init() {
+    const playerLoad = () => {
+      this.track({ action: 'Player Load', label: window.location.href, nonInteraction: true });
+    };
+
+    const play = () => {
+      this.track({ action: 'Play' });
+    };
+
+    const start = () => {
+      if (this._startTracked) {
+        this.track({ action: 'Start' });
+        this._startTracked = true;
+      }
+    };
+
+    const pause = () => {
+      this.track({ action: 'Pause' });
+    };
+
+    const ended = () => {
+      if (!this._endTracked) {
+        this.track({ action: 'Ended', nonInteraction: true });
+        this._endTracked = true;
+      }
+    };
+
+    const error = () => {
+      this.track({ action: 'Error', nonInteraction: true });
+    };
+
+    const volumechange = () => {
+      const value = this.player.muted() ? 0 : this.player.volume();
+      this.track({ action: 'Volume Change', value });
+    };
+
+    const resize = () => {
+      const action = `Resize - ${this.player.width()}x${this.player.height()}}`;
+      this.track({ action });
+    };
+
+    const fullscreenchange = () => {
+      const action = this.player.isFullscreen() ? 'Enter Fullscreen' : 'Exit Fullscreen';
+      this.track({ action });
+    };
+
+    const percentsPlayed = (event, data) => {
+      const { percent } = data;
+      this.track({ action: `${percent} Percents Played`, nonInteraction: true });
+    };
+
+    const timePlayed = (event, data) => {
+      const { time } = data;
+      this.track({ action: `${time} Seconds Played`, value: time, nonInteraction: true });
+    };
+
+    const seek = (event, data) => {
+      const { seekStart, seekEnd } = data;
+      this.track({ action: 'Seek Start', value: seekStart });
+      this.track({ action: 'Seek End', value: seekEnd });
+    };
+
+    const shoppableProductHover = (event, data) => {
+      this.track({ action: 'productHover', label: data.productName });
+    };
+
+    const shoppableProductClick = (event, data) => {
+      this.track({ action: 'productClick', label: data.productName });
+    };
+
+    const shoppableBarMax = () => {
+      this.track({ action: 'shoppableBar', label: 'opened' });
+    };
+
+    const shoppableBarMin = () => {
+      this.track({ action: 'shoppableBar', label: 'closed' });
+    };
+
+    const shoppableReplay = () => {
+      this.track({ action: 'replay' });
+    };
+
+    const shoppableProductClickPost = (event, data) => {
+      this.track({ action: 'productClickPostPlay', label: data.productName });
+    };
+    const shoppableProductHoverPost = (event, data) => {
+      this.track({ action: 'productHoverPostPlay', label: data.productName });
+    };
+
+    if (this.events.shoppable) {
+      this.player.on('productHover', shoppableProductHover.bind(this));
+      this.player.on('productClick', shoppableProductClick.bind(this));
+      this.player.on('productHoverPost', shoppableProductHoverPost.bind(this));
+      this.player.on('productClickPost', shoppableProductClickPost.bind(this));
+      this.player.on('productBarMin', shoppableBarMin.bind(this));
+      this.player.on('productBarMax', shoppableBarMax.bind(this));
+      this.player.on('replay', shoppableReplay.bind(this));
+    }
+
+    if (this.events.play) {
+      this.player.on('play', play.bind(this));
+    }
+
+    if (this.events.ended) {
+      this.player.on('ended', ended.bind(this));
+    }
+
+    if (this.events.volumechange) {
+      this.player.on('volumechange', volumechange.bind(this));
+    }
+
+    if (this.events.resize) {
+      this.player.on('resize', resize.bind(this));
+    }
+
+    if (this.events.error) {
+      this.player.on('error', error.bind(this));
+    }
+
+    if (this.events.start) {
+      this.player.on('playing', start.bind(this));
+    }
+
+    if (this.events.fullscreenchange) {
+      this.player.on('fullscreenchange', fullscreenchange.bind(this));
+    }
+
+    if (this.events.percentsplayed) {
+      this._extendedEvents.on('percentsplayed', percentsPlayed.bind(this));
+    }
+
+    if (this.events.timeplayed) {
+      this._extendedEvents.on('timeplayed', timePlayed.bind(this));
+    }
+
+    if (this.events.pause) {
+      this._extendedEvents.on('pausenoseek', pause.bind(this));
+    }
+
+    if (this.events.seek) {
+      this._extendedEvents.on('seek', seek.bind(this));
+    }
+
+    if (this.events.playerload) {
+      playerLoad();
+    }
+
+    this.player.on('loadedmetadata', this.loadedmetadata.bind(this));
+  }
+
+  track({ action, label, value = null, nonInteraction = false }) {
+    const eventData = {
+      eventCategory: this.options.category,
+      eventAction: action,
+      eventLabel: label || this.options.defaultLabel(this.player),
+      eventValue: value || Math.round(this.player.currentTime()),
+      nonInteraction: nonInteraction
+    };
+
+    window.ga('send', 'event', eventData);
+  }
+
+  videoload() {
+    this.track({ action: 'Video Load', nonInteraction: true });
+  }
+
+  resetState() {
+    this._currentSource = '';
+    this._startTracked = false;
+    this._endTracked = false;
+  }
+
+  loadedmetadata() {
+    const src = this.player.currentSource().src;
+
+    if (src !== this._currentSource) {
+      this.resetState();
+      this._currentSource = src;
+
+      if (this.events.videoload) {
+        this.videoload();
+      }
+    }
+  }
+
+}
+
+export default function(opts = {}) {
+  new AnalyticsPlugin(this, opts).init();
+}

package/src/plugins/autoplay-on-scroll/index.js

@@ -0,0 +1,86 @@
+import { isElementInViewport } from 'utils/positioning';
+import { sliceProperties } from 'utils/slicing';
+import { assign } from 'utils/assign';
+
+const defaults = {
+  fraction: 0.5,
+  isMuted: true
+};
+
+class AutoplayOnScrollPlugin {
+  constructor(player, opts = {}) {
+    opts = assign({}, defaults, opts);
+
+    this.player = player;
+    let _options = sliceProperties(opts, 'fraction');
+    let _pausedByScroll = false;
+    let _playedByScroll = false;
+    let _pauseHandler = null;
+    let _playHandler = null;
+
+    this.init = () => {
+      registerEventHandlers();
+      checkViewportState();
+    };
+
+    const clearEventHandlers = () => {
+      window.removeEventListener('DOMContentLoaded', checkViewportState, false);
+      window.removeEventListener('load', checkViewportState, false);
+      window.removeEventListener('scroll', checkViewportState, false);
+      window.removeEventListener('resize', checkViewportState, false);
+      this.player.off('pause', _pauseHandler);
+      this.player.off('play', _playHandler);
+    };
+
+    const pause = () => {
+      _pausedByScroll = true;
+      _playedByScroll = false;
+      this.player.pause();
+    };
+
+    const play = () => {
+      _pausedByScroll = false;
+      _playedByScroll = true;
+      this.player.play();
+    };
+
+    const checkViewportState = () => {
+      const visible = isElementInViewport(this.player.el(), { fraction: _options.fraction });
+
+      if (visible) {
+        if (this.player.paused()) {
+          play();
+        }
+      } else if (!this.player.paused() && !this.player.activePlugins_.floatingPlayer) {
+        pause();
+      }
+    };
+
+    const registerEventHandlers = () => {
+      // TODO: find a better replacement for 'pause' since it's being triggered
+      // by 'buffering' as well.
+      _pauseHandler = () => {
+        if (!this.player.waiting && !_pausedByScroll) {
+          clearEventHandlers();
+        }
+      };
+
+      _playHandler = () => {
+        if (!_playedByScroll) {
+          clearEventHandlers();
+        }
+      };
+
+      window.addEventListener('DOMContentLoaded', checkViewportState, false);
+      window.addEventListener('load', checkViewportState, false);
+      window.addEventListener('scroll', checkViewportState, false);
+      window.addEventListener('resize', checkViewportState, false);
+      this.player.on('pause', _pauseHandler);
+      this.player.on('play', _playHandler);
+    };
+  }
+}
+
+export default function(opts = {}) {
+  new AutoplayOnScrollPlugin(this, opts).init();
+}