media/player/videojs/amd/src/loader.js

  1. // This file is part of Moodle - http://moodle.org/
  2. //
  3. // Moodle is free software: you can redistribute it and/or modify
  4. // it under the terms of the GNU General Public License as published by
  5. // the Free Software Foundation, either version 3 of the License, or
  6. // (at your option) any later version.
  7. //
  8. // Moodle is distributed in the hope that it will be useful,
  9. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11. // GNU General Public License for more details.
  12. //
  13. // You should have received a copy of the GNU General Public License
  14. // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16. /**
  17.  * Video JS loader.
  18.  *
  19.  * This takes care of applying the filter on content which was dynamically loaded.
  20.  *
  21.  * @module     media_videojs/loader
  22.  * @copyright  2016 Frédéric Massart - FMCorz.net
  23.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  24.  */
  26. import Ajax from 'core/ajax';
  27. import Config from 'core/config';
  28. import {eventTypes} from 'core_filters/events';
  29. import LocalStorage from 'core/localstorage';
  30. import Notification from 'core/notification';
  31. import jQuery from 'jquery';
  33. /** @var {bool} Whether this is the first load of videojs module */
  34. let firstLoad;
  36. /** @var {string} The language that is used in the player */
  37. let language;
  39. /** @var {object} List of languages and translations for the current page */
  40. let langStringCache;
  42. /**
  43.  * Initialisei teh videojs Loader.
  44.  *
  45.  * Adds the listener for the event to then notify video.js.
  46.  *
  47.  * @method
  48.  * @param {string} lang Language to be used in the player
  49.  * @listens event:filterContentUpdated
  50.  */
  51. export const setUp = (lang) => {
  52.     language = lang;
  53.     firstLoad = true;
  55.     // Notify Video.js about the nodes already present on the page.
  56.     notifyVideoJS({
  57.         detail: {
  58.             nodes: document.body,
  59.         }
  60.     });
  62.     // We need to call popover automatically if nodes are added to the page later.
  63.     document.addEventListener(eventTypes.filterContentUpdated, notifyVideoJS);
  64. };
  66. /**
  67.  * Notify video.js of new nodes.
  68.  *
  69.  * @param {Event} e The event.
  70.  */
  71. const notifyVideoJS = e => {
  72.     const nodes = jQuery(e.detail.nodes);
  73.     const selector = '.mediaplugin_videojs';
  74.     const langStrings = getLanguageJson();
  76.     // Find the descendants matching the expected parent of the audio and video
  77.     // tags. Then also addBack the nodes matching the same selector. Finally,
  78.     // we find the audio and video tags contained in those parents. Kind thanks
  79.     // to jQuery for the simplicity.
  80.     nodes.find(selector)
  81.         .addBack(selector)
  82.         .find('audio, video').each((index, element) => {
  83.             const id = jQuery(element).attr('id');
  84.             const config = jQuery(element).data('setup-lazy');
  85.             const modulePromises = [import('media_videojs/video-lazy')];
  87.             if (config.techOrder && config.techOrder.indexOf('youtube') !== -1) {
  88.                 // Add YouTube to the list of modules we require.
  89.                 modulePromises.push(import('media_videojs/Youtube-lazy'));
  90.             }
  91.             if (config.techOrder && config.techOrder.indexOf('OgvJS') !== -1) {
  92.                 config.ogvjs = {
  93.                     worker: true,
  94.                     wasm: true,
  95.                     base: Config.wwwroot + '/media/player/videojs/ogvloader.php/' + Config.jsrev + '/'
  96.                 };
  97.                 // Add Ogv.JS to the list of modules we require.
  98.                 modulePromises.push(import('media_videojs/videojs-ogvjs-lazy'));
  99.             }
  100.             Promise.all([langStrings, ...modulePromises])
  101.             .then(([langJson, videojs]) => {
  102.                 if (firstLoad) {
  103.                     videojs.addLanguage(language, langJson);
  105.                     firstLoad = false;
  106.                 }
  107.                 videojs(id, config);
  108.                 return;
  109.             })
  110.             .catch(Notification.exception);
  111.         });
  112. };
  114. /**
  115.  * Returns the json object of the language strings to be used in the player.
  116.  *
  117.  * @returns {Promise}
  118.  */
  119. const getLanguageJson = () => {
  120.     if (langStringCache) {
  121.         return Promise.resolve(langStringCache);
  122.     }
  124.     const cacheKey = `media_videojs/${language}`;
  126.     const rawCacheContent = LocalStorage.get(cacheKey);
  127.     if (rawCacheContent) {
  128.         const cacheContent = JSON.parse(rawCacheContent);
  130.         langStringCache = cacheContent;
  132.         return Promise.resolve(langStringCache);
  133.     }
  135.     const request = {
  136.         methodname: 'media_videojs_get_language',
  137.         args: {
  138.             lang: language,
  139.         },
  140.     };
  142.     return Ajax.call([request])[0]
  143.         .then(langStringData => {
  144.             LocalStorage.set(cacheKey, langStringData);
  146.             return langStringData;
  147.         })
  148.         .then(result => JSON.parse(result))
  149.         .then(langStrings => {
  150.             langStringCache = langStrings;
  152.             return langStrings;
  153.         });
  154. };