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

package/src/mediaplayer/players/youtube.js

@@ -0,0 +1,323 @@
+/**
+ * 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';
+import eventifier from 'core/eventifier';
+import support from 'ui/mediaplayer/support';
+import youtubeManagerFactory from 'ui/mediaplayer/youtubeManager';
+import youtubeTpl from 'ui/mediaplayer/tpl/youtube';
+
+/**
+ * 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}
+ */
+const youtubePolling = 100;
+
+/**
+ * List of YouTube events that can be listened to for debugging
+ * @type {String[]}
+ */
+const youtubeEvents = ['onApiChange', 'onError', 'onPlaybackQualityChange', 'onPlaybackRateChange', 'onStateChange'];
+
+/**
+ * List of player events that can be listened to for debugging
+ * @type {String[]}
+ */
+const 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}
+ */
+const 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
+ */
+export default function youtubePlayerFactory($container, config = {}) {
+    const sources = config.sources || [];
+    const source = sources[0] || {};
+    const otherSources = sources.slice(1);
+
+    config.polling = config.polling || youtubePolling;
+
+    let $media;
+    let media;
+    let interval;
+    let destroyed;
+    let initWidth;
+    let initHeight;
+    let callbacks = [];
+
+    // eslint-disable-next-line
+    const debug = (action, ...args) => config.debug && window.console.log(`[youtube:${action}]`, ...args);
+
+    const queueMedia = (url, register) => {
+        const id = youtubeManager.extractYoutubeId(url);
+        if (id) {
+            if (media) {
+                register(id);
+            } else {
+                callbacks.push(() => register(id));
+            }
+            return true;
+        }
+        return false;
+    };
+
+    const player = {
+        init() {
+            $media = $(
+                youtubeTpl({
+                    src: source.src,
+                    id: youtubeManager.extractYoutubeId(source.src)
+                })
+            );
+            $container.append($media);
+            otherSources.forEach(source => this.addMedia(source.src));
+
+            media = null;
+            destroyed = false;
+
+            youtubeManager.add($media, this, {
+                controls: !support.canControl()
+            });
+
+            return true;
+        },
+
+        onReady(event) {
+            media = event.target;
+            $media = $(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(eventName =>
+                        media.addEventListener(eventName, e => {
+                            debug('media event', eventName, $media && $media.data('videoSrc'), e);
+                        })
+                    );
+                    playerEvents.forEach(eventName => {
+                        this.on(eventName, (...args) => {
+                            debug('player event', eventName, $media && $media.data('videoSrc'), ...args);
+                        });
+                    });
+                }
+
+                if (initWidth && initHeight) {
+                    this.setSize(initWidth, initHeight);
+                }
+
+                callbacks.forEach(cb => cb());
+                callbacks = [];
+
+                this.trigger('ready');
+            } else {
+                this.destroy();
+            }
+        },
+
+        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() {
+            if (interval) {
+                window.clearInterval(interval);
+                interval = null;
+            }
+        },
+
+        startPolling() {
+            interval = window.setInterval(() => this.trigger('timeupdate'), config.polling);
+        },
+
+        destroy() {
+            debug('api call', 'destroy');
+
+            destroyed = true;
+
+            this.stopPolling();
+            this.removeAllListeners();
+
+            if (media) {
+                youtubeEvents.forEach(ev => media.removeEventListener(ev));
+                media.destroy();
+                media = void 0;
+            } else {
+                youtubeManager.remove($media, this);
+            }
+
+            if ($media) {
+                $media.remove();
+                $media = void 0;
+            }
+        },
+
+        getMedia() {
+            debug('api call', 'getMedia', media);
+
+            return media;
+        },
+
+        getPosition() {
+            let position = 0;
+            if (media) {
+                position = media.getCurrentTime();
+            }
+
+            debug('api call', 'getPosition', position);
+            return position;
+        },
+
+        getDuration() {
+            let duration = 0;
+            if (media) {
+                duration = media.getDuration();
+            }
+
+            debug('api call', 'getDuration', duration);
+            return duration;
+        },
+
+        getVolume() {
+            let volume = 0;
+            if (media) {
+                volume = media.getVolume();
+            }
+
+            debug('api call', 'getVolume', volume);
+            return volume;
+        },
+
+        setVolume(volume) {
+            debug('api call', 'setVolume', volume);
+
+            if (media) {
+                media.setVolume(parseFloat(volume));
+            }
+        },
+
+        setSize(width, height) {
+            debug('api call', 'setSize', width, height);
+
+            this.trigger('resize', width, height);
+
+            if (!media) {
+                initWidth = width;
+                initHeight = height;
+            }
+        },
+
+        seek(time) {
+            debug('api call', 'seek', time);
+
+            if (media) {
+                media.seekTo(parseFloat(time), true);
+            }
+        },
+
+        play() {
+            debug('api call', 'play');
+
+            if (media) {
+                media.playVideo();
+            }
+        },
+
+        pause() {
+            debug('api call', 'pause');
+
+            if (media) {
+                media.pauseVideo();
+            }
+        },
+
+        stop() {
+            debug('api call', 'stop');
+
+            if (media) {
+                media.stopVideo();
+                this.trigger('end');
+            }
+        },
+
+        mute(state) {
+            debug('api call', 'mute', state);
+
+            if (media) {
+                media[state ? 'mute' : 'unMute']();
+            }
+        },
+
+        isMuted() {
+            let mute = false;
+            if (media) {
+                mute = media.isMuted();
+            }
+
+            debug('api call', 'isMuted', mute);
+            return mute;
+        },
+
+        addMedia(url) {
+            debug('api call', 'addMedia', url);
+
+            return queueMedia(url, id => media && media.cueVideoById(id));
+        },
+
+        setMedia(url) {
+            debug('api call', 'setMedia', url);
+
+            callbacks = [];
+            return queueMedia(url, id => media && media.loadVideoById(id));
+        }
+    };
+
+    return eventifier(player);
+}

