vue-pult/docs/migration/footer/BARKER_MUSIC_CONTROL.md

Документация по переносу компонента BarkerMusicControl в футере

Общая структура в React

• Расположение: В BottomPanel.tsx, центр, два экземпляра (barkerOnly, musicOnly).
• Тип: Компонент для управления музыкой/баркером, button with onClick toggle, icon (Volume2/VolumeX).
• Зависимости: Tailwind CSS, useWebSocket for sendMessage, icons (Volume2, VolumeX).
• Props: barkerOnly (bool), musicOnly (bool).
• JSX: button class "bg-gray-600 hover:bg-gray-700 rounded p-2", icon Volume2/X, onClick send 'toggleBarker' or 'toggleMusic'.

Элементы

• Button: bg-gray-600 hover:bg-gray-700 rounded p-2, icon Volume2 (on) or VolumeX (off).
• Title: "Баркер" or "Музыка".
• Dynamic: icon based on barker/music state from WebSocket.

Стили (Tailwind примеры)

• Button: bg-gray-600 hover:bg-gray-700 rounded p-2 flex items-center justify-center.
• Icon: w-5 h-5 text-white.
• Responsive: min-height 44px touch.

Взаимодействие

• Click: send 'toggleBarker' or 'toggleMusic' via WebSocket, update icon.
• In BottomPanel: left of pause, right.

Vue маппинг

• : <button @click="toggleBarker" class="bg-gray-600 hover:bg-gray-700 rounded p-2" title="Баркер"> .
• Props: barkerOnly, musicOnly.
• Composables: useWebSocket (sendMessage, isBarkerOn/isMusicOn).