From b89eccbe026bffc1026c934cb8a2a1a68bc6e34b Mon Sep 17 00:00:00 2001
From: Vincent CLAVIEN <v@s427.ch>
Date: Sun, 26 Jan 2025 14:02:11 +0100
Subject: [PATCH] #10 improvement in case of missing media folder

---
 dev/public/js/MARL/utils.js                   | 17 ++++++++++-----
 dev/public/js/i18n/en.js                      |  1 +
 dev/public/js/i18n/fr.js                      |  1 +
 .../panels/posts/AttachmentDescription.astro  | 21 +++++++++++++------
 .../panels/posts/AttachmentImage.astro        |  1 +
 .../panels/posts/AttachmentSound.astro        |  1 +
 .../panels/posts/AttachmentVideo.astro        |  1 +
 dev/src/css/_toot.scss                        |  8 ++++++-
 dev/src/pages/index.astro                     |  4 ++--
 readme.md                                     |  4 ++++
 10 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/dev/public/js/MARL/utils.js b/dev/public/js/MARL/utils.js
index fe98aa7..962b873 100644
--- a/dev/public/js/MARL/utils.js
+++ b/dev/public/js/MARL/utils.js
@@ -252,14 +252,21 @@ function loadAttachedMedia(att, index) {
       url = url.slice(prefix);
     }
     if (!data[root + url]) {
-      return;
-    }
-    data[root + url].async("base64").then((content) => {
+      // media not found in archive
+      // we still want to show the metadata for the attachement
       Alpine.store("files").sources[index][att.url] = {
         type: att.mediaType,
-        content: content,
+        content: null,
       };
-    });
+      return;
+    } else {
+      data[root + url].async("base64").then((content) => {
+        Alpine.store("files").sources[index][att.url] = {
+          type: att.mediaType,
+          content: content,
+        };
+      });
+    }
   }
 }
 
