From ba9d6b467a1f03447789844048d913738c843569 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Fri, 10 Nov 2023 19:29:26 +0100
Subject: [feature] Media attachment placeholders (#2331)

* [feature] Use placeholders for unknown media types

* fix read of underreported small files

* switch to reduce nesting

* simplify cleanup
---
 web/template/status.tmpl | 87 +++++++++++++++++++++++++++++-------------------
 1 file changed, 52 insertions(+), 35 deletions(-)

(limited to 'web/template')

diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index 08cbdcf01..5e264a339 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -53,42 +53,59 @@
 	<div
 		class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
 		{{range $index, $media := .}}
-		{{with $media}}
-		<div class="media-wrapper">
-			<details class="{{.Type}}-spoiler media-spoiler" {{if not $.Sensitive}}open{{end}}>
-				<summary>
-					<div class="show sensitive button" aria-hidden="true">
-						Show sensitive media
-					</div>
-					<span class="eye button" role="button" tabindex="0" aria-label="Toggle media">
-						<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>
+			{{with $media}}
+				<div class="media-wrapper">
+					<details class="{{.Type}}-spoiler media-spoiler" {{if not $.Sensitive}}open{{end}}>
+						<summary>
+							<div class="show sensitive button" aria-hidden="true">
+								Show sensitive media
+							</div>
+							<span class="eye button" role="button" tabindex="0" aria-label="Toggle media">
+								<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 eq .Type "video"}}
-					<video {{if .Description}} title="{{.Description}}" {{end}}>
-						<source type="video/mp4" src="{{.URL}}" />
-					</video>
-					{{else}}
-					<img {{if .Description}} title="{{.Description}}" {{end}} src="{{.PreviewURL}}" />
-					{{end}}
-				</summary>
-				{{if eq .Type "video"}}
-				<video class="plyr-video photoswipe-slide" controls {{if .Description}}alt="{{.Description}}"
-					title="{{.Description}}" {{end}} data-pswp-index="{{$index}}" data-pswp-width="{{.Meta.Original.Width}}px"
-					data-pswp-height="{{.Meta.Original.Height}}px">
-					<source type="video/mp4" src="{{.URL}}" />
-				</video>
-				{{else}}
-				<a class="photoswipe-slide" href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}" {{end}}
-					data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px"
-					data-cropped="true">
-					<img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}" {{end}} />
-				</a>
-				{{end}}
-			</details>
-		</div>
-		{{end}}
+							{{if eq .Type "video"}}
+								<video {{if .Description}} title="{{.Description}}" {{end}}>
+									<source type="video/mp4" src="{{.URL}}" />
+								</video>
+							{{else if eq .Type "image"}}
+								<img {{if .Description}} title="{{.Description}}" {{end}} src="{{.PreviewURL}}" />
+							{{end}}
+						</summary>
+						{{if eq .Type "video"}}
+							<video class="plyr-video photoswipe-slide" controls {{if .Description}}alt="{{.Description}}"
+								title="{{.Description}}" {{end}} data-pswp-index="{{$index}}" data-pswp-width="{{.Meta.Original.Width}}px"
+								data-pswp-height="{{.Meta.Original.Height}}px">
+								<source type="video/mp4" src="{{.URL}}" />
+							</video>
+						{{else if eq .Type "image"}}
+							<a class="photoswipe-slide" href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}" {{end}}
+								data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px"
+								data-cropped="true">
+								<img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}" {{end}} />
+							</a>
+						{{else}}
+							<a
+								class="unknown-attachment"
+								href="{{.RemoteURL}}"
+								target="_blank"
+								{{if .Description}}
+									title="Link to external media: {{.Description}}&#10;&#13;{{.RemoteURL}}"
+								{{else}}
+									title="Link to external media.&#10;&#13;{{.RemoteURL}}"
+								{{end}}
+							>
+								<div class="placeholder" aria-hidden="true">
+									<i class="placeholder-external-link fa fa-external-link"></i>
+									<i class="placeholder-icon fa fa-file-text"></i>
+									<div class="placeholder-link-to">External media</div>
+								</div>
+							</a>
+						{{end}}
+					</details>
+				</div>
+			{{end}}
 		{{end}}
 	</div>
 	{{end}}
-- 
cgit v1.3