metadata: show tag list

lib/Controller/ImageController.php

@@ -192,6 +192,11 @@ class ImageController extends ApiBase
         // Get the image info
         $info = $this->timelineQuery->getInfoById($file->getId(), $basic);
 
+        // Get list of tags for this file
+        if (!$basic) {
+            $info['tags'] = $this->getTags($file->getId());
+        }
+
         // Get latest exif data if requested
         // Allow this ony for logged in users
         if ($current && null !== $this->userSession->getUser()) {
@@ -279,4 +284,30 @@ class ImageController extends ApiBase
 
         return $response;
     }
+
+    /**
+     * Get the tags for a file.
+     */
+    private function getTags(int $fileId): array
+    {
+        // Make sure tags are enabled
+        if (!\OCA\Memories\Util::tagsIsEnabled($this->appManager)) {
+            return [];
+        }
+
+        // Get the tag ids for this file
+        $objectMapper = \OC::$server->get(\OCP\SystemTag\ISystemTagObjectMapper::class);
+        $tagIds = $objectMapper->getTagIdsForObjects([$fileId], 'files')[(string) $fileId];
+
+        // Get the tag names and filter out the ones that are not user visible
+        $tagManager = \OC::$server->get(\OCP\SystemTag\ISystemTagManager::class);
+
+        /** @var \OCP\SystemTag\ISystemTag[] */
+        $tags = $tagManager->getTagsByIds($tagIds);
+        return array_map(function ($tag) {
+            return $tag->getName();
+        }, array_filter($tags, function ($tag) {
+            return $tag->isUserVisible();
+        }));
+    }
 }

src/components/Metadata.vue

@@ -70,6 +70,7 @@ import CameraIrisIcon from "vue-material-design-icons/CameraIris.vue";
 import ImageIcon from "vue-material-design-icons/Image.vue";
 import InfoIcon from "vue-material-design-icons/InformationOutline.vue";
 import LocationIcon from "vue-material-design-icons/MapMarker.vue";
+import TagIcon from "vue-material-design-icons/Tag.vue";
 import { API } from "../services/API";
 
 interface TopField {
@@ -153,6 +154,14 @@ export default defineComponent({
         });
       }
 
+      if (this.tagNamesStr) {
+        list.push({
+          title: this.tagNamesStr,
+          subtitle: [],
+          icon: TagIcon,
+        });
+      }
+
       return list;
     },
 
@@ -261,6 +270,14 @@ export default defineComponent({
       return this.exif["GPSLongitude"];
     },
 
+    tagNames(): string[] {
+      return Object.values(this.baseInfo?.tags || {});
+    },
+
+    tagNamesStr(): string {
+      return this.tagNames.length > 0 ? this.tagNames.join(", ") : null;
+    },
+
     mapUrl(): string | null {
       const boxSize = 0.0075;
       const bbox = [
@@ -304,6 +321,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.outer {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .top-field {
   margin: 10px;
   margin-bottom: 25px;