feat: add audio metadata panel

changelog/unreleased/enhancement-audio-metadata-panel

@@ -0,0 +1,7 @@
+Enhancement: Audio metadata panel
+
+We've added a right sidebar panel with the name `Audio Info`, which display `audio` metadata if present on the given resource.
+It is registered by the files app and becomes visible in the global right sidebar in all file contexts, e.g. file listing 
+with single select on an audio file with indexed id3 information or when listening to an audio file in the preview app.
+
+https://github.com/owncloud/web/pull/10956

packages/web-app-files/src/components/SideBar/Audio/AudioMetaPanel.vue

@@ -0,0 +1,133 @@
+<template>
+  <div id="files-sidebar-panel-audio">
+    <dl class="audio-data-list">
+      <template v-if="title">
+        <dt v-text="$gettext('Title')" />
+        <dd v-text="title" />
+      </template>
+      <template v-if="duration">
+        <dt v-text="$gettext('Duration')" />
+        <dd v-text="duration" />
+      </template>
+      <template v-if="artist">
+        <dt v-text="$gettext('Authors')" />
+        <dd v-text="artist" />
+      </template>
+      <template v-if="album">
+        <dt v-text="$gettext('Album')" />
+        <dd v-text="album" />
+      </template>
+      <template v-if="genre">
+        <dt v-text="$gettext('Musical genre')" />
+        <dd v-text="genre" />
+      </template>
+      <template v-if="year">
+        <dt v-text="$gettext('Year recorded')" />
+        <dd v-text="year" />
+      </template>
+      <template v-if="track">
+        <dt v-text="$gettext('Track')" />
+        <dd v-text="track" />
+      </template>
+      <template v-if="disc">
+        <dt v-text="$gettext('Disc')" />
+        <dd v-text="disc" />
+      </template>
+    </dl>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, Ref, unref } from 'vue'
+import { Resource } from '@ownclouders/web-client'
+import { Duration } from 'luxon'
+
+export default defineComponent({
+  name: 'AudioMetaPanel',
+  setup() {
+    const resource = inject<Ref<Resource>>('resource')
+
+    const album = computed(() => {
+      return unref(resource).audio.album
+    })
+
+    const artist = computed(() => {
+      return unref(resource).audio.artist
+    })
+
+    const albumArtist = computed(() => {
+      return unref(resource).audio.albumArtist
+    })
+
+    const genre = computed(() => {
+      return unref(resource).audio.genre
+    })
+
+    const title = computed(() => {
+      return unref(resource).audio.title
+    })
+
+    const duration = computed(() => {
+      const milliseconds = unref(resource).audio.duration
+      if (milliseconds) {
+        const d = Duration.fromMillis(milliseconds)
+        if (d.hours > 0) {
+          return d.toFormat('hh:mm:ss')
+        }
+        return d.toFormat('mm:ss')
+      }
+      return ''
+    })
+
+    const track = computed(() => {
+      const audio = unref(resource).audio
+      if (audio.track && audio.trackCount) {
+        return `${audio.track} / ${audio.trackCount}`
+      }
+      return audio.track
+    })
+
+    const disc = computed(() => {
+      const audio = unref(resource).audio
+      if (audio.disc && audio.discCount) {
+        return `${audio.disc} / ${audio.discCount}`
+      }
+      return audio.disc
+    })
+
+    const year = computed(() => {
+      return unref(resource).audio?.year
+    })
+
+    return {
+      album,
+      artist,
+      albumArtist,
+      genre,
+      title,
+      duration,
+      track,
+      disc,
+      year
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.audio-data-list {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  dt,
+  dd {
+    margin-bottom: var(--oc-space-small);
+  }
+  dt {
+    font-weight: bold;
+    white-space: nowrap;
+  }
+  dd {
+    margin-inline-start: var(--oc-space-medium);
+  }
+}
+</style>

packages/web-app-files/src/composables/extensions/useFileSideBars.ts

@@ -34,6 +34,7 @@ import { Resource } from '@ownclouders/web-client'
 import { useGettext } from 'vue3-gettext'
 import { unref } from 'vue'
 import { fileSideBarExtensionPoint } from '../../extensionPoints'
+import AudioMetaPanel from '../../components/SideBar/Audio/AudioMetaPanel.vue'
 import { isEmpty } from 'lodash-es'
 
 export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resource, Resource>[] => {
@@ -161,6 +162,27 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         }
       }
     },
+    {
+      id: 'com.github.owncloud.web.files.sidebar-panel.audio-meta',
+      type: 'sidebarPanel',
+      extensionPointIds: ['global.files.sidebar'],
+      panel: {
+        name: 'audio-meta',
+        icon: 'music',
+        title: () => $gettext('Audio Info'),
+        component: AudioMetaPanel,
+        isVisible: ({ items }) => {
+          if (items?.length !== 1) {
+            return false
+          }
+          const item = items[0]
+          if (item.type !== 'file') {
+            return false
+          }
+          return !isEmpty(item.audio)
+        }
+      }
+    },
     {
       id: 'com.github.owncloud.web.files.sidebar-panel.actions',
       type: 'sidebarPanel',