From 11138ff5ca3c16f847e68864311d36b0b3ca3e63 Mon Sep 17 00:00:00 2001
From: Rishabh Gautam <rishabhgautam727@gmail.com>
Date: Mon, 15 Jan 2024 22:33:28 +0530
Subject: [PATCH] Libzim support for reading ZIM file content (#1160)

---
 i18n/en.jsonp.js         |  4 +++
 i18n/es.jsonp.js         |  4 +++
 i18n/fr.jsonp.js         |  4 +++
 www/index.html           | 17 +++++++++++
 www/js/app.js            | 62 ++++++++++++++++++++++++++++++++++++++--
 www/js/init.js           |  6 ++++
 www/js/lib/zimArchive.js |  9 ++++--
 7 files changed, 100 insertions(+), 6 deletions(-)

diff --git a/i18n/en.jsonp.js b/i18n/en.jsonp.js
index 8307c2d51..a354443d9 100644
--- a/i18n/en.jsonp.js
+++ b/i18n/en.jsonp.js
@@ -93,6 +93,10 @@ document.localeJson = {
       "configure-expert-disabledragdrop-tip": "This option disables drag-and-drop of ZIM files onto the app. It is not recommended to disable this feature.",
       "configure-expert-bypassappcache": "<b>Bypass AppCache</b> (<i>disables offline use of this app!</i>)",
       "configure-expert-bypassappcache-tip": "WARNING: Leaving this checked will prevent offline usage of the PWA. Setting will clear all existing Cache API caches, but assetsCache will be used unless also disabled above. For testing new code with the PWA.",
+      "configure-expert-useLibzim-tip": "Uses the selected version of libzim to access the ZIM contents (ServiceWorker mode only).",
+      "configure-expert-useLibzim": "Use libzim for loading ZIM",
+      "configure-expert-useLibzim-warning": "uses unstable libzim API for reading ZIM",
+      "configure-expert-libzimMode": "Select libzim version to use:",
       "configure-expert-resetapp-description": "Reset the app to default settings and erase all caches:",
       "configure-expert-resetapp": "Reset App",
       "configure-expert-resetapp-tip": "This will return the app to its original settings on launch, and will empty all caches and settings and deregister Service Workers. The app will then reload.",
diff --git a/i18n/es.jsonp.js b/i18n/es.jsonp.js
index 91dcf0cca..a54f18317 100644
--- a/i18n/es.jsonp.js
+++ b/i18n/es.jsonp.js
@@ -93,6 +93,10 @@ document.localeJson = {
       "configure-expert-disabledragdrop-tip": "Esta opción desactiva la función de arrastrar y soltar los archivos ZIM para cargarlos en la aplicación. No se recomienda desactivar esta función.",
       "configure-expert-bypassappcache": "<b>Desactivar AppCache</b> (<i>¡desactiva el uso sin conexión de esta aplicación!</i>)",
       "configure-expert-bypassappcache-tip": "ADVERTENCIA: Dejar esto marcado deshabilitará el uso sin conexión de la PWA. El ajuste borrará todas las cachés de la API de Caché, pero se utilizará la caché de activos a menos que también se desactive arriba. Facilita el desarrollo de nuevo código en la PWA.",
+      "configure-expert-useLibzim-tip": "Utiliza la versión seleccionada de libzim para acceder a los contenidos de ZIM (sólo en modo ServiceWorker).",
+      "configure-expert-useLibzim": "Utilizar libzim para cargar ZIM",
+      "configure-expert-useLibzim-warning": "utiliza la inestable API libzim para leer ZIM",
+      "configure-expert-libzimMode": "Seleccionar versión libzim para usar:",
       "configure-expert-resetapp-description": "Restablecer la aplicación a la configuración predeterminada y borrar todas las cachés:",
       "configure-expert-resetapp": "Restablecer aplicación",
       "configure-expert-resetapp-tip": "Esto devolverá la aplicación a su configuración original al iniciarla, y vaciará todas las cachés y configuraciones y cancelará el registro de los Service Workers. La aplicación se volverá a cargar.",
diff --git a/i18n/fr.jsonp.js b/i18n/fr.jsonp.js
index 58bc0dbed..32b6f5e63 100644
--- a/i18n/fr.jsonp.js
+++ b/i18n/fr.jsonp.js
@@ -93,6 +93,10 @@ document.localeJson = {
       "configure-expert-disabledragdrop-tip": "Cette option désactive la fonctionnalité de glisser-déposer des fichiers ZIM pour les charger dans l'application. Il n'est pas recommandé de désactiver cette fonctionnalité.",
       "configure-expert-bypassappcache": "<strong>Désactiver AppCache</strong> (<i>désactive l'utilisation hors ligne de cette application !</i>)",
       "configure-expert-bypassappcache-tip": "AVERTISSEMENT&nbsp;: Désactiver cette option désactivera l'utilisation hors ligne de la PWA. Le paramètre effacera tous les caches de l'API de Cache, mais le cache des actifs sera utilisé à moins qu'il ne soit également désactivé ci-dessus. Il facilite le développement de nouveaux codes dans la PWA.",
+      "configure-expert-useLibzim-tip": "Utilise la version sélectionnée de libzim pour accéder au contenu du ZIM (mode ServiceWorker uniquement).",
+      "configure-expert-useLibzim": "Utiliser libzim pour charger ZIM",
+      "configure-expert-useLibzim-warning": "utilise l'API libzim instable pour lire ZIM",
+      "configure-expert-libzimMode": "Sélectionnez la version de libzim à utiliser&nbsp;:",
       "configure-expert-resetapp-description": "Réinitialiser l'application à configuration d'origine et vider tous les caches&nbsp;:",
       "configure-expert-resetapp": "Réinitialiser l'application",
       "configure-expert-resetapp-tip": "Cela réinitialisera l'application à sa configuration d'origine au démarrage, videra tous les caches et les paramètres et annulera l'enregistrement des Service Workers. L'application sera rechargée.",
diff --git a/www/index.html b/www/index.html
index 51696221c..56904c51a 100644
--- a/www/index.html
+++ b/www/index.html
@@ -694,6 +694,23 @@ <h3 data-i18n="configure-expert-settings-title">Expert settings</h3>
                                         <span data-i18n="configure-expert-bypassappcache"><b>Bypass AppCache</b> (<i>disables offline use of PWA!</i>)</span>
                                     </label>
                                 </div>
+                                <div class="checkbox" id="">
+                                    <label data-i18n-tip="configure-expert-useLibzim-tip" title="Uses the selected version of libzim to access the ZIM contents (ServiceWorker mode only).">
+                                        <input type="checkbox" name="useLibzim" id="useLibzim">
+                                        <span><strong data-i18n="configure-expert-useLibzim">Use libzim for loading zim</strong> (<i data-i18n="configure-expert-useLibzim-warning">uses unstable libzim API for reading ZIM</i>)</span>
+                                    </label>
+                                </div>
+                                <div class="checkbox" id="libzimMode" style="display: none;">
+                                    <label>
+                                        <span><strong data-i18n="configure-expert-libzimMode">Select libzim version to use:</strong></span>
+                                        <select id="libzimModeSelect">
+                                            <option value="wasm">WASM</option>
+                                            <option value="asm">ASM</option>
+                                            <option value="wasm.dev">WASM Debug</option>
+                                            <option value="asm.dev">ASM Debug</option>
+                                        </select>
+                                    </label>
+                                </div>
                                 <p data-i18n="configure-expert-resetapp-description" class="pt-2">Reset the app to default settings and erase all caches:</p>
                                 <div class="button">
                                     <label data-i18n-tip="configure-expert-resetapp-tip" title="This will return the app to its original settings on launch, and will empty all caches and settings and deregister Service Workers. The app will then reload.">
diff --git a/www/js/app.js b/www/js/app.js
index 8e81b0a09..30f20d62c 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -57,7 +57,7 @@ const ASSETS_CACHE = 'kiwixjs-assetsCache';
 var appstate = {};
 
 /**
- * @type ZIMArchive
+ * @type ZIMArchive | null
  */
 var selectedArchive = null;
 
@@ -474,6 +474,18 @@ document.getElementById('bypassAppCacheCheck').addEventListener('change', functi
     // This will also send any new values to Service Worker
     refreshCacheStatus();
 });
+
+if (params.useLibzim) document.getElementById('libzimMode').style.display = '';
+document.getElementById('libzimModeSelect').addEventListener('change', function (e) {
+    settingsStore.setItem('libzimMode', e.target.value);
+    window.location.reload();
+});
+
+document.getElementById('useLibzim').addEventListener('click', function (e) {
+    settingsStore.setItem('useLibzim', !params.useLibzim);
+    window.location.reload();
+});
+
 document.getElementById('disableDragAndDropCheck').addEventListener('change', function () {
     params.disableDragAndDrop = !!this.checked;
     settingsStore.setItem('disableDragAndDrop', params.disableDragAndDrop, Infinity);
@@ -841,7 +853,8 @@ function initServiceWorkerMessaging () {
                     // Until we find a way to tell where it is coming from, we allow the request through on all controlled clients and try to load the content
                     console.warn('>>> Allowing passthrough of SW request to process Zimit video <<<');
                 }
-                handleMessageChannelMessage(event);
+                if (params.useLibzim) handleMessageChannelByLibzim(event);
+                else handleMessageChannelMessage(event);
             }
         } else if (event.data.msg_type) {
             // Messages received from the ReplayWorker
@@ -886,6 +899,49 @@ function initServiceWorkerMessaging () {
     }
 }
 
+/**
+ * Function that handles a message of the messageChannel.
+ * This function will deal with the messages if useLibzim is set to true
+ *
+ * @param {Event} event The event object of the message channel
+ */
+async function handleMessageChannelByLibzim (event) {
+    // We received a message from the ServiceWorker
+    // The ServiceWorker asks for some content
+    const title = event.data.title;
+    const messagePort = event.ports[0];
+    try {
+        const ret = await selectedArchive.callLibzimWorker({ action: 'getEntryByPath', path: title })
+        if (ret === null) {
+            console.error('Title ' + title + ' not found in archive.');
+            messagePort.postMessage({ action: 'giveContent', title: title, content: '' });
+            return;
+        }
+
+        if (ret.mimetype === 'unknown') {
+            // We have a redirect to follow
+            // this is still a bit flawed, as we do not check if it's a redirect or the file doesn't exist
+            // We have no way to know if the file exists or not, so we have to assume it does and its just a redirect
+
+            const dirEntry = await new Promise((resolve, _reject) => selectedArchive.getMainPageDirEntry((value) => resolve(value)));
+            if (dirEntry.redirect) {
+                const redirect = await new Promise((resolve, _reject) => selectedArchive.resolveRedirect(dirEntry, (v) => resolve(v)));
+                const ret = await selectedArchive.callLibzimWorker({ action: 'getEntryByPath', path: redirect.namespace + '/' + redirect.url })
+                const message = { action: 'giveContent', title: title, content: ret.content, mimetype: ret.mimetype };
+                messagePort.postMessage(message);
+                return;
+            }
+        }
+
+        // Let's send the content to the ServiceWorker
+        const message = { action: 'giveContent', title: title, content: ret.content, mimetype: ret.mimetype };
+        messagePort.postMessage(message);
+    } catch (error) {
+        const message = { action: 'giveContent', title: title, content: new Uint8Array(), mimetype: '' };
+        messagePort.postMessage(message);
+    }
+}
+
 /**
  * Sets the given injection mode.
  * This involves registering (or re-enabling) the Service Worker if necessary
@@ -2475,7 +2531,7 @@ function displayArticleContentInIframe (dirEntry, htmlArticle) {
                                 // Get the url and the resolution from the srcset entry
                                 var urlMatch = imgAndResolutionUrl.match(/^\s*([^\s]+)\s+([0-9.]+\w+)\s*$/);
                                 var url = urlMatch ? urlMatch[1] : '';
-                                var resolution = urlMatch ? urlMatch[2]: '';
+                                var resolution = urlMatch ? urlMatch[2] : '';
                                 selectedArchive.getDirEntryByPath(url).then(function (srcEntry) {
                                     selectedArchive.readBinaryFile(srcEntry, function (fileDirEntry, content) {
                                         var mimetype = srcEntry.getMimetype();
diff --git a/www/js/init.js b/www/js/init.js
index 640b946d3..ee066c538 100644
--- a/www/js/init.js
+++ b/www/js/init.js
@@ -55,6 +55,8 @@
  * @property {string} cacheIDB - Name of the Indexed DB database
  * @property {boolean} isFileSystemApiSupported - A boolean indicating whether the FileSystem API is supported.
  * @property {boolean} isWebkitDirApiSupported - A boolean indicating whether the Webkit Directory API is supported.
+ * @property {boolean} useLibzim - A boolean indicating weather to use the libzim to load zim files.
+ * @property {"wasm-dev" | 'wasm' | 'asm' | 'asm-dev' | 'default'} libzimMode - A value indicating which libzim mode is selected.
  * @property {DecompressorAPI} decompressorAPI
 
 /**
@@ -123,6 +125,8 @@ params['cacheAPI'] = 'kiwix-js'; // Sets name of the prefix used to identify the
 params['cacheIDB'] = 'kiwix-zim'; // Sets name of the Indexed DB database
 params['isFileSystemApiSupported'] = typeof window.showOpenFilePicker === 'function'; // Sets a boolean indicating whether the FileSystem API is supported
 params['isWebkitDirApiSupported'] = 'webkitdirectory' in document.createElement('input'); // Sets a boolean indicating whether the Webkit Directory API is supported
+params['libzimMode'] = getSetting('libzimMode') || 'wasm'; // Sets a value indicating which libzim mode is selected
+params['useLibzim'] = !!getSetting('useLibzim'); // Sets a value indicating which libzim mode is selected
 
 /**
  * Apply any override parameters that might be in the querystring.
@@ -185,6 +189,8 @@ document.getElementById('useHomeKeyToFocusSearchBarCheck').checked = params.useH
 document.getElementById('openExternalLinksInNewTabsCheck').checked = params.openExternalLinksInNewTabs;
 document.getElementById('languageSelector').value = params.overrideBrowserLanguage || 'default';
 document.getElementById('bypassAppCacheCheck').checked = !params.appCache;
+document.getElementById('libzimModeSelect').value = params.libzimMode;
+document.getElementById('useLibzim').checked = params.useLibzim;
 document.getElementById('appVersion').textContent = 'Kiwix ' + params.appVersion;
 
 // This is a simplified version of code in settingsStore, because that module is not available in init.js
diff --git a/www/js/lib/zimArchive.js b/www/js/lib/zimArchive.js
index 7d2c3c5a3..3cd08dc88 100644
--- a/www/js/lib/zimArchive.js
+++ b/www/js/lib/zimArchive.js
@@ -142,16 +142,19 @@ function ZIMArchive (storage, path, callbackReady, callbackError) {
             ]).then(function () {
                 that.libzimReady = null;
                 // There is currently an exception thrown in the libzim wasm if we attempt to load a split ZIM archive, so we work around
+                // In case of a split ZIM, It will not be loaded properly by libzim if libzim is enabled
                 var isSplitZim = /\.zima.$/i.test(that.file._files[0].name);
                 if (that.file.fullTextIndex && (params.debugLibzimASM || !isSplitZim && typeof Atomics !== 'undefined' &&
                     // Note that Android and NWJS currently throw due to problems with Web Worker context
-                    !/Android/.test(params.appType) && !(window.nw && that.file._files[0].readMode === 'electron'))) {
-                    var libzimReaderType = params.debugLibzimASM || ('WebAssembly' in self ? 'wasm' : 'asm');
-                    console.log('Instantiating libzim ' + libzimReaderType + ' Web Worker...');
+                    !/Android/.test(params.appType) && !(window.nw && that.file._files[0].readMode === 'electron')) || params.useLibzim) {
+                    var libzimReaderType = params.libzimMode;
+                    if (libzimReaderType === 'default') libzimReaderType = 'WebAssembly' in self ? 'wasm.dev' : 'asm.dev';
+                    console.log('[DEBUG] Instantiating libzim ' + libzimReaderType + ' Web Worker...');
                     LZ = new Worker('js/lib/libzim-' + libzimReaderType + '.js');
                     that.callLibzimWorker({ action: 'init', files: that.file._files }).then(function () {
                         that.libzimReady = 'ready';
                         params.searchProvider = 'fulltext: ' + libzimReaderType;
+                        if (params.useLibzim) whenZimReady();
                         // Update the API panel
                         uiUtil.reportSearchProviderToAPIStatusPanel(params.searchProvider);
                     }).catch(function (err) {