From c23c871337871d97d952c2b973adc5ae0ff4b52d Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 30 Aug 2026 04:26:13 +0200
Subject: [PATCH] Extracted image container into separate class for dupes

It uses the same element, and it's probably just better to extract this
logic into separate class instead of doing work in different classes.
---
 .../components/philomena/ImageContainer.ts    | 27 +++++++++++++++++++
 src/content/components/philomena/MediaBox.ts  | 23 +++++++++-------
 2 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 src/content/components/philomena/ImageContainer.ts

diff --git a/src/content/components/philomena/ImageContainer.ts b/src/content/components/philomena/ImageContainer.ts
new file mode 100644
index 0000000..227da52
--- /dev/null
+++ b/src/content/components/philomena/ImageContainer.ts
@@ -0,0 +1,27 @@
+import { BaseComponent } from "$content/components/base/BaseComponent";
+
+export default class ImageContainer extends BaseComponent {
+  #imageLink: HTMLAnchorElement | null = null;
+
+  protected init() {
+    this.#imageLink = this.container.querySelector('a');
+  }
+
+  extractActualTags(): string[] {
+    return this.#imageLink?.title.split(' | Tagged: ')[1]?.split(', ') || [];
+  }
+
+  extractTagsAndAliases(): string[] {
+    return this.container.dataset.imageTagAliases?.split(', ') || [];
+  }
+
+  extractImageLinks(): App.ImageURIs {
+    const jsonUris = this.container?.dataset.uris;
+
+    if (!jsonUris) {
+      throw new Error('Missing URIs!');
+    }
+
+    return JSON.parse(jsonUris);
+  }
+}
diff --git a/src/content/components/philomena/MediaBox.ts b/src/content/components/philomena/MediaBox.ts
index c7b1cc6..20bd571 100644
--- a/src/content/components/philomena/MediaBox.ts
+++ b/src/content/components/philomena/MediaBox.ts
@@ -3,15 +3,18 @@ import { getComponent } from "$content/components/base/component-utils";
 import { buildTagsAndAliasesMap } from "$lib/philomena/tag-utils";
 import { on } from "$content/components/events/comms";
 import { EVENT_TAGS_UPDATED } from "$content/components/events/tagging-profile-popup-events";
+import ImageContainer from "$content/components/philomena/ImageContainer";
 
 export class MediaBox extends BaseComponent {
-  #thumbnailContainer: HTMLElement | null = null;
-  #imageLinkElement: HTMLAnchorElement | null = null;
+  #imageContainer: ImageContainer | null = null;
   #tagsAndAliases: Map<string, string> | null = null;
 
   init() {
-    this.#thumbnailContainer = this.container.querySelector('.image-container');
-    this.#imageLinkElement = this.#thumbnailContainer?.querySelector('a') || null;
+    const imageContainerElement = this.container.querySelector('.image-container');
+
+    this.#imageContainer = imageContainerElement instanceof HTMLElement
+      ? new ImageContainer(imageContainerElement)
+      : null;
 
     on(this, EVENT_TAGS_UPDATED, this.#onTagsUpdatedRefreshTagsAndAliases.bind(this));
   }
@@ -27,8 +30,8 @@ export class MediaBox extends BaseComponent {
   }
 
   #calculateMediaBoxTags() {
-    const tagAliases: string[] = this.#thumbnailContainer?.dataset.imageTagAliases?.split(', ') || [];
-    const actualTags = this.#imageLinkElement?.title.split(' | Tagged: ')[1]?.split(', ') || [];
+    const tagAliases = this.#imageContainer?.extractTagsAndAliases() || [];
+    const actualTags = this.#imageContainer?.extractActualTags() || [];
 
     return buildTagsAndAliasesMap(tagAliases, actualTags);
   }
@@ -52,13 +55,13 @@ export class MediaBox extends BaseComponent {
   }
 
   get imageLinks(): App.ImageURIs {
-    const jsonUris = this.#thumbnailContainer?.dataset.uris;
+    const sourceUrls = this.#imageContainer?.extractImageLinks();
 
-    if (!jsonUris) {
-      throw new Error('Missing URIs!');
+    if (!sourceUrls) {
+      throw new Error('Missing image container!');
     }
 
-    return JSON.parse(jsonUris);
+    return sourceUrls;
   }
 
   /**