all: make OCA dep optional

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

src/App.vue

@@ -212,30 +212,27 @@ export default defineComponent({
     root.style.setProperty('--plyr-color-main', colorPrimary);
 
     // Register sidebar metadata tab
-    const OCA = globalThis.OCA;
+    globalThis.OCA?.Files?.Sidebar?.registerTab(
-    if (OCA.Files && OCA.Files.Sidebar) {
+      new globalThis.OCA.Files.Sidebar.Tab({
-      OCA.Files.Sidebar.registerTab(
+        id: 'memories-metadata',
-        new OCA.Files.Sidebar.Tab({
+        name: this.t('memories', 'Info'),
-          id: 'memories-metadata',
+        icon: 'icon-details',
-          name: this.t('memories', 'Info'),
-          icon: 'icon-details',
 
-          mount(el, fileInfo, context) {
+        mount(el, fileInfo, context) {
-            this.metadataComponent?.$destroy?.();
+          this.metadataComponent?.$destroy?.();
-            this.metadataComponent = new Vue(Metadata as any);
+          this.metadataComponent = new Vue(Metadata as any);
-            this.metadataComponent.$mount(el);
+          this.metadataComponent.$mount(el);
-            this.metadataComponent.update(Number(fileInfo.id));
+          this.metadataComponent.update(Number(fileInfo.id));
-          },
+        },
-          update(fileInfo) {
+        update(fileInfo) {
-            this.metadataComponent.update(Number(fileInfo.id));
+          this.metadataComponent.update(Number(fileInfo.id));
-          },
+        },
-          destroy() {
+        destroy() {
-            this.metadataComponent?.$destroy?.();
+          this.metadataComponent?.$destroy?.();
-            this.metadataComponent = null;
+          this.metadataComponent = null;
-          },
+        },
-        })
+      })
-      );
+    );
-    }
   },
 
   async beforeMount() {

src/components/Sidebar.vue

@@ -51,6 +51,27 @@ export default defineComponent({
     },
   },
 
+  created() {
+    if (globalThis.OCA) {
+      globalThis.OCA.Files ??= {};
+
+      // TODO: remove when we have a proper fileinfo standalone library
+      // original scripts are loaded from
+      // https://github.com/nextcloud/server/blob/5bf3d1bb384da56adbf205752be8f840aac3b0c5/lib/private/legacy/template.php#L120-L122
+      Object.assign(
+        globalThis.OCA.Files,
+        {
+          App: {
+            fileList: {
+              filesClient: (<any>globalThis.OC.Files).getClient(),
+            },
+          },
+        },
+        globalThis.OCA.Files
+      );
+    }
+  },
+
   mounted() {
     subscribe('files:sidebar:opened', this.handleNativeOpen);
     subscribe('files:sidebar:closed', this.handleNativeClose);

src/components/viewer/Viewer.vue

@@ -361,7 +361,7 @@ export default defineComponent({
         this.originalTitle = document.title;
       }
       if (photo) {
-        document.title = `${photo.basename} - ${globalThis.OCA.Theming?.name}`;
+        document.title = `${photo.basename} - ${globalThis.OCA?.Theming?.name}`;
       } else {
         document.title = this.originalTitle;
         this.originalTitle = null;

src/main.ts

@@ -77,26 +77,6 @@ Vue.mixin(GlobalMixin as any);
 Vue.use(VueVirtualScroller);
 Vue.component('XImg', XImg);
 
-// https://github.com/nextcloud/photos/blob/156f280c0476c483cb9ce81769ccb0c1c6500a4e/src/main.js
-// TODO: remove when we have a proper fileinfo standalone library
-// original scripts are loaded from
-// https://github.com/nextcloud/server/blob/5bf3d1bb384da56adbf205752be8f840aac3b0c5/lib/private/legacy/template.php#L120-L122
-window.addEventListener('DOMContentLoaded', () => {
-  if (!globalThis.OCA.Files) {
-    globalThis.OCA.Files = {};
-  }
-  // register unused client for the sidebar to have access to its parser methods
-  Object.assign(
-    globalThis.OCA.Files,
-    {
-      App: {
-        fileList: { filesClient: (<any>globalThis.OC.Files).getClient() },
-      },
-    },
-    globalThis.OCA.Files
-  );
-});
-
 let app = null;
 
 const adminSection = document.getElementById('memories-admin-content');