sidebar: compat for Nextcloud 28

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

src/App.vue

@@ -66,7 +66,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 
 import NcContent from '@nextcloud/vue/dist/Components/NcContent';
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent';
@@ -78,14 +78,12 @@ import { translate as t } from '@nextcloud/l10n';
 
 import * as utils from './services/utils';
 import * as nativex from './native';
-import router from './router';
 import staticConfig from './services/static-config';
 import UserConfig from './mixins/UserConfig';
 import Timeline from './components/Timeline.vue';
 import Settings from './components/Settings.vue';
 import FirstStart from './components/FirstStart.vue';
 import Viewer from './components/viewer/Viewer.vue';
-import Metadata from './components/Metadata.vue';
 import Sidebar from './components/Sidebar.vue';
 import MobileNav from './components/MobileNav.vue';
 import MobileHeader from './components/MobileHeader.vue';
@@ -158,7 +156,6 @@ export default defineComponent({
 
   data: () => ({
     navItems: [] as NavItem[],
-    metadataComponent: null as any,
     settingsOpen: false,
   }),
 
@@ -254,32 +251,6 @@ export default defineComponent({
     // Set theme color to default
     nativex.setTheme();
 
-    // Register sidebar metadata tab
-    globalThis.OCA?.Files?.Sidebar?.registerTab(
-      new globalThis.OCA.Files.Sidebar.Tab({
-        id: 'memories-metadata',
-        name: this.t('memories', 'Info'),
-        icon: 'icon-details',
-
-        mount(el: HTMLElement, fileInfo: { id: string | number }, context: any) {
-          this.metadataComponent?.$destroy?.();
-          this.metadataComponent = new Vue({
-            render: (h) => h(Metadata),
-            router,
-          });
-          this.metadataComponent.$mount(el);
-          this.metadataComponent.$children[0].update(Number(fileInfo.id));
-        },
-        update(fileInfo: { id: string | number }) {
-          this.metadataComponent.$children[0].update(Number(fileInfo.id));
-        },
-        destroy() {
-          this.metadataComponent?.$destroy?.();
-          this.metadataComponent = null;
-        },
-      }),
-    );
-
     // Check for native interface
     if (this.native) {
       document.documentElement.classList.add('native');

src/assets/info.svg

@@ -0,0 +1,3 @@
+<svg fill="fillColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
+</svg>

src/components/Sidebar.vue

@@ -16,17 +16,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue, { defineComponent } from 'vue';
 
 import NcActions from '@nextcloud/vue/dist/Components/NcActions';
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton';
 
 import Metadata from './Metadata.vue';
-import { IImageInfo, IPhoto } from '../types';
+import { IPhoto } from '../types';
 
 import * as utils from '../services/utils';
 
 import CloseIcon from 'vue-material-design-icons/Close.vue';
+import InfoSvg from '../assets/info.svg';
 
 export default defineComponent({
   name: 'Sidebar',
@@ -89,6 +90,13 @@ export default defineComponent({
       setTab: this.setTab.bind(this),
       getWidth: this.getWidth.bind(this),
     };
+
+    // Register native tab after DOMContentLoaded
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', this.registerNative.bind(this)); // wait for it
+    } else {
+      this.registerNative(); // already fired
+    }
   },
 
   beforeDestroy() {
@@ -161,6 +169,44 @@ export default defineComponent({
       this.native?.setFullScreenMode?.(false);
       this.handleClose();
     },
+
+    /** Register the Nextcloud Sidebar component */
+    async registerNative() {
+      // Wait just in case the sidebar isn't avaialble yet
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Pass router to the component
+      const router = this.$router;
+
+      // Component instance
+      let component: (Vue & { $children: readonly [InstanceType<typeof Metadata>] }) | null;
+
+      // Register sidebar tab
+      globalThis.OCA?.Files?.Sidebar?.registerTab(
+        new globalThis.OCA.Files.Sidebar.Tab({
+          id: 'memories-metadata',
+          name: this.t('memories', 'Info'),
+          icon: 'icon-details',
+          iconSvg: window.atob(InfoSvg.split(',')[1]), // base64 to svg
+
+          mount(el: HTMLElement, fileInfo: { id: string | number }, context: any) {
+            component?.$destroy?.();
+            component = new Vue({ render: (h) => h(Metadata), router });
+            component.$mount(el);
+            component.$children[0].update(Number(fileInfo.id));
+          },
+
+          update(fileInfo: { id: string | number }) {
+            component?.$children[0].update(Number(fileInfo.id));
+          },
+
+          destroy() {
+            component?.$destroy?.();
+            component = null;
+          },
+        }),
+      );
+    },
   },
 });
 </script>