package/src/mediaplayer/players.js

@@ -0,0 +1,29 @@
+/**
+ * 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 html5PlayerFactory from 'ui/mediaplayer/players/html5';
+import youtubePlayerFactory from 'ui/mediaplayer/players/youtube';
+
+/**
+ * Defines the list of available players
+ */
+export default {
+    audio: html5PlayerFactory,
+    video: html5PlayerFactory,
+    youtube: youtubePlayerFactory
+};

package/src/mediaplayer/scss/player.scss

@@ -12,13 +12,24 @@ $playerSliderBackground: $uiGeneralContentBg;
 $playerSliderColor: $darkBar;
 $playerSliderHandle: whiten($playerSliderColor, .4);
 $playerSliderHightlight: whiten($playerSliderColor, .2);
+$controlsHeight: 36px;
 
 .mediaplayer {
     position: relative;
     @include simple-border($playerBorder);
     @include border-radius(2);
     background: $playerBackground;
+    max-width: 100%;
+    min-height: $controlsHeight;
+    min-width: 200px;
 
+    &.youtube {
+        .player {
+            width: 100%;
+            height: 0px;
+            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos
+        }
+    }
     .icon-sound:before {
         @include icon-audio();
     }
@@ -32,12 +43,26 @@ $playerSliderHightlight: whiten($playerSliderColor, .2);
 
     .player {
         position: relative;
+        height: calc(100% - #{$controlsHeight});
+        width: 100%;
 
         iframe {
             pointer-events: none;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%
+        }
+
+        .media:not(.youtube) {
+            display: block;
+            width: 100%;
+            height: auto;
+            max-height: 100%;
         }
 
-        .overlay {
+        .player-overlay {
             position: absolute;
             z-index: 1;
             top: 0;
@@ -53,10 +78,8 @@ $playerSliderHightlight: whiten($playerSliderColor, .2);
             z-index: 2;
             top: 50%;
             left: 50%;
-            width: 64px;
-            height: 64px;
+            transform: translate(-50%);
             margin-top: -32px;
-            margin-left: -32px;
             text-align: center;
             text-decoration: none;
             display: none;
@@ -73,6 +96,30 @@ $playerSliderHightlight: whiten($playerSliderColor, .2);
                     opacity: 0.6;
                 }
             }
+
+            &.reload {
+                width: 100%;
+                font-size: 50px;
+                line-height: 30px;
+
+                &:hover {
+                    .icon {
+                        opacity: 1;
+                    }
+                }
+
+                .icon {
+                    opacity: 0.6;
+                    background: none;
+                }
+                .message {
+                    font-size: 20px;
+                }
+
+                .icon, .message {
+                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
+                }
+            }
         }
     }
 
@@ -84,6 +131,7 @@ $playerSliderHightlight: whiten($playerSliderColor, .2);
         table-layout: fixed;
         width: 100%;
         border-top: 1px solid $playerBorder;
+        height: $controlsHeight;
 
         .bar {
             display: table-row;
@@ -295,6 +343,43 @@ $playerSliderHightlight: whiten($playerSliderColor, .2);
                 bottom: 0;
             }
         }
