SuperSeriousBusiness/GoToSocial
1
1
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial synced 2025-06-05 21:59:39 +02:00
Code Issues Projects Releases Wiki Activity

[feature/frontend] Add player for audio files; use thumbnail for poster (#3099)

Browse Source 
* [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
This commit is contained in:
tobi
2024-07-15 11:47:57 +02:00
committed by GitHub
parent 16421f7576
commit 9efb11d848
26 changed files with 327 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
web/template/status_attachments.tmpl
View File

@@ -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="video/mp4" src="{{- $media.URL -}}"/>
<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="{{- $media.MIMEType -}}" src="{{- $media.URL -}}"/>
</video>
{{- else if eq .Type "image" }}
<a