From 318cbe98eadbb229ff970d57453c945b2aa9ba66 Mon Sep 17 00:00:00 2001
From: Thomas Mathews <thomas.c.mathews@gmail.com>
Date: Thu, 15 Dec 2022 10:00:20 -0800
Subject: [PATCH] web: Added media previewing

---
 web/css/styles.css | 23 +++++++++++++++++++++++
 web/index.html     |  8 ++++++++
 web/js/ui/util.js  | 16 ++++++++++++++++
 web/js/util.js     |  4 +---
 4 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/web/css/styles.css b/web/css/styles.css
index a278e8d..e713fe8 100644
--- a/web/css/styles.css
+++ b/web/css/styles.css
@@ -438,6 +438,29 @@ label[role="profile-nip5"] {
 	display: block;
 }
 
+/* Media Preview */
+
+.bg-blur {
+	backdrop-filter: blur(20px);
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: var(--zModal);
+}
+.modal .media-container {
+	text-align: center;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: calc(var(--zModal) + 1);
+}
+.modal .media-container > img {
+	object-fit: scale-down;
+	object-position: center;
+	width: 100%;
+	height: 100%;
+}
+
 @media (prefers-color-scheme: dark) {
 	.icon.svg {
 		filter: invert(1);
diff --git a/web/index.html b/web/index.html
index 80977f9..9539f73 100644
--- a/web/index.html
+++ b/web/index.html
@@ -147,6 +147,14 @@
 			<div class="flex-fill vertical-hide"></div>
 		</div>
 
+		<div class="modal closed" id="media-preview">
+			<div class="bg-blur"></div>
+			<div class="media-container">
+				<img onclick="close_media_preview()" src=""/>
+			</div>
+			<!-- TODO add loader to media preview -->
+		</div>
+
 		<div class="modal closed" id="reply-modal">
 			<div id="reply-modal-content" class="modal-content">
 				<header>
diff --git a/web/js/ui/util.js b/web/js/ui/util.js
index 7b02878..5e2cac8 100644
--- a/web/js/ui/util.js
+++ b/web/js/ui/util.js
@@ -113,3 +113,19 @@ function click_event(el) {
 	console.info(`thread to open: ${el.dataset.eid}`);
 	switch_view("thread");
 }
+
+/* open_media_preview presents a modal to display an image via "url".
+ */
+function open_media_preview(url, type) {
+	const el = find_node("#media-preview");
+	el.classList.remove("closed");
+	find_node("img", el).src = url;
+	// TODO handle different medias such as audio and video
+	// TODO add loading state & error checking
+}
+
+/* close_media_preview closes any present media modal.
+ */
+function close_media_preview() {
+	find_node("#media-preview").classList.add("closed");
+}
diff --git a/web/js/util.js b/web/js/util.js
index 7fd8b14..af45d2f 100644
--- a/web/js/util.js
+++ b/web/js/util.js
@@ -169,9 +169,7 @@ function linkify(text, show_media) {
 		let html;
 		if (show_media && is_img_url(parsed.pathname)) {
 			html = `
-			<a target="_blank" href="${url}">
-				<img class="inline-img" src="${url}"/>
-			</a>
+			<img class="inline-img clickable" src="${url}" onclick="open_media_preview('${url}', 'image')"/>
 			`;
 		} else if (show_media && is_video_url(parsed.pathname)) {
 			html = `