calebdeji/plyr-react

A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo

plyr-react

Installation

This plugin requires minimum Node.js with npm or yarn.

# with npm
npm i plyr-react

# with yarn
yarn add plyr-react

Example

Click here to see example and you can play with this example.

Contribute

Getting started for Development

There are two methods for getting started with this repo.

Familiar with Git?

  > git clone [email protected]:chintan9/plyr-react.git
  > cd plyr-react
  > npm run install

Not Familiar with Git?

Click here to download the .zip file. Extract the contents of the zip file, then open your terminal, change to the project directory, and:

  > npm run install

Developing

To start the developing run :

> npm run dev

This will build a version of your library, run the watcher and also run the Styleguide. To open the Styleguide manualy open your Browser and navigate to http://localhost:6060. Start developing your components in src/lib/components folder and update the src/lib/index.js file accordingly. Always provide an YourComponent.examples.md file, so your component will show up in the Styleguide. You can refer to example PlyrComponent component, but i think you'll get the idea.

Proposals (Babel)

For smoother development some Babel plugin are included

• class-properties
• object-rest-spread
• optional-chaining

Styling your components

SCSS and CSS are supported out of the box just import your styles into your component like you normally would do. For the use of CSS Modules refer to rollup-plugin-postcss

Testing

Testing is done with Jest, Enzyme and Jasmine Matchers You can refer to PlyrComponent.test.js as an example.

> npm run test

or (for getting coverage)

> npm run test:coverage

Linting

Linting is set up through ESLint and configured with eslint-config-airbnb You can modify linting rules by overriding them in the .eslintrc.json file.

> npm run lint

or (for for automatic fixing if possible)

> npm run lint:fix

Publishing your library to NPM

To release your library to NPM or your private Registry, make sure you have an active account at NPM, your .npmrc file is correctly setup and the repository url in package.json file is set to your repository url, then:

> npm run release

Styleguide

For custom layouts, styling and more information about the Styleguide please refer to React Styleguidist documentation.

Deploy the Styleguide to GitHub Pages

Make sure the repository url in package.json file is set to your repository url, then:

> npm run deploy

Scripts

• npm run dev : Executes the develop mode, running watcher and the Styleguide, rebuilding your library on every change.
• npm run start : Only serves the Styleguide.
• npm run build : Builds your library (build can be found in dist folder).
• npm run styleguide:build : Builds the static Styleguide in case you want to deploy it.
• npm run test : Runs the tests.
• npm run test:coverage: Runs the test and shows the coverage.
• npm run lint : Runs the linter.
• npm run lint:fix : Runs the linter and fixes automatic fixable issues.
• npm run release : Publishes your Library on NPM or your private Registry (depending on your config in your .npmrc file).
• npm run deploy: Deploys the Styleguide to GitHub Pages.

Resources

Bundler

• Rollup.js

Styleguide

• React Styleguidist

Testing

• Jasmine Matchers
• Enzyme
• Jest

Linting

• ESLint
• eslint-config-airbnb

Compiler

• Babel 7

Support

If you like the project and want to support my work, you can buy me a coffee :)