pageflow-embedded-video 0.1.0

data/app/assets/javascript/pageflow/embedded_video/page_type.js

@@ -0,0 +1,370 @@
+/*global YT, URI, $f */
+
+pageflow.pageType.register('embedded_video', _.extend({
+  prepareNextPageTimeout: 0,
+
+  enhance: function(pageElement, configuration) {
+    var that = this;
+
+    if (pageflow.features.has('mobile platform')) {
+      pageElement.find('.close_button, .iframe_container').click(function(event) {
+        event.stopPropagation();
+        that._pauseVideo();
+        pageElement.find('.iframe_container').removeClass('show');
+        pageflow.hideText.deactivate();
+      });
+
+      this._initPlaceholderImage(pageElement, configuration);
+    }
+
+    this.fullscreen = false;
+    $(document).on('fullscreenchange mozfullscreenchange webkitfullscreenchange msfullscreenchange', function() {
+      that.fullscreen = !that.fullscreen;
+    });
+  },
+
+  resize: function(pageElement, configuration) {
+    var iframeWrapper = pageElement.find('.iframe_wrapper'),
+        pageHeader = pageElement.find('.page_header'),
+        scroller = pageElement.find('.scroller'),
+        container = pageElement.find('.iframe_container'),
+        iframeOverlay = pageElement.find('.iframe_overlay'),
+        videoCaption = pageElement.find('.video_caption'),
+        widescreened = pageElement.width() > 1430,
+        fullWidth = configuration.full_width,
+        mobile = pageflow.features.has('mobile platform');
+
+    if (fullWidth && !this.fullscreen) {
+      widescreened = false;
+    }
+
+    iframeWrapper.add(scroller).toggleClass('widescreened', widescreened);
+
+    if (!this.fullscreen) {
+      if (widescreened || mobile) {
+        if (!container.find('iframe').length) {
+          container.append(iframeWrapper);
+        }
+      }
+      else {
+        if (!scroller.find('iframe').length) {
+          iframeWrapper.insertAfter(pageHeader);
+        }
+      }
+    }
+
+    if (widescreened) {
+      iframeWrapper.append(videoCaption);
+    }
+    else if (mobile) {
+      iframeOverlay.after(videoCaption);
+    }
+    else {
+      iframeWrapper.after(videoCaption);
+    }
+
+    scroller.scroller('refresh');
+  },
+
+  prepare: function(pageElement, configuration) {},
+
+  preload: function(pageElement, configuration) {
+    return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
+  },
+
+  activating: function(pageElement, configuration) {
+    var that = this;
+
+    this.listenTo(pageflow.settings, "change:volume", function(model, value) {
+      that._setPlayerVolume(value);
+    });
+
+    this._createPlayer(pageElement, configuration);
+
+    this.resize(pageElement, configuration);
+    this.active = true;
+  },
+
+  activated: function(pageElement, configuration) {},
+
+  deactivating: function(pageElement, configuration) {
+    this.active = false;
+    this.stopListening(pageflow.settings);
+    this._removePlayer(pageElement);
+  },
+
+  deactivated: function(pageElement, configuration) {
+  },
+
+  update: function(pageElement, configuration) {
+    pageElement.find('h2 .tagline').text(configuration.get('tagline') || '');
+    pageElement.find('h2 .title').text(configuration.get('title') || '');
+    pageElement.find('h2 .subtitle').text(configuration.get('subtitle') || '');
+    pageElement.find('p').html(configuration.get('text') || '');
+
+    var that = this,
+        iframeWrapper = pageElement.find('.iframe_wrapper'),
+        captionElement = pageElement.find('.video_caption'),
+        caption = configuration.get('video_caption');
+
+    if ((caption || '').trim() !== '') {
+      if (!captionElement.length) {
+        captionElement = $('<div class="video_caption"></div>');
+
+        if (pageElement.find('.scroller iframe').length) {
+          captionElement.insertAfter(iframeWrapper);
+        } else {
+          captionElement.appendTo(iframeWrapper);
+        }
+      }
+      captionElement.text(caption || '');
+    } else {
+      captionElement.remove();
+    }
+
+    if (this.active) {
+      var currentUrl = this._getCurrentUrl(pageElement),
+          newUrl = configuration.get('display_embedded_video_url');
+
+      if (this._urlOrigin(currentUrl) === this._urlOrigin(newUrl)) {
+        this._updatePlayerSrc(pageElement, configuration);
+      }
+      else {
+        this._removePlayer(pageElement, function() {
+          that._createPlayer(pageElement, configuration.attributes);
+        });
+      }
+    }
+
+    pageElement.find('.shadow').css({
+      opacity: configuration.get('gradient_opacity') / 100
+    });
+
+    this.updateCommonPageCssClasses(pageElement, configuration);
+    this.resize(pageElement, configuration.attributes);
+  },
+
+  embeddedEditorViews: function() {
+    return {
+      '.background_image': {
+        view: pageflow.BackgroundImageEmbeddedView,
+        options: {propertyName: 'background_image_id'}
+      }
+    };
+  },
+
+  _createPlayer: function(pageElement, configuration) {
+    var that = this,
+        url = configuration.display_embedded_video_url,
+        origin = this._urlOrigin(url);
+
+    if (origin === 'youtube') {
+      this.ytApiInitialize().done(function () {
+        that._createYouTubePlayer(pageElement, url);
+      });
+    }
+    else if (origin == 'vimeo') {
+      that._createVimeoPlayer(pageElement, url);
+    }
+  },
+
+  ytApiInitialize: function() {
+    if (!window.youtubeInitialized) {
+      var ytApi = new $.Deferred();
+      window.youtubeInitialized = ytApi.promise();
+
+      window.onYouTubeIframeAPIReady = function() {
+        ytApi.resolve();
+      };
+
+      var tag = document.createElement('script');
+      tag.src = "https://www.youtube.com/iframe_api";
+      var firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+    }
+    return window.youtubeInitialized;
+  },
+
+  _createYouTubePlayer: function(pageElement, url) {
+    var that = this,
+        div = document.createElement('div');
+
+    this.playerId = 'youtube-player-' + this._getRandom(url);
+
+    div.setAttribute('id', this.playerId);
+    pageElement.find('.iframe_wrapper').prepend(div);
+
+    this.ytApiInitialize().done(function() {
+      new YT.Player(div, {
+        height: '100%',
+        width: '100%',
+        videoId: that._getVideoId(url),
+        playerVars: {
+          rel: false
+        },
+        events: {
+          'onReady': function(event) {
+            that.player = event.target;
+            that._setPlayerVolume(pageflow.settings.get('volume'));
+          }
+        }
+      });
+    });
+  },
+
+  _createVimeoPlayer: function(pageElement, url) {
+    var that = this,
+        iframe = document.createElement('iframe'),
+        uri = new URI('//player.vimeo.com/video/');
+
+    this.playerId = 'vimeo-player-' + this._getRandom(url);
+
+    uri.filename(that._getVideoId(url));
+    uri.search({api: '1', player_id: this.playerId});
+
+    $(iframe).attr({
+      id: this.playerId,
+      width: '100%',
+      height: '100%',
+      frameborder: '0',
+      webkitallowfullscreen: true,
+      mozallowfullscreen: true,
+      allowfullscreen: true,
+      src: uri.toString()
+    });
+
+    pageElement.find('.iframe_wrapper').prepend(iframe);
+
+    this.player = $f(iframe);
+
+    this.player.addEvent('ready', function() {
+      that._setPlayerVolume(pageflow.settings.get('volume'));
+    });
+  },
+
+  _updatePlayerSrc: function(pageElement, configuration) {
+    var that = this,
+        newUrl = configuration.get('display_embedded_video_url'),
+        p = pageElement.find('iframe'),
+        url = new URI(p.attr('src'));
+
+    p.attr('src', url.filename(that._getVideoId(newUrl)));
+  },
+
+  _setPlayerVolume: function(value) {
+    if (this.player) {
+      if (typeof this.player.setVolume === 'function') {
+        this.player.setVolume(value * 100);
+      } else if (typeof this.player.api === 'function') {
+        this.player.api('setVolume', value);
+      }
+    }
+  },
+
+  _pauseVideo: function() {
+    if (this.player) {
+      if (typeof this.player.pauseVideo === 'function') {
+        this.player.pauseVideo();
+      } else if (typeof this.player.api === 'function') {
+        this.player.api('pause');
+      }
+    }
+  },
+
+  _removePlayer: function (pageElement, callback) {
+    if (this.player && typeof this.player.destroy === 'function') {
+      this.player.destroy();
+    }
+    this.player = null;
+    $('#' + this.playerId, pageElement).remove();
+
+    if (typeof callback === 'function') {
+      callback();
+    }
+  },
+
+  _initPlaceholderImage: function(pageElement, configuration) {
+    var $div = $(document.createElement('div')),
+      pageHeader = pageElement.find('.page_header'),
+      container = pageElement.find('.iframe_container'),
+      url = configuration.display_embedded_video_url;
+
+    $div.addClass('iframe_overlay ' + this._urlOrigin(url));
+
+    this._setBackgroundImage(url, $div);
+    pageHeader.after($div);
+
+    $div.click(function(event) {
+      event.preventDefault();
+      container.addClass('show');
+      pageflow.hideText.activate();
+    });
+  },
+
+  _setBackgroundImage: function(url, element) {
+    var origin = this._urlOrigin(url),
+        videoId = this._getVideoId(url),
+        imageUrl = '';
+
+    if (origin === 'youtube') {
+      imageUrl = 'http://img.youtube.com/vi/' + videoId + '/hqdefault.jpg';
+      element.css('background-image', 'url("' + imageUrl + '")');
+    }
+    else if (origin === 'vimeo') {
+      var src = "http://vimeo.com/api/v2/video/" + videoId + ".json";
+
+      $.getJSON(src, function(data) {
+        element.css('background-image', 'url("' + data[0].thumbnail_large + '")');
+      });
+    }
+  },
+
+  _getCurrentUrl: function(pageElement) {
+    return pageElement.find('iframe').attr('src');
+  },
+
+  _urlOrigin: function(url) {
+    var uri = new URI(url),
+      domain = uri.domain(true);
+
+    if (['youtu.be', 'youtube.com'].indexOf(domain) >= 0) {
+      return 'youtube';
+    }
+    else if (domain === 'vimeo.com') {
+      return 'vimeo';
+    }
+
+    return '';
+  },
+
+  _getVideoId: function(url) {
+    var uri = new URI(url),
+        domain = uri.domain(true);
+
+    if (['youtu.be', 'vimeo.com'].indexOf(domain) >= 0) {
+      return uri.filename();
+    }
+    else if (domain === 'youtube.com') {
+      if (uri.directory() === '/embed') {
+        return uri.filename();
+      }
+      else {
+        return uri.search(true).v;
+      }
+    }
+
+    return '';
+  },
+
+  _getRandom: function(string) {
+    string = string + new Date().getTime();
+    var hash = 0, i, chr, len;
+    if (string === 0) return hash;
+    for (i = 0, len = string.length; i < len; i++) {
+      chr   = string.charCodeAt(i);
+      hash  = ((hash << 5) - hash) + chr;
+      hash |= 0; // Convert to 32bit integer
+    }
+    return hash;
+  }
+}, pageflow.commonPageCssClasses));

