[feature] Allow user to choose "gallery" style layout for web view of profile (#3917)

* [feature] Allow user to choose "gallery" style web layout

* find a bug and squish it up and all day long you'll have good luck

* just a sec

* [performance] reindex public timeline + tinker with query a bit

* fiddling

* should be good now

* last bit of finagling, i'm done now i prommy

* panic normally
This commit is contained in:
tobi
2025-03-26 16:59:39 +01:00
committed by GitHub
parent f46e490c30
commit b6e481d63e
82 changed files with 2921 additions and 1171 deletions

View File

@@ -40,6 +40,9 @@ const lightbox = new PhotoswipeLightbox({
gallery: '.photoswipe-gallery',
children: '.photoswipe-slide',
pswpModule: Photoswipe,
// Bit darker than default 0.8.
bgOpacity: 0.9,
loop: false,
});
new PhotoswipeCaptionPlugin(lightbox, {
@@ -71,7 +74,9 @@ lightbox.addFilter('itemData', (item) => {
}
},
width: parseInt(el.dataset.pswpWidth),
height: parseInt(el.dataset.pswpHeight)
height: parseInt(el.dataset.pswpHeight),
parentStatus: el.dataset.pswpParentStatus,
attachmentId: el.dataset.pswpAttachmentId,
};
}
return item;
@@ -98,6 +103,26 @@ lightbox.on("close", function () {
}
});
lightbox.on('uiRegister', function() {
lightbox.pswp.ui.registerElement({
name: 'open-post-link',
ariaLabel: 'Open post',
order: 8,
isButton: true,
tagName: "a",
html: '<span title="Open post"><span class="sr-only">Open post</span><i class="fa fa-lg fa-external-link-square" aria-hidden="true"></i></span>',
onInit: (el, pswp) => {
el.setAttribute('target', '_blank');
el.setAttribute('rel', 'noopener');
pswp.on('change', () => {
el.href = pswp.currSlide.data.parentStatus
? pswp.currSlide.data.parentStatus
: pswp.currSlide.data.element.dataset.pswpParentStatus;
});
}
});
});
lightbox.init();
function dynamicSpoiler(className, updateFunc) {
@@ -156,22 +181,40 @@ Array.from(document.getElementsByClassName("plyr-video")).forEach((video) => {
let player = new Plyr(video, {
title: video.title,
settings: ["loop"],
settings: [],
controls: ['play-large', 'play', 'progress', 'current-time', 'volume', 'mute', 'fullscreen'],
disableContextMenu: false,
hideControls: false,
tooltips: { contrors: true, seek: true },
tooltips: { controls: true, seek: true },
iconUrl: "/assets/plyr.svg",
invertTime: false,
listeners: {
fullscreen: () => {
if (player.playing) {
setTimeout(() => {
player.play();
}, 1);
// Check if the photoswipe lightbox is
// open with this as the current slide.
const alreadyInLightbox = (
lightbox.pswp !== undefined &&
video.dataset.pswpAttachmentId === lightbox.pswp.currSlide.data.attachmentId
);
if (alreadyInLightbox) {
// If this video is already open as the
// current photoswipe slide, the fullscreen
// button toggles proper fullscreen.
player.fullscreen.toggle();
} else {
// Otherwise the fullscreen button opens
// the video as current photoswipe slide.
//
// (Don't pause the video while it's
// being transitioned to a slide.)
if (player.playing) {
setTimeout(() => player.play(), 1);
}
lightbox.loadAndOpen(parseInt(video.dataset.pswpIndex), {
gallery: video.closest(".photoswipe-gallery")
});
}
lightbox.loadAndOpen(parseInt(video.dataset.pswpIndex), {
gallery: video.closest(".photoswipe-gallery")
});
return false;
}
}