[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 80490c183e.

* settings interface wrapping

* fix reported toot styling

* add role to profile sr-only text

* comment fallback rule

* remove currently unused image description lacking indicator
This commit is contained in:
f0x52
2023-05-11 17:46:32 +02:00
committed by GitHub
parent 6392e00653
commit 9cc9ffc5a7
21 changed files with 1754 additions and 1382 deletions

View File

@@ -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";
} else {
label.innerHTML = "Show less";
}
function dynamicSpoiler(className, updateFunc) {
Array.from(document.getElementsByClassName(className)).forEach((spoiler) => {
const update = updateFunc(spoiler);
if (update) {
update();
spoiler.addEventListener("toggle", update);
}
update();
});
}
label.addEventListener("click", () => { setTimeout(update, 1); });
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 {
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;
}
}
});
player.elements.container.title = video.title;
video._player = player;
video._plyrContainer = player.elements.container;
});