Support webp (lacks test)

kiwix · Oct 11, 2020 · 8232168 · 8232168
1 parent 0dc8591
commit 8232168
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/www/js/app.js b/www/js/app.js
@@ -1519,17 +1519,23 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
         }
 
         function loadImagesJQuery() {
-            $('#articleContent').contents().find('body').find('img[data-kiwixurl]').each(function() {
-                var image = $(this);
-                var imageUrl = image.attr("data-kiwixurl");
+            var images = iframeArticleContent.contentDocument.querySelectorAll('img[data-kiwixurl]');
+            Array.prototype.slice.call(images).forEach(function(image) {
+                var imageUrl = image.dataset.kiwixurl;
                 var title = decodeURIComponent(imageUrl);
                 // Increment pageState image counter to keep track of number of images sent to decompressor
                 pageState.imagesCount++;
                 selectedArchive.getDirEntryByTitle(title).then(function(dirEntry) {
                     selectedArchive.readBinaryFile(dirEntry, function (fileDirEntry, content) {
                         var mimetype = dirEntry.getMimetype();
-                        uiUtil.feedNodeWithBlob(image, 'src', content, mimetype);
                         pageState.imagesExtracted++;
+                        var webpMachine = iframeArticleContent.contentWindow.webpMachine;
+                        if (webpMachine && /webp/i.test(mimetype)) {
+                            return webpMachine.decode(content).then(function(dataURI) {
+                                uiUtil.feedNodeWithBlob(image, 'src', dataURI, mimetype, true);
+                            });
+                        }
+                        uiUtil.feedNodeWithBlob(image, 'src', content, mimetype, false);
                     });
                 }).catch(function (e) {
                     pageState.imagesCount--;

diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js
@@ -29,18 +29,24 @@ define([], function() {
      * 
      * This is useful to inject images (and other dependencies) inside an article
      * 
-     * @param {Object} jQueryNode
+     * @param {Object} node
      * @param {String} nodeAttribute
-     * @param {Uint8Array} content
+     * @param {Uint8Array|String} content
      * @param {String} mimeType
+     * @param {Boolean} isDataUri
      */
-    function feedNodeWithBlob(jQueryNode, nodeAttribute, content, mimeType) {
-        var blob = new Blob([content], {type: mimeType});
-        var url = URL.createObjectURL(blob);
-        jQueryNode.on('load', function () {
-            URL.revokeObjectURL(url);
-        });
-        jQueryNode.attr(nodeAttribute, url);
+    function feedNodeWithBlob(node, nodeAttribute, content, mimeType, isDataUri) {
+        var uri;
+        if (isDataUri) {
+            uri = content;
+        } else {
+            var blob = new Blob([content], {type: mimeType});
+            uri = URL.createObjectURL(blob);
+        }
+        // node.on('load', function () {
+        //     URL.revokeObjectURL(uri);
+        // });
+        node.setAttribute(nodeAttribute, uri);
     }
 
     /**