viewer: use axios for photoswipe

src/components/viewer/PsImage.ts

@@ -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);
+      };
+    });
+  }
+}

src/components/viewer/PsLivePhoto.ts

@@ -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) {

src/components/viewer/PsVideo.ts

@@ -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";
 }
 

src/components/viewer/Viewer.vue

@@ -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 = () => {