up

src/components/GameScreensPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NAlert, NButton, NFlex, NInput, NInputNumber, NSelect, NSwitch, NTag, NUpload, type UploadFileInfo } from 'naive-ui'
+import { NAlert, NButton, NFlex, NInput, NInputNumber, NSelect, NSwitch, NUpload, type UploadFileInfo } from 'naive-ui'
 import { ref } from 'vue'
 
 import type { MusicState, Playlist, ScreenState } from '@/api/generated/crabs/evening_detective_server'
@@ -30,6 +30,11 @@ const playlistName = ref('')
 function uploadTrack(options: { file: UploadFileInfo }) {
   if (options.file.file) emit('uploadTrack', options.file.file)
 }
+
+function selectTrack(index: number) {
+  if (index === props.music?.trackIndex) return
+  emit('setMusic', { trackIndex: index, positionMs: 0 })
+}
 </script>
 
 <template>
@@ -114,22 +119,24 @@ function uploadTrack(options: { file: UploadFileInfo }) {
           <div class="track-main">
             <span class="track-number">{{ index + 1 }}</span>
             <span class="track-details">
-              <span class="track-name">{{ track.name || track.filename || `Трек ${index + 1}` }}</span>
-              <span class="track-filename">{{ track.filename }}</span>
+              <span class="track-name">{{ track.name || `Трек ${index + 1}` }}</span>
             </span>
           </div>
           <n-flex align="center" class="track-actions">
-            <n-tag v-if="index === (props.music.trackIndex ?? 0)" type="success" size="small">
-              {{ props.music.playback === 'MUSIC_PLAYBACK_PLAYING' ? 'Играет' : 'Выбран' }}
-            </n-tag>
             <n-button
-              v-else
               size="small"
-              type="primary"
+              :type="index === (props.music.trackIndex ?? 0) ? 'success' : 'primary'"
               ghost
-              @click="emit('setMusic', { trackIndex: index, positionMs: 0 })"
+              :class="{ 'track-switch-active': index === (props.music.trackIndex ?? 0) }"
+              @click="selectTrack(index)"
             >
-              Включить
+              {{
+                index === (props.music.trackIndex ?? 0)
+                  ? props.music.playback === 'MUSIC_PLAYBACK_PLAYING'
+                    ? 'Играет'
+                    : 'Выбран'
+                  : 'Включить'
+              }}
             </n-button>
             <n-button size="small" type="error" ghost @click="emit('deleteTrack', track.ID!)">
               Удалить
@@ -198,7 +205,7 @@ function uploadTrack(options: { file: UploadFileInfo }) {
 }
 
 .volume-input {
-  width: 96px;
+  width: 108px;
 }
 
 .screen-row {
@@ -254,15 +261,15 @@ function uploadTrack(options: { file: UploadFileInfo }) {
   align-items: center;
   display: flex;
   flex: 1;
+  gap: 12px;
   overflow: hidden;
-  padding-left: 8px;
 }
 
 .track-number {
   color: #aaa;
-  flex: 0 0 28px;
+  flex: 0 0 20px;
   font-variant-numeric: tabular-nums;
-  text-align: center;
+  text-align: left;
 }
 
 .track-details {
@@ -278,17 +285,14 @@ function uploadTrack(options: { file: UploadFileInfo }) {
   white-space: nowrap;
 }
 
-.track-filename {
-  color: #aaa;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .track-actions {
   flex: 0 0 auto;
 }
 
+.track-switch-active {
+  font-weight: 600;
+}
+
 @media (width < 1024px) {
   .track-list {
     padding: 0;
@@ -302,7 +306,6 @@ function uploadTrack(options: { file: UploadFileInfo }) {
   }
 
   .track-main {
-    padding-left: 0;
     width: 100%;
   }