From 4fd51874d0830415ae1cc31df50dd884365858ce Mon Sep 17 00:00:00 2001 From: Anas Al-Mawlawi Date: Tue, 24 Oct 2017 11:28:29 +0300 Subject: [PATCH 1/1] Update Vimeo API. --- js/varbase_hero_slider_media.scripts.js | 26 +- js/varbase_hero_slider_media.vimeo.froogaloop.js | 300 ----------------------- js/vimeo/player.min.js | 2 + varbase_heroslider_media.libraries.yml | 4 +- varbase_heroslider_media.module | 2 +- 5 files changed, 18 insertions(+), 318 deletions(-) delete mode 100644 js/varbase_hero_slider_media.vimeo.froogaloop.js create mode 100644 js/vimeo/player.min.js diff --git a/js/varbase_hero_slider_media.scripts.js b/js/varbase_hero_slider_media.scripts.js index 9857bf6..83e8aa8 100644 --- a/js/varbase_hero_slider_media.scripts.js +++ b/js/varbase_hero_slider_media.scripts.js @@ -17,16 +17,16 @@ var nextIframe = nextSlideObject.find('.video-embed-field-responsive-video iframe', context); if (currentIframe.length !== 0) { - var currentPlayer = $f(currentIframe[0]); - currentPlayer.api("pause"); + var currentPlayer = new Vimeo.Player(currentIframe[0]); + currentPlayer.pause(); } if (nextIframe.length !== 0) { - var nextPlayer = $f(nextIframe[0]); - nextPlayer.addEvent('pause', onPause); - nextPlayer.addEvent('finish', onFinish); - nextPlayer.addEvent('playProgress', onPlayProgress); - nextPlayer.api("play"); + var nextPlayer = new Vimeo.Player(nextIframe[0]); + nextPlayer.on('pause', onPause); + nextPlayer.on('finish', onFinish); + nextPlayer.on('playProgress', onPlayProgress); + nextPlayer.play(); } }); @@ -35,22 +35,20 @@ var firstSlideVideo = $('.slick__slider .slick-active').find('.media-video').length !== 0; if (firstSlideVideo) { $('.slick__slider').slick('slickPause'); - player.api("play"); + player.play(); } }); // Vimeo variable. if ($('.slick--view--varbase-heroslider-media .video-embed-field-responsive-video iframe').length > 0) { var iframe = $('.video-embed-field-responsive-video iframe')[0]; - var player = $f(iframe); + var player = new Vimeo.Player(iframe); // When the player is ready, add listeners for pause, finish, // and playProgress. - player.addEvent('ready', function () { - player.addEvent('pause', onPause); - player.addEvent('finish', onFinish); - player.addEvent('playProgress', onPlayProgress); - }); + player.on('pause', onPause); + player.on('finish', onFinish); + player.on('playProgress', onPlayProgress); } // Play when paused. diff --git a/js/varbase_hero_slider_media.vimeo.froogaloop.js b/js/varbase_hero_slider_media.vimeo.froogaloop.js deleted file mode 100644 index f770715..0000000 --- a/js/varbase_hero_slider_media.vimeo.froogaloop.js +++ /dev/null @@ -1,300 +0,0 @@ -/** - * @file - * Behaviors Varbase hero slider media vimeo froogaloop. - */ - -(function ($, _, Drupal, drupalSettings) { - "use strict"; - - Drupal.behaviors.varbaseHeroSliderMediaVimeofroogaloop = { - attach: function (context) { - // 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, - isReady = false, - slice = Array.prototype.slice, - playerDomain = ''; - - Froogaloop.fn = Froogaloop.prototype = { - element: null, - 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' && 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 - }); - - 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' && !isReady) { - 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) { - 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 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, false); - } - - // Expose froogaloop to the global object. - return (window.Froogaloop = window.$f = Froogaloop); - - })(); - - } - }; -})(window.jQuery, window._, window.Drupal, window.drupalSettings); diff --git a/js/vimeo/player.min.js b/js/vimeo/player.min.js new file mode 100644 index 0000000..7640549 --- /dev/null +++ b/js/vimeo/player.min.js @@ -0,0 +1,2 @@ +/*! @vimeo/player v2.2.0 | (c) 2017 Vimeo | MIT License | https://github.com/vimeo/player.js */ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e.Vimeo=e.Vimeo||{},e.Vimeo.Player=t())}(this,function(){"use strict";function e(e,t){return t={exports:{}},e(t,t.exports),t.exports}function t(e,t,n){var r=E.get(e.element)||{};t in r||(r[t]=[]),r[t].push(n),E.set(e.element,r)}function n(e,t){return(E.get(e.element)||{})[t]||[]}function r(e,t,n){var r=E.get(e.element)||{};if(!r[t])return!0;if(!n)return r[t]=[],E.set(e.element,r),!0;var i=r[t].indexOf(n);return-1!==i&&r[t].splice(i,1),E.set(e.element,r),r[t]&&0===r[t].length}function i(e,t){var i=n(e,t);if(i.length<1)return!1;var o=i.shift();return r(e,t,o),o}function o(e,t){var n=E.get(e);E.set(t,n),E.delete(e)}function a(e,t){return 0===e.indexOf(t.toLowerCase())?e:""+t.toLowerCase()+e.substr(0,1).toUpperCase()+e.substr(1)}function u(e){return e instanceof window.HTMLElement}function s(e){return!isNaN(parseFloat(e))&&isFinite(e)&&Math.floor(e)==e}function c(e){return/^(https?:)?\/\/((player|www).)?vimeo.com(?=$|\/)/.test(e)}function f(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.id,n=e.url,r=t||n;if(!r)throw new Error("An id or url must be passed, either in an options object or as a data-vimeo-id or data-vimeo-url attribute.");if(s(r))return"https://vimeo.com/"+r;if(c(r))return r.replace("http:","https:");if(t)throw new TypeError("“"+t+"” is not a valid video id.");throw new TypeError("“"+r+"” is not a vimeo.com url.")}function l(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return T.reduce(function(t,n){var r=e.getAttribute("data-vimeo-"+n);return(r||""===r)&&(t[n]=""===r?1:r),t},t)}function h(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new Promise(function(n,r){if(!c(e))throw new TypeError("“"+e+"” is not a vimeo.com url.");var i="https://vimeo.com/api/oembed.json?url="+encodeURIComponent(e);for(var o in t)t.hasOwnProperty(o)&&(i+="&"+o+"="+encodeURIComponent(t[o]));var a="XDomainRequest"in window?new XDomainRequest:new XMLHttpRequest;a.open("GET",i,!0),a.onload=function(){if(404===a.status)return void r(new Error("“"+e+"” was not found."));if(403===a.status)return void r(new Error("“"+e+"” is not embeddable."));try{var t=JSON.parse(a.responseText);n(t)}catch(e){r(e)}},a.onerror=function(){var e=a.status?" ("+a.status+")":"";r(new Error("There was an error fetching the embed code from Vimeo"+e+"."))},a.send()})}function d(e,t){var n=e.html;if(!t)throw new TypeError("An element must be provided");if(null!==t.getAttribute("data-vimeo-initialized"))return t.querySelector("iframe");var r=document.createElement("div");return r.innerHTML=n,t.appendChild(r.firstChild),t.setAttribute("data-vimeo-initialized","true"),t.querySelector("iframe")}function v(e){return"string"==typeof e&&(e=JSON.parse(e)),e}function p(e,t,n){if(e.element.contentWindow&&e.element.contentWindow.postMessage){var r={method:t};void 0!==n&&(r.value=n);var i=parseFloat(navigator.userAgent.toLowerCase().replace(/^.*msie (\d+).*$/,"$1"));i>=8&&i<10&&(r=JSON.stringify(r)),e.element.contentWindow.postMessage(r,e.origin)}}function y(e,t){t=v(t);var o=[],a=void 0;if(t.event){if("error"===t.event){n(e,t.data.method).forEach(function(n){var i=new Error(t.data.message);i.name=t.data.name,n.reject(i),r(e,t.data.method,n)})}o=n(e,"event:"+t.event),a=t.data}else if(t.method){var u=i(e,t.method);u&&(o.push(u),a=t.value)}o.forEach(function(t){try{if("function"==typeof t)return void t.call(e,a);t.resolve(a)}catch(e){}})}function m(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var g=void 0!==Array.prototype.indexOf,w=void 0!==window.postMessage;if(!g||!w)throw new Error("Sorry, the Vimeo Player API is not available in this browser.");var k="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},b=(e(function(e,t){!function(e){function t(e,t){function r(e){if(!this||this.constructor!==r)return new r(e);this._keys=[],this._values=[],this._itp=[],this.objectOnly=t,e&&n.call(this,e)}return t||w(e,"size",{get:y}),e.constructor=r,r.prototype=e,r}function n(e){this.add?e.forEach(this.add,this):e.forEach(function(e){this.set(e[0],e[1])},this)}function r(e){return this.has(e)&&(this._keys.splice(g,1),this._values.splice(g,1),this._itp.forEach(function(e){g0&&e(r,u))}catch(e){a.call(new s(u),e)}}}function a(t){var n=this;n.triggered||(n.triggered=!0,n.def&&(n=n.def),n.msg=t,n.state=2,n.chain.length>0&&e(r,n))}function u(e,t,n,r){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:{};if(m(this,Player),window.jQuery&&e instanceof jQuery&&(e.length>1&&window.console&&console.warn&&console.warn("A jQuery object with multiple elements was passed, using the first element."),e=e[0]),"string"==typeof e&&(e=document.getElementById(e)),!u(e))throw new TypeError("You must pass either a valid element or a valid id.");if("IFRAME"!==e.nodeName){var r=e.querySelector("iframe");r&&(e=r)}if("IFRAME"===e.nodeName&&!c(e.getAttribute("src")||""))throw new Error("The player element passed isn’t a Vimeo embed.");if(j.has(e))return j.get(e);this.element=e,this.origin="*";var i=new b(function(r,i){var a=function(e){if(c(e.origin)&&t.element.contentWindow===e.source){"*"===t.origin&&(t.origin=e.origin);var n=v(e.data),i="event"in n&&"ready"===n.event,o="method"in n&&"ping"===n.method;if(i||o)return t.element.setAttribute("data-ready","true"),void r();y(t,n)}};if(window.addEventListener?window.addEventListener("message",a,!1):window.attachEvent&&window.attachEvent("onmessage",a),"IFRAME"!==t.element.nodeName){var u=l(e,n);h(f(u),u).then(function(n){var r=d(n,e);return t.element=r,o(e,r),j.set(t.element,t),n}).catch(function(e){return i(e)})}});return x.set(this,i),j.set(this.element,this),"IFRAME"===this.element.nodeName&&p(this,"ping"),this}return _(Player,[{key:"callMethod",value:function(e){var n=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new b(function(i,o){return n.ready().then(function(){t(n,e,{resolve:i,reject:o}),p(n,e,r)})})}},{key:"get",value:function(e){var n=this;return new b(function(r,i){return e=a(e,"get"),n.ready().then(function(){t(n,e,{resolve:r,reject:i}),p(n,e)})})}},{key:"set",value:function(e,n){var r=this;return b.resolve(n).then(function(n){if(e=a(e,"set"),void 0===n||null===n)throw new TypeError("There must be a value to set.");return r.ready().then(function(){return new b(function(i,o){t(r,e,{resolve:i,reject:o}),p(r,e,n)})})})}},{key:"on",value:function(e,r){if(!e)throw new TypeError("You must pass an event name.");if(!r)throw new TypeError("You must pass a callback function.");if("function"!=typeof r)throw new TypeError("The callback must be a function.");0===n(this,"event:"+e).length&&this.callMethod("addEventListener",e).catch(function(){}),t(this,"event:"+e,r)}},{key:"off",value:function(e,t){if(!e)throw new TypeError("You must pass an event name.");if(t&&"function"!=typeof t)throw new TypeError("The callback must be a function.");r(this,"event:"+e,t)&&this.callMethod("removeEventListener",e).catch(function(e){})}},{key:"loadVideo",value:function(e){return this.callMethod("loadVideo",e)}},{key:"ready",value:function(){var e=x.get(this);return b.resolve(e)}},{key:"addCuePoint",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.callMethod("addCuePoint",{time:e,data:t})}},{key:"removeCuePoint",value:function(e){return this.callMethod("removeCuePoint",e)}},{key:"enableTextTrack",value:function(e,t){if(!e)throw new TypeError("You must pass a language.");return this.callMethod("enableTextTrack",{language:e,kind:t})}},{key:"disableTextTrack",value:function(){return this.callMethod("disableTextTrack")}},{key:"pause",value:function(){return this.callMethod("pause")}},{key:"play",value:function(){return this.callMethod("play")}},{key:"unload",value:function(){return this.callMethod("unload")}},{key:"getAutopause",value:function(){return this.get("autopause")}},{key:"setAutopause",value:function(e){return this.set("autopause",e)}},{key:"getColor",value:function(){return this.get("color")}},{key:"setColor",value:function(e){return this.set("color",e)}},{key:"getCuePoints",value:function(){return this.get("cuePoints")}},{key:"getCurrentTime",value:function(){return this.get("currentTime")}},{key:"setCurrentTime",value:function(e){return this.set("currentTime",e)}},{key:"getDuration",value:function(){return this.get("duration")}},{key:"getEnded",value:function(){return this.get("ended")}},{key:"getLoop",value:function(){return this.get("loop")}},{key:"setLoop",value:function(e){return this.set("loop",e)}},{key:"getPaused",value:function(){return this.get("paused")}},{key:"getPlaybackRate",value:function(){return this.get("playbackRate")}},{key:"setPlaybackRate",value:function(e){return this.set("playbackRate",e)}},{key:"getTextTracks",value:function(){return this.get("textTracks")}},{key:"getVideoEmbedCode",value:function(){return this.get("videoEmbedCode")}},{key:"getVideoId",value:function(){return this.get("videoId")}},{key:"getVideoTitle",value:function(){return this.get("videoTitle")}},{key:"getVideoWidth",value:function(){return this.get("videoWidth")}},{key:"getVideoHeight",value:function(){return this.get("videoHeight")}},{key:"getVideoUrl",value:function(){return this.get("videoUrl")}},{key:"getVolume",value:function(){return this.get("volume")}},{key:"setVolume",value:function(e){return this.set("volume",e)}}]),Player}();return function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,t=[].slice.call(e.querySelectorAll("[data-vimeo-id], [data-vimeo-url]")),n=function(e){"console"in window&&console.error&&console.error("There was an error creating an embed: "+e)};t.forEach(function(e){try{if(null!==e.getAttribute("data-vimeo-defer"))return;var t=l(e);h(f(t),t).then(function(t){return d(t,e)}).catch(n)}catch(e){n(e)}})}(),function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,t=function(t){if(c(t.origin)&&t.data&&"spacechange"===t.data.event)for(var n=e.querySelectorAll("iframe"),r=0;r