react-video-renderer - npm Package Compare versions

Comparing version 2.0.1 to 2.1.1

package.json

 {
   "name": "react-video-renderer",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "main": "dist/index.js",
@@ -13,6 +13,7 @@ "repository": "[e-mail]:zzarcon/react-video-renderer.git",
     "@atlaskit/spinner": "^8.0.0",
+    "react-gh-corner": "^1.1.2",
     "ts-react-toolbox": "^0.0.46"
   },
   "engines": {
-    "node": "^8.4.0"
+    "node": ">=8.5.0"
   },
@@ -35,3 +36,14 @@ "scripts": {
     "dist"
+  ],
+  "keywords": [
+    "react",
+    "video",
+    "renderer",
+    "render-props",
+    "props",
+    "actions",
+    "state",
+    "player",
+    "video-player"
   ]
 }

README.md

 # react-video-renderer [![Build Status](https://travis-ci.org/zzarcon/react-video-renderer.svg?branch=master)](https://travis-ci.org/zzarcon/react-video-renderer)
-> Videos in React with render props
+> Build custom video players effortless
 
-* Build custom video players with ease.
+* Render props, get all video state passed down as props.
 * Bidirectional flow to render and update the video state in a declarative way.
 * No side effects out of the box, you just need to build the UI.
+* Actions handling: play, pause, mute, unmute, navigate, etc
 * Dependency free, [<2KB size](https://bundlephobia.com/result?p=react-video-renderer)
-* Cross-browser support, forget annoying browser specifiy hacks.
+* Cross-browser support, no more browser hacks.
 
-# Demo
+# Demo 🎩
 
 [https://zzarcon.github.io/react-video-renderer](https://zzarcon.github.io/react-video-renderer)
 
-# Installation
+# Installation 🚀
 
@@ -20,5 +21,5 @@ ```
 
-# Usage
+# Usage ⛏
 
-Simple demo on how to render the video state and communicate user interactions up when volume or time changes.
+> Render video state and communicate user interactions up when volume or time changes.
 
@@ -29,3 +30,3 @@ ```jsx
 <Video src="https://mysite.com/video.mp4">
-  {(video, state, actions) => {
+  {(video, state, actions) => (
     <div>
@@ -40,3 +41,3 @@ {video}
     </div>
-  }}
+  )}
 </Video>
@@ -50,3 +51,3 @@ ```
 
-# Api
+# Api 💅
 
@@ -74,6 +75,4 @@ **props**
 ```typescript
-type VideoStatus = 'playing' | 'paused';
-
-interface State {
-  status: VideoStatus;
+interface VideoState {
+  status: 'playing' | 'paused' | 'errored';
   currentTime: number;
@@ -83,2 +82,5 @@ volume: number;
   buffered: number;
+  isMuted: boolean;
+  isLoading: boolean;
+  error?: MediaError | null;
 }
@@ -90,3 +92,3 @@ ```
 ```typescript
-interface Actions {
+interface VideoActions {
   play: () => void;
@@ -97,7 +99,55 @@ pause: () => void;
   requestFullscreen: () => void;
+  mute: () => void;
+  unmute: () => void;
+  toggleMute: () => void;
 }
 ```
 
-# Author
+# Error handling 💥
 
-🧔 [@zzarcon](https://twitter.com/zzarcon)
+> this is all you need to detect video errors 
+
+```jsx
+<Video src="some-error-video.mov">
+  {(video, state) => {
+    if (state.status === 'errored') {
+      return (
+        <ErrorWrapper>
+          Error
+        </ErrorWrapper>
+      );
+    }
+
+    return (
+      <div>
+        {video}
+      </div>
+    )
+  }}
+</Video>
+```
+
+# Loading state ✨
+
+> you can still interact with the player regardless if the video is loading or not
+
+```jsx
+<Video src="me-video.mp4">
+  {(video, state, actions) => {
+    const loadingComponent = state.isLoading ? 'loading...' : undefined;
+
+    return (
+      <div>
+        {video}
+        {loadingComponent}
+        <button onClick={actions.play}>Play</button>
+        <button onClick={actions.pause}>Pause</button>
+      </div>
+    )
+  }}
+</Video>
+```
+
+# Author 🧔
+
+[@zzarcon](https://twitter.com/zzarcon)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15469

increased by8.3%

Number of lines in readme file

145

increased by52.63%

Worsened metrics

Dev dependency count

6

increased by20%

No dependency changes