[feature] Enable basic video support (mp4 only) (#1274)

* [feature] basic video support

* fix missing semicolon

* replace text shadow with stacked icons

Co-authored-by: f0x <f0x@cthu.lu>

web/source/css/status.css

@@ -232,6 +232,9 @@ main {
 		}
 
 		input.sensitive-checkbox:checked { /* Media is shown */
+			& ~ .video-play {
+				display: flex;
+			}
 			& ~ .sensitive {
 				.closed {
 					transition: 0.8s;
@@ -256,6 +259,32 @@ main {
 			}
 		}
 
+		.video-play {
+			.icon-span {
+				align-self: center;
+				display: initial;
+				z-index: 4;
+
+				.icon {
+					color: $white1;
+				}
+
+				.icon-bg {
+					color: $gray1;
+					font-size: 1.1em;
+				}
+			}
+
+			display: none;
+			position: absolute;
+			height: 100%;
+			width: 100%;
+			justify-content: center;
+			align-items: center;
+			font-size: 7em;
+			pointer-events: none;
+		}
+
 		.sensitive {
 			position: absolute;
 			height: 100%;
@@ -412,4 +441,4 @@ footer + div { /* something weird from the devstack.. */
 			grid-row: auto;
 		}
 	}
-}
+}

web/source/frontend/index.js

@@ -21,6 +21,7 @@
 const Photoswipe = require("photoswipe/dist/umd/photoswipe.umd.min.js");
 const PhotoswipeLightbox = require("photoswipe/dist/umd/photoswipe-lightbox.umd.min.js");
 const PhotoswipeCaptionPlugin = require("photoswipe-dynamic-caption-plugin").default;
+const PhotoswipeVideoPlugin = require("photoswipe-video-plugin").default;
 
 let [_, _user, type, id] = window.location.pathname.split("/");
 if (type == "statuses") {
@@ -39,6 +40,7 @@ const lightbox = new PhotoswipeLightbox({
 new PhotoswipeCaptionPlugin(lightbox, {
 	type: 'auto',
 });
+new PhotoswipeVideoPlugin(lightbox, {});
 
 lightbox.init();
 
@@ -46,14 +48,14 @@ Array.from(document.getElementsByClassName("spoiler-label")).forEach((label) =>
 	let checkbox = document.getElementById(label.htmlFor);
 	if (checkbox != undefined) {
 		function update() {
-			if(checkbox.checked) {
+			if (checkbox.checked) {
 				label.innerHTML = "Show more";
 			} else {
 				label.innerHTML = "Show less";
 			}
 		}
 		update();
-	
-		label.addEventListener("click", () => {setTimeout(update, 1);});
+
+		label.addEventListener("click", () => { setTimeout(update, 1); });
 	}
 });

web/source/package.json

@@ -22,6 +22,7 @@
     "modern-normalize": "^1.1.0",
     "photoswipe": "^5.3.3",
     "photoswipe-dynamic-caption-plugin": "^1.2.7",
+    "photoswipe-video-plugin": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",

web/source/yarn.lock

@@ -4201,6 +4201,11 @@ photoswipe-dynamic-caption-plugin@^1.2.7:
   resolved "https://registry.yarnpkg.com/photoswipe-dynamic-caption-plugin/-/photoswipe-dynamic-caption-plugin-1.2.7.tgz#53aa5059f1c4dccc8aa36196ff3e09baa5e537c2"
   integrity sha512-5XXdXLf2381nwe7KqQvcyStiUBi9TitYXppUQTrzPwYAi4lZsmWNnNKMclM7I4QGlX6fXo42v3bgb6rlK9pY1Q==
 
+photoswipe-video-plugin@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/photoswipe-video-plugin/-/photoswipe-video-plugin-1.0.2.tgz#156b6a72ffa86e6c6e2b486e8ec5b48f6696941a"
+  integrity sha512-skNHaalLU7rptZ3zq4XfS5hPqSDD65ctvpf2X8buvC8BpOt6XKSIgRkLzTwgQOUm9yQ8kQ4mMget7CIqGcqtDg==
+
 photoswipe@^5.3.3:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.3.3.tgz#86351a33502a3ab7d1e483127fe596b20054218a"

web/template/status.tmpl

@@ -22,7 +22,7 @@
 		{{range .}}
 		<div class="media-wrapper">
 			{{if not .Description}}
-			<div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing image description</span></div>
+			<div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing media description</span></div>
 			{{end}}	
 			<input type="checkbox" id="sensitiveMedia-{{.ID}}" class="sensitive-checkbox hidden" {{if not $.Sensitive}}checked{{end}}/>
 			<div class="sensitive">
@@ -35,7 +35,21 @@
 					<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">Show sensitive media</label>
 				</div>
 			</div>
-			<a 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">
+			{{ if eq .Type "video" }}
+			<div class="video-play">
+				<span class="icon-span fa-stack" aria-hidden="true">
+					<i class="icon-bg fa fa-fw fa-circle fa-stack-1x"></i>
+					<i class="icon fa fa-fw fa-play-circle fa-stack-1x"></i>
+				</span>
+			</div>
+			{{ end }}
+			<a href="{{.URL}}"
+				 target="_blank"
+				 {{if .Description}}title="{{.Description}}"{{end}}
+				 data-pswp-width="{{.Meta.Original.Width}}px"
+				 data-pswp-height="{{.Meta.Original.Height}}px"
+				 {{if eq .Type "video"}}data-pswp-type="video"{{end}}
+				 data-cropped="true">
 				<img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}"{{end}} data-blurhash="{{.Blurhash}}"/>
 			</a>
 		</div>
@@ -51,4 +65,4 @@
 		<div id="favorites"><i aria-label="Favorites" class="fa fa-star"></i> {{.FavouritesCount}}</div>
 	</div>
 </div>
-<a data-nosnippet href="{{.URL}}" class="toot-link">View toot</a>
+<a data-nosnippet href="{{.URL}}" class="toot-link">View toot</a>