Fix #75

package.json

@@ -39,6 +39,7 @@
     "@fontsource/roboto": "^5.0.8",
     "@types/webextension-polyfill": "^0.10.7",
     "crx3": "^1.1.3",
+    "immutable": "^5.0.0-beta.4",
     "lightgallery": "^2.7.2",
     "localforage": "^1.10.0",
     "material-symbols": "^0.14.3",

src/features/expandos/css/index.css

@@ -0,0 +1,3 @@
+.galleryLink {
+    text-decoration: underline !important;
+}

src/features/expandos/expandoProvider.ts

@@ -1,5 +1,7 @@
+import { OrderedMap } from "immutable";
+
 export default interface ExpandoProvider {
     sitename: string;
     urlregex: RegExp;
-    createGalleryData: (post: HTMLDivElement) => Promise<Map<string, string>>;
+    createGalleryData: (post: HTMLDivElement) => Promise<OrderedMap<string, string>>;
 }

src/features/expandos/index.ts

@@ -1,3 +1,4 @@
+import "./css/index.css"
 import { OLFeature } from "../base";
 
 import ExpandoProvider from "./expandoProvider";
@@ -90,7 +91,9 @@ export default class Expandos extends OLFeature {
     ) {
         const imgLinks = await expandoProvider.createGalleryData(post);
         const gallery = document.createElement("div");
+        console.log(imgLinks)
         for (const [imgLink, imgDesc] of imgLinks) {
+            console.log("cg:", imgLink, imgDesc)
             const imageAnchorEl = document.createElement("a");
             imageAnchorEl.href = imgLink;
             imageAnchorEl.dataset.subHtml = imgDesc;

src/features/expandos/ireddit.ts

@@ -1,12 +1,15 @@
-export default class iReddIt {
+import { OrderedMap } from "immutable";
+import ExpandoProvider from "./expandoProvider";
+
+export default class iReddIt implements ExpandoProvider {
     sitename = "i.redd.it";
     urlregex = new RegExp(/https:\/\/i\.redd\.it\/.{13}.{3,}/);
     async createGalleryData(post: HTMLDivElement) {
         if (post.dataset.url) {
-        return new Map([[post.dataset.url, ""]]);
+            return OrderedMap([[post.dataset.url, ""]]);
         }
         else {
-            return new Map<string, string>();
+            return OrderedMap<string, string>();
         }
     }
 }

src/features/expandos/redditGallery.ts

@@ -1,3 +1,6 @@
+import { OrderedMap } from "immutable";
+import ExpandoProvider from "./expandoProvider";
+
 type ImageMetadata = {
     // y: number;
     // x: number;
@@ -29,11 +32,12 @@ function isMediaMetadataItem(item: unknown): item is MediaMetadataItem {
     );
 }
 
-export default class RedditGallery {
+export default class RedditGallery implements ExpandoProvider {
     sitename = "Reddit Gallery";
     urlregex = new RegExp(/https:\/\/www\.reddit\.com\/gallery\/.{7}/);
     async createGalleryData(post: HTMLDivElement) {
-        const imgMap = new Map<string, string>();
+        let imgMap = OrderedMap<string, string>();
+        const unsortedImgMap = new Map<string,Array<string>>();
 
         const commentsLink = post.querySelector<HTMLAnchorElement>(".comments");
         if (!commentsLink) {
@@ -51,18 +55,30 @@ export default class RedditGallery {
             postData = postData[0];
         }
         console.log(postData);
+        postData = postData.data.children[0].data
         for (const imgData of Object.values(
-            postData.data.children[0].data.media_metadata
+            postData.media_metadata
         )) {
             if (!isMediaMetadataItem(imgData)) continue;
             const lastImageMetadata = imgData.p.at(-1);
             if (!isImageMetadata(lastImageMetadata)) continue;
 
             const link = document.createElement("a");
+            link.classList.add("galleryLink")
             const imgFileExtension = imgData.m.split("/")[1];
             link.href = `https://i.redd.it/${imgData.id}.${imgFileExtension}`; // there is probably a better way!
-            link.innerText = "original image";
-            imgMap.set(lastImageMetadata.u, link.outerHTML);
+            link.innerText = "link to original image";
+            unsortedImgMap.set(imgData.id, [lastImageMetadata.u, link.outerHTML]);
+        }
+        for (const { media_id, caption } of postData.gallery_data.items) {
+            console.log("looking up", media_id)
+            if (unsortedImgMap.has(media_id)) { 
+                // @ts-ignore
+                const galleryItem: [desc: string, html: string] = unsortedImgMap.get(media_id)
+                const desc = document.createElement("div");
+                desc.innerText = caption
+                imgMap = imgMap.set(galleryItem[0], desc.outerHTML + galleryItem[1])
+            }
         }
         return imgMap;
     }

src/features/posts/postContainer.ts

@@ -13,7 +13,6 @@ export default function setupPostContainer(post: HTMLDivElement) {
     post.appendChild(postContainer);
     const buttons = (post.querySelector(".flat-list.buttons") as HTMLDivElement)
     const entry = post.querySelector(".entry")
-    console.log(buttons, entry)
     if (post.dataset.type === "comment") {
         postContainer.insertBefore(buttons, entry!.nextSibling)
     } else {

yarn.lock

@@ -3105,6 +3105,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^5.0.0-beta.4":
+  version: 5.0.0-beta.4
+  resolution: "immutable@npm:5.0.0-beta.4"
+  checksum: aba11dea1713e4d5a04275a4fbd4947b25807c79e41a516138a8549ceb03344508965fd418ffb3252b31ebf44fc846623bd7a3a4af8948d94be758aca0429757
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:3.3.0, import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -5279,6 +5286,7 @@ __metadata:
     dotenv: ^16.3.1
     dotenv-cli: ^7.3.0
     generate-json-webpack-plugin: ^2.0.0
+    immutable: ^5.0.0-beta.4
     jsonwebtoken: ^9.0.2
     lightgallery: ^2.7.2
     localforage: ^1.10.0