react-video-renderer - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.d.ts

 export { Video as default } from './video';
+export * from './video';

dist/index.js

 "use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
 Object.defineProperty(exports, "__esModule", { value: true });
 var video_1 = require("./video");
 exports.default = video_1.Video;
+__export(require("./video"));

dist/video.d.ts

@@ -6,6 +6,7 @@ /// <reference types="react" />
 export interface VideoState {
-    currentTime?: number;
-    volume?: number;
     status: VideoStatus;
-    duration?: number;
+    currentTime: number;
+    volume: number;
+    duration: number;
+    buffered: number;
 }
@@ -18,15 +19,20 @@ export interface VideoActions {
     requestFullscreen: () => void;
+    mute: () => void;
+    unmute: () => void;
+    toggleMute: () => void;
 }
+export declare type RenderCallback = (videoElement: ReactNode, state: VideoState, actions: VideoActions) => ReactNode;
 export interface VideoProps {
     src: string;
-    children: (videoElement: ReactNode, state: VideoState, actions: VideoActions) => ReactNode;
+    children: RenderCallback;
     controls?: boolean;
     autoPlay?: boolean;
+    preload?: string;
 }
 export interface VideoComponentState {
-    video?: HTMLVideoElement;
-    currentTime?: number;
-    volume?: number;
-    status?: VideoStatus;
-    duration?: number;
+    currentTime: number;
+    volume: number;
+    status: VideoStatus;
+    duration: number;
+    buffered: number;
 }
@@ -39,3 +45,2 @@ export declare class Video extends Component<VideoProps, VideoComponentState> {
     onVolumeChange: (e: any) => void;
-    onLoadedMetadata: (e: any) => void;
     onTimeUpdate: (e: any) => void;
@@ -51,5 +56,9 @@ onCanPlay: (e: any) => void;
     requestFullscreen: () => void;
+    mute: () => void;
+    unmute: () => void;
+    toggleMute: () => void;
     readonly actions: VideoActions;
     saveVideoRef: (element: HTMLVideoElement) => void;
+    onDurationChange: (e: any) => void;
     render(): React.ReactNode;
 }

dist/video.js

@@ -15,2 +15,3 @@ "use strict";
 var react_1 = require("react");
+var utils_1 = require("./utils");
 var Video = (function (_super) {
@@ -20,3 +21,9 @@ __extends(Video, _super);
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {};
+        _this.state = {
+            buffered: 0,
+            currentTime: 0,
+            volume: 0,
+            status: 'paused',
+            duration: 0
+        };
         _this.onVolumeChange = function (e) {
@@ -28,4 +35,2 @@ var video = e.target;
         };
-        _this.onLoadedMetadata = function (e) {
-        };
         _this.onTimeUpdate = function (e) {
@@ -36,2 +41,6 @@ var video = e.target;
             });
+            if (video.buffered.length) {
+                var buffered = video.buffered.end(video.buffered.length - 1);
+                _this.setState({ buffered: buffered });
+            }
         };
