up

proto/main.proto

@@ -1544,6 +1544,7 @@ message UploadPlaylistTrackReq {
   string name       = 2;
   string filename   = 3;
   bytes  data       = 4;
+  int32  groupID    = 5;
 }
 
 message UploadPlaylistTrackRsp {

src/api/generated/crabs/evening_detective_server/index.ts

@@ -309,6 +309,7 @@ export type UploadPlaylistTrackReq = {
   name: string | undefined;
   filename: string | undefined;
   data: string | undefined;
+  groupID: number | undefined;
 };
 
 export type UploadPlaylistTrackRsp = {

src/components/GameMusicPlanPanel.vue

@@ -37,7 +37,7 @@ const emit = defineEmits<{
   renamePlaylist: [id: number, name: string]
   reorderTracks: [playlistID: number, trackIDs: number[]]
   deletePlaylist: [id: number]
-  uploadTrack: [playlistID: number, file: File]
+  uploadTrack: [playlistID: number, file: File, groupID: number]
   deleteTrack: [playlistID: number, trackID: number]
 }>()
 
@@ -137,7 +137,7 @@ watch(
       @rename-playlist="(id, name) => emit('renamePlaylist', id, name)"
       @reorder-tracks="(playlistID, trackIDs) => emit('reorderTracks', playlistID, trackIDs)"
       @delete-playlist="(id) => emit('deletePlaylist', id)"
-      @upload-track="(playlistID, file) => emit('uploadTrack', playlistID, file)"
+      @upload-track="(playlistID, file, groupID) => emit('uploadTrack', playlistID, file, groupID)"
       @delete-track="(playlistID, trackID) => emit('deleteTrack', playlistID, trackID)"
     />
     <n-space v-else vertical class="music-content">

src/components/PlaylistEditor.vue

@@ -44,7 +44,7 @@ const emit = defineEmits<{
   renamePlaylist: [id: number, name: string]
   reorderTracks: [playlistID: number, trackIDs: number[]]
   deletePlaylist: [id: number]
-  uploadTrack: [playlistID: number, file: File]
+  uploadTrack: [playlistID: number, file: File, groupID: number]
   deleteTrack: [playlistID: number, trackID: number]
 }>()
 
@@ -108,6 +108,12 @@ const isPlaylistActive = computed(
     selectedId.value === props.music?.playlist?.ID &&
     props.music?.playback !== 'MUSIC_PLAYBACK_STOPPED',
 )
+function isGroupMissing(groupID: number) {
+  return (
+    isSelectedMissing.value ||
+    (groupID !== 0 && !selected.value?.groups?.some((group) => group.ID === groupID))
+  )
+}
 function isGroupLocked(groupID: number) {
   return isPlaylistActive.value && (!props.music?.groupId || props.music.groupId === groupID)
 }
@@ -150,9 +156,9 @@ function move(id: number, groupID: number, offset: number) {
   order.value[from] = targetID
   order.value[to] = id
 }
-function uploadTrack(options: { file: UploadFileInfo }) {
+function uploadTrack(options: { file: UploadFileInfo }, groupID: number) {
   if (selectedId.value && options.file.file)
-    emit('uploadTrack', selectedId.value, options.file.file)
+    emit('uploadTrack', selectedId.value, options.file.file, groupID)
 }
 watch(selectedId, () => {
   lastSelected.value = props.playlists.find((item) => item.ID === selectedId.value)
@@ -279,17 +285,6 @@ reset()
           @click="emit('renamePlaylist', selectedId, name.trim())"
           >Сохранить название</n-button
         >
-        <n-upload
-          accept=".mp3,audio/mpeg"
-          :default-upload="false"
-          :show-file-list="false"
-          :disabled="isBusy || isOrderDirty || hasConflict"
-          @change="uploadTrack"
-        >
-          <n-button size="small" :disabled="isBusy || isOrderDirty || hasConflict"
-            >Добавить MP3</n-button
-          >
-        </n-upload>
         <n-button
           v-if="music"
           size="small"
@@ -362,9 +357,7 @@ reset()
           <PlaylistGroupEditor
             v-if="section.ID"
             :group="section"
-            :is-missing="
+            :is-missing="isGroupMissing(section.ID)"
-              isSelectedMissing || !selected.groups?.some((group) => group.ID === section.ID)
-            "
             :is-busy="isBusy || isOrderDirty || hasConflict"
             :is-locked="isGroupLocked(section.ID)"
             :can-move-up="!isPlaylistActive && groupIndex > 0"
@@ -374,6 +367,32 @@ reset()
             @dirty="dirtyGroups[section.ID] = $event"
             @move="moveGroup(section.ID, $event)"
           />
+          <n-upload
+            accept=".mp3,audio/mpeg"
+            :default-upload="false"
+            :show-file-list="false"
+            :disabled="
+              isBusy ||
+              isOrderDirty ||
+              hasConflict ||
+              isGroupMissing(section.ID) ||
+              (section.ID !== 0 && isGroupLocked(section.ID))
+            "
+            @change="uploadTrack($event, section.ID)"
+          >
+            <n-button
+              size="small"
+              :disabled="
+                isBusy ||
+                isOrderDirty ||
+                hasConflict ||
+                isGroupMissing(section.ID) ||
+                (section.ID !== 0 && isGroupLocked(section.ID))
+              "
+              :aria-label="`Добавить MP3 в группу ${section.name}`"
+              >Добавить MP3</n-button
+            >
+          </n-upload>
           <p v-if="!trackIds(section.ID).length">Треков пока нет.</p>
           <div v-for="(id, index) in trackIds(section.ID)" :key="id" class="track-row">
             <span

src/composables/usePlaylistActions.ts

@@ -128,7 +128,7 @@ export function usePlaylistActions(
     }
   }
 
-  async function uploadTrack(playlistID: number, file: File) {
+  async function uploadTrack(playlistID: number, file: File, groupID: number) {
     if (isMusicBusy.value) return
     if (!/\.mp3$/i.test(file.name) || file.size === 0 || file.size > 64 * 1024 * 1024) {
       message.error('Выберите непустой MP3 размером до 64 МиБ')
@@ -138,7 +138,13 @@ export function usePlaylistActions(
     onBeforeSave()
     try {
       const data = uint8ToBase64(new Uint8Array(await file.arrayBuffer()))
-      await client.UploadPlaylistTrack({ playlistID, name: file.name, filename: file.name, data })
+      await client.UploadPlaylistTrack({
+        playlistID,
+        groupID,
+        name: file.name,
+        filename: file.name,
+        data,
+      })
       await onSaved()
     } catch (err) {
       message.error(err instanceof Error ? err.message : 'Не удалось загрузить MP3')