rizzo-next/dist/components/video/index.js

The next generation of Lonely Planet's style guide and pattern library.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _brightcove = require("./brightcove");

var _brightcove2 = _interopRequireDefault(_brightcove);

var _youtube = require("./youtube");

var _youtube2 = _interopRequireDefault(_youtube);

var _file = require("./file");

var _file2 = _interopRequireDefault(_file);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

require("./_video.scss");

var players = new Map();
players.set("brightcove", _brightcove2.default);
players.set("youtube", _youtube2.default);
players.set("file", _file2.default);

/*
  Video - an interface for inserting video embeds onto the page and/or
          creating a reference to a pre-existing video embed on the page.

  example usage:

    let player = null;
    Video.addPlayer("element-id", {autoplay: true}).then((x) => {
      player = x;
      player.on("ended", () => alert("video finished playing!")));
    });

  parameters:

    element - The HTML element to create a player in. This can be a string id for
          an existing DOM element or can be a reference to a DOM element.

    type - (optional) "brightcove", "youtube", or "file".  This determines which type of
          of embed code to generate and determines how rizzo interacts with the
          player

    playerName - (optional) "default", "bestintravel", "destinations", or "background".  This determines
          which player from the respective "type" to insert into the page. ("brightcove" only).

    videoId - (optional) The id or URL of the video to play.  This can be either an id
          pertaining to the platform depicted by the 'type' parameter, or it can
          be a URL to a video (which will be parsed internally to get the video id if needed)

    autoplay - (optional) Whether the player should autoplay once it's ready/loaded

    poster - (optional) URL to poster image to display before video begins
          playing ("file" only)

    seo - (optional) Whether to render SEO markup for the video ("brightcove" only)

    controls - (optional) Whether to include HTML5 video controls on the player or
          not ("brightcove" and "file" only)

    popout - (optional) Whether the player should follow the user when it scrolls
          out of view ("brightcove" only) -- Only works if the video embed does not
          exist on the page prior to instantiation.

    cover - (optional) Whether to cover the entire parent element with the
          video -- acts similar to background-size css. ("file" and "brightcove" only)

    muted - (optional) Whether the video should be muted or not ("file" and "brightcove" only).

    playsInline - (optional) Whether the video should play inline on mobile devices or popout into
          the device's native player ("file" and "brightcove" only)

    playWhenInView - (optional) Whether to play the video automatically once the
          player enters the viewport. ("brightcove" only)

    pauseWhenOutOfView - (optional) Whether to pause the video automatically once the
          player leaves the viewport. ("brightcove" only)

    outOfViewThreshold - (optional | default: 0.5 | Decimal between 0 and 1)
          Determines how much of the player should be outside of the viewport to be considered
          "out of view".  Use this alongside "playsWhenInView" and/or "pauseWhenOutOfView".
          ("brightcove" only)

    insertPixel - (optional) Whether to fetch a tracking pixel from the video's
          "custom fields" and insert the pixel onto the page. ("brightcove" only)

  events:

    "ready" - Player has finished loading and is ready to be interacted with
    "disposed" - Player has been torn down and removed from the page
    "loadstart" - Video has finished loading and is ready to play ("brightcove" only)
    "started" - Video playback has either started OR Ad playback has started ("brightcove" and "file" only)
    "ended" - Player has finished playing the current video ("brightcove" and "file" only)

*/

