# Кастомизация внешнего вида плеера

## Стилизация компонентов

Основные стили проекта расположены в директории `src/assets/scss`. Эти стили подключаются автоматически через файл `VokaPlayerImpl.ts`.

## Работа с SVG-иконками

### Добавление новой иконки

1. Откройте файл `src/constants/VokaSvg.ts`
2. Добавьте новый тип в const `SvgType`:
   ```typescript
   const SvgType {
     ...,
     NEW_ICON = 'new_icon'
   }
   ```
3. Создайте функцию-генератор SVG:
   ```typescript
   static getNewIcon() {
     return `<svg>...</svg>`;
   }
   ```
4. Добавьте обработку в `getSvgStrByType`:
   ```typescript
   case SvgType.NEW_ICON:
      return VokaSvg.getNewIcon();
   ```

### Использование иконок

В компонентах, наследующихся от `Button`:
```typescript
const options = {
  ...options,
  svg: SvgType.NEW_ICON
};
```

Для ручного вставки SVG:
```typescript
const icon = Dom.createEl('span', {
  className: 'voka-icon-svg',
  innerHTML: VokaSvg.getSvgStrByType(SvgType.NEW_ICON)
});
parentEl.appendChild(icon);
```

## Структура компонентов и их перемещение

Основной компонент компоновки - `Skin.ts`, который определяет расположение всех элементов интерфейса.

### Текущая структура по умолчанию:
```
Skin
├── BottomPanel
│   ├── AudioButton
│   ├── FullscreenToggle
│   ├── PictureInPictureToggle
│   ├── PlayToggle
│   ├── PlaybackRateButton
│   ├── ProgressControl
│   ├── QualityButton
│   ├── StartOver
│   ├── SubtitlesButton
│   ├── VolumePanel
│   └── ZoomButton
└── CentralPanel
    ├── BigPlayButton
    ├── SkipBackward
    ├── SkipForward
    └── SelectionWrapper
        ├── SelectionEndButton
        ├── SelectionProcessButton
        └── SelectionStartButton
```

### Как изменить структуру:

1. **Перенос компонента** (например, `QualityButton` в `CentralPanel`):
   - Импортируйте компонент в `CentralPanel.ts`
   - Добавьте в массив `children`:
     ```typescript
     children: [
       BigPlayButton,
       QualityButton, // <-- добавлен
       SelectionWrapper
     ]
     ```

2. **Изменение порядка отображения**:
   Порядок элементов в массиве `children` определяет их отображение (для `BottomPanel` - слева направо)

3. **Добавление нового компонента**:
   - Создайте новый компонент
   - Импортируйте его в нужную часть
   - Добавьте в группу `children`

Важно: после изменений структуры проверьте:
- Корректность работы всех интерактивных элементов
- Адаптивность на разных разрешениях