From 5b87208932a8979193bf1ddc9cf99683685526e3 Mon Sep 17 00:00:00 2001
From: Přemysl Eric Janouch <p@janouch.name>
Date: Sat, 23 Dec 2023 02:21:55 +0100
Subject: WIP: Global duplicate search

---
 public/gallery.js | 37 ++++++++++++++++++-------------------
 public/style.css  | 13 +++++++++----
 2 files changed, 27 insertions(+), 23 deletions(-)

(limited to 'public')

diff --git a/public/gallery.js b/public/gallery.js
index 19d63bb..ca1e511 100644
--- a/public/gallery.js
+++ b/public/gallery.js
@@ -8,6 +8,8 @@ function call(method, params) {
 	})
 }
 
+const loading = (window.location.hostname !== 'localhost') ? 'lazy' : undefined
+
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
 let BrowseModel = {
@@ -85,18 +87,13 @@ let BrowseView = {
 	oncreate(vnode) { vnode.dom.focus() },
 
 	view(vnode) {
-		const loading = undefined
-		if (window.location.hostname !== 'localhost')
-			loading = 'lazy'
-
 		return m('.browser[tabindex=0]', {
 			// Trying to force the oncreate on path changes.
 			key: BrowseModel.path,
 		}, BrowseModel.entries.map(e => {
 			return m(m.route.Link, {href: `/view/${e.sha1}`},
-				m('img', {src: `/thumb/${e.sha1}`,
-					width: e.thumbW, height: e.thumbH, title: e.name,
-					loading}))
+				m('img.thumbnail', {src: `/thumb/${e.sha1}`,
+					width: e.thumbW, height: e.thumbH, title: e.name, loading}))
 		}))
 	},
 }
@@ -244,8 +241,8 @@ let SimilarThumbnail = {
 	view(vnode) {
 		const info = vnode.attrs.info
 		return m(m.route.Link, {href: `/view/${info.sha1}`},
-			m('img', {src: `/thumb/${info.sha1}`,
-				width: info.thumbW, height: info.thumbH}))
+			m('img.thumbnail', {src: `/thumb/${info.sha1}`,
+				width: info.thumbW, height: info.thumbH, loading}))
 	},
 }
 
@@ -324,22 +321,24 @@ let DuplicatesThumbnail = {
 		const info = vnode.attrs.info
 		return [
 			m(m.route.Link, {href: `/similar/${info.sha1}`},
-				m('img', {src: `/thumb/${info.sha1}`,
-					width: info.thumbW, height: info.thumbH})),
-			info.occurences,
+				m('img.thumbnail', {src: `/thumb/${info.sha1}`,
+					width: info.thumbW, height: info.thumbH, loading})),
+			(info.occurences != 1) ? ` ×${info.occurences}` : [],
 		]
 	},
 }
 
 let DuplicatesList = {
-	view(vnode) {
-		if (DuplicatesModel.entries.length == 0)
-			return "No duplicates"
+	// See BrowseView.
+	oncreate(vnode) { vnode.dom.focus() },
 
-		return m('.duplicates', {}, DuplicatesModel.entries.map(group =>
-			m('.row', group.map(entry =>
-				m(DuplicatesThumbnail, {info: entry}))),
-		))
+	view(vnode) {
+		let children = (DuplicatesModel.entries.length == 0)
+			? "No duplicates"
+			: DuplicatesModel.entries.map(group =>
+				m('.row', group.map(entry =>
+					m(DuplicatesThumbnail, {info: entry}))))
+		return m('.duplicates[tabindex=0]', {}, children)
 	},
 }
 
diff --git a/public/style.css b/public/style.css
index d18735d..978e01b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -32,9 +32,13 @@ ul.sidebar li.child a {
 
 .browser { overflow: auto; display: flex; flex-wrap: wrap;
 	align-content: flex-start; justify-content: center; align-items: center;
-	gap: 10px; padding: 9px; }
+	gap: 3px; padding: 9px; }
 .browser:focus-visible { outline: 0; box-shadow: none; }
-.browser img { display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); }
+
+img.thumbnail { display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
+	margin: 3px; border: 0px solid #000;
+	background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%)
+		50% / 20px 20px; }
 
 .view { display: flex; flex-grow: 1; overflow: hidden;
 	justify-content: center; align-items: center; }
@@ -52,8 +56,9 @@ ul.sidebar li.child a {
 
 .similar { padding: .5rem; flex-grow: 1; overflow: auto; }
 .similar h2 { margin: 1em 0 0.5em 0; padding: 0; font-size: 1.2rem; }
-.similar .row { display: flex; }
+.similar .row { display: flex; margin: .5rem 0; }
 .similar .row ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; }
 
 .duplicates { padding: .5rem; flex-grow: 1; overflow: auto; }
-.duplicates .row { display: flex; }
+.duplicates .row { display: flex; margin: .5rem 0;
+	align-items: center; gap: 3px; }
-- 
cgit v1.2.3-70-g09d2