diff --git a/dev/public/js/i18n/en.js b/dev/public/js/i18n/en.js
index cc70f80..d353547 100644
--- a/dev/public/js/i18n/en.js
+++ b/dev/public/js/i18n/en.js
@@ -118,6 +118,7 @@ appStrings["en"] = {
     linkToPost: "link",
     attachmentNoAlt: "No description provided",
     attachmentInArchive: "In archive:",
+    attachmentNotFound: "⚠️ Content not found in archive",
     people: "People",
     hashtags: "Hashtags",
     extLinks: "External links",
diff --git a/dev/public/js/i18n/fr.js b/dev/public/js/i18n/fr.js
index 70b6eba..6ffc62a 100644
--- a/dev/public/js/i18n/fr.js
+++ b/dev/public/js/i18n/fr.js
@@ -118,6 +118,7 @@ appStrings["fr"] = {
     linkToPost: "lien",
     attachmentNoAlt: "Aucune description fournie",
     attachmentInArchive: "Dans l'archive :",
+    attachmentNotFound: "⚠️ Média introuvable à l'emplacement indiqué",
     people: "Personnes",
     hashtags: "Hashtags",
     extLinks: "Liens externes",
diff --git a/dev/src/components/panels/posts/AttachmentDescription.astro b/dev/src/components/panels/posts/AttachmentDescription.astro
index 5508a61..23a8cee 100644
--- a/dev/src/components/panels/posts/AttachmentDescription.astro
+++ b/dev/src/components/panels/posts/AttachmentDescription.astro
@@ -1,12 +1,21 @@
 <div class="att-description">
-  <span
+  <div
+    class="att-not-found"
+    x-show="$store.files.sources[toot._marl.source][att.url].content === null"
+  >
+    <span x-text="$t('post.attachmentNotFound')"></span>
+    (<span x-text="att.mediaType"></span>)
+  </div>
+  <div
     class="desc-body"
     x-text="att.name ?? $t('post.attachmentNoAlt')"
     :id="'att-' + toot._marl.id + '-' + index + '-desc'"
     aria-hidden="true"
-  ></span>
-  <span class="desc-source">
-    <strong x-text="$t('post.attachmentInArchive')"></strong> <span
-      x-text="$store.files.sources[toot._marl.source].fileInfos.archiveRoot + att.url"></span>
-  </span>
+  ></div>
+  <div class="desc-source">
+    <strong x-text="$t('post.attachmentInArchive')"></strong>
+    <span
+      x-text="$store.files.sources[toot._marl.source].fileInfos.archiveRoot + att.url"
+    ></span>
+  </div>
 </div>
diff --git a/dev/src/components/panels/posts/AttachmentImage.astro b/dev/src/components/panels/posts/AttachmentImage.astro
index cb6516d..27a66cf 100644
--- a/dev/src/components/panels/posts/AttachmentImage.astro
+++ b/dev/src/components/panels/posts/AttachmentImage.astro
@@ -10,6 +10,7 @@ import AttachmentDescription from './AttachmentDescription.astro'
       class="att-img-wrapper"
       @click="$store.lightbox.open(toot, index, 'att-' + toot._marl.id + '-' + index)"
       :id="'att-' + toot._marl.id + '-' + index"
+      x-show="$store.files.sources[toot._marl.source][att.url].content"
     >
       <img
         alt=""
diff --git a/dev/src/components/panels/posts/AttachmentSound.astro b/dev/src/components/panels/posts/AttachmentSound.astro
index 36254be..43b897e 100644
--- a/dev/src/components/panels/posts/AttachmentSound.astro
+++ b/dev/src/components/panels/posts/AttachmentSound.astro
@@ -8,6 +8,7 @@ import AttachmentDescription from './AttachmentDescription.astro'
   <div class="att-wrapper">
     <audio
       controls
+      x-show="$store.files.sources[toot._marl.source][att.url].content"
 
 
       :src="`data:${att.mediaType}; base64,${await $store.files.sources[toot._marl.source][att.url].content}`"
diff --git a/dev/src/components/panels/posts/AttachmentVideo.astro b/dev/src/components/panels/posts/AttachmentVideo.astro
index 2c981f6..5a2e51a 100644
--- a/dev/src/components/panels/posts/AttachmentVideo.astro
+++ b/dev/src/components/panels/posts/AttachmentVideo.astro
@@ -8,6 +8,7 @@ import AttachmentDescription from './AttachmentDescription.astro'
   <div class="att-wrapper">
     <video
       controls
+      x-show="$store.files.sources[toot._marl.source][att.url].content"
       :width="att.width"
       :height="att.height"
       :src="`data:${att.mediaType}; base64,${await $store.files.sources[toot._marl.source][att.url].content}`"
diff --git a/dev/src/css/_toot.scss b/dev/src/css/_toot.scss
index 377fff4..fe0c0f3 100644
--- a/dev/src/css/_toot.scss
+++ b/dev/src/css/_toot.scss
@@ -125,12 +125,18 @@ $meta-visible: 100ch;
     list-style: none;
   }
 
+  .att-not-found {
+    margin-bottom: 0.5rem;
+    color: var(--accent);
+    font-weight: bold;
+  }
+
   .att-description {
     font-size: 0.85em;
     line-height: 1.4;
   }
   .no-alt-text {
-    .att-description {
+    .desc-body {
       font-style: italic;
     }
   }
diff --git a/dev/src/pages/index.astro b/dev/src/pages/index.astro
index d8f0bc6..f63c5c1 100644
--- a/dev/src/pages/index.astro
+++ b/dev/src/pages/index.astro
@@ -21,8 +21,8 @@ import appVersion from '../appVersion';
       <div class="nojs">JavaScript is required for this app to run.</div>
     </noscript>
 
-		<App />
-		<SvgSprites />
+    <App />
+    <SvgSprites />
 
     <script src={`/js/i18n/_langs.js?v=${appVersion}`} is:inline></script>
     <script src={`/js/MARL/stores.js?v=${appVersion}`} is:inline></script>
diff --git a/readme.md b/readme.md
index 4fc2549..d42bddc 100644
--- a/readme.md
+++ b/readme.md
@@ -17,6 +17,8 @@ Alternatively, you can download this project from its [project page](https://git
 
 ⚠️ __Only ZIP files are supported__ —not GZ files. This is a limitation of the JSZip library which is used by MARL to unpack the archive file. Older versions of Mastodon (prior to version 4.2.0) used to export the archive in TAR.GZ. If this is your case, you will have to first convert your archive to a ZIP file.
 
+⚠️ __A note about very large archives:__ Browsers may struggle opening very large ZIP files (several GB), in which case you will see an error and the archive will not be loaded. If this happens, you can try upacking your archive, removing the `media_attachments` folder, and repacking everything else. This will significantly reduce the size of the archive, by removing all attachments from your posts (images, videos or sounds). MARL will still be able to work without those attachments and display their media type and alt text (or lack thereof). Filters related to attachments still work too. Also note that for each attachment, MARL indicates where you can find it in your archive.
+
 ## Screenshots
 
 <img src="screenshot-multiple-archives.png" alt="app screenshot with multiple files loaded">
@@ -126,6 +128,8 @@ Mastodon: https://lou.lt/@s427
 
 ## Version history
 
+- v. 2.3
+  - [Github issue #10](https://github.com/s427/MARL/issues/10) Support for archives with `media_attachments` folder removed. This allows very large archive files, which would normally fail to load because they exceed the browser cache capacity, to still be loaded, although without any attachment visible. Attachments metadata (alt text and path) are still shown, and attachment-related filters still work.
 - v. 2.2
   - Better error handling when loading files
     - In case of errors, MARL should not remain stuck on the loading screen anymore, but will get back to the welcome screen (or the main screen if another archive is already loaded) and show an error message (either directly on the welcome screen, or in the tools panel).