viewer: use axios for photoswipe

pull/460/head
Varun Patil 2023-02-25 21:33:40 -08:00
parent d86e9406d3
commit 8ae1fc8ddd
4 changed files with 41 additions and 2 deletions

View File

@ -0,0 +1,35 @@
import PhotoSwipe from "photoswipe";
import { isVideoContent } from "./PsVideo";
import { isLiveContent } from "./PsLivePhoto";
import { fetchImage } from "../frame/XImgCache";
export default class ImageContentSetup {
constructor(lightbox: PhotoSwipe) {
this.initLightboxEvents(lightbox);
}
initLightboxEvents(lightbox: PhotoSwipe) {
lightbox.on("contentLoad", this.onContentLoad.bind(this));
}
onContentLoad(e) {
if (isVideoContent(e.content) || isLiveContent(e.content)) return;
// Don't insert default image
e.preventDefault();
const content = e.content;
const img = document.createElement("img");
img.classList.add("pswp__img");
content.element = img;
// Fetch with Axios
fetchImage(content.data.src).then((blob) => {
const blobUrl = URL.createObjectURL(blob);
img.src = blobUrl;
img.onerror = img.onload = () => {
content.onLoaded();
URL.revokeObjectURL(blobUrl);
};
});
}
}

View File

@ -1,7 +1,7 @@
import PhotoSwipe from "photoswipe";
import * as utils from "../../services/Utils";
function isLiveContent(content): boolean {
export function isLiveContent(content): boolean {
// Do not play live photo if the slideshow is
// playing in full screen mode.
if (document.fullscreenElement) {

View File

@ -24,7 +24,7 @@ const config_video_default_quality = Number(
* @param {Slide|Content} content Slide or Content object
* @returns Boolean
*/
function isVideoContent(content): boolean {
export function isVideoContent(content): boolean {
return content?.data?.type === "video";
}

View File

@ -188,6 +188,7 @@ import * as utils from "../../services/Utils";
import ImageEditor from "./ImageEditor.vue";
import PhotoSwipe, { PhotoSwipeOptions } from "photoswipe";
import "photoswipe/style.css";
import PsImage from "./PsImage";
import PsVideo from "./PsVideo";
import PsLivePhoto from "./PsLivePhoto";
@ -563,6 +564,9 @@ export default defineComponent({
// Live photo support
new PsLivePhoto(<any>this.photoswipe, {});
// Image support
new PsImage(<any>this.photoswipe);
// Patch the close button to stop the slideshow
const _close = this.photoswipe.close.bind(this.photoswipe);
this.photoswipe.close = () => {