sidebar: add proxy component

src/App.vue

@@ -44,6 +44,8 @@
     </NcAppContent>
 
     <Settings :open.sync="settingsOpen" />
+
+    <Sidebar />
   </NcContent>
 </template>
 
@@ -64,6 +66,7 @@ import Timeline from "./components/Timeline.vue";
 import Settings from "./components/Settings.vue";
 import FirstStart from "./components/FirstStart.vue";
 import Metadata from "./components/Metadata.vue";
+import Sidebar from "./components/Sidebar.vue";
 
 import ImageMultiple from "vue-material-design-icons/ImageMultiple.vue";
 import FolderIcon from "vue-material-design-icons/Folder.vue";
@@ -89,6 +92,7 @@ export default defineComponent({
     Timeline,
     Settings,
     FirstStart,
+    Sidebar,
 
     ImageMultiple,
     FolderIcon,

src/components/Sidebar.vue

@@ -0,0 +1,75 @@
+<template>
+  <aside class="app-sidebar" v-if="false"></aside>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { subscribe, unsubscribe, emit } from "@nextcloud/event-bus";
+
+export default defineComponent({
+  name: "Sidebar",
+  components: {},
+
+  data: () => {
+    return {
+      nativeOpen: false,
+    };
+  },
+
+  mounted() {
+    subscribe("files:sidebar:opened", this.handleNativeOpen);
+    subscribe("files:sidebar:closed", this.handleNativeClose);
+
+    globalThis.mSidebar = {
+      open: this.open.bind(this),
+      close: this.close.bind(this),
+      setTab: this.setTab.bind(this),
+    };
+  },
+
+  beforeDestroy() {
+    unsubscribe("files:sidebar:opened", this.handleNativeOpen);
+    unsubscribe("files:sidebar:closed", this.handleNativeClose);
+  },
+
+  methods: {
+    open(filename: string) {
+      globalThis.OCA.Files.Sidebar.setFullScreenMode?.(true);
+      globalThis.OCA.Files.Sidebar.open(filename);
+    },
+
+    close() {
+      globalThis.OCA.Files.Sidebar.close();
+    },
+
+    setTab(tab: string) {
+      globalThis.OCA.Files.Sidebar.setActiveTab(tab);
+    },
+
+    handleNativeOpen(event: any) {
+      this.nativeOpen = true;
+      emit("memories:sidebar:opened", event);
+    },
+
+    handleNativeClose(event: any) {
+      this.nativeOpen = false;
+      emit("memories:sidebar:closed", event);
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss">
+aside.app-sidebar {
+  position: fixed;
+  right: 0;
+  z-index: 100000000;
+}
+</style>
+
+<style lang="scss">
+// Prevent sidebar from becoming too big
+aside.app-sidebar {
+  max-width: 360px !important;
+}
+</style>

src/components/modal/FolderShareModal.vue

@@ -85,7 +85,7 @@ export default defineComponent({
     open() {
       this.folderPath = utils.getFolderRoutePath(this.config_foldersPath);
       this.show = true;
-      globalThis.OCA.Files.Sidebar.setActiveTab("sharing");
+      globalThis.mSidebar.setTab("sharing");
       this.refreshUrls();
     },
 

src/components/modal/Modal.vue

@@ -51,26 +51,24 @@ export default defineComponent({
 
   beforeMount() {
     if (this.sidebar) {
-      subscribe("files:sidebar:opened", this.handleAppSidebarOpen);
-      subscribe("files:sidebar:closed", this.handleAppSidebarClose);
+      subscribe("memories:sidebar:opened", this.handleAppSidebarOpen);
+      subscribe("memories:sidebar:closed", this.handleAppSidebarClose);
       window.addEventListener("DOMNodeInserted", this.handlePopover);
-      globalThis.OCA?.Files?.Sidebar?.setFullScreenMode?.(true);
     }
   },
 
   beforeDestroy() {
     if (this.sidebar) {
-      unsubscribe("files:sidebar:opened", this.handleAppSidebarOpen);
-      unsubscribe("files:sidebar:closed", this.handleAppSidebarClose);
+      unsubscribe("memories:sidebar:opened", this.handleAppSidebarOpen);
+      unsubscribe("memories:sidebar:closed", this.handleAppSidebarClose);
       window.removeEventListener("DOMNodeInserted", this.handlePopover);
-      globalThis.OCA?.Files?.Sidebar?.setFullScreenMode?.(false);
-      globalThis.OCA?.Files?.Sidebar?.close();
+      globalThis.mSidebar.close();
     }
   },
 
   mounted() {
     if (this.sidebar) {
-      globalThis.OCA.Files.Sidebar.open(this.sidebar);
+      globalThis.mSidebar.open(this.sidebar);
     }
   },
 

src/components/viewer/Viewer.vue

@@ -257,15 +257,15 @@ export default defineComponent({
   }),
 
   mounted() {
-    subscribe("files:sidebar:opened", this.handleAppSidebarOpen);
-    subscribe("files:sidebar:closed", this.handleAppSidebarClose);
+    subscribe("memories:sidebar:opened", this.handleAppSidebarOpen);
+    subscribe("memories:sidebar:closed", this.handleAppSidebarClose);
     subscribe("files:file:created", this.handleFileUpdated);
     subscribe("files:file:updated", this.handleFileUpdated);
   },
 
   beforeDestroy() {
-    unsubscribe("files:sidebar:opened", this.handleAppSidebarOpen);
-    unsubscribe("files:sidebar:closed", this.handleAppSidebarClose);
+    unsubscribe("memories:sidebar:opened", this.handleAppSidebarOpen);
+    unsubscribe("memories:sidebar:closed", this.handleAppSidebarClose);
     unsubscribe("files:file:created", this.handleFileUpdated);
     unsubscribe("files:file:updated", this.handleFileUpdated);
   },
@@ -1017,9 +1017,8 @@ export default defineComponent({
     /** Open the sidebar */
     async openSidebar(photo?: IPhoto) {
       const fInfo = await dav.getFiles([photo || this.currentPhoto]);
-      globalThis.OCA?.Files?.Sidebar?.setFullScreenMode?.(true);
-      globalThis.OCA.Files.Sidebar.setActiveTab("memories-metadata");
-      globalThis.OCA.Files.Sidebar.open(fInfo[0].filename);
+      globalThis.mSidebar.setTab("memories-metadata");
+      globalThis.mSidebar.open(fInfo[0].filename);
     },
 
     async updateSizeWithoutAnim() {
@@ -1056,8 +1055,7 @@ export default defineComponent({
 
     /** Hide the sidebar, without marking it as closed */
     hideSidebar() {
-      globalThis.OCA?.Files?.Sidebar?.close();
-      globalThis.OCA?.Files?.Sidebar?.setFullScreenMode?.(false);
+      globalThis.mSidebar.close();
     },
 
     /** Close the sidebar */

src/global.scss

@@ -43,11 +43,6 @@ body.has-viewer header {
   overflow-x: hidden;
 }
 
-// Prevent sidebar from becoming too big
-aside.app-sidebar {
-  max-width: 360px !important;
-}
-
 // Fill all available space
 .fill-block {
   width: 100%;

src/main.ts

@@ -23,6 +23,13 @@ declare global {
   var OCP: Nextcloud.v24.OCP;
 
   var editMetadata: (photos: IPhoto[], sections?: number[]) => void;
+
+  var mSidebar: {
+    open: (filename: string) => void;
+    close: () => void;
+    setTab: (tab: string) => void;
+  };
+
   var currentViewerPhoto: IPhoto;
 
   var windowInnerWidth: number; // cache