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

package/dist/mediaplayer/utils/reminder.js

@@ -0,0 +1,198 @@
+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) 2021 (original work) Open Assessment Technologies SA ;
+     */
+
+    /**
+     * Creates a reminder manager.
+     *
+     * A reminder manager allows to register callback functions that will be called after a particular amount of time.
+     * The schedule can be created and cancelled at any time.
+     *
+     * @example
+     * // Create a reminder manager
+     * const manager = reminderManagerFactory();
+     *
+     * // Add a reminder that will be called after 2s (delay is given in milliseconds)
+     * manager.remind(() => console.log('Hello!'), 2000);
+     *
+     * // Start the schedule
+     * manager.start();
+     *
+     * // We can know how many time elapsed since the last schedule
+     * const elapsed = manager.elapsed;
+     *
+     * // The schedule can be cancelled
+     * if (needToCancel) {
+     *     manager.stop();
+     * }
+     *
+     * // The schedule should be cancelled
+     * console.log('schedule running:', manager.running)
+     *
+     * @returns {reminderManager}
+     */
+    function reminderManagerFactory() {
+      // Keep track of the running state
+      var running = false; // Timestamp of the last start
+
+      var last = 0; // A list of reminders to callback
+
+      var reminders = new Map();
+      /**
+       * Cancels a schedule for a particular reminder.
+       * @param {object} state - A sate object containing the timeout handler for the reminder.
+       * @private
+       */
+
+      var stopReminder = function stopReminder(state) {
+        if (state && state.timeout) {
+          clearTimeout(state.timeout);
+          state.timeout = null;
+        }
+      };
+      /**
+       * Cancel the schedule for all reminders.
+       * @private
+       */
+
+
+      var stopAllReminders = function stopAllReminders() {
+        return reminders.forEach(stopReminder);
+      };
+      /**
+       * Schedule all reminders.
+       * @private
+       */
+
+
+      var startAllReminders = function startAllReminders() {
+        reminders.forEach(function (state, reminder) {
+          stopReminder(state);
+          state.timeout = setTimeout(reminder, state.delay);
+        });
+      };
+      /**
+       * Defines the API of a reminder manager.
+       *
+       * A reminder manager allows to register callback functions that will be called after a particular amount of time.
+       * The schedule can be created and cancelled at any time.
+       *
+       * @namespace reminderManager
+       */
+
+
+      return {
+        /**
+         * Tells whether or not the schedule is running.
+         * @type {boolean}
+         * @member running
+         * @memberOf reminderManager
+         */
+        get running() {
+          return running;
+        },
+
+        /**
+         * Gives the amount of time elapsed since the start of the schedule. It is given in milliseconds.
+         * If the schedule is not running, it will always be 0.
+         * @type {number}
+         * @member running
+         * @memberOf reminderManager
+         */
+        get elapsed() {
+          if (!running) {
+            return 0;
+          }
+
+          return performance.now() - last;
+        },
+
+        /**
+         * Schedules all reminders from now on.
+         *
+         * @returns {reminderManager}
+         * @function start
+         * @memberOf reminderManager
+         */
+        start: function start() {
+          running = true;
+          last = performance.now();
+          startAllReminders();
+          return this;
+        },
+
+        /**
+         * Cancels all scheduled reminders.
+         *
+         * @returns {reminderManager}
+         * @function stop
+         * @memberOf reminderManager
+         */
+        stop: function stop() {
+          running = false;
+          stopAllReminders();
+          return this;
+        },
+
+        /**
+         * Adds a callback to be scheduled.
+         * It won't be scheduled until the schedule is restarted.
+         *
+         * @param {Function} cb - A function to call after the delay elapsed.
+         * @param {number} delay - The delay after what call back the reminder. It is given in milliseconds.
+         * @returns {reminderManager}
+         * @function remind
+         * @memberOf reminderManager
+         */
+        remind: function remind(cb, delay) {
+          if ('function' === typeof cb && delay) {
+            stopReminder(reminders.get(cb));
+            reminders.set(cb, {
+              delay: delay
+            });
+          }
+
+          return this;
+        },
+
+        /**
+         * Removes a scheduled callback. If a schedule was running, it will be cancelled first.
+         *
+         * @param {Function} [cb] - The callback function to remove. If omitted, all reminders will be removed.
+         * @returns {reminderManager}
+         * @function forget
+         * @memberOf reminderManager
+         */
+        forget: function forget(cb) {
+          if ('undefined' !== typeof cb) {
+            stopReminder(reminders.get(cb));
+            reminders.delete(cb);
+          } else {
+            stopAllReminders();
+            reminders.clear();
+          }
+
+          return this;
+        }
+      };
+    }
+
+    return reminderManagerFactory;
+
+});

