viewer: invalidate metadata during fast changes

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/Metadata.vue

@@ -54,14 +54,14 @@
     </div>
 
     <div v-if="lat && lon" class="map">
-      <iframe class="fill-block" :src="mapUrl" />
+      <iframe class="fill-block" :src="mapUrl"></iframe>
     </div>
   </div>
   <div class="loading-icon fill-block" v-else-if="loading">
     <XLoadingIcon />
   </div>
-  <div v-else>
+  <div v-else-if="error">
-    {{ t('memries', 'Failed to load metadata') }}
+    {{ t('memories', 'Failed to load metadata') }}
   </div>
 </template>
 
@@ -119,6 +119,7 @@ export default defineComponent({
     filename: '',
     exif: {} as IExif,
     baseInfo: {} as IImageInfo,
+    error: false,
 
     loading: 0,
     state: 0,
@@ -386,6 +387,7 @@ export default defineComponent({
     async update(photo: number | IPhoto): Promise<IImageInfo | null> {
       this.state = Math.random();
       this.loading = 0;
+      this.error = false;
       this.fileid = null;
       this.exif = {};
 
@@ -427,6 +429,10 @@ export default defineComponent({
       if (this.fileid) await this.update(this.fileid);
     },
 
+    invalidate() {
+      this.fileid = null;
+    },
+
     editDate() {
       _m.modals.editMetadata([_m.viewer.currentPhoto!], [1]);
     },
@@ -464,6 +470,7 @@ export default defineComponent({
         if (state === this.state) return res;
         return null;
       } catch (err) {
+        this.error = true;
         throw err;
       } finally {
         if (state === this.state) this.loading--;

src/components/Sidebar.vue

@@ -41,8 +41,9 @@ export default defineComponent({
   data: () => ({
     nativeOpen: false,
     reducedOpen: false,
-    basename: '',
+    basename: String(),
     lastKnownWidth: 0,
+    nativeMetadata: null as null | InstanceType<typeof Metadata>,
   }),
 
   computed: {
@@ -87,6 +88,7 @@ export default defineComponent({
       open: this.open.bind(this),
       close: this.close.bind(this),
       setTab: this.setTab.bind(this),
+      invalidate: this.invalidate.bind(this),
       getWidth: this.getWidth.bind(this),
     };
 
@@ -139,6 +141,11 @@ export default defineComponent({
       this.native?.setActiveTab(tab);
     },
 
+    invalidate() {
+      this.refs.metadata?.invalidate();
+      this.nativeMetadata?.invalidate();
+    },
+
     getWidth() {
       const sidebar = document.getElementById('app-sidebar-vue');
       this.lastKnownWidth = sidebar?.offsetWidth || this.lastKnownWidth;
@@ -186,7 +193,8 @@ export default defineComponent({
       const router = this.$router;
 
       // Component instance
-      let component: (Vue & { $children: readonly [InstanceType<typeof Metadata>] }) | null;
+      let component: any;
+      const self = this;
 
       // Register sidebar tab
       globalThis.OCA?.Files?.Sidebar?.registerTab(
@@ -200,16 +208,19 @@ export default defineComponent({
             component?.$destroy?.();
             component = new Vue({ render: (h) => h(Metadata), router });
             component.$mount(el);
-            component.$children[0].update(Number(fileInfo.id));
+
+            self.nativeMetadata = component.$children[0];
+            self.nativeMetadata?.update(Number(fileInfo.id));
           },
 
           update(fileInfo: { id: string | number }) {
-            component?.$children[0].update(Number(fileInfo.id));
+            self.nativeMetadata?.update(Number(fileInfo.id));
           },
 
           destroy() {
             component?.$destroy?.();
             component = null;
+            self.nativeMetadata = null;
           },
         }),
       );

src/components/viewer/Viewer.vue

@@ -173,7 +173,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import { IImageInfo, IPhoto, IRowType, TimelineState } from '../../types';
+import { IImageInfo, IPhoto, TimelineState } from '../../types';
 import type { PsContent } from './types';
 
 import UserConfig from '../../mixins/UserConfig';
@@ -1063,6 +1063,9 @@ export default defineComponent({
       if (!photo) return;
       const abort = () => !this.isOpen || photo !== this.currentPhoto;
 
+      // Invalidate currently open metadata
+      _m.sidebar.invalidate();
+
       // Update the sidebar, first call immediate
       utils.setRenewingTimeout(
         this,

src/globals.d.ts

@@ -49,6 +49,7 @@ declare global {
       open: (photo: IPhoto | number, filename?: string, forceNative?: boolean) => void;
       close: () => void;
       setTab: (tab: string) => void;
+      invalidate: () => void;
       getWidth: () => number;
     };