+
+        &.stalled {
+            .player {
+                .player-overlay {
+                    [data-control="reload"] {
+                        display: flex;
+                        align-items: center;
+                        background-color: #000;
+                        margin: 0;
+                        flex-wrap: wrap;
+                        padding: 5px 5px 5px 50px;
+                        text-align: left;
+                        line-height: 2.3rem;
+                        &.reload {
+                            width: calc(100% + 2px);
+                            font-size: 20px;
+                            line-height: 20px;
+                            min-height: 36px;
+
+                            .icon {
+                                text-shadow: none;
+                                position: absolute;
+                                left: 0;
+                                font-size: 2rem;
+                                font-weight: bold;
+                            }
+
+                            .message {
+                                text-shadow: none;
+                                font-size: 1.3rem;
+                                margin-right: 5px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
 
     &.ready {
@@ -303,17 +388,19 @@ $playerSliderHightlight: whiten($playerSliderColor, .2);
         }
 
         &.paused.canplay {
-            .overlay {
+            .player-overlay {
                 cursor: pointer;
             }
 
-            .player:hover {
-                [data-control="play"] {
-                    display: inline-block;
+            &:not(.audio) {
+                .player:hover {
+                    [data-control="play"] {
+                        display: inline-block;
+                    }
                 }
             }
 
-            &.youtube.ended {
+            &.youtube.ended, &:not(.preview) {
                 .player:hover {
                     [data-control="play"] {
                         display: none;
@@ -323,13 +410,15 @@ $playerSliderHightlight: whiten($playerSliderColor, .2);
         }
 
         &.playing.canpause {
-            .overlay {
+            .player-overlay {
                 cursor: pointer;
             }
 
-            .player:hover {
-                [data-control="pause"] {
-                    display: inline-block;
+            &:not(.audio) {
+                .player:hover {
+                    [data-control="pause"] {
+                        display: inline-block;
+                    }
                 }
             }
         }
@@ -371,7 +460,7 @@ $playerSliderHightlight: whiten($playerSliderColor, .2);
                 pointer-events: inherit;
             }
         }
-        .overlay {
+        .player-overlay {
             display: none !important;
         }
         .controls {
@@ -379,7 +468,7 @@ $playerSliderHightlight: whiten($playerSliderColor, .2);
         }
     }
 
-    &.error {
+    &.error:not(.stalled) {
         .media, .controls {
             display: none;
         }
@@ -398,7 +487,7 @@ $playerSliderHightlight: whiten($playerSliderColor, .2);
         }
     }
 
-    &.loading::before {
+    &.loading:not(.stalled)::before {
         @keyframes spinner {
             to { transform: rotate(360deg); }
         }
@@ -417,4 +506,24 @@ $playerSliderHightlight: whiten($playerSliderColor, .2);
         border-top-color: #07d;
         animation: spinner .6s linear infinite;
     }
+
+    &.stalled {
+        .video {
+            filter: blur(4px);
+            opacity: 0.4;
+        }
+        .player-overlay {
+            [data-control="reload"] {
+                display: inline-block;
+            }
+        }
+    }
+
+    &.video:not(.preview):not(.error) {
+        .player-overlay {
+            [data-control="start"] {
+                display: inline-block;
+            }
+        }
+    }
 }