data/app/assets/javascript/pageflow/embedded_video.js

@@ -0,0 +1,6 @@
+//= require_self
+//= require ./embedded_video/page_type
+//= require ./URI.js
+//= require ./froogaloop.js
+
+pageflow.embeddedVideo = pageflow.embeddedVideo || {};

data/app/assets/javascript/pageflow/froogaloop.js

@@ -0,0 +1,288 @@
+// Init style shamelessly stolen from jQuery http://jquery.com
+var Froogaloop = (function(){
+  // Define a local copy of Froogaloop
+  function Froogaloop(iframe) {
+    // The Froogaloop object is actually just the init constructor
+    return new Froogaloop.fn.init(iframe);
+  }
+
+  var eventCallbacks = {},
+    hasWindowEvent = false,
+    slice = Array.prototype.slice,
+    playerDomain = '';
+
+  Froogaloop.fn = Froogaloop.prototype = {
+    element: null,
+    isReady: false,
+
+    init: function(iframe) {
+      if (typeof iframe === "string") {
+        iframe = document.getElementById(iframe);
+      }
+
+      this.element = iframe;
+
+      // Register message event listeners
+      playerDomain = getDomainFromUrl(this.element.getAttribute('src'));
+
+      return this;
+    },
+
+    /*
+     * Calls a function to act upon the player.
+     *
+     * @param {string} method The name of the Javascript API method to call. Eg: 'play'.
+     * @param {Array|Function} valueOrCallback params Array of parameters to pass when calling an API method
+     *                                or callback function when the method returns a value.
+     */
+    api: function(method, valueOrCallback) {
+      if (!this.element || !method) {
+        return false;
+      }
+
+      var self = this,
+        element = self.element,
+        target_id = element.id !== '' ? element.id : null,
+        params = !isFunction(valueOrCallback) ? valueOrCallback : null,
+        callback = isFunction(valueOrCallback) ? valueOrCallback : null;
+
+      // Store the callback for get functions
+      if (callback) {
+        storeCallback(method, callback, target_id);
+      }
+
+      postMessage(method, params, element);
+      return self;
+    },
+
+    /*
+     * Registers an event listener and a callback function that gets called when the event fires.
+     *
+     * @param eventName (String): Name of the event to listen for.
+     * @param callback (Function): Function that should be called when the event fires.
+     */
+    addEvent: function(eventName, callback) {
+      if (!this.element) {
+        return false;
+      }
+
+      var self = this,
+        element = self.element,
+        target_id = element.id !== '' ? element.id : null;
+
+
+      storeCallback(eventName, callback, target_id);
+
+      // The ready event is not registered via postMessage. It fires regardless.
+      if (eventName != 'ready') {
+        postMessage('addEventListener', eventName, element);
+      }
+      else if (eventName == 'ready' && this.isReady) {
+        callback.call(null, target_id);
+      }
+
+      return self;
+    },
+
+    /*
+     * Unregisters an event listener that gets called when the event fires.
+     *
+     * @param eventName (String): Name of the event to stop listening for.
+     */
+    removeEvent: function(eventName) {
+      if (!this.element) {
+        return false;
+      }
+
+      var self = this,
+        element = self.element,
+        target_id = element.id !== '' ? element.id : null,
+        removed = removeCallback(eventName, target_id);
+
+      // The ready event is not registered
+      if (eventName != 'ready' && removed) {
+        postMessage('removeEventListener', eventName, element);
+      }
+    }
+  };
+
+  /**
+   * Handles posting a message to the parent window.
+   *
+   * @param method (String): name of the method to call inside the player. For api calls
+   * this is the name of the api method (api_play or api_pause) while for events this method
+   * is api_addEventListener.
+   * @param params (Object or Array): List of parameters to submit to the method. Can be either
+   * a single param or an array list of parameters.
+   * @param target (HTMLElement): Target iframe to post the message to.
+   */
+  function postMessage(method, params, target) {
+    if (!target.contentWindow.postMessage) {
+      return false;
+    }
+
+    var url = target.getAttribute('src').split('?')[0],
+      data = JSON.stringify({
+        method: method,
+        value: params
+      });
+
+    if (url.substr(0, 2) === '//') {
+      url = window.location.protocol + url;
+    }
+
+    target.contentWindow.postMessage(data, url);
+  }
+
+  /**
+   * Event that fires whenever the window receives a message from its parent
+   * via window.postMessage.
+   */
+  function onMessageReceived(event) {
+    var data, method;
+
+    try {
+      data = JSON.parse(event.data);
+      method = data.event || data.method;
+    }
+    catch(e)  {
+      //fail silently... like a ninja!
+    }
+
+    if (method == 'ready' && !this.isReady) {
+      this.isReady = true;
+    }
+
+    // Handles messages from moogaloop only
+    if (event.origin != playerDomain) {
+      return false;
+    }
+
+    var value = data.value,
+      eventData = data.data,
+      target_id = target_id === '' ? null : data.player_id,
+
+      callback = getCallback(method, target_id),
+      params = [];
+
+    if (!callback) {
+      return false;
+    }
+
+    if (value !== undefined) {
+      params.push(value);
+    }
+
+    if (eventData) {
+      params.push(eventData);
+    }
+
+    if (target_id) {
+      params.push(target_id);
+    }
+
+    return params.length > 0 ? callback.apply(null, params) : callback.call();
+  }
+
+
+  /**
+   * Stores submitted callbacks for each iframe being tracked and each
+   * event for that iframe.
+   *
+   * @param eventName (String): Name of the event. Eg. api_onPlay
+   * @param callback (Function): Function that should get executed when the
+   * event is fired.
+   * @param target_id (String) [Optional]: If handling more than one iframe then
+   * it stores the different callbacks for different iframes based on the iframe's
+   * id.
+   */
+  function storeCallback(eventName, callback, target_id) {
+    if (target_id) {
+      if (!eventCallbacks[target_id]) {
+        eventCallbacks[target_id] = {};
+      }
+      eventCallbacks[target_id][eventName] = callback;
+    }
+    else {
+      eventCallbacks[eventName] = callback;
+    }
+  }
+
+  /**
+   * Retrieves stored callbacks.
+   */
+  function getCallback(eventName, target_id) {
+    if (target_id) {
+      return eventCallbacks[target_id][eventName];
+    }
+    else {
+      return eventCallbacks[eventName];
+    }
+  }
+
+  function removeCallback(eventName, target_id) {
+    if (target_id && eventCallbacks[target_id]) {
+      if (!eventCallbacks[target_id][eventName]) {
+        return false;
+      }
+      eventCallbacks[target_id][eventName] = null;
+    }
+    else {
+      if (!eventCallbacks[eventName]) {
+        return false;
+      }
+      eventCallbacks[eventName] = null;
+    }
+
+    return true;
+  }
+
+  /**
+   * Returns a domain's root domain.
+   * Eg. returns http://vimeo.com when http://vimeo.com/channels is sbumitted
+   *
+   * @param url (String): Url to test against.
+   * @return url (String): Root domain of submitted url
+   */
+  function getDomainFromUrl(url) {
+    if (url.substr(0, 2) === '//') {
+      url = window.location.protocol + url;
+    }
+
+    var url_pieces = url.split('/'),
+      domain_str = '';
+
+    for(var i = 0, length = url_pieces.length; i < length; i++) {
+      if(i<3) {domain_str += url_pieces[i];}
+      else {break;}
+      if(i<2) {domain_str += '/';}
+    }
+
+    return domain_str;
+  }
+
+  function isFunction(obj) {
+    return !!(obj && obj.constructor && obj.call && obj.apply);
+  }
+
+  function isArray(obj) {
+    return toString.call(obj) === '[object Array]';
+  }
+
+  // Give the init function the Froogaloop prototype for later instantiation
+  Froogaloop.fn.init.prototype = Froogaloop.fn;
+
+  // Listens for the message event.
+  // W3C
+  if (window.addEventListener) {
+    window.addEventListener('message', onMessageReceived, false);
+  }
+  // IE
+  else {
+    window.attachEvent('onmessage', onMessageReceived);
+  }
+
+  // Expose froogaloop to the global object
+  return (window.Froogaloop = window.$f = Froogaloop);
+
+})();

data/app/assets/stylesheets/pageflow/embedded_video/editor.css.scss

@@ -0,0 +1,17 @@
+.embedded_video_status {
+  .state {
+    display: none;
+  }
+
+  &.failed {
+    .failed.state {
+      display: block;
+    }
+  }
+
+  &.processing {
+    .processing.state {
+      display: block;
+    }
+  }
+}