sidebar: fix for albums and shares (fix #320)

lib/Controller/ImageController.php

@@ -193,15 +193,17 @@ class ImageController extends ApiBase
         // Get the image info
         $info = $this->timelineQuery->getInfoById($file->getId(), $basic);
 
-        // Get list of tags for this file
+        // Allow these ony for logged in users
-        if ($tags) {
+        if (null !== $this->userSession->getUser()) {
-            $info['tags'] = $this->getTags($file->getId());
+            // Get list of tags for this file
-        }
+            if ($tags) {
+                $info['tags'] = $this->getTags($file->getId());
+            }
 
-        // Get latest exif data if requested
+            // Get latest exif data if requested
-        // Allow this ony for logged in users
+            if ($current) {
-        if ($current && null !== $this->userSession->getUser()) {
+                $info['current'] = Exif::getExifFromFile($file);
-            $info['current'] = Exif::getExifFromFile($file);
+            }
         }
 
         return new JSONResponse($info, Http::STATUS_OK);

src/App.vue

@@ -191,6 +191,11 @@ export default defineComponent({
     // Register sidebar metadata tab
     const OCA = globalThis.OCA;
     if (OCA.Files && OCA.Files.Sidebar) {
+      const pf = (fileInfo) => {
+        fileInfo.fileid = Number(fileInfo.id);
+        return fileInfo;
+      };
+
       OCA.Files.Sidebar.registerTab(
         new OCA.Files.Sidebar.Tab({
           id: "memories-metadata",
@@ -201,10 +206,10 @@ export default defineComponent({
             this.metadataComponent?.$destroy?.();
             this.metadataComponent = new Vue(Metadata as any);
             this.metadataComponent.$mount(el);
-            this.metadataComponent.update(fileInfo);
+            this.metadataComponent.update(pf(fileInfo));
           },
           update(fileInfo) {
-            this.metadataComponent.update(fileInfo);
+            this.metadataComponent.update(pf(fileInfo));
           },
           destroy() {
             this.metadataComponent?.$destroy?.();

src/components/Metadata.vue

@@ -308,7 +308,7 @@ export default defineComponent({
       this.exif = {};
 
       const state = this.state;
-      const url = API.Q(API.IMAGE_INFO(fileInfo.id), "tags=1");
+      const url = API.Q(API.IMAGE_INFO(fileInfo.fileid), "tags=1");
       const res = await axios.get<any>(url);
       if (state !== this.state) return;
 

src/components/Sidebar.vue

@@ -1,18 +1,46 @@
 <template>
-  <aside class="app-sidebar" v-if="false"></aside>
+  <aside class="app-sidebar" v-if="reducedOpen">
+    <div class="title">
+      <h2>{{ filename }}</h2>
+
+      <NcActions :inline="1">
+        <NcActionButton :aria-label="t('memories', 'Close')" @click="close()">
+          {{ t("memories", "Close") }}
+          <template #icon> <CloseIcon :size="20" /> </template>
+        </NcActionButton>
+      </NcActions>
+    </div>
+
+    <Metadata ref="metadata" />
+  </aside>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import { subscribe, unsubscribe, emit } from "@nextcloud/event-bus";
 
+import NcActions from "@nextcloud/vue/dist/Components/NcActions";
+import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
+
+import Metadata from "./Metadata.vue";
+import { IFileInfo } from "../types";
+
+import CloseIcon from "vue-material-design-icons/Close.vue";
+
 export default defineComponent({
   name: "Sidebar",
-  components: {},
+  components: {
+    Metadata,
+    NcActions,
+    NcActionButton,
+    CloseIcon,
+  },
 
   data: () => {
     return {
       nativeOpen: false,
+      reducedOpen: false,
+      filename: "",
     };
   },
 
@@ -33,17 +61,42 @@ export default defineComponent({
   },
 
   methods: {
-    open(filename: string) {
+    async open(file: IFileInfo) {
-      globalThis.OCA.Files.Sidebar.setFullScreenMode?.(true);
+      if (
-      globalThis.OCA.Files.Sidebar.open(filename);
+        !this.reducedOpen &&
+        this.native() &&
+        (!file.fileid || file.originalFilename?.startsWith("/files/"))
+      ) {
+        this.native()?.setFullScreenMode?.(true);
+        this.native()?.open(file.filename);
+      } else {
+        this.reducedOpen = true;
+        await this.$nextTick();
+        this.filename = file.basename;
+
+        (<any>this.$refs.metadata)?.update(file);
+        emit("memories:sidebar:opened", null);
+      }
     },
 
-    close() {
+    async close() {
-      globalThis.OCA.Files.Sidebar.close();
+      if (this.nativeOpen) {
+        this.native()?.close();
+      } else {
+        if (this.reducedOpen) {
+          this.reducedOpen = false;
+          await this.$nextTick();
+        }
+        emit("memories:sidebar:closed", null);
+      }
     },
 
     setTab(tab: string) {
-      globalThis.OCA.Files.Sidebar.setActiveTab(tab);
+      this.native()?.setActiveTab(tab);
+    },
+
+    native() {
+      return globalThis.OCA?.Files?.Sidebar;
     },
 
     handleNativeOpen(event: any) {
@@ -62,8 +115,34 @@ export default defineComponent({
 <style scoped lang="scss">
 aside.app-sidebar {
   position: fixed;
+  top: 0;
   right: 0;
-  z-index: 100000000;
+  width: 27vw;
+  min-width: 300px;
+  height: 100% !important;
+  z-index: 2525;
+  padding: 10px;
+  background-color: var(--color-main-background);
+  border-left: 1px solid var(--color-border);
+
+  @media (max-width: 512px) {
+    width: 100vw;
+    min-width: unset;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+
+    h2 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin: 0;
+    }
+  }
 }
 </style>
 
@@ -71,5 +150,9 @@ aside.app-sidebar {
 // Prevent sidebar from becoming too big
 aside.app-sidebar {
   max-width: 360px !important;
+
+  @media (max-width: 512px) {
+    max-width: unset !important;
+  }
 }
 </style>

src/components/modal/Modal.vue

@@ -68,7 +68,9 @@ export default defineComponent({
 
   mounted() {
     if (this.sidebar) {
-      globalThis.mSidebar.open(this.sidebar);
+      globalThis.mSidebar.open({
+        filename: this.sidebar,
+      } as any);
     }
   },
 

src/components/viewer/Viewer.vue

@@ -67,7 +67,6 @@
             </template>
           </NcActionButton>
           <NcActionButton
-            v-if="!routeIsPublic"
             :aria-label="t('memories', 'Sidebar')"
             @click="toggleSidebar"
             :close-after-click="true"
@@ -170,7 +169,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { IDay, IPhoto, IRow, IRowType } from "../../types";
+import { IDay, IFileInfo, IPhoto, IRow, IRowType } from "../../types";
 
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
@@ -1016,9 +1015,12 @@ export default defineComponent({
 
     /** Open the sidebar */
     async openSidebar(photo?: IPhoto) {
-      const fInfo = await dav.getFiles([photo || this.currentPhoto]);
+      let fInfo: IFileInfo | IPhoto = photo || this.currentPhoto;
+      if (!this.routeIsPublic) {
+        fInfo = (await dav.getFiles([fInfo]))[0];
+      }
       globalThis.mSidebar.setTab("memories-metadata");
-      globalThis.mSidebar.open(fInfo[0].filename);
+      globalThis.mSidebar.open(fInfo as IFileInfo);
     },
 
     async updateSizeWithoutAnim() {

src/main.ts

@@ -12,7 +12,7 @@ import router from "./router";
 import { Route } from "vue-router";
 import { generateFilePath } from "@nextcloud/router";
 import { getRequestToken } from "@nextcloud/auth";
-import { IPhoto } from "./types";
+import { IFileInfo, IPhoto } from "./types";
 
 import "./global.scss";
 
@@ -25,7 +25,7 @@ declare global {
   var editMetadata: (photos: IPhoto[], sections?: number[]) => void;
 
   var mSidebar: {
-    open: (filename: string) => void;
+    open: (filename: IFileInfo) => void;
     close: () => void;
     setTab: (tab: string) => void;
   };