Added a more proper guard for when ImageProcessors return empty

main.meta.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         PNGExtraEmbed2
 // @namespace    https://coom.tech/
-// @version      0.142
+// @version      0.143
 // @description  uhh
 // @author       You
 // @match        https://boards.4channel.org/*

main.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         PNGExtraEmbed2
 // @namespace    https://coom.tech/
-// @version      0.142
+// @version      0.143
 // @description  uhh
 // @author       You
 // @match        https://boards.4channel.org/*
@@ -17139,8 +17139,13 @@
     res2 = res2?.filter((e) => e);
     if (!res2 || res2.length == 0)
       return;
-    let test = res2?.flatMap((e) => e[0].map((k) => [k, e[1]]));
-    processAttachments(post, res2?.flatMap((e) => e[0].map((k) => {
+    let filtered = res2?.filter((e) => e != null);
+    if (filtered.length === 0) {
+      console.warn("ImageProcessors returned empty for post.");
+      console.warn(post);
+      return;
+    }
+    processAttachments(post, filtered.flatMap((e) => e[0].map((k) => {
       if (k?.isBlacklisted === true) {
         post.querySelector(".reply")?.classList.add("hasblack");
       }
@@ -17183,14 +17188,22 @@
       ...cappState,
       isCatalog: !!document.querySelector(".catalog-small") || !!location.pathname.match(/\/catalog$/)
     });
-    const n = 7;
-    const range = ~~(posts.length / n) + 1;
-    await Promise.all([...new Array(n + 1)].map(async (e, i) => {
-      const postsslice = posts.slice(i * range, (i + 1) * range);
-      for (const post of postsslice) {
-        await processPost(post);
-      }
-    }));
+    const obs = new IntersectionObserver((entries, obs2) => {
+      setTimeout(() => {
+        for (const item of entries) {
+          if (!item.isIntersecting)
+            continue;
+          const target = item.target;
+          if (target instanceof HTMLDivElement) {
+            processPost(target);
+          } else {
+            debugger;
+          }
+          obs2.unobserve(target);
+        }
+      }, 1);
+    }, { root: null, rootMargin: "3200px", threshold: 0.01 });
+    posts.map((e) => obs.observe(e));
   };
   var getSelectedFile = () => {
     return new Promise((res) => {

src/main.ts

@@ -179,10 +179,15 @@ const processPost = async (post: HTMLDivElement) => {
     if (!res2 || res2.length == 0)
         return;
 
-    let test = res2?.flatMap(e => e![0].map(k => [k, e![1]] as [EmbeddedFile, EMBED_TYPES]));
     // processAttachments(post, res2?.flatMap(e => e![0].map(k => [k, e![1]] as [EmbeddedFile, boolean])));
-    processAttachments(post, res2?.flatMap(e =>
-        e![0].map(k => {
+    let filtered = res2?.filter(e => e != null) as [EmbeddedFile[], EMBED_TYPES][];
+    if(filtered.length === 0){
+        console.warn("ImageProcessors returned empty for post.")
+        console.warn(post)
+        return;
+    }
+    processAttachments(post, filtered.flatMap(e =>
+        e[0].map(k => {
             if(k?.isBlacklisted === true){
                 post.querySelector('.reply')?.classList.add('hasblack');
             }
@@ -237,18 +242,35 @@ const startup = async () => {
         ...cappState,
         isCatalog: !!document.querySelector('.catalog-small') || !!location.pathname.match(/\/catalog$/),
     });
+
+    /* Temporary change for better performance */
+    const obs = new IntersectionObserver((entries, obs) => {
+        setTimeout(()=>{
+            for(const item of entries) {
+                if(!item.isIntersecting) continue;
+                const target = item.target;
+                if(target instanceof HTMLDivElement){
+                    processPost(target);
+                }else{
+                    debugger;
+                }
+                obs.unobserve(target);
+            }
+        }, 1);
+    }, {root:null, rootMargin: '3200px', threshold: 0.01});
+    posts.map(e => obs.observe(e as any));
+
     //    for (let i = 159; i < 160 ;++i)
     //      await processPost(posts[i] as any);
 
-    const n = 7;
-    //console.log(posts);
-    const range = ~~(posts.length / n) + 1;
-    await Promise.all([...new Array(n + 1)].map(async (e, i) => {
-        const postsslice = posts.slice(i * range, (i + 1) * range);
-        for (const post of postsslice) {
-            await processPost(post as any);
-        }
-    }));
+    // const n = 7;
+    // const range = ~~(posts.length / n) + 1;
+    // await Promise.all([...new Array(n + 1)].map(async (e, i) => {
+    //     const postsslice = posts.slice(i * range, (i + 1) * range);
+    //     for (const post of postsslice) {
+    //         await processPost(post as any);
+    //     }
+    // }));
     //await Promise.all(posts.map(e => processPost(e as any)));
 };