mirror of
https://github.com/superseriousbusiness/gotosocial
synced 2025-06-05 21:59:39 +02:00
[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:
@@ -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;
|
||||
});
|
||||
|
Reference in New Issue
Block a user