[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>

4 files changed, 41 insertions, 4 deletions

diff --git a/web/source/css/status.css b/web/source/css/status.css
index 5b9900472..ed0075976 100644
--- a/web/source/css/status.css
+++ b/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;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js
index b1187f515..7cf396035 100644
--- a/web/source/frontend/index.js
+++ b/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); });
 	}
 });
diff --git a/web/source/package.json b/web/source/package.json
index 410602aba..7685df234 100644
--- a/web/source/package.json
+++ b/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",
diff --git a/web/source/yarn.lock b/web/source/yarn.lock
index 6e7074a42..ae63ce004 100644
--- a/web/source/yarn.lock
+++ b/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"