From 8089c6ae68af5078ad272a6c3af1e31a42ee8ee2 Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Thu, 2 Feb 2023 00:05:04 +0300
Subject: [PATCH] feat(web): show image preview in file view menu

---
 web/public/css/tfm.css     | 26 ++++++++++++++++++++++++++
 web/public/js/tfm-files.js |  7 ++++---
 web/public/tfm/files.html  |  4 ++--
 web/server/web-server.go   |  3 +++
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/web/public/css/tfm.css b/web/public/css/tfm.css
index ccf6f73..cef828c 100644
--- a/web/public/css/tfm.css
+++ b/web/public/css/tfm.css
@@ -58,6 +58,24 @@ main {
 	overflow: hidden;
 }
 
+#menu-file-view {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	border-radius: 0;
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+
+#preview {
+	max-width: 100%;
+	max-height: 90vh;
+	object-fit: contain;
+	object-position: center;
+}
+
 form {
 	flex: 1 1 auto;
 	padding: 2vw 2vw;
@@ -79,6 +97,14 @@ form {
 	overflow-x: hidden;
 }
 
+#menu-file-view form {
+	min-height: initial;
+}
+
+#menu-file-view .list {
+	height: 50vh;
+}
+
 .list:after {
 	content: "";
 	flex: auto;
diff --git a/web/public/js/tfm-files.js b/web/public/js/tfm-files.js
index 779cefe..51de85d 100644
--- a/web/public/js/tfm-files.js
+++ b/web/public/js/tfm-files.js
@@ -29,7 +29,8 @@ $(document).on("dblclick", ".item", function (e) {
 	});
 	$(".item.selected").removeClass("selected");
 	$(".menu-wrapper").css("display", "flex");
-	$("#menu-view").css("display", "flex");
+	$("#menu-file-view").css("display", "flex");
+	$("#preview").attr("src", "/preview/" + current_sasa.path);
 	$("#name").val(decodeURI(current_sasa.path));
 	$("#btn-full").attr("href", "/files/" + current_sasa.path);
 	let resp = tdb_query("$TFM", 24, '' + id);
@@ -69,7 +70,7 @@ $(document).on("input", "#text-filter", function (e) {
 	});
 });
 
-$(document).on("submit", "#menu-view form", function (e) {
+$(document).on("submit", "#menu-file-view form", function (e) {
 	e.preventDefault();
 	let resp = tdb_query("$TFM", 24, '' + current_sasa.id);
 	if (!resp.status) {
@@ -77,7 +78,7 @@ $(document).on("submit", "#menu-view form", function (e) {
 		return;
 	}
 	$(".menu-wrapper").css("display", "none");
-	$("#menu-view").css("display", "none");
+	$("#menu-file-view").css("display", "none");
 	resp.data.forEach(tanzaku => {
 		let current = $(`#t${tanzaku.id}`)
 		if (current.hasClass("selected")) {
diff --git a/web/public/tfm/files.html b/web/public/tfm/files.html
index 0338fe5..63f6c07 100644
--- a/web/public/tfm/files.html
+++ b/web/public/tfm/files.html
@@ -37,8 +37,8 @@
 	</div>
 </main>
 <div class="menu-wrapper">
-	<div class="menu" id="menu-view">
-		<h2>File menu</h2>
+	<div class="menu" id="menu-file-view">
+		<img id="preview">
 		<form>
 			<div class="form-group row">
 				<label class="col-sm-2 col-form-label" for="name">File name</label>
diff --git a/web/server/web-server.go b/web/server/web-server.go
index 6b510de..3900a88 100644
--- a/web/server/web-server.go
+++ b/web/server/web-server.go
@@ -223,6 +223,9 @@ func main() {
 		r.URL.Path = strings.Join(thumb_path, "/")
 		http.StripPrefix("/thumbs", tfm_fs).ServeHTTP(w, r)
 	}))
+	http.Handle("/preview/", Auth(func(w http.ResponseWriter, r *http.Request) {
+		http.StripPrefix("/preview", tfm_fs).ServeHTTP(w, r)
+	}))
 	log.Println("Running...")
 	err = server.ListenAndServeTLS("/etc/ssl/certs/web-global.crt", "/etc/ssl/private/web-global.key")
 	if errors.Is(err, http.ErrServerClosed) {