web: Added media previewing

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);

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>

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");
+}

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 clickable" src="${url}" onclick="open_media_preview('${url}', 'image')"/>
-				<img class="inline-img" src="${url}"/>
-			</a>
 			`;
 		} else if (show_media && is_video_url(parsed.pathname)) {
 			html = `