React component for Slike Video Player

This is a project for building a react component package for npm. The project contains a correctly transpiled folder for the component library as well as a demo page for showcasing it. The demo can easily be uploaded to GitHub Pages.

How it is structured

The source code has two separate parts – the library and the documentation (demo) page. Both are written in ES6 and JSX, and therefore have to be transpiled by Babel but in different ways.

Component library transpilation

The library source code, which is located in src/lib, is transpiled with Babel but is not bundled with Webpack. Bundling is completely unnecessary, since the developer who will in the end use this library for their application will bundle their entire codebase, which includes this library.

Demo app transpilation

The demo app source code lives inside the src/docs folder. It is transpiled, bundled and minified by Webpack and Babel into the docs folder in the root directory (by running npm run docs:prod).

The reason that the folder doesn't have a logical name like demo is that GitHub Pages requires it to be called docs for some reason...

Getting started

Installation

Browser

npm install --save @timesinternet/times-videoplayer

Browser

import VideoPlayer from '@timesinternet/times-videoplayer';


export class MyComponent extends Component {
  
  render(){
    let config = {
      video: {
        id: "1x1eafjggl"
      }
    }
    return (
      <div>
        <h1>Player Demo</h1>
        <VideoPlayer apikey="test" config={config}/>
      </div>
    );
  }
}

export default MyComponent;