package/dist/mediaplayer/utils/timeObserver.js

@@ -0,0 +1,149 @@
+define(['core/eventifier'], function (eventifier) { 'use strict';
+
+    eventifier = eventifier && eventifier.hasOwnProperty('default') ? eventifier['default'] : eventifier;
+
+    /**
+     * 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) 2021 (original work) Open Assessment Technologies SA ;
+     */
+    /**
+     * Creates a time observer.
+     *
+     * It observes the updates applied to a timeline, raising a flag when an irregularity occurs.
+     *
+     * It works as follow:
+     * - an initial state is defined (example: current: 0, duration: 100)
+     * - each time a position is forced (say the position is changed outside of the regular time update), the observer needs
+     *   to be notified.
+     * - each time the position is updated (say regular time update), the observer needs to be called.
+     * - if the difference between the last regular update and the last one is too high, an event is triggered
+     *
+     * @example
+     * // Create a time observer with an expected interval of 2 seconds
+     * const observer = timeObserverFactory(2);
+     *
+     * // Init the state
+     * observer.start(player.position, player.duration);
+     *
+     * // Update on a regular basis
+     * player.on('timeupdate', () => observer.update(player.position));
+     *
+     * // Notify any position change outside of the regular update
+     * player.on('seek', () => observer.seek(player.position));
+     *
+     * // Gets informed from any irregularity
+     * observer.on('irregularity', () => console.log('irregular jump in time');
+     *
+     * @param {number} interval - The typical interval expected between two updates. It is given in seconds.
+     * @returns {timeObserver}
+     */
+
+    function timeObserverFactory() {
+      var interval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      // Current time position
+      var position = 0; // Total duration expected
+
+      var duration = 0; // Last position forced
+
+      var _seek = 0;
+      /**
+       * Defines the API of a time observer.
+       *
+       * It observes the updates applied to a timeline, raising a flag when an irregularity occurs.
+       *
+       * @namespace timeObserver
+       */
+
+      return eventifier({
+        /**
+         * Gets the current time position reported to the observer.
+         *
+         * @returns {number}
+         * @type {number}
+         * @member position
+         * @memberOf timeObserver
+         */
+        get position() {
+          return position;
+        },
+
+        /**
+         * Gets the total duration reported to the observer.
+         *
+         * @returns {number}
+         * @type {number}
+         * @member duration
+         * @memberOf timeObserver
+         */
+        get duration() {
+          return duration;
+        },
+
+        /**
+         * Initialises the time state.
+         *
+         * @param {number} initPosition - The initial time position
+         * @param {number} initDuration - The total duration expected
+         * @returns {timeObserver}
+         * @function init
+         * @memberOf timeObserver
+         */
+        init: function init(initPosition, initDuration) {
+          position = _seek = initPosition;
+          duration = initDuration;
+          return this;
+        },
+
+        /**
+         * Updates the time position. If the difference with the previous update is too high, an `irregularity` event
+         * will be emitted.
+         *
+         * @param {number} newPosition - The new time position
+         * @returns {timeObserver}
+         *
+         * @fires irregularity
+         */
+        update: function update(newPosition) {
+          if (newPosition > _seek && newPosition - position > interval) {
+            /**
+             * Notifies an irregularity in the time update
+             * @event irregularity
+             * @param {number} position - last regular position
+             * @param {number} newPosition - new irregular position
+             */
+            this.trigger('irregularity', position, newPosition);
+          }
+
+          position = newPosition;
+          return this;
+        },
+
+        /**
+         * Notifies the observer about a change in the position outside of the regular update.
+         *
+         * @param {number} seekPosition
+         * @returns {timeObserver}
+         */
+        seek: function seek(seekPosition) {
+          position = _seek = seekPosition;
+          return this;
+        }
+      });
+    }
+
+    return timeObserverFactory;
+
+});

package/dist/mediaplayer.js

@@ -146,7 +146,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Reload", options) : helperMissing.call(depth0, "__", "Reload", options)))
       + "\"></div>\n                <div class=\"message\">"
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "You are encountering a prolonged connectivity loss.", options) : helperMissing.call(depth0, "__", "You are encountering a prolonged connectivity loss.", options)))
-      + "</div>\n                <div class=\"message\">"
+      + " "
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Click to reload.", options) : helperMissing.call(depth0, "__", "Click to reload.", options)))
       + "</div>\n            </a>\n        </div>\n    </div>\n    <div class=\"controls\">\n        <div class=\"bar\">\n            <div class=\"control actions playback\">\n                <a class=\"action play\" data-control=\"play\" title=\""
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Play", options) : helperMissing.call(depth0, "__", "Play", options)))
@@ -236,7 +236,6 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
       startMuted: false,
       maxPlays: 0,
       replayTimeout: 0,
