From 7769592d8dcac69ce9a78f0cef25286c786cb522 Mon Sep 17 00:00:00 2001
From: orfelorfel23 <jannik.mueller.jannik+git@googlemail.com>
Date: Sat, 3 Oct 2026 22:51:23 +0200
Subject: [PATCH] Auto-Commit: 2026-10-03 22:51:23

---
 .dockerignore      |  4 ++++
 patch_regex.js     | 36 ++++++++++++++++++++++++++++++++++++
 patch_tile_safe.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 84 insertions(+)
 create mode 100644 patch_regex.js
 create mode 100644 patch_tile_safe.js

diff --git a/.dockerignore b/.dockerignore
index 722f671..51e1a59 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -14,3 +14,7 @@ test-results
 playwright-report
 tests
 *.md
+
+test-media
+
+media
diff --git a/patch_regex.js b/patch_regex.js
new file mode 100644
index 0000000..8be8b2b
--- /dev/null
+++ b/patch_regex.js
@@ -0,0 +1,36 @@
+const fs = require('fs');
+let tile = fs.readFileSync('src/components/MediaTile.tsx', 'utf8');
+
+const regex = /\)\s*:\s*\(\s*\/\* eslint-disable-next-line @next\/next\/no-img-element \*\/\s*<img[\s\S]*?<\/div>\s*\)\s*}/;
+
+// Wait, the regex needs to match exactly up to the end of the img block.
+const regex2 = /\)\s*:\s*\(\s*\/\* eslint-disable-next-line @next\/next\/no-img-element \*\/\s*<img[\s\S]*?\/>\s*\)/;
+
+const newBlock = `) : isVideo ? (
+            <video
+              src={\`/api/media/\${item.relativePath}?type=preview\`}
+              poster={\`/api/media/\${item.relativePath}?type=poster\`}
+              autoPlay
+              muted
+              loop
+              playsInline
+              onLoadedData={(e) => {
+                const target = e.target as HTMLVideoElement;
+                target.parentElement?.classList.remove('loading-skeleton');
+              }}
+            />
+          ) : (
+            /* eslint-disable-next-line @next/next/no-img-element */
+            <img 
+              src={\`/api/media/\${item.relativePath}?type=thumb\`} 
+              alt={item.filename} 
+              loading="lazy"
+              onLoad={(e) => {
+                const target = e.target as HTMLImageElement;
+                target.parentElement?.classList.remove('loading-skeleton');
+              }}
+            />
+          )`;
+
+tile = tile.replace(regex2, newBlock);
+fs.writeFileSync('src/components/MediaTile.tsx', tile, 'utf8');
diff --git a/patch_tile_safe.js b/patch_tile_safe.js
new file mode 100644
index 0000000..d05a7e0
--- /dev/null
+++ b/patch_tile_safe.js
@@ -0,0 +1,44 @@
+const fs = require('fs');
+let tile = fs.readFileSync('src/components/MediaTile.tsx', 'utf8');
+
+const oldRender = `) : (
+            /* eslint-disable-next-line @next/next/no-img-element */
+            <img 
+              src={isVideo ? \`/api/media/\${item.relativePath}?type=poster\` : \`/api/media/\${item.relativePath}?type=thumb\`} 
+              alt={item.filename} 
+              loading="lazy"
+              onLoad={(e) => {
+                const target = e.target as HTMLImageElement;
+                target.parentElement?.classList.remove('loading-skeleton');
+              }}
+            />
+          )}`;
+
+const newRender = `) : isVideo ? (
+            <video
+              src={\`/api/media/\${item.relativePath}?type=preview\`}
+              poster={\`/api/media/\${item.relativePath}?type=poster\`}
+              autoPlay
+              muted
+              loop
+              playsInline
+              onLoadedData={(e) => {
+                const target = e.target as HTMLVideoElement;
+                target.parentElement?.classList.remove('loading-skeleton');
+              }}
+            />
+          ) : (
+            /* eslint-disable-next-line @next/next/no-img-element */
+            <img 
+              src={\`/api/media/\${item.relativePath}?type=thumb\`} 
+              alt={item.filename} 
+              loading="lazy"
+              onLoad={(e) => {
+                const target = e.target as HTMLImageElement;
+                target.parentElement?.classList.remove('loading-skeleton');
+              }}
+            />
+          )}`;
+
+tile = tile.replace(oldRender, newRender);
+fs.writeFileSync('src/components/MediaTile.tsx', tile, 'utf8');