[frontend] Profiles with fields & more (#1764)

* redesign status template

* separate index page styling

* redesign profile template

* fix header styling/wrapping

* remove old spoiler js

* fix status cw button wrapping

* fix status info variables

* profile responsiveness, accessibility tweaks

* fix variable use, mobile

* remove duplicate id's

* rss icon, fix indent

* fix toot border-radius

* fix toot spacing

* emojify and html profile fields

* refactor (sensitive) media rendering

* plaintext profile fields

* bundle plyr icon svg

* only pause video when switching photoswipe slides

* yarn upgrade

* profile fields formatting

* replace uglifyify with @browserify updated fork

* fix profile field templating (yet again)

* fix React classes

* testrig: add testing profile field for admin user

* fix sensitive media interactions

* Revert "testrig: add testing profile field for admin user"

This reverts commit 80490c183e6639ce5b57fcfca6772d8f96df8706.

* settings interface wrapping

* fix reported toot styling

* add role to profile sr-only text

* comment fallback rule

* remove currently unused image description lacking indicator

1 files changed, 112 insertions, 13 deletions

diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js
index 2a9577201..2fa035adb 100644
--- a/web/source/frontend/index.js
+++ b/web/source/frontend/index.js
@@ -22,7 +22,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;
+const Plyr = require("plyr");
 
 let [_, _user, type, id] = window.location.pathname.split("/");
 if (type == "statuses") {
@@ -34,29 +34,128 @@ 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;
+	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);
+				},
+				pause() {
+					el._player.pause();
+				}
+			},
+			width: parseInt(el.dataset.pswpWidth),
+			height: parseInt(el.dataset.pswpHeight)
+		};
+	}
+	return item;
+});
+
+lightbox.on("contentActivate", (e) => {
+	const { content } = e;
+	if (content.data._video != undefined) {
+		content.data._video.open(content.element);
+	}
+});
+
+lightbox.on("contentDeactivate", (e) => {
+	const { content } = e;
+	if (content.data._video != undefined) {
+		content.data._video.pause();
+		content.data._video.close();
+	}
+});
+
+lightbox.on("close", function () {
+	if (lightbox.pswp.currSlide.data._video != undefined) {
+		lightbox.pswp.currSlide.data._video.close();
+	}
 });
-new PhotoswipeVideoPlugin(lightbox, {});
 
 lightbox.init();
 
-Array.from(document.getElementsByClassName("spoiler-label")).forEach((label) => {
-	let checkbox = document.getElementById(label.htmlFor);
-	if (checkbox != undefined) {
-		function update() {
-			if (checkbox.checked) {
-				label.innerHTML = "Show more";
+function dynamicSpoiler(className, updateFunc) {
+	Array.from(document.getElementsByClassName(className)).forEach((spoiler) => {
+		const update = updateFunc(spoiler);
+		if (update) {
+			update();
+			spoiler.addEventListener("toggle", update);
+		}
+	});
+}
+
+dynamicSpoiler("text-spoiler", (spoiler) => {
+	const button = spoiler.querySelector("button");
+
+	if (button != undefined) {
+		return () => {
+			button.textContent = spoiler.open
+				? "Show less"
+				: "Show more";
+		};
+	}
+});
+
+dynamicSpoiler("video-spoiler", (spoiler) => {
+	const video = spoiler.querySelector(".plyr-video");
+	const eye = spoiler.querySelector(".eye.button");
+
+	if (video != undefined) {
+		return () => {
+			if (spoiler.open) {
+				eye.setAttribute("aria-label", "Hide media");
 			} else {
-				label.innerHTML = "Show less";
+				eye.setAttribute("aria-label", "Show media");
+				video.pause();
+			}
+		};
+	}
+});
+
+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 },
+		iconUrl: "/assets/plyr.svg",
+		listeners: {
+			fullscreen: () => {
+				if (player.playing) {
+					setTimeout(() => {
+						player.play();
+					}, 1);
+				}
+				lightbox.loadAndOpen(parseInt(video.dataset.pswpIndex), {
+					gallery: video.closest(".photoswipe-gallery")
+				});
+
+				return false;
 			}
 		}
-		update();
+	});
 
-		label.addEventListener("click", () => { setTimeout(update, 1); });
-	}
+	player.elements.container.title = video.title;
+	video._player = player;
+	video._plyrContainer = player.elements.container;
 });