#10 improvement in case of missing media folder

dev/public/js/MARL/utils.js

@@ -252,8 +252,14 @@ function loadAttachedMedia(att, index) {
       url = url.slice(prefix);
     }
     if (!data[root + url]) {
+      // 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: null,
+      };
       return;
-    }
+    } else {
       data[root + url].async("base64").then((content) => {
         Alpine.store("files").sources[index][att.url] = {
           type: att.mediaType,
@@ -262,6 +268,7 @@ function loadAttachedMedia(att, index) {
       });
     }
   }
+}
 
 function pagingUpdated() {
   document.querySelectorAll(`#toots details[open]`).forEach((e) => {

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",

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",

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"
+  ></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>
-  <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>

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=""

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}`"

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}`"

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;
     }
   }

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).