From 9efb11d8485f8273f7d64d46f2675a78fc41d6e8 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Mon, 15 Jul 2024 11:47:57 +0200
Subject: [feature/frontend] Add player for audio files; use thumbnail for
 `poster` (#3099)

* [feature/frontend] Audio player for audio media types

* use video preview images for previews instead of video itself

* don't preload

* update tests for new zork status

* collapse media gallery into single row when small
---
 web/source/css/status.css            | 14 +++++++-
 web/template/status_attachments.tmpl | 70 +++++++++++++++++++++++++++++++-----
 2 files changed, 74 insertions(+), 10 deletions(-)

(limited to 'web')

diff --git a/web/source/css/status.css b/web/source/css/status.css
index 249033e02..5c7400654 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -336,6 +336,10 @@ main {
 						grid-area: sensitive;
 						align-self: center;
 
+						text-overflow: ellipsis;
+						overflow: hidden;
+						white-space: nowrap;
+
 						.button {
 							cursor: pointer;
 							align-self: center;
@@ -401,10 +405,18 @@ main {
 			grid-column: span 2;
 		}
 
-		&.odd .media-wrapper:first-child, &.double .media-wrapper {
+		&.odd .media-wrapper:first-child,
+		&.double .media-wrapper {
 			grid-row: span 2;
 		}
 
+		@media screen and (max-width: 42rem) {
+			.media-wrapper {
+				grid-column: span 2;
+				grid-row: span 2;
+			}
+		}
+
 		img {
 			width: 100%;
 			height: 100%;
diff --git a/web/template/status_attachments.tmpl b/web/template/status_attachments.tmpl
index b257f2211..5df3d1c5c 100644
--- a/web/template/status_attachments.tmpl
+++ b/web/template/status_attachments.tmpl
@@ -36,16 +36,42 @@
 {{- end }}
 
 {{- define "videoPreview" }}
-<video
+<img
+    src="{{- .PreviewURL -}}"
+    loading="lazy"
     {{- if .Description }}
     alt="{{- .Description -}}"
     title="{{- .Description -}}"
     {{- end }}
-    width="{{- .Meta.Original.Width -}}"
-    height="{{- .Meta.Original.Height -}}"
->
-    <source type="video/mp4" src="{{- .URL -}}"/>
-</video>
+    width="{{- .Meta.Small.Width -}}"
+    height="{{- .Meta.Small.Height -}}"
+/>
+{{- end }}
+
+{{- define "audioPreview" }}
+{{- if and .PreviewURL .Meta.Small.Width }}
+<img
+    src="{{- .PreviewURL -}}"
+    loading="lazy"
+    {{- if .Description }}
+    alt="{{- .Description -}}"
+    title="{{- .Description -}}"
+    {{- end }}
+    width="{{- .Meta.Small.Width -}}"
+    height="{{- .Meta.Small.Height -}}"
+/>
+{{- else }}
+<img
+    src="/assets/logo.png"
+    loading="lazy"
+    {{- if .Description }}
+    alt="{{- .Description -}}"
+    title="{{- .Description -}}"
+    {{- end }}
+    width="518"
+    height="460"
+/>
+{{- end }}
 {{- end }}
 
 {{- /* Produces something like "1 attachment", "2 attachments", etc */ -}}
@@ -77,21 +103,47 @@ media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{
                 {{- include "videoPreview" $media | indent 4 }}
                 {{- else if eq .Type "image" }}
                 {{- include "imagePreview" $media | indent 4 }}
+                {{- else if eq .Type "audio" }}
+                {{- include "audioPreview" $media | indent 4 }}
                 {{- end }}
             </summary>
             {{- if eq .Type "video" }}
             <video
+                preload="none"
                 class="plyr-video photoswipe-slide"
                 controls
                 data-pswp-index="{{- $index -}}"
-                data-pswp-width="{{- $media.Meta.Original.Width -}}px"
-                data-pswp-height="{{- $media.Meta.Original.Height -}}px"
+                poster="{{- .PreviewURL -}}"
+                data-pswp-width="{{- $media.Meta.Small.Width -}}px"
+                data-pswp-height="{{- $media.Meta.Small.Height -}}px"
+                {{- if .Description }}
+                alt="{{- $media.Description -}}"
+                title="{{- $media.Description -}}"
+                {{- end }}
+            >
+                <source type="{{- $media.MIMEType -}}" src="{{- $media.URL -}}"/>
+            </video>
+            {{- else if eq .Type "audio" }}
+            <video
+                preload="none"
+                class="plyr-video photoswipe-slide"
+                controls
+                data-pswp-index="{{- $index -}}"
+                {{- if and $media.PreviewURL $media.Meta.Small.Width }}
+                poster="{{- .PreviewURL -}}"
+                data-pswp-width="{{- $media.Meta.Small.Width -}}px"
+                data-pswp-height="{{- $media.Meta.Small.Height -}}px"
+                {{- else }}
+                poster="/assets/logo.png"
+                width="518px"
+                height="460px"
+                {{- end }}
                 {{- if .Description }}
                 alt="{{- $media.Description -}}"
                 title="{{- $media.Description -}}"
                 {{- end }}
             >
-                <source type="video/mp4" src="{{- $media.URL -}}"/>
+                <source type="{{- $media.MIMEType -}}" src="{{- $media.URL -}}"/>
             </video>
             {{- else if eq .Type "image" }}
             <a
-- 
cgit v1.2.3