[feature] Use blurhashes in frontend, tidy up gallery view a bit (#3948)

* [feature] Use blurhashes in frontend, tidy up gallery view a bit

* weeeeeeeeeeeeeeeee

* beep boop

2 files changed, 32 insertions, 40 deletions

diff --git a/web/template/page.tmpl b/web/template/page.tmpl
index 7dccc7469..0a54e74cb 100644
--- a/web/template/page.tmpl
+++ b/web/template/page.tmpl
@@ -67,7 +67,9 @@ image/webp
         <link rel="apple-touch-startup-image" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
         {{- include "page_stylesheets.tmpl" . | indent 2 }}
         {{- range .javascript }}
-        <script type="text/javascript" src="{{- . -}}" async="" defer=""></script>
+        {{- if not .Bottom }}
+        <script type="text/javascript" src="{{- .Src -}}"{{- if .Async }} async=""{{- end -}}{{- if .Defer }} defer=""{{- end -}}></script>
+        {{- end }}
         {{- end }}
         <title>{{- template "instanceTitle" . -}}</title>
     </head>
@@ -82,5 +84,10 @@ image/webp
         <footer class="page-footer">
             {{- include "page_footer.tmpl" . | indent 3 }}
         </footer>
+        {{- range .javascript }}
+        {{- if .Bottom }}
+        <script type="text/javascript" src="{{- .Src -}}"></script>
+        {{- end }}
+        {{- end }}
     </body>
 </html>
\ No newline at end of file
diff --git a/web/template/status_attachment.tmpl b/web/template/status_attachment.tmpl
index bdfafa96f..4dda7298f 100644
--- a/web/template/status_attachment.tmpl
+++ b/web/template/status_attachment.tmpl
@@ -17,33 +17,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */ -}}
 
-{{- define "imagePreview" }}
-<img
-    src="{{- .PreviewURL -}}"
-    loading="lazy"
-    {{- if .Description }}
-    alt="{{- .Description -}}"
-    title="{{- .Description -}}"
-    {{- end }}
-    width="{{- .Meta.Original.Width -}}"
-    height="{{- .Meta.Original.Height -}}"
-/>
-{{- end }}
-
-{{- define "videoPreview" }}
-<img
-    src="{{- .PreviewURL -}}"
-    loading="lazy"
-    {{- if .Description }}
-    alt="{{- .Description -}}"
-    title="{{- .Description -}}"
-    {{- end }}
-    width="{{- .Meta.Small.Width -}}"
-    height="{{- .Meta.Small.Height -}}"
-/>
-{{- end }}
-
-{{- define "audioPreview" }}
+{{- define "preview" }}
 {{- if and .PreviewURL .Meta.Small.Width }}
 <img
     src="{{- .PreviewURL -}}"
@@ -54,6 +28,8 @@
     {{- end }}
     width="{{- .Meta.Small.Width -}}"
     height="{{- .Meta.Small.Height -}}"
+    data-blurhash-hash="{{- .Blurhash -}}"
+    data-sensitive="{{- .Sensitive -}}"
 />
 {{- else }}
 <img
@@ -72,29 +48,38 @@
 {{- with . }}
 <div class="media-wrapper">
     <details class="{{- .Item.Type -}}-spoiler media-spoiler" {{- if not .Item.Sensitive }} open{{- end -}}>
-        <summary>
+        <summary
+            {{- if .Item.Description }}
+            title="{{- .Item.Description -}}"
+            {{- end }}
+        >
             <div class="show sensitive button" aria-hidden="true">Show sensitive</div>
-            <span class="eye button" role="button" tabindex="0" aria-label="Toggle media">
+            <span class="eye button" role="button" tabindex="0" aria-label="Toggle media visibility">
                 <i class="hide fa fa-fw fa-eye-slash" aria-hidden="true"></i>
                 <i class="show fa fa-fw fa-eye" aria-hidden="true"></i>
             </span>
-            {{- if or (eq .Item.Type "video") (eq .Item.Type "gifv") }}
-            {{- include "videoPreview" .Item | indent 3 }}
-            {{- else if eq .Item.Type "image" }}
-            {{- include "imagePreview" .Item | indent 3 }}
-            {{- else if eq .Item.Type "audio" }}
-            {{- include "audioPreview" .Item | indent 3 }}
+            {{- if and (not (eq .Item.Type "unknown")) .Item.Meta.Small.Width }}
+            <div
+                class="blurhash-container"
+                data-blurhash-width="{{- .Item.Meta.Small.Width -}}"
+                data-blurhash-height="{{- .Item.Meta.Small.Height -}}"
+                data-blurhash-hash="{{- .Item.Blurhash -}}"
+                data-blurhash-aspect="{{- .Item.Meta.Small.Aspect -}}"
+            ></div>
             {{- end }}
         </summary>
         {{- if or (eq .Item.Type "video") (eq .Item.Type "gifv") }}
         <video
             {{- if eq .Item.Type "video" }}
             preload="none"
+            class="plyr-video photoswipe-slide"
             {{- else }}
             preload="auto"
             muted
+            autoplay
+            loop
+            class="plyr-video photoswipe-slide gifv"
             {{- end }}
-            class="plyr-video photoswipe-slide{{- if eq .Item.Type "gifv" }} gifv{{ end }}"
             controls
             playsinline
             data-pswp-index="{{- .Index -}}"
@@ -125,8 +110,8 @@
             data-pswp-height="{{- .Item.Meta.Small.Height -}}px"
             {{- else }}
             poster="/assets/logo.webp"
-            width="518px"
-            height="460px"
+            data-pswp-width="518px"
+            data-pswp-height="460px"
             {{- end }}
             {{- if .Item.Description }}
             alt="{{- .Item.Description -}}"
@@ -152,7 +137,7 @@
             {{- end }}
         >
             {{- with .Item }}
-            {{- include "imagePreview" . | indent 3 }}
+            {{- include "preview" . | indent 3 }}
             {{- end }}
         </a>
         {{- else }}