gtsocial-umbx

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

index.js (4067B)

      1 /*
      2 	GoToSocial
      3 	Copyright (C) GoToSocial Authors admin@gotosocial.org
      4 	SPDX-License-Identifier: AGPL-3.0-or-later
      5 
      6 	This program is free software: you can redistribute it and/or modify
      7 	it under the terms of the GNU Affero General Public License as published by
      8 	the Free Software Foundation, either version 3 of the License, or
      9 	(at your option) any later version.
     10 
     11 	This program is distributed in the hope that it will be useful,
     12 	but WITHOUT ANY WARRANTY; without even the implied warranty of
     13 	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     14 	GNU Affero General Public License for more details.
     15 
     16 	You should have received a copy of the GNU Affero General Public License
     17 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
     18 */
     19 
     20 "use strict";
     21 
     22 const Photoswipe = require("photoswipe/dist/umd/photoswipe.umd.min.js");
     23 const PhotoswipeLightbox = require("photoswipe/dist/umd/photoswipe-lightbox.umd.min.js");
     24 const PhotoswipeCaptionPlugin = require("photoswipe-dynamic-caption-plugin").default;
     25 const Plyr = require("plyr");
     26 
     27 let [_, _user, type, id] = window.location.pathname.split("/");
     28 if (type == "statuses") {
     29 	let firstStatus = document.getElementsByClassName("thread")[0].children[0];
     30 	if (firstStatus.id != id) {
     31 		document.getElementById(id).scrollIntoView();
     32 	}
     33 }
     34 
     35 const lightbox = new PhotoswipeLightbox({
     36 	gallery: '.photoswipe-gallery',
     37 	children: '.photoswipe-slide',
     38 	pswpModule: Photoswipe,
     39 });
     40 
     41 new PhotoswipeCaptionPlugin(lightbox, {
     42 	type: 'auto',
     43 	captionContent(slide) {
     44 		return slide.data.alt;
     45 	}
     46 });
     47 
     48 lightbox.addFilter('itemData', (item) => {
     49 	const el = item.element;
     50 	if (el && el.classList.contains("plyr-video")) {
     51 		const parentNode = el._plyrContainer.parentNode;
     52 
     53 		return {
     54 			alt: el.getAttribute("alt"),
     55 			_video: {
     56 				open(c) {
     57 					c.appendChild(el._plyrContainer);
     58 				},
     59 				close() {
     60 					parentNode.appendChild(el._plyrContainer);
     61 				},
     62 				pause() {
     63 					el._player.pause();
     64 				}
     65 			},
     66 			width: parseInt(el.dataset.pswpWidth),
     67 			height: parseInt(el.dataset.pswpHeight)
     68 		};
     69 	}
     70 	return item;
     71 });
     72 
     73 lightbox.on("contentActivate", (e) => {
     74 	const { content } = e;
     75 	if (content.data._video != undefined) {
     76 		content.data._video.open(content.element);
     77 	}
     78 });
     79 
     80 lightbox.on("contentDeactivate", (e) => {
     81 	const { content } = e;
     82 	if (content.data._video != undefined) {
     83 		content.data._video.pause();
     84 		content.data._video.close();
     85 	}
     86 });
     87 
     88 lightbox.on("close", function () {
     89 	if (lightbox.pswp.currSlide.data._video != undefined) {
     90 		lightbox.pswp.currSlide.data._video.close();
     91 	}
     92 });
     93 
     94 lightbox.init();
     95 
     96 function dynamicSpoiler(className, updateFunc) {
     97 	Array.from(document.getElementsByClassName(className)).forEach((spoiler) => {
     98 		const update = updateFunc(spoiler);
     99 		if (update) {
    100 			update();
    101 			spoiler.addEventListener("toggle", update);
    102 		}
    103 	});
    104 }
    105 
    106 dynamicSpoiler("text-spoiler", (spoiler) => {
    107 	const button = spoiler.querySelector(".button");
    108 
    109 	return () => {
    110 		button.textContent = spoiler.open
    111 			? "Show less"
    112 			: "Show more";
    113 	};
    114 });
    115 
    116 dynamicSpoiler("media-spoiler", (spoiler) => {
    117 	const eye = spoiler.querySelector(".eye.button");
    118 	const video = spoiler.querySelector(".plyr-video");
    119 
    120 	return () => {
    121 		if (spoiler.open) {
    122 			eye.setAttribute("aria-label", "Hide media");
    123 		} else {
    124 			eye.setAttribute("aria-label", "Show media");
    125 			if (video) {
    126 				video.pause();
    127 			}
    128 		}
    129 	};
    130 });
    131 
    132 Array.from(document.getElementsByClassName("plyr-video")).forEach((video) => {
    133 	let player = new Plyr(video, {
    134 		title: video.title,
    135 		settings: ["loop"],
    136 		disableContextMenu: false,
    137 		hideControls: false,
    138 		tooltips: { contrors: true, seek: true },
    139 		iconUrl: "/assets/plyr.svg",
    140 		listeners: {
    141 			fullscreen: () => {
    142 				if (player.playing) {
    143 					setTimeout(() => {
    144 						player.play();
    145 					}, 1);
    146 				}
    147 				lightbox.loadAndOpen(parseInt(video.dataset.pswpIndex), {
    148 					gallery: video.closest(".photoswipe-gallery")
    149 				});
    150 
    151 				return false;
    152 			}
    153 		}
    154 	});
    155 
    156 	player.elements.container.title = video.title;
    157 	video._player = player;
    158 	video._plyrContainer = player.elements.container;
    159 });