var Video = function () {
  function Video() {
    _classCallCheck(this, Video);
  }

  _createClass(Video, null, [{
    key: "addPlayer",
    value: function addPlayer(element) {
      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
          _ref$type = _ref.type,
          type = _ref$type === undefined ? "brightcove" : _ref$type,
          _ref$playerName = _ref.playerName,
          playerName = _ref$playerName === undefined ? "default" : _ref$playerName,
          _ref$videoId = _ref.videoId,
          videoId = _ref$videoId === undefined ? null : _ref$videoId,
          _ref$autoplay = _ref.autoplay,
          autoplay = _ref$autoplay === undefined ? false : _ref$autoplay,
          _ref$poster = _ref.poster,
          poster = _ref$poster === undefined ? null : _ref$poster,
          _ref$controls = _ref.controls,
          controls = _ref$controls === undefined ? true : _ref$controls,
          _ref$seo = _ref.seo,
          seo = _ref$seo === undefined ? true : _ref$seo,
          _ref$popout = _ref.popout,
          popout = _ref$popout === undefined ? false : _ref$popout,
          _ref$cover = _ref.cover,
          cover = _ref$cover === undefined ? false : _ref$cover,
          _ref$muted = _ref.muted,
          muted = _ref$muted === undefined ? false : _ref$muted,
          _ref$playsInline = _ref.playsInline,
          playsInline = _ref$playsInline === undefined ? false : _ref$playsInline,
          _ref$playWhenInView = _ref.playWhenInView,
          playWhenInView = _ref$playWhenInView === undefined ? false : _ref$playWhenInView,
          _ref$pauseWhenOutOfVi = _ref.pauseWhenOutOfView,
          pauseWhenOutOfView = _ref$pauseWhenOutOfVi === undefined ? false : _ref$pauseWhenOutOfVi,
          _ref$outOfViewThresho = _ref.outOfViewThreshold,
          outOfViewThreshold = _ref$outOfViewThresho === undefined ? 0.5 : _ref$outOfViewThresho,
          _ref$insertPixel = _ref.insertPixel,
          insertPixel = _ref$insertPixel === undefined ? true : _ref$insertPixel;

      if (typeof element === "string") {
        element = document.getElementById(element);
      }

      if (!element) {
        return;
      }

      type = this.cleanVideoType(type, videoId);
      videoId = this.cleanVideoId(videoId);

      this.players = this.players || new Map();

      var PlayerConstructor = players.get(type),
          player = new PlayerConstructor({
        el: element,
        playerId: this.players.size + 1,
        videoId: videoId,
        autoplay: autoplay,
        poster: poster,
        controls: controls,
        playerName: playerName,
        seo: seo,
        popout: popout,
        cover: cover,
        muted: muted,
        playsInline: playsInline,
        playWhenInView: playWhenInView,
        pauseWhenOutOfView: pauseWhenOutOfView,
        outOfViewThreshold: outOfViewThreshold,
        insertPixel: insertPixel
      });

      this.players.set(element, player);

      player.on("disposed", this.removePlayer.bind(this));

      // Take the return value and use .then() on it to ensure the
      // player is ready before using it.
      return new Promise(function (resolve) {
        if (player.isReady) {
          resolve(player);
          return;
        }
        player.on("ready", function () {
          resolve(player);
        });
      });
    }
  }, {
    key: "removePlayer",
    value: function removePlayer(player) {
      if (this.players) {
        this.players.delete(player.el);
      }
    }
  }, {
    key: "cleanVideoType",
    value: function cleanVideoType(type, videoId) {
      if (videoId && videoId.toLowerCase().startsWith("http")) {
        var youtubeId = this.getYoutubeId(videoId);
        var brightcoveId = this.getBrightcoveId(videoId);

        if (youtubeId) {
          return "youtube";
        }
        if (brightcoveId) {
          return "brightcove";
        }
        if (!youtubeId && !brightcoveId) {
          return "file";
        }
      }

      return type;
    }
  }, {
    key: "cleanVideoId",
    value: function cleanVideoId(videoId) {
      if (videoId && videoId.toLowerCase().startsWith("http")) {
        var youtubeId = this.getYoutubeId(videoId);
        var brightcoveId = this.getBrightcoveId(videoId);

        if (youtubeId) {
          return youtubeId;
        }
        if (brightcoveId) {
          return brightcoveId;
        }
      }

      return videoId;
    }
  }, {
    key: "getYoutubeId",
    value: function getYoutubeId(url) {
      var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
      var match = url.match(regExp);
      return match && match[2].length == 11 ? match[2] : null;
    }
  }, {
    key: "getBrightcoveId",
    value: function getBrightcoveId(url) {
      var regExp = /^.*\.brightcove\..*(\/videos\/|\?videoId=)([0-9]+).*/;
      var match = url.match(regExp);
      return match ? match[2] : null;
    }
  }]);

  return Video;
}();

exports.default = Video;