MDL-57682 media_videojs: Cache videojs languages in the localstorage

This commit is contained in:
Shamim Rezaie 2020-08-12 18:42:23 +10:00
parent 375ca114e2
commit f10ba30bbd
4 changed files with 64 additions and 34 deletions

View File

@ -1,2 +1,2 @@
define ("media_videojs/loader",["exports","core/event","jquery"],function(a,b,c){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.setUp=void 0;b=d(b);c=d(c);var l="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:{};function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){return k(a)||j(a,b)||g(a,b)||f()}function f(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(a,b){if(!a)return;if("string"==typeof a)return h(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);if("Object"===c&&a.constructor)c=a.constructor.name;if("Map"===c||"Set"===c)return Array.from(c);if("Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c))return h(a,b)}function h(a,b){if(null==b||b>a.length)b=a.length;for(var c=0,d=Array(b);c<b;c++){d[c]=a[c]}return d}function j(a,b){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(a)))return;var c=[],d=!0,e=!1,f=void 0;try{for(var g=a[Symbol.iterator](),h;!(d=(h=g.next()).done);d=!0){c.push(h.value);if(b&&c.length===b)break}}catch(a){e=!0;f=a}finally{try{if(!d&&null!=g["return"])g["return"]()}finally{if(e)throw f}}return c}function k(a){if(Array.isArray(a))return a}var m,n=function(a){m=a;o(null,(0,c.default)("body"));b.default.getLegacyEvents().done(function(a){(0,c.default)(document).on(a.FILTER_CONTENT_UPDATED,o)})};a.setUp=n;var o=function(a,b){b.find(".mediaplugin_videojs").addBack(".mediaplugin_videojs").find("audio, video").each(function(a,b){var d=(0,c.default)(b).attr("id"),f=(0,c.default)(b).data("setup-lazy"),g=["function"==typeof l.define&&l.define.amd?new Promise(function(a,b){l.require(["media_videojs/video-lazy"],a,b)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&l.require&&"component"===l.require.loader?Promise.resolve(require(("media_videojs/video-lazy"))):Promise.resolve(l["media_videojs/video-lazy"])];if(f.techOrder&&-1!==f.techOrder.indexOf("youtube")){g.push("function"==typeof l.define&&l.define.amd?new Promise(function(a,b){l.require(["media_videojs/Youtube-lazy"],a,b)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&l.require&&"component"===l.require.loader?Promise.resolve(require(("media_videojs/Youtube-lazy"))):Promise.resolve(l["media_videojs/Youtube-lazy"]))}if(f.techOrder&&-1!==f.techOrder.indexOf("flash")){g.push("function"==typeof l.define&&l.define.amd?new Promise(function(a,b){l.require(["media_videojs/videojs-flash-lazy"],a,b)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&l.require&&"component"===l.require.loader?Promise.resolve(require(("media_videojs/videojs-flash-lazy"))):Promise.resolve(l["media_videojs/videojs-flash-lazy"]))}Promise.all(g).then(function(a){var b=e(a,1),c=b[0];if(m){m(c);m=null}c(d,f)}).catch(Notification.exception)})}});
define ("media_videojs/loader",["exports","core/config","core/event","jquery","core/ajax","core/localstorage","core/notification"],function(a,b,c,d,e,f,g){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.setUp=void 0;b=h(b);c=h(c);d=h(d);e=h(e);f=h(f);g=h(g);var o="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:{};function h(a){return a&&a.__esModule?a:{default:a}}function i(a,b){return n(a)||m(a,b)||k(a,b)||j()}function j(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function k(a,b){if(!a)return;if("string"==typeof a)return l(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);if("Object"===c&&a.constructor)c=a.constructor.name;if("Map"===c||"Set"===c)return Array.from(c);if("Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c))return l(a,b)}function l(a,b){if(null==b||b>a.length)b=a.length;for(var c=0,d=Array(b);c<b;c++){d[c]=a[c]}return d}function m(a,b){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(a)))return;var c=[],d=!0,e=!1,f=void 0;try{for(var g=a[Symbol.iterator](),h;!(d=(h=g.next()).done);d=!0){c.push(h.value);if(b&&c.length===b)break}}catch(a){e=!0;f=a}finally{try{if(!d&&null!=g["return"])g["return"]()}finally{if(e)throw f}}return c}function n(a){if(Array.isArray(a))return a}var p,q,r=function(a){q=a;p=!0;s(null,(0,d.default)("body"));c.default.getLegacyEvents().done(function(a){(0,d.default)(document).on(a.FILTER_CONTENT_UPDATED,s)})};a.setUp=r;var s=function(a,c){var e=t();c.find(".mediaplugin_videojs").addBack(".mediaplugin_videojs").find("audio, video").each(function(a,c){var f=(0,d.default)(c).attr("id"),h=(0,d.default)(c).data("setup-lazy"),j=["function"==typeof o.define&&o.define.amd?new Promise(function(a,b){o.require(["media_videojs/video-lazy"],a,b)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&o.require&&"component"===o.require.loader?Promise.resolve(require(("media_videojs/video-lazy"))):Promise.resolve(o["media_videojs/video-lazy"])];if(h.techOrder&&-1!==h.techOrder.indexOf("youtube")){j.push("function"==typeof o.define&&o.define.amd?new Promise(function(a,b){o.require(["media_videojs/Youtube-lazy"],a,b)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&o.require&&"component"===o.require.loader?Promise.resolve(require(("media_videojs/Youtube-lazy"))):Promise.resolve(o["media_videojs/Youtube-lazy"]))}if(h.techOrder&&-1!==h.techOrder.indexOf("flash")){j.push("function"==typeof o.define&&o.define.amd?new Promise(function(a,b){o.require(["media_videojs/videojs-flash-lazy"],a,b)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&o.require&&"component"===o.require.loader?Promise.resolve(require(("media_videojs/videojs-flash-lazy"))):Promise.resolve(o["media_videojs/videojs-flash-lazy"]))}Promise.all([e].concat(j)).then(function(a){var c=i(a,2),d=c[0],e=c[1];if(p){e.options.flash.swf="".concat(b.default.wwwroot,"/media/player/videojs/videojs/video-js.swf");e.addLanguage(q,d);p=!1}e(f,h)}).catch(g.default.exception)})},t=function(){var a=JSON.parse(f.default.get("media_videojs")||"{}");if(q in a){return Promise.resolve(a[q])}var b={methodname:"media_videojs_get_language",args:{lang:q}};return e.default.call([b])[0].then(function(b){a[q]=JSON.parse(b);f.default.set("media_videojs",JSON.stringify(a));return a[q]})}});
//# sourceMappingURL=loader.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -24,22 +24,32 @@
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
import Config from 'core/config';
import Event from 'core/event';
import jQuery from 'jquery';
import Ajax from 'core/ajax';
import LocalStorage from 'core/localstorage';
import Notification from 'core/notification';
/**
* Stores the method we need to execute on the first load of videojs module.
* Whether this is the first load of videojs module.
*/
let onload;
let firstLoad;
/**
* The language that is used in the player
*/
let language;
/**
* Set-up.
*
* Adds the listener for the event to then notify video.js.
* @param {Function} executeonload function to execute when media_videojs/video is loaded
* @param {string} lang Language to be used in the player
*/
export const setUp = (executeonload) => {
onload = executeonload;
export const setUp = (lang) => {
language = lang;
firstLoad = true;
// Notify Video.js about the nodes already present on the page.
notifyVideoJS(null, jQuery('body'));
// We need to call popover automatically if nodes are added to the page later.
@ -56,6 +66,7 @@ export const setUp = (executeonload) => {
*/
const notifyVideoJS = (e, nodes) => {
const selector = '.mediaplugin_videojs';
const langStrings = getLanguageJson();
// Find the descendants matching the expected parent of the audio and video
// tags. Then also addBack the nodes matching the same selector. Finally,
@ -76,13 +87,42 @@ const notifyVideoJS = (e, nodes) => {
// Add Flash to the list of modules we require.
modulePromises.push(import('media_videojs/videojs-flash-lazy'));
}
Promise.all(modulePromises).then(([videojs]) => {
if (onload) {
onload(videojs);
onload = null;
Promise.all([langStrings, ...modulePromises])
.then(([langJson, videojs]) => {
if (firstLoad) {
videojs.options.flash.swf = `${Config.wwwroot}/media/player/videojs/videojs/video-js.swf`;
videojs.addLanguage(language, langJson);
firstLoad = false;
}
videojs(id, config);
return;
}).catch(Notification.exception);
})
.catch(Notification.exception);
});
};
/**
* Returns the json object of the language strings to be used in the player.
*
* @returns {Promise}
*/
const getLanguageJson = () => {
const cached = JSON.parse(LocalStorage.get('media_videojs') || '{}');
if (language in cached) {
return Promise.resolve(cached[language]);
}
const request = {
methodname: 'media_videojs_get_language',
args: {
lang: language
},
};
return Ajax.call([request])[0].then(result => {
cached[language] = JSON.parse(result);
LocalStorage.set('media_videojs', JSON.stringify(cached));
return cached[language];
});
};

View File

@ -340,33 +340,27 @@ class media_videojs_plugin extends core_media_player_native {
$langfiles = get_directory_list($basedir);
$candidates = [];
foreach ($langfiles as $langfile) {
if (strtolower(pathinfo($langfile, PATHINFO_EXTENSION)) !== 'js') {
if (strtolower(pathinfo($langfile, PATHINFO_EXTENSION)) !== 'json') {
continue;
}
$lang = basename($langfile, '.js');
if (strtolower($langfile) === $this->language . '.js') {
// Found an exact match for the language.
$js = file_get_contents($basedir . $langfile);
break;
$lang = basename($langfile, '.json');
if (strtolower($langfile) === $this->language . '.json') {
// Found an exact match for the language. It is stored in $this->language.
return;
}
if (substr($this->language, 0, 2) === strtolower(substr($langfile, 0, 2))) {
// Not an exact match but similar, for example "pt_br" is similar to "pt".
$candidates[$lang] = $langfile;
}
}
if (empty($js) && $candidates) {
if ($candidates) {
// Exact match was not found, take the first candidate.
$this->language = key($candidates);
$js = file_get_contents($basedir . $candidates[$this->language]);
} else {
// Could not match, use default language of video player (English).
$this->language = null;
}
// Add it as a language for Video.JS.
if (!empty($js)) {
return "$js\n";
}
// Could not match, use default language of video player (English).
$this->language = null;
return "";
}
/**
@ -434,14 +428,10 @@ class media_videojs_plugin extends core_media_player_native {
// Load dynamic loader. It will scan page for videojs media and load necessary modules.
// Loader will be loaded on absolutely every page, however the videojs will only be loaded
// when video is present on the page or added later to it in AJAX.
$path = new moodle_url('/media/player/videojs/videojs/video-js.swf');
$contents = 'videojs.options.flash.swf = "' . $path . '";' . "\n";
$contents .= $this->find_language();
$this->find_language();
$page->requires->js_amd_inline(<<<EOT
require(["media_videojs/loader"], function(loader) {
loader.setUp(function(videojs) {
$contents
});
loader.setUp('$this->language');
});
EOT
);