refactor (sensitive) media rendering

web/source/css/_colors.css

@@ -120,3 +120,12 @@ $error-bg: $error2;
 $list-entry-bg: $gray2;
 $list-entry-alternate-bg: $gray3;
 $list-entry-hover-bg: $gray4;
+
+/* Plyr video player */
+$plyr-color-main: $orange2;
+$plyr-video-background: $bg-accent;
+$plyr-badge-background: $bg-accent;
+$plyr-video-controls-background: $bg-accent;
+$plyr-badge-text-color: $fg;
+$plyr-badge-border-radius: $br;
+$plyr-video-progress-buffered-background: $gray8;

web/source/css/base.css

@@ -44,6 +44,11 @@ $br: 0.4rem;
    inside something with $br, eg avatar, header img */
 $br-inner: 0.2rem; 
 
+/* Fork-Awesome 'fa-fw' fixed icon width 
+   keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50
+*/
+$fa-fw: 1.28571429em;
+
 html, body {
 	padding: 0;
 	margin: 0;

web/source/css/status.css

@@ -18,6 +18,7 @@
 
 @import "photoswipe/dist/photoswipe.css";
 @import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
+@import "plyr/dist/plyr.css";
 
 main {
 	background: transparent;
@@ -113,15 +114,16 @@ main {
 	}
 
 	details > summary {
-		list-style: none;
-		padding-bottom: 0.5rem;
 		display: inline-block;
+		list-style: none;
+
+		&::-webkit-details-marker {
+			display: none; /* Safari */
+		}
 
 		.button {
 			white-space: nowrap;
-			padding: 0.2rem 0.3rem;
 			cursor: pointer;
-			font-size: 1rem;
 		}
 	}
 
@@ -135,6 +137,15 @@ main {
 
 		width: 100%;
 
+		details > summary {
+			padding-bottom: 0.5rem;
+
+			.button {
+				padding: 0.2rem 0.3rem;
+				font-size: 1rem;
+			}
+		}
+
 		a {
 			color: $link-fg;
 			text-decoration: underline;
@@ -200,16 +211,104 @@ main {
 	}
 
 	.media {
-		border-radius: $br;
 		grid-column: span 3;
 		display: grid;
 		grid-template-columns: 50% 50%;
 		grid-auto-rows: 10rem;
 		overflow: hidden;
-		gap: 0.3rem;
 
 		.media-wrapper {
+			height: 100%;
+			width: 100%;
+			box-sizing: border-box;
+			border: 0.15rem solid $gray1;
+			border-radius: $br;
 			position: relative;
+			overflow: hidden;
+			z-index: 2;
+
+			details {
+				position: absolute;
+				height: 100%;
+				width: 100%;
+
+				&[open] summary {
+					height: auto;
+					width: auto;
+					margin: 1rem;
+					padding: 0;
+
+					.show, video, img {
+						display: none;
+					}
+
+					.hide.button {
+						display: inline-block;
+						grid-column: 1 / span 3;
+						grid-row: 1 / span 2;
+					}
+				}
+
+				summary {
+					position: absolute;
+					height: 100%;
+					width: 100%;
+					z-index: 3;
+					overflow: hidden;
+					
+					display: grid;
+					padding: 1rem;
+					grid-template-columns: 1fr auto 1fr;
+					grid-template-rows: 1fr 1fr;
+					grid-template-areas: 
+						"eye sensitive ."
+						".   sensitive  .";
+
+					.show.button, .hide.button {
+						grid-area: eye;
+						align-self: start;
+						justify-self: start;
+						margin: 0;
+						padding: 0.4rem;
+
+						.fa-fw {
+							line-height: $fa-fw;
+						}
+					}
+
+					.show.sensitive {
+						grid-area: sensitive;
+						align-self: center;
+
+						.button {
+							cursor: pointer;
+							align-self: center;
+						}
+					}
+
+					.hide {
+						display: none;
+					}
+
+					video, img {
+						z-index: -1;
+						position: absolute;
+						height: calc(100% + 1.2rem);
+						width: calc(100% + 1.2rem);
+						top: -0.6rem;
+						left: -0.6rem;
+						filter: blur(1.2rem);
+					}
+				}
+
+				video.plyr-video, .plyr {
+					position: absolute;
+					height: 100%;
+					width: 100%;
+					object-fit: contain;
+					background: $gray1;
+				}
+			}
 		}
 
 		&.single .media-wrapper {
@@ -220,101 +319,6 @@ main {
 			grid-row: span 2;
 		}
 
-		.open, .open .button {
-			display: none;
-		}
-
-		.closed {
-			z-index: 2;
-		}
-
-		input.sensitive-checkbox:checked { /* Media is shown */
-			& ~ .video-play {
-				display: flex;
-			}
-			& ~ .sensitive {
-				.closed {
-					transition: 0.8s;
-					pointer-events: none;
-					opacity: 0;
-
-					& > * {
-						display: none;
-					}
-				}
-
-				.open {
-					display: flex;
-					justify-content: flex-start;
-
-					.button {
-						align-self: flex-start;
-						display: initial;
-						z-index: 4;
-					}
-				}
-			}
-		}
-
-		.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%;
-			width: 100%;
-
-			.open, .closed {
-				display: flex;
-				position: absolute;
-				height: 100%;
-				width: 100%;
-				justify-content: center;
-				padding: 1rem;
-
-				label {
-					z-index: 3;
-				}
-			}
-
-			.closed {
-				transition: 0.3s;
-				background: $bg-sensitive;
-				@supports (backdrop-filter: blur(2rem)) {
-					background: transparent;
-					backdrop-filter: blur(2rem);
-				}
-
-				.button {
-					align-self: center;
-					justify-self: center;
-				}
-			}
-		}
-
 		.no-image-desc {
 			color: $no-img-desc-fg;
 			background: $no-img-desc-bg;
@@ -408,3 +412,34 @@ main {
 		}
 	}
 }
+
+.plyr--video {
+	flex-direction: column-reverse;
+
+	.plyr__video-wrapper {
+		position: relative;
+	}
+
+	.plyr__controls {
+		align-self: stretch;
+		position: initial;
+		padding: 0.1rem;
+		padding-top: 0.2rem;
+	}
+
+	.plyr__control {
+		box-shadow: none;
+	}
+
+	.plyr__control--overlaid {
+		top: calc(50% - 18px);
+	}
+}
+
+.pswp__content {
+	padding: 2rem;
+
+	.plyr {
+		max-height: 100%;
+	}
+}

web/source/frontend/index.js

@@ -19,10 +19,12 @@
 
 "use strict";
 
+window.HELP_IMPROVE_VIDEOJS = false;
+
 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;
+const Plyr = require("plyr");
 
 let [_, _user, type, id] = window.location.pathname.split("/");
 if (type == "statuses") {
@@ -34,18 +36,66 @@ if (type == "statuses") {
 
 const lightbox = new PhotoswipeLightbox({
 	gallery: '.photoswipe-gallery',
-	children: 'a',
+	children: '.photoswipe-slide',
 	pswpModule: Photoswipe,
 });
 
 new PhotoswipeCaptionPlugin(lightbox, {
 	type: 'auto',
+	captionContent(slide) {
+		return slide.data.alt;
+	}
+});
+
+lightbox.addFilter('itemData', (item) => {
+	const el = item.element;
+	console.log(el);
+	if (el && el.classList.contains("plyr-video")) {
+		const parentNode = el._plyrContainer.parentNode;
+
+		return {
+			alt: el.getAttribute("alt"),
+			_video: {
+				open(c) {
+					c.appendChild(el._plyrContainer);
+				},
+				close() {
+					parentNode.appendChild(el._plyrContainer);
+				}
+			},
+			width: parseInt(el.dataset.pswpWidth),
+			height: parseInt(el.dataset.pswpHeight)
+		};
+	}
+	return item;
+});
+
+lightbox.on("contentActivate", (e) => {
+	const { content } = e;
+	if (content.data._video != undefined) {
+		console.log("activate", e);
+		content.data._video.open(content.element);
+	}
+});
+
+lightbox.on("contentDeactivate", (e) => {
+	const { content } = e;
+	if (content.data._video != undefined) {
+		console.log("deactivate", e);
+		content.data._video.close();
+	}
+});
+
+lightbox.on("close", function () {
+	console.log("close", lightbox.pswp);
+	if (lightbox.pswp.currSlide.data._video != undefined) {
+		lightbox.pswp.currSlide.data._video.close();
+	}
 });
-new PhotoswipeVideoPlugin(lightbox, {});
 
 lightbox.init();
 
-Array.from(document.getElementsByClassName("spoiler-details")).forEach((spoiler) => {
+Array.from(document.getElementsByClassName("text-spoiler")).forEach((spoiler) => {
 	const button = spoiler.getElementsByClassName("button")[0];
 
 	if (button != undefined) {
@@ -61,3 +111,39 @@ Array.from(document.getElementsByClassName("spoiler-details")).forEach((spoiler)
 		spoiler.addEventListener("toggle", update);
 	}
 });
+
+Array.from(document.getElementsByClassName("plyr-video")).forEach((video) => {
+	let player = new Plyr(video, {
+		title: video.title,
+		settings: ["loop"],
+		disableContextMenu: false,
+		hideControls: false,
+		tooltips: { contrors: true, seek: true },
+		listeners: {
+			fullscreen: () => {
+				lightbox.loadAndOpen(parseInt(video.dataset.pswpIndex), {
+					gallery: video.closest(".photoswipe-gallery")
+				});
+
+				return false;
+			}
+		}
+	});
+
+	player.elements.container.title = video.title;
+	video._plyrContainer = player.elements.container;
+});
+
+Array.from(document.getElementsByClassName("video-spoiler")).forEach((spoiler) => {
+	const video = spoiler.getElementsByClassName("plyr-video")[0];
+
+	if (video != undefined) {
+		function update() {
+			if (!spoiler.open) {
+				video.pause();
+			}
+		}
+
+		spoiler.addEventListener("toggle", update);
+	}
+});

web/source/index.js

@@ -62,7 +62,7 @@ skulk({
 			transform: [
 				["babelify", {
 					global: true,
-					ignore: [/node_modules\/(?!(photoswipe.*))/]
+					ignore: [/node_modules\/(?!(photoswipe.*|plyr.*))/]
 				}]
 			],
 		},

web/source/package.json

@@ -24,7 +24,7 @@
     "papaparse": "^5.3.2",
     "photoswipe": "^5.3.3",
     "photoswipe-dynamic-caption-plugin": "^1.2.7",
-    "photoswipe-video-plugin": "^1.0.2",
+    "plyr": "^3.7.8",
     "psl": "^1.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

web/source/settings/style.css

@@ -16,11 +16,6 @@
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-/* Fork-Awesome 'fa-fw' fixed icon width 
-   keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50
-*/
-$fa-fw: 1.28571429em;
-
 body {
 	grid-template-rows: auto 1fr;
 }

web/source/yarn.lock

@@ -2227,6 +2227,11 @@ core-js-compat@^3.25.1:
   dependencies:
     browserslist "^4.21.4"
 
+core-js@^3.26.1:
+  version "3.30.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.30.2.tgz#6528abfda65e5ad728143ea23f7a14f0dcf503fc"
+  integrity sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg==
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -2315,6 +2320,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+custom-event-polyfill@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
+  integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
+
 d@1, d@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
@@ -3750,6 +3760,11 @@ loader-utils@^1.1.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loadjs@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
+  integrity sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==
+
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
@@ -4218,11 +4233,6 @@ 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"
@@ -4243,6 +4253,17 @@ pify@^2.3.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
+plyr@^3.7.8:
+  version "3.7.8"
+  resolved "https://registry.yarnpkg.com/plyr/-/plyr-3.7.8.tgz#b79bccc23687705b5d9a283b2a88c124bf7471ed"
+  integrity sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==
+  dependencies:
+    core-js "^3.26.1"
+    custom-event-polyfill "^1.0.7"
+    loadjs "^4.2.0"
+    rangetouch "^2.0.1"
+    url-polyfill "^1.1.12"
+
 postcss-custom-prop-vars@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/postcss-custom-prop-vars/-/postcss-custom-prop-vars-0.0.5.tgz#b8c025d673fb59eb7a544da467c7587424808c4a"
@@ -4437,6 +4458,11 @@ range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
+rangetouch@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/rangetouch/-/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70"
+  integrity sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==
+
 raw-body@2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
@@ -5371,6 +5397,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-polyfill@^1.1.12:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.12.tgz#6cdaa17f6b022841b3aec0bf8dbd87ac0cd33331"
+  integrity sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==
+
 url@~0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"

web/template/status.tmpl

@@ -34,7 +34,7 @@
 <section class="body">
 	<div class="text">
 		{{if .SpoilerText}}
-		<details class="spoiler-details">
+		<details class="text-spoiler">
 			<summary>
 				<span class="spoiler-text">{{emojify .Emojis (escape .SpoilerText)}}</span>
 				<span class="button" role="button" tabindex="0">Toggle visibility</span>
@@ -52,39 +52,49 @@
 	{{with .MediaAttachments}}
 	<div
 		class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
-		{{range .}}
+		{{range $index, $media := .}}
+		{{with $media}}
 		<div class="media-wrapper">
-			{{if not .Description}}
+			<!-- {{if not .Description}}
 			<div class="no-image-desc" aria-hidden="true"><i class="fa fa-info-circle"></i><span>Missing media
 					description</span></div>
-			{{end}}
+			{{end}} -->
-			<input type="checkbox" id="sensitiveMedia-{{.ID}}" class="sensitive-checkbox hidden"
+			<details class="{{.Type}}-spoiler" {{if not $.Sensitive}}open{{end}}>
-				{{if not $.Sensitive}}checked{{end}} />
+				<summary>
-			<div class="sensitive">
+					<div class="show sensitive" aria-hidden="true">
-				<div class="open">
+						<span class="button" role="button" tabindex="0">Show sensitive media</span>
-					<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">
+					</div>
-						<i class="fa fa-eye-slash" title="Hide sensitive media"></i>
+					<span class="show button" aria-hidden="true">
-					</label>
+						<i class="fa fa-fw fa-eye"></i>
-				</div>
+					</span>
-				<div class="closed" {{if .Description}}title="{{.Description}}" {{end}}>
+					<span class="hide button" role="button" tabindex="0">
-					<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">Show sensitive media</label>
+						<i class="fa fa-fw fa-eye-slash" aria-label="Hide media"></i>
-				</div>
+					</span>
-			</div>
+					{{if eq .Type "video"}}
-			{{ if eq .Type "video" }}
+					<video {{if .Description}} title="{{.Description}}" {{end}}>
-			<div class="video-play">
+						<source type="video/mp4" src="{{.URL}}" />
-				<span class="icon-span fa-stack" aria-hidden="true">
+					</video>
-					<i class="icon-bg fa fa-fw fa-circle fa-stack-1x"></i>
+					{{else}}
-					<i class="icon fa fa-fw fa-play-circle fa-stack-1x"></i>
+					<img {{if .Description}} title="{{.Description}}" {{end}} src="{{.PreviewURL}}" />
-				</span>
+					{{end}}
-			</div>
+				</summary>
-			{{ end }}
+				{{if eq .Type "video"}}
-			<a href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}" {{end}}
+				<video class="plyr-video photoswipe-slide" controls {{if .Description}}alt="{{.Description}}"
-				data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px"
+					title="{{.Description}}" {{end}} data-pswp-index="{{$index}}" data-pswp-width="{{.Meta.Original.Width}}px"
-				{{if eq .Type "video"}}data-pswp-type="video" {{end}} data-cropped="true">
+					data-pswp-height="{{.Meta.Original.Height}}px">
-				<img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}" {{end}} data-blurhash="{{.Blurhash}}" />
+					<source type="video/mp4" src="{{.URL}}" />
-			</a>
+				</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}}
+		{{end}}
 	</div>
 	{{end}}
 </section>