@oat-sa/tao-core-ui 1.5.4 → 1.6.3

package/dist/mediaplayer/players/youtube.js

@@ -0,0 +1,470 @@
+define(['jquery', 'core/eventifier', 'ui/mediaplayer/support', 'ui/mediaplayer/youtubeManager', 'handlebars', 'i18n', 'lodash', 'lib/dompurify/purify'], function ($$1, eventifier, support, youtubeManagerFactory, Handlebars, __, _, DOMPurify) { 'use strict';
+
+  $$1 = $$1 && $$1.hasOwnProperty('default') ? $$1['default'] : $$1;
+  eventifier = eventifier && eventifier.hasOwnProperty('default') ? eventifier['default'] : eventifier;
+  support = support && support.hasOwnProperty('default') ? support['default'] : support;
+  youtubeManagerFactory = youtubeManagerFactory && youtubeManagerFactory.hasOwnProperty('default') ? youtubeManagerFactory['default'] : youtubeManagerFactory;
+  Handlebars = Handlebars && Handlebars.hasOwnProperty('default') ? Handlebars['default'] : Handlebars;
+  __ = __ && __.hasOwnProperty('default') ? __['default'] : __;
+  _ = _ && _.hasOwnProperty('default') ? _['default'] : _;
+  DOMPurify = DOMPurify && DOMPurify.hasOwnProperty('default') ? DOMPurify['default'] : DOMPurify;
+
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof = function (obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof = function (obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
+  }
+
+  function Helpers0 (hb) {
+    //register a i18n helper
+    hb.registerHelper('__', function (key) {
+      return __(key);
+    });
+    /**
+     * Register dompurify helper
+     *
+     * https://github.com/cure53/DOMPurify
+     * with config SAFE_FOR_TEMPLATES: true
+     * to make output safe for template systems
+     */
+
+    hb.registerHelper('dompurify', function (context) {
+      return DOMPurify.sanitize(context);
+    });
+    /**
+     * Register join helper
+     *
+     * Example :
+     * var values = {a:v1, b:v2, c:v3};
+     * Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
+     * Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
+     */
+
+    hb.registerHelper('join', function (arr, keyValueGlue, fragmentGlue, wrapper) {
+      var fragments = [];
+      keyValueGlue = typeof keyValueGlue === 'string' ? keyValueGlue : undefined;
+      fragmentGlue = typeof fragmentGlue === 'string' ? fragmentGlue : ' ';
+      wrapper = typeof wrapper === 'string' ? wrapper : '"';
+
+      _.forIn(arr, function (value, key) {
+        var fragment = '';
+
+        if (value !== null || value !== undefined) {
+          if (typeof value === 'boolean') {
+            value = value ? 'true' : 'false';
+          } else if (_typeof(value) === 'object') {
+            value = _.values(value).join(' ');
+          }
+        } else {
+          value = '';
+        }
+
+        if (keyValueGlue !== undefined) {
+          fragment += key + keyValueGlue;
+        }
+
+        fragment += wrapper + value + wrapper;
+        fragments.push(fragment);
+      });
+
+      return fragments.join(fragmentGlue);
+    }); //register a classic "for loop" helper
+    //it also adds a local variable "i" as the index in each iteration loop
+
+    hb.registerHelper('for', function (startIndex, stopIndex, increment, options) {
+      var ret = '';
+      startIndex = parseInt(startIndex);
+      stopIndex = parseInt(stopIndex);
+      increment = parseInt(increment);
+
+      for (var i = startIndex; i < stopIndex; i += increment) {
+        ret += options.fn(_.extend({}, this, {
+          i: i
+        }));
+      }
+
+      return ret;
+    });
+    hb.registerHelper('equal', function (var1, var2, options) {
+      if (var1 == var2) {
+        return options.fn(this);
+      } else {
+        return options.inverse(this);
+      }
+    }); // register a "get property" helper
+    // it gets the named property from the provided context
+
+    hb.registerHelper('property', function (name, context) {
+      return context[name] || '';
+    }); // register an 'includes' helper
+    // it checks if value is in array
+
+    hb.registerHelper('includes', function (haystack, needle, options) {
+      if (_.contains(haystack, needle)) {
+        return options.fn(this);
+      }
+    });
+  }
+
+  if (!Helpers0.__initialized) {
+    Helpers0(Handlebars);
+    Helpers0.__initialized = true;
+  }
+  var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+    this.compilerInfo = [4,'>= 1.0.0'];
+  helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+    var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression;
+
+
+    buffer += "<div class=\"media video youtube\" data-video-src=\"";
+    if (helper = helpers.src) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+    else { helper = (depth0 && depth0.src); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+    buffer += escapeExpression(stack1)
+      + "\" data-video-id=\"";
+    if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+    else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+    buffer += escapeExpression(stack1)
+      + "\" data-type=\"youtube\"></div>\n";
+    return buffer;
+    });
+  function youtubeTpl(data, options, asString) {
+    var html = Template(data, options);
+    return (asString || true) ? html : $(html);
+  }
+
+  /**
+   * This program is free software; you can redistribute it and/or
+   * modify it under the terms of the GNU General Public License
+   * as published by the Free Software Foundation; under version 2
+   * of the License (non-upgradable).
+   *
+   * This program is distributed in the hope that it will be useful,
+   * but WITHOUT ANY WARRANTY; without even the implied warranty of
+   * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+   * GNU General Public License for more details.
+   *
+   * You should have received a copy of the GNU General Public License
+   * along with this program; if not, write to the Free Software
+   * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+   *
+   * Copyright (c) 2015-2021 (original work) Open Assessment Technologies SA ;
+   */
+  /**
+   * The polling interval used to update the progress bar while playing a YouTube video.
+   * Note : the YouTube API does not provide events to update this progress bar...
+   * @type {Number}
+   */
+
+  var youtubePolling = 100;
+  /**
+   * List of YouTube events that can be listened to for debugging
+   * @type {String[]}
+   */
+
+  var youtubeEvents = ['onApiChange', 'onError', 'onPlaybackQualityChange', 'onPlaybackRateChange', 'onStateChange'];
+  /**
+   * List of player events that can be listened to for debugging
+   * @type {String[]}
+   */
+
+  var playerEvents = ['end', 'error', 'pause', 'play', 'ready', 'resize', 'timeupdate'];
+  /**
+   * A local manager for Youtube players.
+   * Relies on https://developers.google.com/youtube/iframe_api_reference
+   * @type {Object}
+   */
+
+  var youtubeManager = youtubeManagerFactory();
+  /**
+   * Defines a player object dedicated to youtube media
+   * @param {jQuery} $container - Where to render the player
+   * @param {Object} config - The list of config entries
+   * @param {Array} config.sources - The list of media sources
+   * @param {Boolean} [config.debug] - Enables the debug mode
+   * @param {Number} [config.polling=100] - The polling interval used to update the progress bar while playing a YouTube video.
+   * @returns {Object} player
+   */
+
+  function youtubePlayerFactory($container) {
+    var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var sources = config.sources || [];
+    var source = sources[0] || {};
+    var otherSources = sources.slice(1);
+    config.polling = config.polling || youtubePolling;
+    var $media;
+    var media;
+    var interval;
+    var destroyed;
+    var initWidth;
+    var initHeight;
+    var callbacks = []; // eslint-disable-next-line
+
+    var debug = function debug(action) {
+      var _window$console;
+
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      return config.debug && (_window$console = window.console).log.apply(_window$console, ["[youtube:".concat(action, "]")].concat(args));
+    };
+
+    var queueMedia = function queueMedia(url, register) {
+      var id = youtubeManager.extractYoutubeId(url);
+
+      if (id) {
+        if (media) {
+          register(id);
+        } else {
+          callbacks.push(function () {
+            return register(id);
+          });
+        }
+
+        return true;
+      }
+
+      return false;
+    };
+
+    var player = {
+      init: function init() {
+        var _this = this;
+
+        $media = $$1(youtubeTpl({
+          src: source.src,
+          id: youtubeManager.extractYoutubeId(source.src)
+        }));
+        $container.append($media);
+        otherSources.forEach(function (source) {
+          return _this.addMedia(source.src);
+        });
+        media = null;
+        destroyed = false;
+        youtubeManager.add($media, this, {
+          controls: !support.canControl()
+        });
+        return true;
+      },
+      onReady: function onReady(event) {
+        var _this2 = this;
+
+        media = event.target;
+        $media = $$1(media.getIframe()); // the injected media placeholder is replaced by an iframe by the YouTube lib
+
+        if (!destroyed) {
+          // install debug logger
+          if (config.debug) {
+            debug('installed', media);
+            youtubeEvents.forEach(function (eventName) {
+              return media.addEventListener(eventName, function (e) {
+                debug('media event', eventName, $media && $media.data('videoSrc'), e);
+              });
+            });
+            playerEvents.forEach(function (eventName) {
+              _this2.on(eventName, function () {
+                for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                  args[_key2] = arguments[_key2];
+                }
+
+                debug.apply(void 0, ['player event', eventName, $media && $media.data('videoSrc')].concat(args));
+              });
+            });
+          }
+
+          if (initWidth && initHeight) {
+            this.setSize(initWidth, initHeight);
+          }
+
+          callbacks.forEach(function (cb) {
+            return cb();
+          });
+          callbacks = [];
+          this.trigger('ready');
+        } else {
+          this.destroy();
+        }
+      },
+      onStateChange: function onStateChange(event) {
+        this.stopPolling();
+
+        if (!destroyed) {
+          switch (event.data) {
+            // ended
+            case 0:
+              this.trigger('end');
+              break;
+            // playing
+
+            case 1:
+              this.trigger('play');
+              this.startPolling();
+              break;
+            // paused
+
+            case 2:
+              this.trigger('pause');
+              break;
+          }
+        }
+      },
+      stopPolling: function stopPolling() {
+        if (interval) {
+          window.clearInterval(interval);
+          interval = null;
+        }
+      },
+      startPolling: function startPolling() {
+        var _this3 = this;
+
+        interval = window.setInterval(function () {
+          return _this3.trigger('timeupdate');
+        }, config.polling);
+      },
+      destroy: function destroy() {
+        debug('api call', 'destroy');
+        destroyed = true;
+        this.stopPolling();
+        this.removeAllListeners();
+
+        if (media) {
+          youtubeEvents.forEach(function (ev) {
+            return media.removeEventListener(ev);
+          });
+          media.destroy();
+          media = void 0;
+        } else {
+          youtubeManager.remove($media, this);
+        }
+
+        if ($media) {
+          $media.remove();
+          $media = void 0;
+        }
+      },
+      getMedia: function getMedia() {
+        debug('api call', 'getMedia', media);
+        return media;
+      },
+      getPosition: function getPosition() {
+        var position = 0;
+
+        if (media) {
+          position = media.getCurrentTime();
+        }
+
+        debug('api call', 'getPosition', position);
+        return position;
+      },
+      getDuration: function getDuration() {
+        var duration = 0;
+
+        if (media) {
+          duration = media.getDuration();
+        }
+
+        debug('api call', 'getDuration', duration);
+        return duration;
+      },
+      getVolume: function getVolume() {
+        var volume = 0;
+
+        if (media) {
+          volume = media.getVolume();
+        }
+
+        debug('api call', 'getVolume', volume);
+        return volume;
+      },
+      setVolume: function setVolume(volume) {
+        debug('api call', 'setVolume', volume);
+
+        if (media) {
+          media.setVolume(parseFloat(volume));
+        }
+      },
+      setSize: function setSize(width, height) {
+        debug('api call', 'setSize', width, height);
+        this.trigger('resize', width, height);
+
+        if (!media) {
+          initWidth = width;
+          initHeight = height;
+        }
+      },
+      seek: function seek(time) {
+        debug('api call', 'seek', time);
+
+        if (media) {
+          media.seekTo(parseFloat(time), true);
+        }
+      },
+      play: function play() {
+        debug('api call', 'play');
+
+        if (media) {
+          media.playVideo();
+        }
+      },
+      pause: function pause() {
+        debug('api call', 'pause');
+
+        if (media) {
+          media.pauseVideo();
+        }
+      },
+      stop: function stop() {
+        debug('api call', 'stop');
+
+        if (media) {
+          media.stopVideo();
+          this.trigger('end');
+        }
+      },
+      mute: function mute(state) {
+        debug('api call', 'mute', state);
+
+        if (media) {
+          media[state ? 'mute' : 'unMute']();
+        }
+      },
+      isMuted: function isMuted() {
+        var mute = false;
+
+        if (media) {
+          mute = media.isMuted();
+        }
+
+        debug('api call', 'isMuted', mute);
+        return mute;
+      },
+      addMedia: function addMedia(url) {
+        debug('api call', 'addMedia', url);
+        return queueMedia(url, function (id) {
+          return media && media.cueVideoById(id);
+        });
+      },
+      setMedia: function setMedia(url) {
+        debug('api call', 'setMedia', url);
+        callbacks = [];
+        return queueMedia(url, function (id) {
+          return media && media.loadVideoById(id);
+        });
+      }
+    };
+    return eventifier(player);
+  }
+
+  return youtubePlayerFactory;
+
+});

