metadata: add size to reduced (fix #1139)

Signed-off-by: Varun Patil <[email protected]>
pulsejet · Apr 24, 2024 · d0397e6 · d0397e6
1 parent e6f9177
commit d0397e6
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 16 deletions.
diff --git a/lib/Controller/ImageController.php b/lib/Controller/ImageController.php
@@ -213,6 +213,7 @@ public function info(
             $info['mimetype'] = $file->getMimeType();
             $info['size'] = $file->getSize();
             $info['basename'] = $file->getName();
+            $info['uploadtime'] = $file->getUploadTime() ?: $file->getMTime();
 
             // Allow these ony for logged in users
             if ($user = $this->userSession->getUser()) {

diff --git a/src/components/Metadata.vue b/src/components/Metadata.vue
@@ -534,7 +534,8 @@ export default defineComponent({
 }
 
 .top-field {
-  margin: 10px;
+  margin-left: 10px;
+  margin-top: 10px;
   margin-bottom: 25px;
   display: flex;
   align-items: center;

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -1,14 +1,21 @@
 <template>
   <aside id="app-sidebar-vue" class="app-sidebar reduced" v-if="reducedOpen">
-    <div class="title">
-      <h2>{{ basename }}</h2>
-
-      <NcActions :inline="1">
-        <NcActionButton :aria-label="t('memories', 'Close')" @click="close()">
-          {{ t('memories', 'Close') }}
-          <template #icon> <CloseIcon :size="20" /> </template>
-        </NcActionButton>
-      </NcActions>
+    <div class="top-info" v-if="info">
+      <div class="title">
+        <h2>{{ info.basename }}</h2>
+
+        <NcActions :inline="1">
+          <NcActionButton :aria-label="t('memories', 'Close')" @click="close()">
+            {{ t('memories', 'Close') }}
+            <template #icon> <CloseIcon :size="20" /> </template>
+          </NcActionButton>
+        </NcActions>
+      </div>
+
+      <div class="subtitle">
+        <span v-if="info.size">{{ utils.humanFileSize(info.size) }}</span>
+        <span v-if="info.uploadtime">{{ utils.getFromNowStr(new Date(info.uploadtime * 1000)) }}</span>
+      </div>
     </div>
 
     <Metadata ref="metadata" />
@@ -25,7 +32,7 @@ import Metadata from '@components/Metadata.vue';
 
 import * as utils from '@services/utils';
 
-import type { IPhoto } from '@typings';
+import type { IImageInfo, IPhoto } from '@typings';
 
 import CloseIcon from 'vue-material-design-icons/Close.vue';
 import InfoSvg from '@assets/info.svg';
@@ -42,9 +49,10 @@ export default defineComponent({
   data: () => ({
     nativeOpen: false,
     reducedOpen: false,
-    basename: String(),
+    info: null as null | IImageInfo,
     lastKnownWidth: 0,
     nativeMetadata: null as null | InstanceType<typeof Metadata>,
+    utils: Object.freeze(utils),
   }),
 
   computed: {
@@ -96,9 +104,8 @@ export default defineComponent({
         await this.$nextTick();
 
         // Update metadata compoenent
-        const info = await this.refs.metadata?.update(photo);
-        if (!info) return; // failure or state change
-        this.basename = info.basename;
+        this.info = (await this.refs.metadata?.update(photo)) ?? null;
+        if (!this.info) return; // failure or state change
         this.handleOpen();
       }
     },
@@ -257,11 +264,15 @@ export default defineComponent({
     min-width: unset;
   }
 
+  .top-info {
+    padding: 10px;
+    padding-right: 0;
+  }
+
   .title {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px;
 
     h2 {
       overflow: hidden;
@@ -270,6 +281,13 @@ export default defineComponent({
       margin: 0;
     }
   }
+
+  .subtitle {
+    color: var(--color-text-lighter);
+    > span {
+      margin-right: 4px;
+    }
+  }
 }
 </style>
 

diff --git a/src/services/utils/algo.ts b/src/services/utils/algo.ts
@@ -125,3 +125,10 @@ export function truthy<T>(value: T): value is NonNullable<T> {
 export function truthyProp<T, K extends keyof T>(obj: T, prop: K): obj is T & { [P in K]-?: T[K] } {
   return truthy(obj[prop]);
 }
+
+/** Convert a size in bytes to human readable */
+export function humanFileSize(size: number): string {
+  if (size === 0) return '0 B';
+  const i = Math.floor(Math.log(size) / Math.log(1024));
+  return (size / Math.pow(1024, i)).toFixed(2) + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+}
diff --git a/src/typings/data.d.ts b/src/typings/data.d.ts
@@ -112,6 +112,7 @@ declare module '@typings' {
     basename: string;
     mimetype: string;
     size: number;
+    uploadtime: number;
 
     filename?: string;
     address?: string;