MDL-57682 media_videojs: Cache videojs languages in the localstorage
authorShamim Rezaie <shamim@moodle.com>
Wed, 12 Aug 2020 08:42:23 +0000 (18:42 +1000)
committerShamim Rezaie <shamim@moodle.com>
Fri, 4 Sep 2020 08:55:16 +0000 (18:55 +1000)
media/player/videojs/amd/build/loader.min.js
media/player/videojs/amd/build/loader.min.js.map
media/player/videojs/amd/src/loader.js
media/player/videojs/classes/plugin.php

index f49e436..df21832 100644 (file)
Binary files a/media/player/videojs/amd/build/loader.min.js and b/media/player/videojs/amd/build/loader.min.js differ
index 9383b59..823691b 100644 (file)
Binary files a/media/player/videojs/amd/build/loader.min.js.map and b/media/player/videojs/amd/build/loader.min.js.map differ
index 933b062..a8c6f55 100644 (file)
  * @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];
+    });
+};
index bc11f2a..7ca33e3 100644 (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]);
-        }
-        // Add it as a language for Video.JS.
-        if (!empty($js)) {
-            return "$js\n";
+        } else {
+            // Could not match, use default language of video player (English).
+            $this->language = null;
         }
-
-        // 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
         );