@@ -47,3 +56,2 @@ _this.onCanPlay = function (e) {
         _this.onPlay = function (e) {
-            var video = e.target;
             _this.setState({
@@ -74,7 +82,31 @@ status: 'playing'
         _this.requestFullscreen = function () {
-            _this.videoElement.webkitRequestFullScreen();
+            utils_1.requestFullScreen(_this.videoElement);
         };
+        _this.mute = function () {
+            _this.setVolume(0);
+        };
+        _this.unmute = function () {
+            _this.setVolume(0.5);
+        };
+        _this.toggleMute = function () {
+            var volume = _this.videoState.volume;
+            if (volume > 0) {
+                _this.mute();
+            }
+            else {
+                _this.unmute();
+            }
+        };
         _this.saveVideoRef = function (element) {
+            if (!element) {
+                return;
+            }
             _this.videoElement = element;
         };
+        _this.onDurationChange = function (e) {
+            var video = e.target;
+            _this.setState({
+                duration: video.duration
+            });
+        };
         return _this;
@@ -84,6 +116,8 @@ }
         var src = this.props.src;
-        var currentTime = this.state.currentTime;
+        var _a = this.state, currentTime = _a.currentTime, status = _a.status;
         var hasSrcChanged = prevProps.src !== src;
         if (hasSrcChanged) {
-            this.play();
+            if (status === 'playing') {
+                this.play();
+            }
             this.navigate(currentTime);
@@ -94,3 +128,3 @@ }
         get: function () {
-            var _a = this.state, currentTime = _a.currentTime, volume = _a.volume, status = _a.status, duration = _a.duration;
+            var _a = this.state, currentTime = _a.currentTime, volume = _a.volume, status = _a.status, duration = _a.duration, buffered = _a.buffered;
             return {
@@ -100,3 +134,4 @@ currentTime: currentTime,
                 status: status,
-                duration: duration
+                duration: duration,
+                buffered: buffered
             };
@@ -109,3 +144,3 @@ },
         get: function () {
-            var _a = this, play = _a.play, pause = _a.pause, navigate = _a.navigate, setVolume = _a.setVolume, requestFullscreen = _a.requestFullscreen;
+            var _a = this, play = _a.play, pause = _a.pause, navigate = _a.navigate, setVolume = _a.setVolume, requestFullscreen = _a.requestFullscreen, mute = _a.mute, unmute = _a.unmute, toggleMute = _a.toggleMute;
             return {
@@ -116,3 +151,6 @@ play: play,
                 setVolume: setVolume,
-                requestFullscreen: requestFullscreen
+                requestFullscreen: requestFullscreen,
+                mute: mute,
+                unmute: unmute,
+                toggleMute: toggleMute
             };
@@ -125,9 +163,9 @@ },
         var _a = this, videoState = _a.videoState, actions = _a.actions;
-        var video = this.state.video;
-        var _b = this.props, src = _b.src, children = _b.children, autoPlay = _b.autoPlay, controls = _b.controls;
-        return children(React.createElement("video", { ref: this.saveVideoRef, src: src, preload: "metadata", controls: controls, autoPlay: autoPlay, onPlay: this.onPlay, onPause: this.onPause, onVolumeChange: this.onVolumeChange, onLoadedMetadata: this.onLoadedMetadata, onTimeUpdate: this.onTimeUpdate, onCanPlay: this.onCanPlay }), videoState, actions);
+        var _b = this.props, src = _b.src, children = _b.children, autoPlay = _b.autoPlay, controls = _b.controls, preload = _b.preload;
+        return children(React.createElement("video", { ref: this.saveVideoRef, src: src, preload: preload, controls: controls, autoPlay: autoPlay, onPlay: this.onPlay, onPause: this.onPause, onVolumeChange: this.onVolumeChange, onTimeUpdate: this.onTimeUpdate, onCanPlay: this.onCanPlay, onDurationChange: this.onDurationChange }), videoState, actions);
     };
     Video.defaultProps = {
         autoPlay: false,
-        controls: false
+        controls: false,
+        preload: 'metadata'
     };
@@ -134,0 +172,0 @@ return Video;

package.json

 {
   "name": "react-video-renderer",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "dist/index.js",
@@ -10,3 +10,2 @@ "repository": "[e-mail]:zzarcon/react-video-renderer.git",
     "@atlaskit/button": "^7.0.2",
-    "@atlaskit/field-range": "^3.0.0",
     "@atlaskit/icon": "^11.0.0",
@@ -13,0 +12,0 @@ "ts-react-toolbox": "^0.0.46"

README.md

@@ -1,12 +0,95 @@
-# react-video-renderer
+# 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
 
-# TODO
+* Build custom video players with ease.
+* 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.
+* Dependency free, [<2KB size](https://bundlephobia.com/result?p=react-video-renderer)
+* Cross-browser support, forget annoying browser specifiy hacks.
 
-* Hide controls on fullScreen
+# Demo
 
-```css
-video::-webkit-media-controls {
-  display:none !important;
+[https://zzarcon.github.io/react-video-renderer](https://zzarcon.github.io/react-video-renderer)
+
+# Installation
+
+```
+$ yarn add react-video-renderer
+```
+
+# Usage
+
+Simple demo on how to render the video state and communicate user interactions up when volume or time changes.
+
+```jsx
+import Video from 'react-video-renderer';
+
+<Video src="https://mysite.com/video.mp4">
+  {(video, state, actions) => {
+    <div>
+      {video}
+      <div>{state.currentTime} / {state.duration} / {state.buffered}</div>
+      <progress value={state.currentTime} max={state.duration} onChange={actions.navigate} />
+      <progress value={state.volume} max={1} onChange={actions.setVolume} />
+      <button onClick={actions.play}>Play</button>
+      <button onClick={actions.pause}>Pause</button>
+      <button onClick={actions.requestFullScreen}>Fullscreen</button>
+    </div>
+  }}
+</Video>
+```
+
+<div align="center">
+  <img src="example/video-renderer-flow.png" alt="Logo" >
+  <br><br>
+</div>
+
+# Api
+
+**props**
+
+```typescript
+interface Props {
+  src: string;
+  children: RenderCallback;
+  controls?: boolean;
+  autoPlay?: boolean;
+  preload?: string;
 }
 ```
+
+**render method**
+
+```typescript
+type RenderCallback = (videoElement: ReactNode, state: VideoState, actions: VideoActions) => ReactNode;
+```
+
+**state**
+
+```typescript
+type VideoStatus = 'playing' | 'paused';
+
+interface State {
+  status: VideoStatus;
+  currentTime: number;
+  volume: number;
+  duration: number;
+  buffered: number;
+}
+```
+
+**actions**
+
+```typescript
+interface Actions {
+  play: () => void;
+  pause: () => void;
+  navigate: (time: number) => void;
+  setVolume: (volume: number) => void;
+  requestFullscreen: () => void;
+}
+```
+
+# 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

12700

increased by47.9%

Dev dependency count

3

decreased by-25%

Number of package files

9

increased by28.57%

Lines of code

241

increased by33.15%

Number of lines in readme file

95

increased by630.77%

No dependency changes