diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/source/css/status.css | 14 | ||||
| -rw-r--r-- | web/template/status_attachments.tmpl | 70 |
2 files changed, 74 insertions, 10 deletions
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 |