Участие и вклад

Прежде всего, большое спасибо за ваш вклад в этот проект!

Pull Request

Скопируйте код из ветки main и объедините его с веткой main.

Локальная разработка

После извлечения кода выполните:

yarn

для установки зависимостей проекта.

Этот проект реализован в формате monorepo и написан на TypeScript и Sass. ESLint используется для контроля стиля кода, Jest — для запуска тестов, а Webpack — для сборки.

Структура проекта

- .vscode  cSpell плагин для проверки орфографии и создания белого списка
- fixtures папка для локальной отладки разработки
    |
    |- danmaku плагин для работы с субтитрами
    |- nplayer плеер
    |- react компоненты React
    |- vue компоненты Vue
    |
- packages папка с исходным кодом плеера и связанных экосистем
    |
    |- nplayer         — плеер
    |- nplayer-danmaku — плагин для работы с субтитрами
    |- nplayer-react  — компоненты React
    |- nplayer-vue    — компоненты Vue
    |
- scripts папка с скриптами для локальной отладки и сборки проекта
- website папка с сайтом и документацией

Скрипты

Вы можете запустить локальный сервер разработки для соответствующего проекта, выполнив команду serve:{имя проекта}. Сервер будет отслеживать изменения во всей папке fixtures и папке исходного кода, и автоматически обновлять браузер при обнаружении изменений.

Если вы хотите разработать плагин для субтитров, выполните следующую команду:

yarn serve:nplayer-danmaku

Затем перейдите по адресу http://localhost:8080/. (При локальной отладке плеера перед страницей плеера добавляется div высотой 1000 пикселей. Чтобы увидеть плеер, необходимо прокрутить страницу вниз).

Также можно использовать команду build:nplayer для сборки кода плеера. В настоящее время существует только одна команда сборки. Если вам нужно собрать другие проекты, вы можете добавить соответствующие скрипты самостоятельно.

Импорт псевдонимов

В проекте nplayer структура каталогов довольно глубокая. Вы можете использовать псевдоним src для доступа к корневому каталогу исходного кода. Например, если вы находитесь в глубоком каталоге и хотите импортировать класс Player, используйте следующий код:

import { Player } from 'src/ts/player'
// вместо import { Player } из '../../../../../../player'

Для других проектов структура более простая, поэтому рекомендуется использовать относительные пути для импорта.

Структура кода

Каждый проект имеет папку src и файл входа index.ts внутри неё. Остальной код находится в папке ts, а CSS — в папке scss. (Изначально планировалось разделить CSS вместе с компонентами, но сейчас стилей не так много, поэтому они были полностью разделены).

Кроме файла входа, в проекте нет необходимости использовать export default. Это позволяет избежать ручного написания кода импорта. Вам нужно только написать имя переменной, и VSCode автоматически предложит импорт. Или вы можете использовать функцию автоматического импорта в функции автоматического исправления VSCode.

Тестирование

Файлы тестов находятся в папке __tests__ в коде проекта. Файлы тестов имеют расширение .spec.js (кажется, что писать тесты на TS сложнее).

На данный момент количество тестовых кодов невелико, и они будут постепенно добавляться.

Документация и сайт

NPlayer использует Docusaurus.

Чтобы написать документацию или изменить сайт, перейдите в папку website и выполните команду:

yarn

чтобы установить зависимости.

Затем запустите:

yarn start

Сервер разработки запустится автоматически, и откроется страница http://localhost:3000/.

Документация находится в папке docs, а сайт — в папке src.

Дополнительные сведения см. в официальной документации Docusaurus.