-      stalledTimeout: 2000,
       canPause: true,
       canSeek: true,
       loop: false,
@@ -359,8 +358,14 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
   /**
    * Builds a media player instance
    * @param {Object} config
-   * @param {String} config.type - The type of media to play
-   * @param {String|Array} config.url - The URL to the media
+   * @param {String} config.type - The type of media to play, say `audio`, `video`, or `youtube`. The default is `video`.
+   * It might also contain the MIME type of the media as a shorthand.
+   * @param {String|Array} [config.url] - The URL to the media. If several media are proposed as alternatives,
+   * please look at the `sources` option instead.
+   * @param {String} [config.mimeType] - The MIME type of the media. If omitted, the player will try to extract it
+   * from the `type` property, otherwise it will request the server to get the content-type.
+   * @param {Array} [config.sources] - A list of URL if several media can be proposed. Each entry may be either a
+   * string (single URL), or an object containing both the URL and the MIME type ({src: string, type: string}).
    * @param {String|jQuery|HTMLElement} [config.renderTo] - An optional container in which renders the player
    * @param {Boolean} [config.canSeek] - The player allows to reach an arbitrary position within the media using the duration bar
    * @param {Boolean} [config.loop] - The media will be played continuously
@@ -370,15 +375,14 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
    * @param {Number} [config.autoStartAt] - The time position at which the player should start
    * @param {Number} [config.maxPlays] - Sets a few number of plays (default: infinite)
    * @param {Number} [config.replayTimeout] - disable the possibility to replay a media after this timeout, in seconds (default: 0)
-   * @param {Number} [config.stalledTimeout] - delay before considering stalled playback (default: 2000)
    * @param {Number} [config.volume] - Sets the sound volume (default: 80)
    * @param {Number} [config.width] - Sets the width of the player (default: depends on media type)
    * @param {Number} [config.height] - Sets the height of the player (default: depends on media type)
    * @param {Boolean} [config.preview] - Enables the media preview (load media metadata)
    * @param {Boolean} [config.debug] - Enables the debug mode
+   * @param {number} [config.config.stalledDetectionDelay] - The delay before considering a media is stalled
    * @event render - Event triggered when the player is rendering
    * @event error - Event triggered when the player throws an unrecoverable error
-   * @event recovererror - Event triggered when the player throws a recoverable error
    * @event ready - Event triggered when the player is fully ready
    * @event play - Event triggered when the playback is starting
    * @event update - Event triggered while the player is playing
@@ -411,6 +415,10 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
 
         _.defaults(this.config, defaults.options);
 
+        if (!this.config.mimeType && 'string' === typeof this.config.type && this.config.type.indexOf('/') > 0) {
+          this.config.mimeType = this.config.type;
+        }
+
         this._setType(this.config.type || defaults.type);
 
         this._reset();
@@ -538,26 +546,15 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
          * Triggers a reload event
          * @event mediaplayer#reload
          */
-        this.trigger('reload'); // destroy player
+        this.trigger('reload');
 
         if (this.player) {
-          this.player.destroy();
-        } // remove events and component
-
-
-        if (this.$component) {
-          this._unbindEvents();
-
-          this._destroySlider(this.$seekSlider);
-
-          this._destroySlider(this.$volumeSlider);
-
-          this.$component.remove();
-          this.$component = null;
-        } // rerender
+          this.player.recover();
+        }
 
+        this._setState('stalled', false);
 
