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

package/src/mediaplayer/support.js

@@ -0,0 +1,126 @@
+/**
+ * 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
+ */
+const reAppleMobiles = /ip(hone|od)/i;
+
+/**
+ * A list of MIME types with codec declaration
+ * @type {Object}
+ * @private
+ */
+const 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
+ */
+const findSupport = (media, mimeType) => media.canPlayType(mimeType).replace(/no/, '');
+
+/**
+ * Support detection
+ * @type {Object}
+ */
+export default {
+    /**
+     * 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(media, mimeType) {
+        const 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(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(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(mime) {
+        return this.checkSupport(document.createElement('video'), mime);
+    },
+
+    /**
+     * Checks if the browser allows to control the media playback
+     * @returns {Boolean}
+     */
+    canControl() {
+        return !reAppleMobiles.test(window.navigator.userAgent);
+    }
+};

package/src/mediaplayer/tpl/audio.tpl

@@ -0,0 +1,6 @@
+<audio class="media audio" preload="{{preload}}" controls {{#if cors}}crossorigin{{/if}}>
+    {{__ 'Your browser doesn’t support the audio player.'}}
+{{#if link}}
+    <a href="{{link}}">{{__ 'Please download the track and listen offline.'}}</a>
+{{/if}}
+</audio>

package/src/mediaplayer/tpl/player.tpl

@@ -1,37 +1,16 @@
 <div class="mediaplayer {{type}}">
     <div class="player">
-    {{#if is.video}}
-        {{#if is.youtube}}
-            {{#each sources}}
-        <div class="media video youtube" data-video-src="{{src}}" data-video-id="{{id}}" data-type="youtube"></div>
-            {{/each}}
-        {{else}}
-        <video class="media video" poster="{{poster}}" controls {{#if is.cors}}crossorigin{{/if}}>
-            {{#each sources}}
-            <source src="{{src}}" type="{{type}}">
-            {{/each}}
-
-            {{__ 'Your browser doesn’t support the video player.'}}
-            {{#if link}}
-            <a href="{{link}}">{{__ 'Please download the video and view offline.'}}</a>
-            {{/if}}
-        </video>
-        {{/if}}
-    {{else}}
-        <audio class="media audio" controls {{#if is.cors}}crossorigin{{/if}}>
-            {{#each sources}}
-            <source src="{{src}}" type="{{type}}">
-            {{/each}}
-
-            {{__ 'Your browser doesn’t support the audio player.'}}
-            {{#if link}}
-            <a href="{{link}}">{{__ 'Please download the track and listen offline.'}}</a>
-            {{/if}}
-        </audio>
-    {{/if}}
-        <div class="overlay">
+        <div class="player-overlay">
             <a class="action play" data-control="play"><span class="icon icon-play" title="{{__ 'Play'}}"></span></a>
             <a class="action play" data-control="pause"><span class="icon icon-pause" title="{{__ 'Pause'}}"></span></a>
+            <a class="action reload" data-control="start">
+                <span class="icon icon-play" title="{{__ 'Start'}}"></span>
+                <div class="message">{{__ 'Click to start'}}</div>
+            </a>
+            <a class="action reload" data-control="reload">
+                <div class="icon icon-reload" title="{{__ 'Reload'}}"></div>
+                <div class="message">{{__ 'You are encountering a prolonged connectivity loss.'}} {{__ 'Click to reload.'}}</div>
+            </a>
         </div>
     </div>
     <div class="controls">
@@ -42,8 +21,8 @@
             </div>
             <div class="control seek"><div class="slider"></div></div>
             <div class="control infos timer">
-                <span class="info time" data-control="time-cur" title="{{__ 'Current playback position'}}">00:00</span>
-                <span class="info time" data-control="time-end" title="{{__ 'Total duration'}}">00:00</span>
+                <span class="info time" data-control="time-cur" title="{{__ 'Current playback position'}}">--:--</span>
+                <span class="info time" data-control="time-end" title="{{__ 'Total duration'}}">--:--</span>
             </div>
             <div class="control actions sound">
                 <div class="volume"><div class="slider"></div></div>

package/src/mediaplayer/tpl/source.tpl

@@ -0,0 +1 @@
+<source src="{{src}}" type="{{type}}">

package/src/mediaplayer/tpl/video.tpl

@@ -0,0 +1,6 @@
+<video class="media video" preload="{{preload}}" poster="{{poster}}" controls {{#if cors}}crossorigin{{/if}}>
+    {{__ 'Your browser doesn’t support the video player.'}}
+{{#if link}}
+    <a href="{{link}}">{{__ 'Please download the video and view offline.'}}</a>
+{{/if}}
+</video>

package/src/mediaplayer/tpl/youtube.tpl

@@ -0,0 +1 @@
+<div class="media video youtube" data-video-src="{{src}}" data-video-id="{{id}}" data-type="youtube"></div>

package/src/mediaplayer/utils/reminder.js

@@ -0,0 +1,184 @@
+/**
+ * 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}
+ */
+export default function reminderManagerFactory() {
+    // Keep track of the running state
+    let running = false;
+
+    // Timestamp of the last start
+    let last = 0;
+
+    // A list of reminders to callback
+    const reminders = new Map();
+
+    /**
+     * Cancels a schedule for a particular reminder.
+     * @param {object} state - A sate object containing the timeout handler for the reminder.
+     * @private
+     */
+    const stopReminder = state => {
+        if (state && state.timeout) {
+            clearTimeout(state.timeout);
+            state.timeout = null;
+        }
+    };
+
+    /**
+     * Cancel the schedule for all reminders.
+     * @private
+     */
+    const stopAllReminders = () => reminders.forEach(stopReminder);
+
+    /**
+     * Schedule all reminders.
+     * @private
+     */
+    const startAllReminders = () => {
+        reminders.forEach((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() {
+            running = true;
+            last = performance.now();
+            startAllReminders();
+            return this;
+        },
+
+        /**
+         * Cancels all scheduled reminders.
+         *
+         * @returns {reminderManager}
+         * @function stop
+         * @memberOf reminderManager
+         */
+        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(cb, delay) {
+            if ('function' === typeof cb && delay) {
+                stopReminder(reminders.get(cb));
+                reminders.set(cb, { 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(cb) {
+            if ('undefined' !== typeof cb) {
+                stopReminder(reminders.get(cb));
+                reminders.delete(cb);
+            } else {
+                stopAllReminders();
+                reminders.clear();
+            }
+            return this;
+        }
+    };
+}

package/src/mediaplayer/utils/timeObserver.js

@@ -0,0 +1,143 @@
+/**
+ * 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 ;
+ */
+
+import eventifier from 'core/eventifier';
+
+/**
+ * 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}
+ */
+export default function timeObserverFactory(interval = 1) {
+    // Current time position
+    let position = 0;
+
+    // Total duration expected
+    let duration = 0;
+
+    // Last position forced
+    let 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(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(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(seekPosition) {
+            position = seek = seekPosition;
+            return this;
+        }
+    });
+}

package/src/mediaplayer/youtubeManager.js

@@ -0,0 +1,161 @@
+/**
+ * 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 ;
+ */
+
+import $ from 'jquery';
+
+/**
+ * CDN for the YouTube API
+ * @type {String}
+ */
+const youtubeApi = 'https://www.youtube.com/iframe_api';
+
+/**
+ * A Regex to extract ID from Youtube URLs
+ * @type {RegExp}
+ */
+const reYoutube = /([?&\/]v[=\/])([\w-]+)([&\/]?)/;
+
+/**
+ * Installs a Youtube player. The Youtube API must be ready
+ * @param {String|jQuery|HTMLElement} elem
+ * @param {Object} player
+ * @param {Object} [options]
+ * @param {Boolean} [options.controls]
+ */
+function addYoutubePlayer(elem, player, options = {}) {
+    const $elem = $(elem);
+
+    new window.YT.Player($elem.get(0), {
+        height: '360',
+        width: '640',
+        videoId: $elem.data('videoId'),
+        playerVars: {
+            //hd: true,
+            autoplay: 0,
+            controls: options && options.controls ? 1 : 0,
+            rel: 0,
+            showinfo: 0,
+            wmode: 'transparent',
+            modestbranding: 1,
+            disablekb: 1,
+            playsinline: 1,
+            enablejsapi: 1,
+            origin: location.hostname
+        },
+        events: {
+            onReady: ev => player.onReady(ev),
+            onStateChange: ev => player.onStateChange(ev)
+        }
+    });
+}
+
+/**
+ * A local manager for Youtube players.
+ * Relies on https://developers.google.com/youtube/iframe_api_reference
+ * @type {Object}
+ */
+export default function youtubeManagerFactory() {
+    // The Youtube API injection state
+    let injected = false;
+
+    // The Youtube API ready state
+    let ready = false;
+
+    // A list of pending players
+    let pending = [];
+
+    /**
+     * Checks if the Youtube API is ready to use
+     * @returns {Boolean}
+     */
+    function isApiReady() {
+        const apiReady = typeof window.YT !== 'undefined' && typeof window.YT.Player !== 'undefined';
+        if (apiReady && !ready) {
+            ready = true;
+            pending.forEach(args => {
+                if (args) {
+                    addYoutubePlayer(...args);
+                }
+            });
+            pending = [];
+        }
+        return apiReady;
+    }
+
+    /**
+     * Injects the Youtube API into the page
+     */
+    function injectApi() {
+        if (!isApiReady()) {
+            window.require([youtubeApi], () => {
+                const check = () => {
+                    if (!isApiReady()) {
+                        setTimeout(check, 100);
+                    }
+                };
+                check();
+            });
+        }
+
+        injected = true;
+    }
+
+    return {
+        /**
+         * Adds a Youtube player
+         * @param {String|jQuery|HTMLElement} elem
+         * @param {Object} player
+         * @param {Object} [options]
+         * @param {Boolean} [options.controls]
+         */
+        add(elem, player, options) {
+            if (ready) {
+                addYoutubePlayer(elem, player, options);
+            } else {
+                pending.push([elem, player, options]);
+
+                if (!injected) {
+                    injectApi();
+                }
+            }
+        },
+
+        /**
+         * Removes a pending Youtube player
+         * @param {String|jQuery|HTMLElement} elem
+         * @param {Object} player
+         */
+        remove(elem, player) {
+            pending.forEach((args, idx) => {
+                if (args && elem === args[0] && player === args[1]) {
+                    pending[idx] = null;
+                }
+            });
+        },
+
+        /**
+         * Extracts the ID of a Youtube video from an URL
+         * @param {String} url
+         * @returns {String}
+         */
+        extractYoutubeId(url) {
+            const res = reYoutube.exec(url);
+            return (res && res[2]) || url;
+        }
+    };
+}