package/dist/mediaplayer/players.js

@@ -0,0 +1,35 @@
+define(['ui/mediaplayer/players/html5', 'ui/mediaplayer/players/youtube'], function (html5PlayerFactory, youtubePlayerFactory) { 'use strict';
+
+    html5PlayerFactory = html5PlayerFactory && html5PlayerFactory.hasOwnProperty('default') ? html5PlayerFactory['default'] : html5PlayerFactory;
+    youtubePlayerFactory = youtubePlayerFactory && youtubePlayerFactory.hasOwnProperty('default') ? youtubePlayerFactory['default'] : youtubePlayerFactory;
+
+    /**
+     * This program is free software; you can redistribute it and/or
+     * modify it under the terms of the GNU General Public License
+     * as published by the Free Software Foundation; under version 2
+     * of the License (non-upgradable).
+     *
+     * This program is distributed in the hope that it will be useful,
+     * but WITHOUT ANY WARRANTY; without even the implied warranty of
+     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     * GNU General Public License for more details.
+     *
+     * You should have received a copy of the GNU General Public License
+     * along with this program; if not, write to the Free Software
+     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     *
+     * Copyright (c) 2015-2021 (original work) Open Assessment Technologies SA ;
+     */
+    /**
+     * Defines the list of available players
+     */
+
+    var players = {
+      audio: html5PlayerFactory,
+      video: html5PlayerFactory,
+      youtube: youtubePlayerFactory
+    };
+
+    return players;
+
+});

