MAGETWO-69690: Add froogaloop library as a dependency to load-player module #9690

Author: omiroshnichenko

app/code/Magento/ProductVideo/view/frontend/requirejs-config.js

@@ -7,8 +7,7 @@ var config = {
     map: {
         '*': {
             loadPlayer: 'Magento_ProductVideo/js/load-player',
-            fotoramaVideoEvents: 'Magento_ProductVideo/js/fotorama-add-video-events',
-            vimeoAPI: 'https://secure-a.vimeocdn.com/js/froogaloop2.min.js'
+            fotoramaVideoEvents: 'Magento_ProductVideo/js/fotorama-add-video-events'
         }
     },
     shim: {

app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js

@@ -94,16 +94,20 @@ define([
         options: {
             videoData: '',
             videoSettings: '',
-            optionsVideoData: ''
+            optionsVideoData: '',
+            vimeoJSFrameworkLoaded: false
         },
-
+        onVimeoJSFramework: function () {},
         PV: 'product-video', // [CONST]
         VU: 'video-unplayed',
         PVLOADED: 'fotorama__product-video--loaded', // [CONST]
+        PVLOADING: 'fotorama__product-video--loading', // [CONST]
         VID: 'video', // [CONST]
         VI: 'vimeo', // [CONST]
         FTVC: 'fotorama__video-close',
         FTAR: 'fotorama__arr',
+        fotoramaSpinner: 'fotorama__spinner',
+        fotoramaSpinnerShow: 'fotorama__spinner--show',
         TI: 'video-thumb-icon',
         isFullscreen: false,
         FTCF: '[data-gallery-role="fotorama__fullscreen-icon"]',
@@ -147,7 +151,6 @@ define([
          * @private
          */
         _setOptions: function (options) {
-
             if (options.videoData && options.videoData.length) {
                 this.options.videoData = options.videoData;
             }
@@ -402,6 +405,14 @@ define([
 
             element.async = true;
             element.src = 'https://secure-a.vimeocdn.com/js/froogaloop2.min.js';
+
+            /**
+             * Vimeo js framework on load callback.
+             */
+            element.onload = function () {
+                this.onVimeoJSFramework();
+                this.vimeoJSFrameworkLoaded = true;
+            }.bind(this);
             scriptTag.parentNode.insertBefore(element, scriptTag);
         },
 
@@ -620,15 +631,41 @@ define([
         },
 
         /**
-         *
-         * @param {Event} event
          * @private
          */
-        _clickHandler: function (event) {
-            if ($(event.target).hasClass(this.VU) && $(event.target).find('iframe').length === 0) {
+        _showLoader: function () {
+            var spinner = this.fotoramaItem.find('.' + this.fotoramaSpinner);
+
+            spinner.addClass(this.fotoramaSpinnerShow);
+            this.fotoramaItem.data('fotorama').activeFrame.$stageFrame.addClass(this.PVLOADING);
+        },
+
+        /**
+         * @private
+         */
+        _hideLoader: function () {
+            var spinner = this.fotoramaItem.find('.' + this.fotoramaSpinner);
+
+            spinner.removeClass(this.fotoramaSpinnerShow);
+            this.fotoramaItem.data('fotorama').activeFrame.$stageFrame.removeClass(this.PVLOADING);
+        },
 
+        /**
+         * @param {Event} event
+         * @private
+         */
+        _clickHandler: function (event) {if ($(event.target).hasClass(this.VU) && $(event.target).find('iframe').length === 0) {
                 $(event.target).removeClass(this.VU);
-                $(event.target).find('.' + this.PV).productVideoLoader();
+
+                if (this.vimeoJSFrameworkLoaded) {
+                    $(event.target).find('.' + this.PV).productVideoLoader();
+                } else {
+                    this._showLoader();
+                    this.onVimeoJSFramework = function () {
+                        $(event.target).find('.' + this.PV).productVideoLoader();
+                        this._hideLoader();
+                    }.bind(this);
+                }
 
                 $('.' + this.FTAR).addClass(this.isFullscreen ? 'fotorama__arr--shown' : 'fotorama__arr--hidden');
             }
@@ -686,6 +723,7 @@ define([
             }
 
             $wrapper.find('.' + this.PVLOADED).removeClass(this.PVLOADED);
+            this._hideLoader();
 
             $wrapper.find('.' + this.PV).each(function () {
                 var $item = $(this).parent(),

app/code/Magento/ProductVideo/view/frontend/web/js/load-player.js

@@ -7,7 +7,7 @@
  @version 0.0.1
  @requires jQuery & jQuery UI
  */
-define(['jquery', 'jquery/ui', 'vimeoAPI'], function ($) {
+define(['jquery', 'jquery/ui'], function ($) {
     'use strict';
 
     var videoRegister = {

app/design/frontend/Magento/blank/Magento_ProductVideo/web/css/source/_module.less

@@ -83,6 +83,12 @@
         top: 12px;
         width: 100px;
     }
+
+    .fotorama__product-video--loading {
+        &:after {
+            visibility: hidden;
+        }
+    }
 }
 
 //