29 lines
1.6 KiB
Markdown
29 lines
1.6 KiB
Markdown
# Документация по переносу компонента 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: <BarkerMusicControl barkerOnly /> left of pause, <BarkerMusicControl musicOnly /> right.
|
||
|
||
## Vue маппинг
|
||
- <template>: <button @click="toggleBarker" class="bg-gray-600 hover:bg-gray-700 rounded p-2" title="Баркер">
|
||
<component :is="isBarkerOn ? Volume2 : VolumeX" class="w-5 h-5" />
|
||
</button>.
|
||
- Props: barkerOnly, musicOnly.
|
||
- Composables: useWebSocket (sendMessage, isBarkerOn/isMusicOn). |