-        this.render();
+        this.setInitialStates();
       },
 
       /**
@@ -1002,8 +999,12 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
           source = _.clone(src);
         }
 
-        if (this.is('youtube') && !source.type) {
-          source.type = defaults.type;
+        if (!source.type) {
+          if (this.is('youtube')) {
+            source.type = defaults.type;
+          } else if (this.config.mimeType) {
+            source.type = this.config.mimeType;
+          }
         }
 
         if (!source.type) {
@@ -1093,7 +1094,8 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
               type: this.getType(),
               sources: this.getSources(),
               preview: this.config.preview,
-              debug: this.config.debug
+              debug: this.config.debug,
+              stalledDetectionDelay: this.config.stalledDetectionDelay
             };
             this.player = playerFactory(this.$player, playerConfig).on('resize', function (width, height) {
               if (_this6.$component) {
@@ -1115,8 +1117,6 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
               return _this6._onEnd();
             }).on('error', function () {
               return _this6._onError();
-            }).on('recovererror', function (fromLoading) {
-              return _this6._onRecoverError(fromLoading);
             });
           }
 
@@ -1135,7 +1135,13 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
 
         this._setState('preview', this.config.preview);
 
-        this._setState('loading', true);
+        this._setState('loading', !error);
+
+        if (error) {
+          this._setState('ready', true);
+
+          this.trigger('ready');
+        }
       },
 
       /**
@@ -1478,7 +1484,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
        */
       _onReady: function _onReady() {
         if (this.is('error')) {
-          this._onRecoverError();
+          this._setState('error', false);
         }
 
         var duration = this.player.getDuration();
@@ -1507,11 +1513,6 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
 
         if (this.config.preview && this.$container && this.config.height && this.config.height !== 'auto') {
           this._setMaxHeight();
-        } // seek back to the previous position after recover from stalled
-
-
-        if (this.is('stalled')) {
-          this.play(this.positionBeforeStalled);
         }
       },
 
@@ -1585,29 +1586,6 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
         this.trigger('error');
       },
 
-      /**
-       * Event called when the media throws recoverable error
-       * @param {Boolean} fromLoading - recover from an error while loading the media
-       * @private
-       */
-      _onRecoverError: function _onRecoverError() {
-        var fromLoading = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
-        // recover from playing error
-        if (fromLoading && this.is('playing')) {
-          this.render();
-        }
-
-        this._setState('error', false);
-        /**
-         * Triggers a recoverable media error event
-         * @event mediaplayer#recovererror
-         */
-
-
-        this.trigger('recovererror');
-      },
-
       /**
        * Event called when the media is played
        * @private
@@ -1649,11 +1627,13 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
 
         this._playingState(false, true);
 
-        this._updatePosition(0); // disable GUI when the play limit is reached
+        this._updatePosition(0); // disable when the play limit is reached
 
 
         if (this._playLimitReached()) {
-          this._disableGUI();
+          if (!this.is('disabled')) {
+            this.disable();
+          }
           /**
            * Triggers a play limit reached event
            * @event mediaplayer#limitreached
@@ -1694,20 +1674,9 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
        * @private
        */
       _onStalled: function _onStalled() {
-        var _this9 = this;
-
-        this.stalledTimeUpdateCount = 0;
-        this.stalledTimer = window.setTimeout(function () {
-          var position = _this9.getPosition();
-
-          if (position) {
-            _this9.positionBeforeStalled = position;
-          }
+        this._setState('stalled', true);
 
-          _this9._setState('stalled', true);
-
-          _this9._setState('ready', false);
-        }, this.config.stalledTimeout);
+        this._setState('ready', false);
       },
 
       /**
@@ -1715,15 +1684,6 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
        * @private
        */
       _onTimeUpdate: function _onTimeUpdate() {
-        if (this.stalledTimer) {
-          if (this.stalledTimeUpdateCount === 5) {
-            window.clearTimeout(this.stalledTimer);
-            this.stalledTimer = null;
-          } else {
-            this.stalledTimeUpdateCount++;
-          }
-        }
-
         this._updatePosition(this.player.getPosition());
         /**
          * Triggers a media time update event
@@ -1744,23 +1704,11 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
         this.timerId = requestAnimationFrame(this._replayTimeout.bind(this));
 
         if (elapsedSeconds >= parseInt(this.config.replayTimeout, 10)) {
-          this._disableGUI();
-
           this.disable();
           cancelAnimationFrame(this.timerId);
         }
       },
 
-      /**
-       * Disable the player GUI
-       * @private
-       */
-      _disableGUI: function _disableGUI() {
-        this._setState('ready', false);
-
-        this._setState('canplay', false);
-      },
-
       /**
        * Checks if the play limit has been reached
        * @returns {Boolean}
@@ -1875,15 +1823,14 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
        * @private
        */
       execute: function execute(command) {
-        var ctx = this.player;
-        var method = ctx && ctx[command];
+        if (this.player && 'function' === typeof this.player[command]) {
+          var _this$player;
 
-        if (_.isFunction(method)) {
           for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
             args[_key2 - 1] = arguments[_key2];
           }
 
-          return method.apply(ctx, args);
+          return (_this$player = this.player)[command].apply(_this$player, args);
         }
       }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "1.6.2",
+    "version": "1.6.3",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {