video-react-new 0.21.1 → 0.21.2

package/README.md

@@ -2,89 +2,482 @@
 
 [![npm version](https://badge.fury.io/js/video-react-new.svg)](https://badge.fury.io/js/video-react-new)
 [![Package Quality](http://npm.packagequality.com/shield/video-react-new.svg)](http://packagequality.com/#?package=video-react-new)
-[![codecov](https://codecov.io/gh/video-react-new/video-react-new/branch/master/graph/badge.svg)](https://codecov.io/gh/video-react-new/video-react-new)
 
-Video.React is a web video player built from the ground up for an HTML5 world using React library.
+Video-React-New is a web video player built from the ground up for an HTML5 world using React library.
 
-### ✨ The future of Video.React New
+### ✨ About Video-React-New
 
-Maintenance of Video.React is being taken over by [Mux](https://www.mux.com). Mux is a [video api](https://www.mux.com/video-api) for developers. The team at Mux have worked on many highly respected projects and are committed to improving video tooling for developers.
+This is a maintained fork of the original [video-react](https://github.com/video-react/video-react) project, with continued support for modern React versions (React 15-19) and ongoing bug fixes. The project aims to provide a stable, feature-rich video player component for React applications.
 
-Video.React will remain open source, but with a higher rate of fixes and releases over time. Thanks to everyone in the community for your ongoing support.
+**Key Features:**
+- 🎬 HTML5 video player built specifically for React
+- ⚛️ Full support for React 15, 16, 17, 18, and 19
+- 📱 Responsive design that works on mobile and desktop
+- 🎨 Customizable UI with SCSS/CSS
+- 🔌 Plugin support for HLS, DASH and other formats
+- ♿ Accessibility features with keyboard controls
+- 🌐 Multiple subtitle/caption track support
+- 🎛️ Playback rate control
+- 📺 Fullscreen support
+- 🔊 Volume control with mute toggle
 
 ## Installation
 
-Install `video-react-new` and **peer dependencies** via NPM
+Install `video-react-new` and **peer dependencies** via NPM:
 
 ```sh
 npm install --save video-react-new react react-dom
 ```
 
-import css in your app or add video-react-new styles in your page
+Or using Yarn:
+
+```sh
+yarn add video-react-new react react-dom
+```
+
+## Usage
+
+### Import Styles
+
+You need to import the CSS styles. Choose one of the following methods:
+
+**Method 1: Import CSS directly in your JavaScript**
 
 ```jsx
-import '~video-react-new/dist/video-react-new.css'; // import css
+import 'video-react-new/dist/video-react-new.css';
 ```
 
-or
+**Method 2: Import SCSS (for customization)**
 
 ```scss
-@import '~video-react-new/styles/scss/video-react-new.scss'; // or import scss
+@import '~video-react-new/styles/scss/video-react-new.scss';
 ```
 
+**Method 3: Link in HTML**
+
+```html
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/video-react-new/dist/video-react-new.css"
+/>
+```
 
+### Basic Example
 
-Import the components you need, example:
+Import the `Player` component and use it in your React application:
 
-```js
+```jsx
 import React from 'react';
 import { Player } from 'video-react-new';
 
-export default props => {
+export default function VideoPlayer() {
   return (
     <Player>
       <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
     </Player>
   );
-};
+}
 ```
 
+### Advanced Example with Multiple Sources and Subtitles
+
+```jsx
+import React from 'react';
+import { Player, BigPlayButton } from 'video-react-new';
+
+export default function AdvancedPlayer() {
+  return (
+    <Player
+      playsInline
+      poster="/assets/poster.png"
+      src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
+    >
+      <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
+      <track
+        kind="captions"
+        src="/assets/captions.en.vtt"
+        srclang="en"
+        label="English"
+        default
+      />
+      <track
+        kind="captions"
+        src="/assets/captions.es.vtt"
+        srclang="es"
+        label="Spanish"
+      />
+      <BigPlayButton position="center" />
+    </Player>
+  );
+}
+```
+
+### Controlling the Player
+
+You can control the player programmatically using refs:
+
+```jsx
+import React, { useRef } from 'react';
+import { Player } from 'video-react-new';
+
+export default function ControlledPlayer() {
+  const playerRef = useRef(null);
+
+  const handlePlay = () => {
+    playerRef.current.play();
+  };
+
+  const handlePause = () => {
+    playerRef.current.pause();
+  };
+
+  const handleSeek = (seconds) => {
+    playerRef.current.seek(seconds);
+  };
+
+  return (
+    <div>
+      <Player ref={playerRef}>
+        <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
+      </Player>
+      <button onClick={handlePlay}>Play</button>
+      <button onClick={handlePause}>Pause</button>
+      <button onClick={() => handleSeek(10)}>Skip to 10s</button>
+    </div>
+  );
+}
+```
+
+### Using with State Management
+
+```jsx
+import React, { useRef, useEffect } from 'react';
+import { Player } from 'video-react-new';
+
+export default function StatePlayer() {
+  const playerRef = useRef(null);
+
+  useEffect(() => {
+    // Subscribe to player state changes
+    playerRef.current.subscribeToStateChange((state, prevState) => {
+      console.log('Current time:', state.currentTime);
+      console.log('Duration:', state.duration);
+      console.log('Playing:', !state.paused);
+    });
+  }, []);
+
+  return (
+    <Player ref={playerRef}>
+      <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
+    </Player>
+  );
+}
+```
+
+## Available Components
+
+- `Player` - Main video player component
+- `BigPlayButton` - Large play button overlay
+- `LoadingSpinner` - Loading indicator
+- `PosterImage` - Poster image component
+- `ControlBar` - Player control bar
+- `PlayToggle` - Play/pause button
+- `ForwardControl` - Forward skip button
+- `ReplayControl` - Replay/rewind button
+- `FullscreenToggle` - Fullscreen button
+- `ProgressControl` - Progress bar
+- `SeekBar` - Seekable progress bar
+- `PlaybackRateMenuButton` - Playback speed control
+- `VolumeMenuButton` - Volume control
+- `ClosedCaptionButton` - Closed captions toggle
+- `RemainingTimeDisplay` - Remaining time display
+- `CurrentTimeDisplay` - Current time display
+- `DurationDisplay` - Total duration display
+- `TimeDivider` - Time divider
+- `Bezel` - Animated bezel for actions
+- `Shortcut` - Keyboard shortcuts
+
+## API Documentation
+
+### Player Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fluid` | boolean | `true` | Player size follows container width |
+| `width` | number | - | Player width in pixels |
+| `height` | number | - | Player height in pixels |
+| `src` | string | - | Video source URL |
+| `poster` | string | - | Poster image URL |
+| `preload` | string | `'auto'` | Preload strategy: 'auto', 'metadata', 'none' |
+| `autoPlay` | boolean | `false` | Autoplay video on load |
+| `loop` | boolean | `false` | Loop video playback |
+| `muted` | boolean | `false` | Mute video by default |
+| `playsInline` | boolean | `false` | Play inline on mobile devices |
+| `aspectRatio` | string | `'auto'` | Aspect ratio (e.g., '16:9', '4:3') |
+| `startTime` | number | - | Start playback at specific time (seconds) |
+
+### Player Methods (via ref)
+
+| Method | Description |
+|--------|-------------|
+| `play()` | Start playback |
+| `pause()` | Pause playback |
+| `load()` | Load video |
+| `seek(time)` | Seek to specific time in seconds |
+| `forward(seconds)` | Skip forward by seconds |
+| `replay(seconds)` | Skip backward by seconds |
+| `changeRate(rate)` | Change playback rate (0.5, 1, 1.5, 2, etc.) |
+| `changeVolume(volume)` | Change volume (0 to 1) |
+| `mute()` | Mute audio |
+| `unmute()` | Unmute audio |
+| `toggleFullscreen()` | Toggle fullscreen mode |
+| `subscribeToStateChange(callback)` | Subscribe to state changes |
+
 ## Browser support
 
 | Browser | Windows  |  Mac  | Linux | Android  |    iOS     |
 | :-----: | :------: | :---: | :---: | :------: | :--------: |
-| Chrome  |  **Y**   | **Y** | **Y** |  **Y**   | **Native** |
-| Firefox |  **Y**   | **Y** | **Y** | untested | **Native** |
-|  Edge   |  **Y**   |   -   |   -   |    -     |     -      |
-|  IE 11  | untested |   -   |   -   |    -     |     -      |
-| Safari  |    -     | **Y** |   -   |    -     |   **Y**    |
+| Chrome  |  **Yes**   | **Yes** | **Yes** |  **Yes**   | **Native** |
+| Firefox |  **Yes**   | **Yes** | **Yes** | **Yes** | **Native** |
+|  Edge   |  **Yes**   | **Yes**   |   -   |    -     |     -      |
+|  IE 11  | Untested |   -   |   -   |    -     |     -      |
+| Safari  |    -     | **Yes** |   -   |    -     |   **Yes**    |
+
+**Notes:**
+- Only the latest stable version is actively tested and supported
+- Video-react-new may work in older browser releases, and we accept pull requests for them
+- "Native" means the browser's native video player is used on mobile
+- For "Untested" browsers, community testing is welcome
+
+## HLS and DASH Support
+
+For HLS (HTTP Live Streaming) playback, you can use [hls.js](https://github.com/video-dev/hls.js):
+
+```jsx
+import React, { useRef, useEffect } from 'react';
+import { Player } from 'video-react-new';
+import Hls from 'hls.js';
+
+export default function HLSPlayer() {
+  const playerRef = useRef(null);
+
+  useEffect(() => {
+    const player = playerRef.current;
+    if (Hls.isSupported()) {
+      const hls = new Hls();
+      hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
+      hls.attachMedia(player.video.video);
+    } else if (player.video.video.canPlayType('application/vnd.apple.mpegurl')) {
+      player.video.video.src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
+    }
+  }, []);
+
+  return (
+    <Player ref={playerRef}>
+      <source src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" type="application/x-mpegURL" />
+    </Player>
+  );
+}
+```
+
+## Keyboard Shortcuts
+
+When the player is focused, you can use these keyboard shortcuts:
+
+| Key | Action |
+|-----|--------|
+| `Space` or `K` | Play/Pause |
+| `←` | Rewind 5 seconds |
+| `→` | Forward 5 seconds |
+| `↑` | Increase volume |
+| `↓` | Decrease volume |
+| `F` | Toggle fullscreen |
+| `M` | Toggle mute |
+| `0-9` | Jump to 0%-90% of video |
+| `Home` | Jump to beginning |
+| `End` | Jump to end |
+
+## Styling and Customization
 
-Please note that only the latest stable version is tested and supported. video-react-new may be usable in older releases, and we will accept pull requests for them, but they will not be frequently tested or actively supported.
+The player can be styled using CSS or SCSS. All components have BEM-style class names:
 
-For the items marked as "untested", we do welcome volunteer testers.
+```css
+/* Custom player styles */
+.video-react .video-react-big-play-button {
+  background-color: #ff0000;
+  border-color: #ff0000;
+}
+
+.video-react .video-react-control-bar {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.video-react .video-react-play-progress {
+  background-color: #ff0000;
+}
+```
+
+For SCSS customization, you can override variables before importing:
+
+```scss
+// Override default variables
+$primary-background-color: #000;
+$primary-foreground-color: #fff;
+$primary-color: #ff0000;
+
+// Import the styles
+@import '~video-react-new/styles/scss/video-react-new.scss';
+```
 
 ## Development
 
-Run tests:
+### Setup
 
-```sh
+Clone the repository and install dependencies:
+
+```bash
+git clone https://github.com/thind9xdev/video-react-new-dart.git
+cd video-react-new-dart
+npm install
+```
+
+### Run Development Server
+
+Start the development server with hot reloading:
+
+```bash
+npm start
+```
+
+The documentation site will be available at `http://localhost:8000`.
+
+### Run Tests
+
+Run the test suite:
+
+```bash
 npm test
 ```
 
-### Run from local
+Run tests in watch mode:
+
+```bash
+npm run test:watch
+```
+
+Run tests with coverage:
+
+```bash
+npm run test:coverage
+```
+
+### Build
+
+Build the library:
+
+```bash
+npm run build
+```
+
+Build the documentation:
 
 ```bash
-$ npm install
-$ npm start
+npm run build-docs
+```
+
+### Linting
+
+Run ESLint:
+
+```bash
+npm run lint
+```
+
+Format code with Prettier:
+
+```bash
+npm run format-all
 ```
 
 ## Contribution
 
-Interested in making contribution to this project? Want to report a bug? Please read the [contribution guide](./CONTRIBUTION.md).
+We welcome contributions! If you'd like to contribute to video-react-new:
+
+1. **Fork the repository** on GitHub
+2. **Clone your fork** locally
+3. **Create a feature branch**: `git checkout -b my-new-feature`
+4. **Make your changes** and add tests if applicable
+5. **Run tests**: `npm test`
+6. **Commit your changes**: `git commit -am 'Add some feature'`
+7. **Push to the branch**: `git push origin my-new-feature`
+8. **Submit a pull request**
+
+For more detailed information, please read the [contribution guide](./CONTRIBUTION.md).
+
+### Reporting Issues
+
+If you encounter a bug or have a feature request:
+
+1. Check the [issue list](https://github.com/thind9xdev/video-react-new-dart/issues) first
+2. If not already reported, create a new issue
+3. Provide as much detail as possible:
+   - Steps to reproduce the bug
+   - Expected vs actual behavior
+   - Browser and version
+   - React version
+   - Code examples or screenshots
+
+## FAQ
+
+### How do I customize the player appearance?
+
+You can customize the player by overriding CSS classes or importing the SCSS and modifying variables. See the [Styling and Customization](#styling-and-customization) section.
+
+### Does it support HLS/DASH streaming?
+
+Yes! You can use libraries like hls.js or dash.js with video-react-new. See the [HLS and DASH Support](#hls-and-dash-support) section.
+
+### Can I use this with TypeScript?
+
+Yes, the package includes TypeScript type definitions.
+
+### How do I access the native video element?
+
+Use a ref to access the player, then use `playerRef.current.video.video` to access the native HTML5 video element.
+
+### Does it work with Next.js?
+
+Yes, video-react-new works with Next.js. Just make sure to import styles appropriately for your Next.js configuration.
+
+## License
+
+MIT © [Video-React-New Contributors](https://github.com/thind9xdev/video-react-new-dart/graphs/contributors)
 
 ## Inspiration & Credits
 
-- This project is heavily inspired by [video.js](http://www.videojs.com), and most of our css styles came from [video.js's styles](https://github.com/videojs/video.js/tree/master/src/css).
-- The document site is built with [reactstrap](https://github.com/reactstrap/reactstrap).
-- All the icons came from [Google Material Icons](https://material.io/icons/)
-- Fonts were built by [iconmon](https://icomoon.io/).
+- This project is a maintained fork of [video-react](https://github.com/video-react/video-react)
+- Heavily inspired by [video.js](http://www.videojs.com)
+- CSS styles adapted from [video.js's styles](https://github.com/videojs/video.js/tree/master/src/css)
+- Documentation site built with [reactstrap](https://github.com/reactstrap/reactstrap)
+- Icons from [Google Material Icons](https://material.io/icons/)
+- Fonts built with [IcoMoon](https://icomoon.io/)
+
+## Links
+
+- [GitHub Repository](https://github.com/thind9xdev/video-react-new-dart)
+- [NPM Package](https://www.npmjs.com/package/video-react-new)
+- [Issue Tracker](https://github.com/thind9xdev/video-react-new-dart/issues)
+- [Changelog](./CHANGELOG.md)
+
+## Support
+
+If you find this project useful, please consider:
+- ⭐ Starring the repository
+- 🐛 Reporting bugs
+- 💡 Suggesting new features
+- 🤝 Contributing code or documentation
+- 📢 Sharing with others
+
+---
+
+**Made with ❤️ by the Video-React-New community**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "video-react-new",
-  "version": "0.21.1",
+  "version": "0.21.2",
   "description": "video-react-new is a web video player built from the ground up for an HTML5 world using React library.",
   "main": "dist/video-react-new.cjs.js",
   "module": "dist/video-react-new.es.js",
@@ -10,8 +10,6 @@
     "test": "BABEL_ENV=test jest",
     "test:watch": "BABEL_ENV=test jest --watch",
     "test:coverage": "BABEL_ENV=test jest --coverage",
-    "start": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" webpack-dev-server --watch",
-    "build-docs": "cross-env WEBPACK_BUILD=production NODE_OPTIONS=\"--openssl-legacy-provider\" webpack --progress --colors",
     "build": "rollup -c && cp src/index.d.ts dist/index.d.ts",
     "prebuild": "cross-env BABEL_ENV=lib-dir babel src --out-dir lib --ignore src/__tests__/",
     "create-release": "npm test && sh ./scripts/release",
@@ -20,7 +18,7 @@
     "create-patch": "sh ./scripts/release patch",
     "publish-release": "npm test && sh ./scripts/publish",
     "lint": "eslint src",
-    "format-all": "prettier --config .prettierrc.js --write \"src/**/*.{js,json,md}\" \"docs/**/*.{js,json,md}\" \"*.{js,json,md}\"",
+    "format-all": "prettier --config .prettierrc.js --write \"src/**/*.{js,json,md}\" \"*.{js,json,md}\"",
     "format-one": "prettier --config .prettierrc.js --write"
   },
   "husky": {
@@ -101,16 +99,10 @@
     "@cfaester/enzyme-adapter-react-18": "^0.8.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.8.0",
-    "babel-loader": "^8.0.6",
-    "bootstrap": "^4.3.1",
-    "clean-webpack-plugin": "^1.0.0",
     "conventional-changelog-cli": "^1.3.22",
     "conventional-recommended-bump": "^1.0.0",
-    "copy-webpack-plugin": "^4.6.0",
     "cross-env": "^2.0.0",
-    "css-loader": "^2.1.1",
     "deep-freeze": "0.0.1",
-    "ejs": "^2.6.1",
     "enzyme": "^3.10.0",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
@@ -118,23 +110,12 @@
     "eslint-plugin-import": "^2.17.3",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.13.0",
-    "file-loader": "^3.0.1",
-    "history": "^3.0.0",
-    "hls.js": "^0.6.10",
-    "holderjs": "^2.9.6",
     "husky": "^1.3.1",
     "jest": "^24.8.0",
-    "json-loader": "^0.5.7",
     "lint-staged": "^8.2.0",
-    "mini-css-extract-plugin": "^0.5.0",
     "prettier": "^1.18.2",
-    "raw-loader": "^1.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-helmet": "^5.2.1",
-    "react-prism": "^4.3.2",
-    "react-router": "^3.2.1",
-    "reactstrap": "^7.0.2",
     "rollup": "^1.15.1",
     "rollup-plugin-babel": "^4.2.0",
     "rollup-plugin-babel-minify": "^7.0.0",
@@ -143,14 +124,6 @@
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-sass": "^1.2.2",
     "sass": "^1.70.0",
-    "sass-loader": "^7.3.1",
-    "sinon": "^1.17.6",
-    "static-site-generator-webpack-plugin": "^3.4.2",
-    "style-loader": "^0.13.1",
-    "uglifyjs-webpack-plugin": "^2.1.3",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.33.0",
-    "webpack-cli": "^3.3.4",
-    "webpack-dev-server": "^3.7.1"
+    "sinon": "^1.17.6"
   }
 }