package/dist/mediaplayer/support.js

@@ -0,0 +1,134 @@
+define(function () { 'use strict';
+
+    /**
+     * This program is free software; you can redistribute it and/or
+     * modify it under the terms of the GNU General Public License
+     * as published by the Free Software Foundation; under version 2
+     * of the License (non-upgradable).
+     *
+     * This program is distributed in the hope that it will be useful,
+     * but WITHOUT ANY WARRANTY; without even the implied warranty of
+     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     * GNU General Public License for more details.
+     *
+     * You should have received a copy of the GNU General Public License
+     * along with this program; if not, write to the Free Software
+     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     *
+     * Copyright (c) 2015-2021 (original work) Open Assessment Technologies SA ;
+     */
+
+    /**
+     * A Regex to detect Apple mobile browsers
+     * @type {RegExp}
+     * @private
+     */
+    var reAppleMobiles = /ip(hone|od)/i;
+    /**
+     * A list of MIME types with codec declaration
+     * @type {Object}
+     * @private
+     */
+
+    var supportedMimeTypes = {
+      // video
+      'video/webm': 'video/webm; codecs="vp8, vorbis"',
+      'video/mp4': 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+      'video/ogg': 'video/ogg; codecs="theora, vorbis"',
+      // audio
+      'audio/mpeg': 'audio/mpeg;',
+      'audio/mp4': 'audio/mp4; codecs="mp4a.40.5"',
+      'audio/ogg': 'audio/ogg; codecs="vorbis"',
+      'audio/wav': 'audio/wav; codecs="1"'
+    };
+    /**
+     * Checks support for a MIME type.
+     * @param {HTMLMediaElement} media The media element on which check support
+     * @param {String} mimeType A MIME type to check the support for
+     * @returns {string}
+     * @private
+     */
+
+    var findSupport = function findSupport(media, mimeType) {
+      return media.canPlayType(mimeType).replace(/no/, '');
+    };
+    /**
+     * Support detection
+     * @type {Object}
+     */
+
+
+    var support = {
+      /**
+       * Checks if the browser can play media
+       * @param {HTMLMediaElement} media The media element on which check support
+       * @param {String} [mimeType] An optional MIME type to precise the support
+       * @returns {Boolean}
+       * @private
+       */
+      checkSupport: function checkSupport(media, mimeType) {
+        var support = media.canPlayType;
+
+        if (support && mimeType) {
+          return !!(supportedMimeTypes[mimeType] && findSupport(media, supportedMimeTypes[mimeType]) || findSupport(media, mimeType));
+        }
+
+        return !!support;
+      },
+
+      /**
+       * Checks if the browser can play video and audio
+       * @param {String} [type] The type of media (audio or video)
+       * @param {String} [mime] A media MIME type to check
+       * @returns {Boolean}
+       */
+      canPlay: function canPlay(type, mime) {
+        if (type) {
+          switch (type.toLowerCase()) {
+            case 'audio':
+              return this.canPlayAudio(mime);
+
+            case 'youtube':
+              return this.canPlayVideo();
+
+            case 'video':
+              return this.canPlayVideo(mime);
+
+            default:
+              return false;
+          }
+        }
+
+        return this.canPlayAudio() && this.canPlayVideo();
+      },
+
+      /**
+       * Checks if the browser can play audio
+       * @param {String} [mime] A media MIME type to check
+       * @returns {Boolean}
+       */
+      canPlayAudio: function canPlayAudio(mime) {
+        return this.checkSupport(document.createElement('audio'), mime);
+      },
+
+      /**
+       * Checks if the browser can play video
+       * @param {String} [mime] A media MIME type to check
+       * @returns {Boolean}
+       */
+      canPlayVideo: function canPlayVideo(mime) {
+        return this.checkSupport(document.createElement('video'), mime);
+      },
+
+      /**
+       * Checks if the browser allows to control the media playback
+       * @returns {Boolean}
+       */
+      canControl: function canControl() {
+        return !reAppleMobiles.test(window.navigator.userAgent);
+      }
+    };
+
+    return support;
+
+});