From ce53a34828ccabfe64b17f398fcac8c9c5949c2b Mon Sep 17 00:00:00 2001
From: Konstantin Chukhlomin <mail@chuhlomin.com>
Date: Sun, 29 Oct 2023 00:20:11 -0400
Subject: [PATCH] feat(photo): blurhash in viewer for loading photo

---
 content/photos.css      |  2 ++
 templates/photos.gohtml | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/content/photos.css b/content/photos.css
index f4be850..db6eb15 100644
--- a/content/photos.css
+++ b/content/photos.css
@@ -124,6 +124,8 @@ a:hover {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   position: relative; /* for :before element with blurhash image */
+  transition-property: none; /* override link transition */
+  object-fit: contain; /* avoid image stretching */
 }
 
 .photos .photo.lazy {
diff --git a/templates/photos.gohtml b/templates/photos.gohtml
index 3258cda..ac39c84 100644
--- a/templates/photos.gohtml
+++ b/templates/photos.gohtml
@@ -45,6 +45,7 @@
 <script>
 var showingViewer = false;
 var photos = {{ . | cleanPhotos | jsonify }};
+var viewerImage = document.getElementById("image");
 
 var view = function(path) {
     if (path === "close") {
@@ -79,7 +80,17 @@ var view = function(path) {
     // disable scrolling
     document.body.style.overflow = "hidden";
 
-    document.getElementById("image").src = "{{ config "PhotosDomain" }}" + photo.Path;
+    var blurhash = document.querySelector("a[href='#" + photo.Path + "']").style.getPropertyValue("--background-blurhash");
+    viewerImage.src = blurhash.substring(5, blurhash.length - 2); // trim "url(' ... ')" from blurhash
+    viewerImage.width = photo.Width;
+    viewerImage.height = photo.Height;
+
+    var imgLoader = new Image();
+    imgLoader.src = "{{ config "PhotosDomain" }}" + photo.Path;
+    imgLoader.onload = function() {
+        viewerImage.src = imgLoader.src;
+    }
+
     {{/* document.getElementById("photo-title").innerHTML = photo.Title; */}}
     document.getElementById("viewer").style.display = "grid";
     var index = photos.indexOf(photo);