Upload: Update search results after uploading files photoprism#4799

Signed-off-by: Michael Mayer <michael@photoprism.app>

Author: lastzero

frontend/src/common/config.js

@@ -169,10 +169,6 @@ export default class Config {
   setValues(values) {
     if (!values) return;
 
-    if (this.debug) {
-      console.log("config: updated", values);
-    }
-
     if (values.jsUri && this.values.jsUri !== values.jsUri) {
       $event.publish("dialog.update", { values });
     }

frontend/src/common/event.js

@@ -1,5 +1,41 @@
-import * as pubsub from "pubsub-js";
+// True if debug and/or trace logs should be recorded.
+const debug = window.__CONFIG__?.debug;
+const trace = window.__CONFIG__?.trace;
 
-const $event = pubsub;
+// Use global variable to configure pubsub.js, a dependency-free publish/subscribe event hub:
+// https://sahadar.github.io/pubsub/#installation
+window.pubsub = {
+  separator: ".",
+  recurrent: true,
+  async: true,
+  log: trace,
+};
 
+// Import pubsub.js, see https://www.npmjs.com/package/pubsub-js.
+import * as PubSub from "pubsub-js";
+
+// Use $event as a generic alias for publishing and subscribing to events.
+const $event = PubSub;
+
+// Log all events when running in trace log mode, and log config events in debug mode.
+// Event names are displayed in blue so that they are easy to recognize.
+if (trace) {
+  $event.subscribeAll((ev, data) => {
+    if (data) {
+      console.debug(`%c${ev}`, "background: transparent; color: #1E88E5; font-weight: normal;", data);
+    } else {
+      console.debug(`%c${ev}`, "background: transparent; color: #1E88E5; font-weight: normal;");
+    }
+  });
+} else if (debug) {
+  $event.subscribe("config", (ev, data) => {
+    if (data) {
+      console.debug(`%c${ev}`, "background: transparent; color: #1E88E5; font-weight: normal;", data);
+    } else {
+      console.debug(`%c${ev}`, "background: transparent; color: #1E88E5; font-weight: normal;");
+    }
+  });
+}
+
+// Export $event to publish and subscribe to events.
 export default $event;

frontend/src/common/view.js

@@ -213,13 +213,15 @@ export class View {
       return false;
     }
 
-    // If debug mode is enabled, create a new log group in the browser console:
+    // When debug mode is enabled, write logs to a collapsed group in the browser console:
     // https://developer.mozilla.org/en-US/docs/Web/API/console/groupCollapsed_static
     if (debug) {
-      const scope = this.scopes.map((s) => `${s?.$options?.name} #${s?.$?.uid.toString()}`).join(" ▶ ");
+      const scope = this.scopes.map((s) => `${s?.$options?.name} #${s?.$?.uid.toString()}`).join(" › ");
+      // To make them easy to recognize, the collapsed view logs are displayed
+      // in the browser console with bold white text on a purple background.
       console.groupCollapsed(
         `%c${scope}`,
-        "background: #502A85; color: white; padding: 2px 6px; border-radius: 8px; font-weight: bold;"
+        "background: #502A85; color: white; padding: 3px 5px; border-radius: 8px; font-weight: bold;"
       );
       console.log("data:", toRaw(c?.$data));
     }

frontend/src/component/dialogs.vue

@@ -21,8 +21,8 @@
 <script>
 import Album from "model/album";
 
-import PPhotoUploadDialog from "component/photo/upload/dialog.vue";
 import PPhotoEditDialog from "component/photo/edit/dialog.vue";
+import PPhotoUploadDialog from "component/photo/upload/dialog.vue";
 import PUpdate from "component/update.vue";
 import PLightbox from "component/lightbox.vue";
 

frontend/src/component/lightbox.vue

@@ -1436,9 +1436,9 @@ export default {
           // see https://developer.chrome.com/blog/play-request-was-interrupted.
           const playPromise = video.play();
           if (playPromise !== undefined) {
-            playPromise.catch((e) => {
-              if (this.trace) {
-                console.log(e.message);
+            playPromise.catch((err) => {
+              if (this.trace && err && err.message) {
+                console.log(err.message);
               }
             });
           }

frontend/src/component/photo/view/cards.vue

@@ -442,9 +442,10 @@ export default {
           // see https://developer.chrome.com/blog/play-request-was-interrupted.
           const playPromise = player.play();
           if (playPromise !== undefined) {
-            playPromise.catch((e) => {
-              if (this.trace) {
-                console.log(e.message);
+            playPromise.catch((err) => {
+              if (this.trace && err && err.message) {
+                // Ignore this error, or uncomment the following line to log it.
+                // console.debug(err.message);
               }
             });
           }
@@ -513,14 +514,14 @@ export default {
        */
       this.$forceUpdate();
     },
-    onOpen(ev, index, showMerged, preferVideo) {
+    onOpen(ev, index, showMerged) {
       const inputType = this.input.eval(ev, index);
 
       if (inputType !== ClickShort) {
         return;
       }
 
-      this.openPhoto(index, showMerged, preferVideo);
+      this.openPhoto(index, showMerged);
     },
     onClick(ev, index) {
       const inputType = this.input.eval(ev, index);

frontend/src/component/photo/view/list.vue

@@ -79,7 +79,7 @@
                     <button
                       v-else-if="m.Type === 'video' || m.Type === 'live' || m.Type === 'animated'"
                       class="input-open"
-                      @click.stop.prevent="openPhoto(index, false, m.Type === 'live')"
+                      @click.stop.prevent="openPhoto(index, false)"
                     >
                       <i v-if="m.Type === 'live'" class="action-live" :title="$gettext('Live')"><icon-live-photo /></i>
                       <i v-if="m.Type === 'animated'" class="mdi mdi-file-gif-box" :title="$gettext('Animated')" />

frontend/src/component/photo/view/mosaic.vue

@@ -268,9 +268,10 @@ export default {
           // see https://developer.chrome.com/blog/play-request-was-interrupted.
           const playPromise = player.play();
           if (playPromise !== undefined) {
-            playPromise.catch((e) => {
-              if (this.trace) {
-                console.log(e.message);
+            playPromise.catch((err) => {
+              if (this.trace && err && err.message) {
+                // Ignore this error, or uncomment the following line to log it.
+                // console.debug(err.message);
               }
             });
           }
@@ -327,14 +328,14 @@ export default {
       this.$clipboard.toggle(photo);
       this.$forceUpdate();
     },
-    onOpen(ev, index, showMerged, preferVideo) {
+    onOpen(ev, index, showMerged) {
       const inputType = this.input.eval(ev, index);
 
       if (inputType !== ClickShort) {
         return;
       }
 
-      this.openPhoto(index, showMerged, preferVideo);
+      this.openPhoto(index, showMerged);
     },
     onClick(ev, index) {
       const inputType = this.input.eval(ev, index);

frontend/src/page/album/photos.vue

@@ -292,7 +292,7 @@ export default {
       // Open Edit Dialog
       this.$event.publish("dialog.edit", { selection, album: this.album, index, tab });
     },
-    openPhoto(index, showMerged = false, preferVideo = false) {
+    openPhoto(index, showMerged = false) {
       if (this.loading || !this.listen || this.lightbox.loading || !this.results[index]) {
         return false;
       }
@@ -304,20 +304,6 @@ export default {
         showMerged = false;
       }
 
-      /**
-       * If the file is a video or an animation (like gif), then we always play
-       * it in the video-player.
-       * If the file is a live-image (an image with an embedded video), then we only
-       * play it in the video-player if specifically requested.
-       * This is because:
-       * 1. the lower-resolution video in these files is already
-       *    played when hovering the element (which does not happen for regular
-       *    video files)
-       * 2. The video in live-images is an addon. The main focus is usually still
-       *    the high resolution image inside
-       *
-       * preferVideo is true, when the user explicitly clicks the live-image-icon.
-       */
       if (showMerged) {
         this.$lightbox.openModels(Thumb.fromFiles([selected]), 0);
       } else {
@@ -326,8 +312,10 @@ export default {
 
       return true;
     },
-    loadMore() {
-      if (this.scrollDisabled || this.$view.isHidden(this)) return;
+    loadMore(force) {
+      if (!force && (this.scrollDisabled || this.$view.isHidden(this))) {
+        return;
+      }
 
       this.scrollDisabled = true;
       this.listen = false;
@@ -434,10 +422,11 @@ export default {
 
       if (this.model.Order !== this.filter.order) {
         this.model.Order = this.filter.order;
-        this.updateAlbum();
       }
 
-      if (this.loading) return;
+      if (this.loading) {
+        return;
+      }
 
       const query = {
         view: this.settings.view,
@@ -487,6 +476,15 @@ export default {
       this.loadMore();
     },
     search() {
+      /**
+       * search is called on mount or route change. If the route changed to an
+       * open lightbox, no search is required. There is no reason to do an
+       * initial results load, if the results aren't currently visible
+       */
+      if (this.lightbox.open) {
+        return;
+      }
+
       this.scrollDisabled = true;
 
       // Don't query the same data more than once
@@ -587,7 +585,7 @@ export default {
             this.filter.order = this.model.Order;
             this.updateQuery();
           } else {
-            this.loadMore();
+            this.loadMore(true);
           }
 
           return;
@@ -623,7 +621,9 @@ export default {
       }
     },
     onUpdate(ev, data) {
-      if (!this.listen) return;
+      if (!this.listen) {
+        return;
+      }
 
       if (!data || !data.entities) {
         return;

frontend/src/page/photos.vue

@@ -434,7 +434,7 @@ export default {
       // Open Edit Dialog
       this.$event.publish("dialog.edit", { selection, album: null, index, tab });
     },
-    openPhoto(index, showMerged = false, preferVideo = false) {
+    openPhoto(index, showMerged = false) {
       if (this.loading || !this.listen || this.lightbox.loading || !this.results[index]) {
         return false;
       }
@@ -446,20 +446,6 @@ export default {
         showMerged = false;
       }
 
-      /**
-       * If the file is a video or an animation (like gif), then we always play
-       * it in the video-player.
-       * If the file is a live-image (an image with an embedded video), then we only
-       * play it in the video-player if specifically requested.
-       * This is because:
-       * 1. the lower-resolution video in these files is already
-       *    played when hovering the element (which does not happen for regular
-       *    video files)
-       * 2. The video in live-images is an addon. The main focus is usually still
-       *    the high resolution image inside
-       *
-       * preferVideo is true, when the user explicitly clicks the live-image-icon.
-       */
       if (showMerged) {
         this.$lightbox.openModels(Thumb.fromFiles([selected]), 0);
       } else {
@@ -468,8 +454,10 @@ export default {
 
       return true;
     },
-    loadMore() {
-      if (this.scrollDisabled || this.$view.isHidden(this)) return;
+    loadMore(force) {
+      if (!force && (this.scrollDisabled || this.$view.isHidden(this))) {
+        return;
+      }
 
       this.scrollDisabled = true;
       this.listen = false;
@@ -698,9 +686,11 @@ export default {
         });
     },
     onImportCompleted() {
-      if (!this.listen) return;
+      if (!this.listen) {
+        return;
+      }
 
-      this.loadMore();
+      this.loadMore(true);
     },
     updateResults(entity) {
       this.results
@@ -731,7 +721,9 @@ export default {
       }
     },
     onUpdate(ev, data) {
-      if (!this.listen) return;
+      if (!this.listen) {
+        return;
+      }
 
       if (!data || !data.entities || !Array.isArray(data.entities)) {
         return;