enigFM/frontend/src/views/RoomView.vue

<template>
  <div class="room-page" v-if="room">
    <div class="room-header">
      <h1>{{ room.name }}</h1>
    </div>

    <div class="room-layout">
      <div class="main-section">
        <div class="queue-section card">
          <div class="queue-header">
            <h3>Очередь</h3>
            <button class="btn-secondary" @click="showAddTrack = true">Добавить</button>
          </div>
          <Queue :queue="roomStore.queue" @play-track="playTrack" @remove-track="removeFromQueue" />
        </div>
      </div>

      <div class="side-section">
        <ParticipantsList :participants="roomStore.participants" />
        <ChatWindow :room-id="roomId" />
      </div>
    </div>

    <Modal v-if="showAddTrack" title="Добавить в очередь" @close="showAddTrack = false">
      <TrackList
        :tracks="tracksStore.tracks"
        selectable
        @select="addTrackToQueue"
      />
    </Modal>
  </div>
  <div v-else class="loading">Загрузка...</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useRoomStore } from '../stores/room'
import { useTracksStore } from '../stores/tracks'
import { useActiveRoomStore } from '../stores/activeRoom'
import Queue from '../components/room/Queue.vue'
import ParticipantsList from '../components/room/ParticipantsList.vue'
import ChatWindow from '../components/chat/ChatWindow.vue'
import TrackList from '../components/tracks/TrackList.vue'
import Modal from '../components/common/Modal.vue'

const route = useRoute()
const roomStore = useRoomStore()
const tracksStore = useTracksStore()
const activeRoomStore = useActiveRoomStore()

const roomId = route.params.id
const room = ref(null)
const showAddTrack = ref(false)

onMounted(async () => {
  await roomStore.fetchRoom(roomId)
  room.value = roomStore.currentRoom

  await roomStore.joinRoom(roomId)
  await roomStore.fetchQueue(roomId)
  await tracksStore.fetchTracks()

  // Connect to room via global store
  activeRoomStore.connect(roomId, room.value.name)
})

function playTrack(track) {
  activeRoomStore.sendPlayerAction('set_track', null, track.id)
}

async function addTrackToQueue(track) {
  await roomStore.addToQueue(roomId, track.id)
  showAddTrack.value = false
}

async function removeFromQueue(track) {
  await roomStore.removeFromQueue(roomId, track.id)
}
</script>

<style scoped>
.room-page {
  padding-top: 20px;
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.room-header h1 {
  margin: 0;
}

.room-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 20px;
}

.main-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.side-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.queue-section {
  flex: 1;
}

.queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.queue-header h3 {
  margin: 0;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #aaa;
}

@media (max-width: 900px) {
  .room-layout {
    grid-template-columns: 1fr;
  }
}
</style>