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

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

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

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

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

Откройте файл src/constants/VokaSvg.ts

Добавьте новый тип в const SvgType:

const SvgType {
  ...,
  NEW_ICON = 'new_icon'
}

Создайте функцию-генератор SVG:

static getNewIcon() {
  return `<svg>...</svg>`;
}

Добавьте обработку в getSvgStrByType:

case SvgType.NEW_ICON:
   return VokaSvg.getNewIcon();

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

В компонентах, наследующихся от Button:

const options = {
  ...options,
  svg: SvgType.NEW_ICON
};

Для ручного вставки SVG:

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

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

Перенос компонента (например, QualityButton в CentralPanel):
- Импортируйте компонент в CentralPanel.ts
- Добавьте в массив children:
```
children: [
  BigPlayButton,
  QualityButton, // <-- добавлен
  SelectionWrapper
]
```
Изменение порядка отображения: Порядок элементов в массиве children определяет их отображение (для BottomPanel - слева направо)
Добавление нового компонента:
- Создайте новый компонент
- Импортируйте его в нужную часть
- Добавьте в группу children

Важно: после изменений структуры проверьте:

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

3.3 KiB Raw Permalink Blame History