From 8ae1fc8ddd221de16e84d19bd30bb72760cabaef Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Sat, 25 Feb 2023 21:33:40 -0800
Subject: [PATCH] viewer: use axios for photoswipe

---
 src/components/viewer/PsImage.ts     | 35 ++++++++++++++++++++++++++++
 src/components/viewer/PsLivePhoto.ts |  2 +-
 src/components/viewer/PsVideo.ts     |  2 +-
 src/components/viewer/Viewer.vue     |  4 ++++
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 src/components/viewer/PsImage.ts

diff --git a/src/components/viewer/PsImage.ts b/src/components/viewer/PsImage.ts
new file mode 100644
index 00000000..c38317d1
--- /dev/null
+++ b/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);
+      };
+    });
+  }
+}
diff --git a/src/components/viewer/PsLivePhoto.ts b/src/components/viewer/PsLivePhoto.ts
index 1b647a88..84d4069b 100644
--- a/src/components/viewer/PsLivePhoto.ts
+++ b/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) {
diff --git a/src/components/viewer/PsVideo.ts b/src/components/viewer/PsVideo.ts
index baaa8603..00a59c44 100644
--- a/src/components/viewer/PsVideo.ts
+++ b/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";
 }
 
diff --git a/src/components/viewer/Viewer.vue b/src/components/viewer/Viewer.vue
index 2ff0e97b..64232d66 100644
--- a/src/components/viewer/Viewer.vue
+++ b/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 = () => {