ps: improve thumb behavior

Signed-off-by: Varun Patil <varunpatil@ucla.edu>

src/components/viewer/PsImage.ts

@@ -14,6 +14,7 @@ export default class ImageContentSetup {
     lightbox.on("zoomPanUpdate", this.zoomPanUpdate.bind(this));
     lightbox.on("slideActivate", this.slideActivate.bind(this));
     lightbox.addFilter("isContentLoading", this.isContentLoading.bind(this));
+    lightbox.addFilter("placeholderSrc", this.placeholderSrc.bind(this));
   }
 
   isContentLoading(isLoading: boolean, content: any) {
@@ -33,16 +34,14 @@ export default class ImageContentSetup {
     e.preventDefault();
   }
 
+  placeholderSrc(placeholderSrc: string, content: any) {
+    return content.data.msrc || placeholderSrc;
+  }
+
   getXImgElem(content: any, onLoad: () => void): HTMLImageElement {
     const img = document.createElement("img");
     img.classList.add("pswp__img", "ximg");
-
-    // Load thumbnail in case the user is scrolling fast
-    if (content.data.msrc) {
-      img.src = content.data.msrc;
-    } else {
-      img.style.visibility = "hidden";
-    }
+    img.style.visibility = "hidden";
 
     // Fetch with Axios
     fetchImage(content.data.src).then((blob) => {

src/components/viewer/PsVideo.ts

@@ -44,10 +44,6 @@ class VideoContentSetup {
     lightbox.on("contentDeactivate", this.onContentDeactivate.bind(this));
     lightbox.on("contentResize", this.onContentResize.bind(this));
 
-    lightbox.addFilter(
-      "isKeepingPlaceholder",
-      this.isKeepingPlaceholder.bind(this)
-    );
     lightbox.addFilter("isContentZoomable", this.isContentZoomable.bind(this));
     lightbox.addFilter(
       "useContentPlaceholder",
@@ -240,8 +236,8 @@ class VideoContentSetup {
   }
 
   destroyVideo(content: any) {
-    if (isVideoContent(content) && content.videojs) {
-      content.videojs.dispose?.();
+    if (isVideoContent(content)) {
+      content.videojs?.dispose?.();
       content.videojs = null;
 
       content.plyr?.elements?.container?.remove();
@@ -438,12 +434,7 @@ class VideoContentSetup {
   }
 
   onContentDestroy({ content }) {
-    if (isVideoContent(content)) {
-      if (content.videojs) {
-        content.videojs.dispose?.();
-        content.videojs = null;
-      }
-    }
+    this.destroyVideo(content);
   }
 
   onContentResize(e) {
@@ -471,18 +462,8 @@ class VideoContentSetup {
     }
   }
 
-  isKeepingPlaceholder(isZoomable, content) {
-    if (isVideoContent(content)) {
-      return false;
-    }
-    return isZoomable;
-  }
-
   isContentZoomable(isZoomable, content) {
-    if (isVideoContent(content)) {
-      return false;
-    }
-    return isZoomable;
+    return !isVideoContent(content) && isZoomable;
   }
 
   onContentActivate({ content }) {
@@ -497,40 +478,30 @@ class VideoContentSetup {
     const content = e.content;
     if (!isVideoContent(e.content)) return;
 
-    // stop default content load
+    // Stop default content load
     e.preventDefault();
+    content.type = "video";
 
     if (content.element) return;
 
     // Create DIV
     content.element = document.createElement("div");
-    content.element.classList.add("pswp__img");
-    content.element.style.background = `url(${content.data.msrc})`;
-    content.element.style.backgroundSize = "cover";
+    content.element.classList.add("video-container");
 
-    if (config_videoIsSetup) {
-      content.state = "loading";
-      content.type = "video";
-    } else {
-      // Stop if video not setup
+    // Stop if video not setup
+    if (!config_videoIsSetup) {
       content.element.innerHTML = t(
         "memories",
         "Video not configured. Run occ memories:video-setup"
       );
-      content.element.style.color = "red";
-      content.element.style.display = "flex";
-      content.element.style.alignItems = "center";
-      content.element.style.justifyContent = "center";
+      content.element.classList.add("error");
     }
 
     content.onLoaded();
   }
 
-  useContentPlaceholder(usePlaceholder, content) {
-    if (isVideoContent(content)) {
-      return true;
-    }
-    return usePlaceholder;
+  useContentPlaceholder(usePlaceholder: boolean, content: any) {
+    return isVideoContent(content) || usePlaceholder;
   }
 }
 

src/components/viewer/Viewer.vue

@@ -1256,6 +1256,15 @@ export default defineComponent({
   .pswp__top-bar {
     background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.3));
   }
+
+  .video-container {
+    &.error {
+      color: red;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 }
 
 :deep .video-js .vjs-big-play-button {