Update edit song modal

src/frontend/components.d.ts

@@ -27,7 +27,7 @@ declare module 'vue' {
     ConfirmModal: typeof import('./components/ConfirmModal.vue')['default']
     CreateProjectModal: typeof import('./components/CreateProjectModal.vue')['default']
     DashboardItem: typeof import('./components/DashboardItem.vue')['default']
-    EditSongModal: typeof import('./components/EditSongModal.vue')['default']
+    ModalEditSegment: typeof import('./components/ModalEditSegment.vue')['default']
     NotFound: typeof import('./components/NotFound.vue')['default']
     ProjectItem: typeof import('./components/ProjectItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/frontend/components/BaseMenuButton.vue

@@ -26,7 +26,17 @@ withDefaults(defineProps<{
    */
   menuClass?: string
 }>(), { variant: 'ghost', iconOnly: true })
+
+const emits = defineEmits<{
+  /**
+   * Triggers when menu is open
+   * @property {boolean} state current state of menu
+   */
+  (e: 'toggleMenu', state: boolean): void
+}>()
+
 const isMenuOpen = ref(false)
+watch(isMenuOpen, () => emits('toggleMenu', isMenuOpen.value))
 const button = ref<HTMLButtonElement>()
 onClickOutside(button, () => isMenuOpen.value = false)
 </script>
@@ -52,8 +62,8 @@ onClickOutside(button, () => isMenuOpen.value = false)
       <ul
         v-if="isMenuOpen"
         tabindex="0"
-        class="absolute right-0 top-0 z-1 border border-border rounded-sm bg-primary-foreground py-1"
-        :class="menuClass"
+        class="absolute right-0 top-0 border border-border rounded-sm bg-primary-foreground py-1"
+        :class="[menuClass, isMenuOpen ? 'z-2' : 'z-0']"
       >
         <li v-for="_, i in length" :key="i" class="px-1">
           <!-- @slot Slot for content

src/frontend/components/ModalEditSegment.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { Metadata } from 'models/api'
+
+const props = defineProps<{
+  /**
+   * Index of segment
+   */
+  segmentIndex: number
+  /**
+   * Current metaIndex of segment
+   */
+  metaIndex: number
+  /**
+   * Array of found metadata of segment
+   */
+  metadata: Metadata[]
+}>()
+
+const emits = defineEmits<{
+  /**
+   * Emits an event 'ok' when the "OK" action is triggered.
+   * @property {number} metaIndex new value for metaIndex
+   */
+  (e: 'ok', metaIndex: number): void
+  /**
+   * Emits an event 'cancel' when the "Cancel" action is triggered.
+   */
+  (e: 'cancel'): void
+}>()
+
+const { t } = useI18n()
+const index = ref(props.metaIndex)
+const isMouseOverRow = ref(false)
+</script>
+
+<template>
+  <BaseModal>
+    <template #header>
+      <h2 class="text-2xl">
+        {{ t('song.change_metadata_for_segment', { index: segmentIndex + 1 }) }}
+      </h2>
+    </template>
+
+    <template #body>
+      <div class="max-h-400px max-w-1000px wh-full overflow-auto pb-5">
+        <table class="w-full caption-bottom text-sm">
+          <thead class="sticky left-0 right-0 top-0 z-2 bg-primary-foreground">
+            <tr class="border-b border-b-border">
+              <th class="sticky left-0 top-0 z-1 h-12 bg-primary-foreground px-4 text-left align-middle font-medium text-muted-foreground">
+                  &nbsp;
+              </th>
+
+              <th class="sticky sticky left-50px left-53px top-0 top-0 z-1 z-1 h-12 bg-primary-foreground px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.title') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.artist') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.album') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.year') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.albumartist') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.genre') }}
+              </th>
+
+              <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+                {{ t('song.isrc') }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="({ title, artist, album, year, albumartist, genre, isrc }, i) in metadata"
+              :key="i" class="group cursor-pointer border-b border-b-border hover:bg-secondary"
+              :class="!isMouseOverRow && index === i ? 'bg-secondary' : 'bg-primary-foreground'"
+              @mouseover="isMouseOverRow = true"
+              @mouseleave="isMouseOverRow = false"
+              @click="index = i"
+            >
+              <td
+                class="sticky left-0 top-0 z-1 px-4 align-middle group-hover:bg-secondary"
+                :class="!isMouseOverRow && index === i ? 'bg-secondary' : 'bg-primary-foreground'"
+              >
+                <span v-if="i === index" class="i-carbon:checkmark mt-1" />
+              </td>
+
+              <td
+                class="sticky left-50px top-0 z-1 min-w-200px p-4 align-middle font-medium group-hover:bg-secondary"
+                :class="!isMouseOverRow && index === i ? 'bg-secondary' : 'bg-primary-foreground'"
+              >
+                {{ title ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-150px p-4 align-middle">
+                {{ artist ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-350px p-4 align-middle">
+                {{ album ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-100px p-4 align-middle">
+                {{ year ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-120px p-4 align-middle">
+                {{ albumartist ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-100px p-4 align-middle">
+                {{ genre ?? t('song.unknown') }}
+              </td>
+
+              <td class="min-w-120px p-4 align-middle">
+                {{ isrc ?? t('song.unknown') }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <p class="mt-6 text-center text-muted-foreground">
+        {{ t('song.metadata_list_caption') }}
+      </p>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-x-2">
+        <BaseButton variant="secondary" @click="emits('cancel')">
+          {{ t('button.cancel') }}
+        </BaseButton>
+
+        <BaseButton @click="emits('ok', index)">
+          {{ t('button.change') }}
+        </BaseButton>
+      </div>
+    </template>
+  </BaseModal>
+</template>

src/frontend/components/ProjectItem.vue

@@ -8,8 +8,7 @@ import type { Project, ProjectFileSegment } from '../models/types'
 import type { Metadata, PostAudioSplitBodyPresetName } from '../models/api'
 import { getAudioStreamSplittingAPI } from '../models/api'
 import { SUPPORT_FILE_TYPES } from '../includes/constants'
-import ConfirmModal from './ConfirmModal.vue'
-import EditSongModal from './EditSongModal.vue'
+import ModalEditSegment from '../components/ModalEditSegment.vue'
 
 const props = defineProps<{
   /**
@@ -225,28 +224,20 @@ async function handleStoreAll(
 }
 
 function handleEdit(songIndex: number) {
-  let newMetaIndex = 0
   const { open, close } = useModal({
-    component: ConfirmModal,
+    component: ModalEditSegment,
     attrs: {
-      contentClass: 'max-w-50vw lg:max-w-[500px]',
+      segmentIndex: songIndex,
+      metaIndex: props.file?.segments?.[songIndex].metaIndex ?? 0,
+      metadata: props.file?.segments?.[songIndex].metadataOptions ?? [],
       onCancel() { close() },
-      onOk() {
+      onOk(newMetaIndex) {
         emits('changeMeta', songIndex, newMetaIndex)
         regions.value?.clearRegions()
         props.file.segments && addRegion(props.file.segments)
         close()
       },
     },
-    slots: {
-      default: {
-        component: h(EditSongModal, {
-          metadatas: props.file.segments?.[songIndex]?.metadataOptions ?? [],
-          opt: `${props.file.segments?.[songIndex]?.metaIndex ?? 0}`,
-          onChange(v) { newMetaIndex = v },
-        }),
-      },
-    },
   })
 
   open()
@@ -309,14 +300,14 @@ function handleEdit(songIndex: number) {
           </div>
         </template>
         <template #content="{ index: ftIndex }">
-          <li class="px-1">
+          <div class="px-1">
             <BaseButton
               variant="ghost" class="w-full"
               @click="handleStoreAll({ fileType: SUPPORT_FILE_TYPES[ftIndex] })"
             >
               {{ `.${SUPPORT_FILE_TYPES[ftIndex]}` }}
             </BaseButton>
-          </li>
+          </div>
         </template>
       </BaseMenuButton>
 
@@ -345,6 +336,10 @@ function handleEdit(songIndex: number) {
         <thead>
           <tr class="border-b border-b-border">
             <th class="sticky left-0 top-0 z-1 h-12 bg-primary-foreground px-4 text-left align-middle font-medium text-muted-foreground">
+              #
+            </th>
+
+            <th class="sticky left-41px top-0 z-1 h-12 bg-primary-foreground px-4 text-left align-middle font-medium text-muted-foreground">
               {{ t('song.title') }}
             </th>
 
@@ -376,7 +371,7 @@ function handleEdit(songIndex: number) {
               {{ t('song.isrc') }}
             </th>
 
-            <th class="h-12 pl-4 pr-6 text-right align-middle font-medium text-muted-foreground">
+            <th class="sticky right-72px top-0 z-1 h-12 bg-primary-foreground pl-4 pr-6 text-right align-middle font-medium text-muted-foreground">
               {{ t('button.edit') }}
             </th>
 
@@ -389,9 +384,13 @@ function handleEdit(songIndex: number) {
         <tbody>
           <tr
             v-for="({ duration, offset, metaIndex, metadataOptions }, songIndex) in file.segments"
-            :key="songIndex" class="border-b border-b-border"
+            :key="songIndex" class="border-b border-b-border bg-primary-foreground"
           >
-            <td class="sticky left-0 top-0 z-1 min-w-200px bg-primary-foreground p-4 align-middle font-medium">
+            <td class="sticky left-0 top-0 z-1 bg-primary-foreground p-4 align-middle font-medium">
+              {{ songIndex + 1 }}
+            </td>
+
+            <td class="sticky left-41px top-0 z-1 min-w-200px bg-primary-foreground p-4 align-middle font-medium">
               {{ metadataOptions?.[metaIndex]?.title ?? t('song.unknown') }}
             </td>
 
@@ -423,7 +422,7 @@ function handleEdit(songIndex: number) {
               {{ metadataOptions?.[metaIndex]?.isrc ?? t('song.unknown') }}
             </td>
 
-            <td class="p-4 text-right align-middle">
+            <td class="sticky right-72px top-0 z-1 bg-primary-foreground p-4 text-right align-middle">
               <BaseButton
                 icon-only variant="ghost"
                 :disabled="file.segments && (file.segments[songIndex].metadataOptions?.length ?? 0) <= 1"
@@ -433,11 +432,15 @@ function handleEdit(songIndex: number) {
               </BaseButton>
             </td>
 
-            <td class="sticky right-0 top-0 z-1 bg-primary-foreground p-4 text-right align-middle">
+            <td
+              class="sticky right-0 top-0 overflow-visible bg-primary-foreground p-4 text-right align-middle"
+              :class="currentStoringIndex === songIndex ? 'z-2' : 'z-1'"
+            >
               <BaseMenuButton
                 v-if="saveSettings.shouldAsk"
                 :disabled="!duration || !offset || isStoring"
                 :length="SUPPORT_FILE_TYPES.length"
+                @toggle-menu="(state) => currentStoringIndex = state ? songIndex : -1"
               >
                 <template #button>
                   <BaseLoader
@@ -448,7 +451,7 @@ function handleEdit(songIndex: number) {
                   <span v-else class="i-carbon-download" />
                 </template>
                 <template #content="{ index: ftIndex }">
-                  <li class="px-1">
+                  <div class="px-1">
                     <BaseButton
                       variant="ghost"
                       @click="duration && offset && handleStore({
@@ -461,7 +464,7 @@ function handleEdit(songIndex: number) {
                     >
                       {{ `.${SUPPORT_FILE_TYPES[ftIndex]}` }}
                     </BaseButton>
-                  </li>
+                  </div>
                 </template>
               </BaseMenuButton>
 

src/frontend/locales/de.json

@@ -16,7 +16,9 @@
     "save": "Speichern",
     "set": "Übernehmen",
     "process": "Verarbeiten",
-    "clear": "Alle löschen"
+    "clear": "Alle löschen",
+    "save_all": "Alle speichern",
+    "change": "Ändern"
   },
   "placeholder": {},
   "sidebar": {
@@ -88,7 +90,9 @@
       "lenient": "Locker",
       "normal": "Normal",
       "strict": "Strikt"
-    }
+    },
+    "metadata_list_caption": "Gefundene Metadatan",
+    "change_metadata_for_segment": "Metadaten für Segment {index} ändern"
   },
   "toast": {
     "empty_field": "Bitte geben Sie einen gültigen Wert ein!",