qugalet/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-01-08 23:50:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

only pause video when switching photoswipe slides

Browse source
This commit is contained in:
f0x 2023-05-10 20:18:51 +02:00
parent 46e63b5faa
commit 437b6263df
1 changed files with 34 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
web/source/frontend/index.js
View file

@ -19,8 +19,6 @@
"use strict"; "use strict";
window.HELP_IMPROVE_VIDEOJS = false;
const Photoswipe = require("photoswipe/dist/umd/photoswipe.umd.min.js"); const Photoswipe = require("photoswipe/dist/umd/photoswipe.umd.min.js");
const PhotoswipeLightbox = require("photoswipe/dist/umd/photoswipe-lightbox.umd.min.js"); const PhotoswipeLightbox = require("photoswipe/dist/umd/photoswipe-lightbox.umd.min.js");
const PhotoswipeCaptionPlugin = require("photoswipe-dynamic-caption-plugin").default; const PhotoswipeCaptionPlugin = require("photoswipe-dynamic-caption-plugin").default;
@ -49,7 +47,6 @@ new PhotoswipeCaptionPlugin(lightbox, {
lightbox.addFilter('itemData', (item) => { lightbox.addFilter('itemData', (item) => {
const el = item.element; const el = item.element;
console.log(el);
if (el && el.classList.contains("plyr-video")) { if (el && el.classList.contains("plyr-video")) {
const parentNode = el._plyrContainer.parentNode; const parentNode = el._plyrContainer.parentNode;
@ -61,6 +58,9 @@ lightbox.addFilter('itemData', (item) => {
}, },
close() { close() {
parentNode.appendChild(el._plyrContainer); parentNode.appendChild(el._plyrContainer);
},
pause() {
el._player.pause();
} }
}, },
width: parseInt(el.dataset.pswpWidth), width: parseInt(el.dataset.pswpWidth),
@ -73,7 +73,6 @@ lightbox.addFilter('itemData', (item) => {
lightbox.on("contentActivate", (e) => { lightbox.on("contentActivate", (e) => {
const { content } = e; const { content } = e;
if (content.data._video != undefined) { if (content.data._video != undefined) {
console.log("activate", e);
content.data._video.open(content.element); content.data._video.open(content.element);
} }
}); });
@ -81,13 +80,12 @@ lightbox.on("contentActivate", (e) => {
lightbox.on("contentDeactivate", (e) => { lightbox.on("contentDeactivate", (e) => {
const { content } = e; const { content } = e;
if (content.data._video != undefined) { if (content.data._video != undefined) {
console.log("deactivate", e); content.data._video.pause();
content.data._video.close(); content.data._video.close();
} }
}); });
lightbox.on("close", function () { lightbox.on("close", function () {
console.log("close", lightbox.pswp);
if (lightbox.pswp.currSlide.data._video != undefined) { if (lightbox.pswp.currSlide.data._video != undefined) {
lightbox.pswp.currSlide.data._video.close(); lightbox.pswp.currSlide.data._video.close();
} }
@ -112,29 +110,6 @@ Array.from(document.getElementsByClassName("text-spoiler")).forEach((spoiler) =>
} }
}); });
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: () => {
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) => { Array.from(document.getElementsByClassName("video-spoiler")).forEach((spoiler) => {
const video = spoiler.getElementsByClassName("plyr-video")[0]; const video = spoiler.getElementsByClassName("plyr-video")[0];
@ -147,4 +122,33 @@ Array.from(document.getElementsByClassName("video-spoiler")).forEach((spoiler) =
spoiler.addEventListener("toggle", update); 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 },
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;
});