initial

.eslintrc.json

@@ -0,0 +1,55 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "prettier",
+    "plugin:import/recommended"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
+  "rules": {
+    "no-unsafe-optional-chaining": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+
+    "prettier/prettier": [
+      "warn",
+      {
+        "endOfLine": "auto",
+        "singleQuote": true
+      }
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {}
+    }
+  }
+}

.github/workflows/main.yml

@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['10.x', '12.x', '14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: yarn build

.github/workflows/size.yml

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,7 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+.parcel-cache
+yarn.lock

.npmignore

@@ -0,0 +1,13 @@
+src
+example
+node_modules
+yarn.lock
+yarn-error.log
+.github
+.parcel-cache
+.*
+.*.json
+tsconfig.json
+tests
+coverage
+*.development.*

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "jsxSingleQuote": true,
+  "singleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "bracketSameLine": false,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}

CONTRIBUTING.md

@@ -0,0 +1,27 @@
+# Contributing to react-vid-player
+
+Thanks for contributing to react-vid-player!
+
+## Install
+
+```bash
+git clone https://github.com/asadbek064/ReactVidPlayer.git
+cd ReactVidPlayer
+npm install # or yarn
+npm start # or yarn start
+cd example
+npm start # or yarn start
+open http://localhost:3000
+```
+
+## `dist` files
+
+There is **no need** to build or commit files in `dist` after making changes. The `dist` files will be automatically built and committed when new versions are released, so your changes will be included then.
+
+## Linting
+
+This project uses [standard](https://github.com/feross/standard) code style. Be sure to lint the code after making changes and fix any issues that come up.
+
+```bash
+npm run lint # or yarn lint
+```

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 hoangvu12
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,143 @@
+# react-vid-player
+
+<a href='https://www.npmjs.com/package/react-vid-player'>
+  <img src='https://img.shields.io/npm/v/react-vid-player.svg' alt='Latest npm version'>
+</a>
+
+<p align='center'>
+  A simple React component that provide good looking UI video player
+</p>
+
+## Usage
+
+```bash
+npm install react-vid-player # or yarn add react-vid-player
+```
+
+```jsx
+import react-vid-player from 'react-vid-player';
+
+<react-vid-player
+  sources={[
+    {
+      file: 'https://www.googleapis.com/drive/v3/files/1Q6LsjpWgPoYIs6GaD8G6lNZRM2-VJXAY?alt=media&key=AIzaSyCFwU3MAtwS2TgPPEObV-hDXexH83ae1Fs',
+      label: '1080p',
+    },
+    {
+      file: 'https://www.googleapis.com/drive/v3/files/1sKXS6VU8uUGeW8WPKDp2dXxwAJ96Tk9c?alt=media&key=AIzaSyCFwU3MAtwS2TgPPEObV-hDXexH83ae1Fs',
+      label: '720p',
+    },
+  ]}
+  subtitles={[
+    {
+      lang: 'en',
+      language: 'English',
+      file: 'https://subtitles.netpop.app/subtitles/20211116/1637057950304_国王排名 2_英语.srt',
+    },
+    {
+      lang: 'vi',
+      language: 'Tiếng Việt',
+      file: 'https://subtitles.netpop.app/subtitles/20211116/1637057969656_国王排名 2_越南语.srt',
+    },
+  ]}
+/>;
+```
+
+Or [play](https://hoangvu12.github.io/react-vid-player/) around with this component
+
+## Props
+
+react-vid-player accepts video element props and these specific props
+
+| Prop              | Type                                                                                                   | Description                                                 | Default                                                                                                         | Required |
+| ----------------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | -------- |
+| `sources`         | [Source](https://github.com/hoangvu12/react-vid-player/blob/main/src/types/types.ts#L1)[]                     | An array of sources contain `file`, `label` and `type`      | `null`                                                                                                          | `true`   |
+| `subtitles`       | [Subtitle](https://github.com/hoangvu12/react-vid-player/blob/main/src/types/types.ts#L6)[]                   | An array of subtitles contain `file`, `lang` and `language` | `null`                                                                                                          | `false`  |
+| `hlsRef`          | `React.MutableRefObject<Hls \| null>`                                                                  | `hls.js` instance ref                                       | `React.createRef()`                                                                                             | `false`  |
+| `dashRef`         | `React.MutableRefObject<DashJS.MediaPlayerClass \| null>`                                              | `dashjs` instance ref                                       | `React.createRef()`                                                                                             | `false`  |
+| `hlsConfig`       | `Hls['config']`                                                                                        | `hls.js` config                                             | `{}`                                                                                                            | `false`  |
+| `changeSourceUrl` | `(currentSourceUrl: string, source: Source): string`                                                   | A function that modify given source url (`hls` only)        | `() => null`                                                                                                    | `false`  |
+| `onHlsInit`       | `(hls: Hls): void`                                                                                     | A function that called after hls.js initialization          | `() => null`                                                                                                    | `false`  |
+| `onDashInit`      | `(dash: DashJS.MediaPlayerClass): void`                                                                | A function that called after dashjs initialization          | `() => null`                                                                                                    | `false`  |
+| `onInit`          | `(videoEl: HTMLVideoElement): void`                                                                    | A function that called after video initialization           | `() => null`                                                                                                    | `false`  |
+| `ref`             | `React.MutableRefObject<HTMLVideoElement \| null>`                                                     | `video` element ref                                         | `null`                                                                                                          | `false`  |
+| `i18n`            | [I18n](https://github.com/hoangvu12/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L41)        | Translations                                                | [Default Translations](https://github.com/hoangvu12/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L69) | `false`  |
+| `hotkeys`         | [Hotkey](https://github.com/hoangvu12/react-vid-player/blob/main/src/types/types.ts#L25)[]                    | Hotkeys (shortcuts)                                         | [Default Hotkeys](https://github.com/hoangvu12/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L99)      | `false`  |
+| `components`      | [Component](https://github.com/hoangvu12/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L99)[] | See [Customization](#customization)                         | [Default components](https://github.com/hoangvu12/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L46)   | `false`  |
+| `thumbnail`       | string                                                                                                 | Thumbnails on progress bar hover                            | `null`                                                                                                          | `false`  |
+
+## Customization
+
+You can customize the player by passing defined components with `components` props. See [defined components](https://github.com/hoangvu12/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L46)
+
+By passing components, the passed components will override default existing components. Allow you to customize the player how you want it to be.
+
+### Example
+
+```jsx
+import react-vid-player, { TimeIndicator } from 'react-vid-player';
+
+<react-vid-player
+  {...props}
+  components={{
+    Controls: () => {
+      return (
+        <div className="flex items-center justify-between">
+          <p>A custom Controls component</p>
+
+          <TimeIndicator />
+        </div>
+      );
+    },
+  }}
+/>;
+```
+
+_Note: use built-in [hooks](https://github.com/hoangvu12/react-vid-player/tree/main/src/hooks) and [components](https://github.com/hoangvu12/react-vid-player/tree/main/src/components) for better customization_
+
+### Override structure
+
+react-vid-player use this [default structure](https://github.com/hoangvu12/react-vid-player/blob/main/src/components/DefaultUI/DefaultUI.tsx)
+
+To override it, simply pass your own structure as react-vid-player's `children`
+
+```jsx
+import react-vid-player, { Controls, Player, Overlay } from 'react-vid-player';
+
+<react-vid-player {...props}>
+  <div>
+    <div>
+      <Player />
+    </div>
+    <div>
+      <Controls />
+    </div>
+    <div>
+      <Overlay />
+    </div>
+    <div>
+      <p>Look I'm over here!</p>
+    </div>
+  </div>
+</react-vid-player>;
+```
+
+## Methods
+
+You can access to the `video` element by passing `ref` to react-vid-player and use all its methods.
+
+## Supported formats
+
+react-vid-player supports all `video` element supported formats and `HLS` format
+
+## Contributing
+
+See the [contribution guidelines](github.com/hoangvu12/react-vid-player/blob/main/CONTRIBUTING.md) before creating a pull request.
+
+## Other video players
+
+- [react-player](https://github.com/CookPete/react-player)
+- [react-tuby](https://github.com/napthedev/react-tuby)
+- [video-react](https://github.com/video-react/video-react)
+- [plyr](https://github.com/sampotts/plyr)
+- [video.js](https://github.com/videojs/video.js)

example/.editorconfig

@@ -0,0 +1,6 @@
+root = true
+
+[**/**.{yml,ts,tsx,js,json,jsx,html}]
+indent_style = space
+indent_size = 2
+insert_final_newline = true