readm clean up

asadbek064 · Aug 23, 2023 · fcb0680 · fcb0680
1 parent 9ea5a00
commit fcb0680
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 67 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,6 +1,6 @@
-# Contributing to react-vid-player
+# Contributing to react-all-player
 
-Thanks for contributing to react-vid-player!
+Thanks for contributing to react-all-player!
 
 ## Install
 

diff --git a/README.md b/README.md
@@ -1,43 +1,60 @@
-# react-vid-player
+# react-all-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>
+react-all-player is a simple, lightweight, accessible and customizable React media player that supports modern browsers.
 
-<p align='center'>
-  Simple React component that provides versatile and good looking UI video player.
-</p>
+[Checkout the demo](https://react-all-player.asadbek.dev)
+
+[![npm version](https://img.shields.io/npm/v/react-all-player.svg)](https://www.npmjs.com/package/react-all-player) 
+
+[![Screenshot of react-all-player ](https://#/)](https://react-all-player.asadbek.dev)
+
+# Features
+
+- 📼 **HTML Video & Audio, YouTube & Vimeo** - support for the major formats
+- 💪 **Accessible** - full support for VTT captions and screen readers
+- 🔧 **Customizable** - make the player look how you want with the markup you want
+- 📱 **Responsive** - works with any screen size
+- 📹 **Streaming** - support for hls.js, and dash.js streaming playback
+- 🎛 **API** - toggle playback, volume, seeking, and more through a standardized API
+- 🎤 **Events** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
+- 🔎 **Fullscreen** - supports native fullscreen with fallback to "full window" modes
+- ⌨️ **Shortcuts - supports keyboard shortcuts
+- 🖥 **Picture-in-Picture** - supports picture-in-picture mode
+- 📱 **Playsinline** - supports the `playsinline` attribute
+- 🏎 **Speed controls** - adjust speed on the fly
+- 📖 **Multiple captions** - support for multiple caption tracks
+- 👌 **Preview thumbnails** - support for displaying preview thumbnails
 
 ## Usage
 
 ```bash
-npm install react-vid-player # or yarn add react-vid-player
+npm install react-all-player # or yarn add react-all-player
 ```
 
 ```jsx
-import react-vid-player from 'react-vid-player';
+import react-all-player from 'react-all-player';
 
-<react-vid-player
+<react-all-player
   sources={[
     {
-      file: 'https://www.googleapis.com/drive/v3/files/1Q6LsjpWgPoYIs6GaD8G6lNZRM2-VJXAY?alt=media&key=AIzaSyCFwU3MAtwS2TgPPEObV-hDXexH83ae1Fs',
+      file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
       label: '1080p',
     },
     {
-      file: 'https://www.googleapis.com/drive/v3/files/1sKXS6VU8uUGeW8WPKDp2dXxwAJ96Tk9c?alt=media&key=AIzaSyCFwU3MAtwS2TgPPEObV-hDXexH83ae1Fs',
+      file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
       label: '720p',
     },
   ]}
   subtitles={[
     {
       lang: 'en',
       language: 'English',
-      file: 'https://subtitles.netpop.app/subtitles/20211116/1637057950304_国王排名 2_英语.srt',
+      file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
     },
     {
-      lang: 'CN',
-      language: 'Chinese',
-      file: 'https://subtitles.netpop.app/subtitles/20211116/1637057969656_国王排名 2_越南语.srt',
+      lang: 'fr',
+      language: 'French',
+      file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
     },
   ]}
 />;
@@ -46,12 +63,12 @@ import react-vid-player from 'react-vid-player';
 
 ## Props
 
-react-vid-player accepts video element props and these specific props
+react-all-player accepts video element props and these specific props
 
 | Prop              | Type                                                                                                   | Description                                                 | Default                                                                                                         | Required |
 | ----------------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | -------- |
-| `sources`         | [Source](https://github.com/asadbek064/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/asadbek064/react-vid-player/blob/main/src/types/types.ts#L6)[]                   | An array of subtitles contain `file`, `lang` and `language` | `null`                                                                                                          | `false`  |
+| `sources`         | [Source](https://github.com/asadbek064/react-all-player/blob/main/src/types/types.ts#L1)[]                     | An array of sources contain `file`, `label` and `type`      | `null`                                                                                                          | `true`   |
+| `subtitles`       | [Subtitle](https://github.com/asadbek064/react-all-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`  |
@@ -60,23 +77,23 @@ react-vid-player accepts video element props and these specific props
 | `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/asadbek064/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L41)        | Translations                                                | [Default Translations](https://github.com/asadbek064/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L69) | `false`  |
-| `hotkeys`         | [Hotkey](https://github.com/asadbek064/react-vid-player/blob/main/src/types/types.ts#L25)[]                    | Hotkeys (shortcuts)                                         | [Default Hotkeys](https://github.com/asadbek064/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L99)      | `false`  |
-| `components`      | [Component](https://github.com/asadbek064/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L99)[] | See [Customization](#customization)                         | [Default components](https://github.com/asadbek064/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L46)   | `false`  |
+| `i18n`            | [I18n](https://github.com/asadbek064/react-all-player/blob/main/src/contexts/VideoPropsContext.tsx#L41)        | Translations                                                | [Default Translations](https://github.com/asadbek064/react-all-player/blob/main/src/contexts/VideoPropsContext.tsx#L69) | `false`  |
+| `hotkeys`         | [Hotkey](https://github.com/asadbek064/react-all-player/blob/main/src/types/types.ts#L25)[]                    | Hotkeys (shortcuts)                                         | [Default Hotkeys](https://github.com/asadbek064/react-all-player/blob/main/src/contexts/VideoPropsContext.tsx#L99)      | `false`  |
+| `components`      | [Component](https://github.com/asadbek064/react-all-player/blob/main/src/contexts/VideoPropsContext.tsx#L99)[] | See [Customization](#customization)                         | [Default components](https://github.com/asadbek064/react-all-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/asadbek064/react-vid-player/blob/main/src/contexts/VideoPropsContext.tsx#L46)
+You can customize the player by passing defined components with `components` props. See [defined components](https://github.com/asadbek064/react-all-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';
+import react-all-player, { TimeIndicator } from 'react-all-player';
 
-<react-vid-player
+<react-all-player
   {...props}
   components={{
     Controls: () => {
@@ -92,18 +109,18 @@ import react-vid-player, { TimeIndicator } from 'react-vid-player';
 />;
 ```
 
-_Note: use built-in [hooks](https://github.com/asadbek064/react-vid-player/tree/main/src/hooks) and [components](https://github.com/asadbek064/react-vid-player/tree/main/src/components) for better customization_
+_Note: use built-in [hooks](https://github.com/asadbek064/react-all-player/tree/main/src/hooks) and [components](https://github.com/asadbek064/react-all-player/tree/main/src/components) for better customization_
 
 ### Override structure
 
-react-vid-player use this [default structure](https://github.com/asadbek064/react-vid-player/blob/main/src/components/DefaultUI/DefaultUI.tsx)
+react-all-player use this [default structure](https://github.com/asadbek064/react-all-player/blob/main/src/components/DefaultUI/DefaultUI.tsx)
 
-To override it, simply pass your own structure as react-vid-player's `children`
+To override it, simply pass your own structure as react-all-player's `children`
 
 ```jsx
-import react-vid-player, { Controls, Player, Overlay } from 'react-vid-player';
+import react-all-player, { Controls, Player, Overlay } from 'react-all-player';
 
-<react-vid-player {...props}>
+<react-all-player {...props}>
   <div>
     <div>
       <Player />
@@ -115,28 +132,20 @@ import react-vid-player, { Controls, Player, Overlay } from 'react-vid-player';
       <Overlay />
     </div>
     <div>
-      <p>Look I'm over here!</p>
+      <p>here!</p>
     </div>
   </div>
-</react-vid-player>;
+</react-all-player>;
 ```
 
 ## Methods
 
-You can access to the `video` element by passing `ref` to react-vid-player and use all its methods.
+You can access to the `video` element by passing `ref` to react-all-player and use all its methods.
 
 ## Supported formats
 
-react-vid-player supports all `video` element supported formats and `HLS` format
+react-all-player supports all `video` element supported formats and `HLS` format
 
 ## Contributing
 
-See the [contribution guidelines](github.com/asadbek064/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)
+See the [contribution guidelines](github.com/asadbek064/react-all-player/blob/main/CONTRIBUTING.md) before creating a pull request.
diff --git a/example/package.json b/example/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-vid-player-example",
+  "name": "react-all-player-example",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
@@ -9,7 +9,7 @@
     "push-gh-pages": "push-dir --dir=dist --branch=gh-pages --cleanup --verbose"
   },
   "dependencies": {
-    "react-vid-player": "link:../",
+    "react-all-player": "link:../",
     "react": "link:../node_modules/react",
     "react-app-polyfill": "^1.0.0",
     "react-dom": "link:../node_modules/react-dom/profiling",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
 import editorTheme from 'prism-react-renderer/themes/nightOwl'
-import Player from 'react-vid-player'
+import Player from 'react-all-player'
 import { buildAbsoluteURL } from 'url-toolkit'
 
 const initialCode = `

diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -5,14 +5,14 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   plugins: [react()],
   optimizeDeps: {
-    exclude: ['react-vid-player']
+    exclude: ['react-all-player']
   },
   build: {
-    commonjsOptions: { exclude: ['react-vid-player'], include: [] }
+    commonjsOptions: { exclude: ['react-all-player'], include: [] }
   },
   server: {
     watch: {
-      ignored: ['!**/node_modules/react-vid-player/**']
+      ignored: ['!**/node_modules/react-all-player/**']
     }
   }
 })
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
-  "name": "react-vid-player",
+  "name": "react-all-player",
   "author": "asadbek064",
   "module": "dist/index.js",
   "size-limit": [

diff --git a/src/components/DefaultUI/DefaultUI.tsx b/src/components/DefaultUI/DefaultUI.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useInteract } from '../../contexts/VideoInteractingContext';
-import { Components, react-vid-playerProps } from '../../contexts/VideoPropsContext';
+import { Components, react-all-playerProps } from '../../contexts/VideoPropsContext';
 import useDoubleTap from '../../hooks/useDoubleTap';
 import useGlobalHotKeys from '../../hooks/useGlobalHotKeys';
 import { clamp, classNames } from '../../utils';
@@ -33,7 +33,7 @@ const defaultComponents: Components = {
   MobileVolumeSlider,
 };
 
-const DefaultUI = React.forwardRef<HTMLVideoElement, react-vid-playerProps>(
+const DefaultUI = React.forwardRef<HTMLVideoElement, react-all-playerProps>(
   (
     {
       hlsRef = React.createRef(),

diff --git a/src/constants.ts b/src/constants.ts
@@ -1 +1 @@
-export const PLAYER_CONTAINER_CLASS = 'react-vid-player-container';
+export const PLAYER_CONTAINER_CLASS = 'react-all-player-container';
diff --git a/src/contexts/GlobalContext.tsx b/src/contexts/GlobalContext.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { SubtitleSettingsProvider } from './SubtitleSettingsContext';
 import { VideoInteractingContextProvider } from './VideoInteractingContext';
-import { react-vid-playerProps, VideoPropsProvider } from './VideoPropsContext';
+import { react-all-playerProps, VideoPropsProvider } from './VideoPropsContext';
 import { VideoStateContextProvider } from './VideoStateContext';
 
-const GlobalContext: React.FC<react-vid-playerProps> = ({
+const GlobalContext: React.FC<react-all-playerProps> = ({
   sources,
   subtitles = [],
   children,

diff --git a/src/contexts/SubtitleSettingsContext.tsx b/src/contexts/SubtitleSettingsContext.tsx
@@ -35,7 +35,7 @@ export const SubtitleSettingsContext =
     setState: () => {},
   });
 
-const LOCALSTORAGE_KEY = 'react-vid-player_subtitle_settings';
+const LOCALSTORAGE_KEY = 'react-all-player_subtitle_settings';
 
 export const SubtitleSettingsProvider: React.FC<
   SubtitleSettingsProviderProps

diff --git a/src/contexts/VideoPropsContext.tsx b/src/contexts/VideoPropsContext.tsx
@@ -66,7 +66,7 @@ export type Components = {
   MobileControls: React.FC;
 };
 
-export interface react-vid-playerProps extends PlayerProps {
+export interface react-all-playerProps extends PlayerProps {
   thumbnail?: string;
   i18n?: I18n;
   shortcuts?: Shortcuts;
@@ -136,9 +136,9 @@ const mergeHotkeys = (main: HotKey[], target: HotKey[]) => {
 
 export const VideoPropsContext =
   // @ts-ignore
-  React.createContext<Required<react-vid-playerProps>>(null);
+  React.createContext<Required<react-all-playerProps>>(null);
 
-export const VideoPropsProvider: React.FC<Partial<react-vid-playerProps>> = ({
+export const VideoPropsProvider: React.FC<Partial<react-all-playerProps>> = ({
   children,
   ...props
 }) => {

diff --git a/src/contexts/VideoStateContext.tsx b/src/contexts/VideoStateContext.tsx
@@ -42,7 +42,7 @@ export const VideoStateContext = React.createContext<VideoContextProps>({
   setState: () => {},
 });
 
-const LOCALSTORAGE_KEY = 'react-vid-player_video_settings';
+const LOCALSTORAGE_KEY = 'react-all-player_video_settings';
 
 export const VideoStateContextProvider: React.FC<VideoContextProviderProps> = ({
   children,

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,10 +4,10 @@ import './reset.css';
 import * as React from 'react';
 import GlobalContext from './contexts/GlobalContext';
 import { VideoContextProvider } from './contexts/VideoContext';
-import { react-vid-playerProps } from './contexts/VideoPropsContext';
+import { react-all-playerProps } from './contexts/VideoPropsContext';
 import DefaultUI from './components/DefaultUI';
 
-const InnerPlayer = React.forwardRef<HTMLVideoElement, react-vid-playerProps>(
+const InnerPlayer = React.forwardRef<HTMLVideoElement, react-all-playerProps>(
   ({ hlsRef = React.createRef(), children, ...props }, ref) => {
     const videoRef = React.useRef<HTMLVideoElement | null>(null);
 
@@ -31,7 +31,7 @@ const InnerPlayer = React.forwardRef<HTMLVideoElement, react-vid-playerProps>(
   }
 );
 
-const react-vid-player = React.forwardRef<HTMLVideoElement, react-vid-playerProps>(
+const react-all-player = React.forwardRef<HTMLVideoElement, react-all-playerProps>(
   (
     { sources, subtitles = [], hlsRef = React.createRef(), children, ...props },
     ref
@@ -53,11 +53,11 @@ const react-vid-player = React.forwardRef<HTMLVideoElement, react-vid-playerProp
 );
 
 InnerPlayer.displayName = 'InnerPlayer';
-react-vid-player.displayName = 'react-vid-player';
+react-all-player.displayName = 'react-all-player';
 
 export * from './components';
 export * from './hooks';
 export * from './hotkeys';
 export * from './contexts';
 
-export default react-vid-player;
+export default react-all-player;