react-video-renderer - npm Package Compare versions

Comparing version 2.4.4 to 2.4.5

dist/es2015/video.d.ts

@@ -1,4 +0,3 @@
-/// <reference types="react" />
 import * as React from 'react';
-import { Component, ReactNode, SyntheticEvent, RefObject } from 'react';
+import { Component, ReactElement, ReactNode, SyntheticEvent, RefObject } from 'react';
 export declare type VideoStatus = 'playing' | 'paused' | 'errored';
@@ -30,10 +29,11 @@ export declare type VideoError = MediaError | null;
 }
-export declare type RenderCallback = (videoElement: ReactNode, state: VideoState, actions: VideoActions, ref: RefObject<SourceElement>) => ReactNode;
+export declare type RenderCallback = (videoElement: ReactElement<SourceElement>, state: VideoState, actions: VideoActions, ref: RefObject<SourceElement>) => ReactNode;
 export interface VideoProps {
     src: string;
     children: RenderCallback;
-    sourceType?: 'video' | 'audio';
-    controls?: boolean;
-    autoPlay?: boolean;
-    preload?: string;
+    defaultTime: number;
+    sourceType: 'video' | 'audio';
+    controls: boolean;
+    autoPlay: boolean;
+    preload: string;
     poster?: string;
@@ -43,2 +43,3 @@ crossOrigin?: string;
     onError?: (event: SyntheticEvent<SourceElement>) => void;
+    onTimeChange?: (time: number) => void;
 }
@@ -58,5 +59,14 @@ export interface VideoComponentState {
     previousVolume: number;
-    mediaRef: RefObject<SourceElement>;
+    previousTime: number;
+    videoRef: RefObject<HTMLVideoElement>;
+    audioRef: RefObject<HTMLAudioElement>;
     state: VideoComponentState;
-    static defaultProps: Partial<VideoProps>;
+    static defaultProps: {
+        defaultTime: number;
+        sourceType: string;
+        autoPlay: boolean;
+        controls: boolean;
+        preload: string;
+    };
+    onLoadedData: () => void;
     componentDidUpdate(prevProps: VideoProps): void;
@@ -68,3 +78,3 @@ private onVolumeChange;
     private onPause;
-    private readonly videoState;
+    private get videoState();
     private play;
@@ -75,2 +85,3 @@ private pause;
     private setPlaybackSpeed;
+    private get currentElement();
     private requestFullscreen;
@@ -80,3 +91,3 @@ private mute;
     private toggleMute;
-    private readonly actions;
+    private get actions();
     private onDurationChange;
@@ -83,0 +94,0 @@ private onError;

dist/es2015/video.js

@@ -1,11 +0,2 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+import { __assign, __extends } from "tslib";
 import * as React from 'react';
@@ -23,3 +14,3 @@ import { Component } from 'react';
 var isSafari = typeof navigator !== 'undefined' ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent) : false;
-var Video = (function (_super) {
+var Video = /** @class */ (function (_super) {
     __extends(Video, _super);
@@ -29,3 +20,5 @@ function Video() {
         _this.previousVolume = 1;
-        _this.mediaRef = React.createRef();
+        _this.previousTime = -1;
+        _this.videoRef = React.createRef();
+        _this.audioRef = React.createRef();
         _this.state = {
@@ -40,2 +33,8 @@ isLoading: true,
         };
+        _this.onLoadedData = function () {
+            var defaultTime = _this.props.defaultTime;
+            if (_this.currentElement) {
+                _this.currentElement.currentTime = defaultTime;
+            }
+        };
         _this.onVolumeChange = function (event) {
@@ -51,2 +50,8 @@ var video = event.target;
             var video = event.target;
+            var onTimeChange = _this.props.onTimeChange;
+            var flooredTime = Math.floor(video.currentTime);
+            if (onTimeChange && flooredTime !== _this.previousTime) {
+                onTimeChange(flooredTime);
+                _this.previousTime = flooredTime;
+            }
             _this.setState({
@@ -84,17 +89,17 @@ currentTime: video.currentTime
         _this.play = function () {
-            _this.mediaRef.current && _this.mediaRef.current.play();
+            _this.currentElement && _this.currentElement.play();
         };
         _this.pause = function () {
-            _this.mediaRef.current && _this.mediaRef.current.pause();
+            _this.currentElement && _this.currentElement.pause();
         };
         _this.navigate = function (time) {
             _this.setState({ currentTime: time });
-            _this.mediaRef.current && (_this.mediaRef.current.currentTime = time);
+            _this.currentElement && (_this.currentElement.currentTime = time);
         };
         _this.setVolume = function (volume) {
             _this.setState({ volume: volume });
-            _this.mediaRef.current && (_this.mediaRef.current.volume = volume);
+            _this.currentElement && (_this.currentElement.volume = volume);
         };
         _this.setPlaybackSpeed = function (playbackSpeed) {
-            _this.mediaRef.current && (_this.mediaRef.current.playbackRate = playbackSpeed);
+            _this.currentElement && (_this.currentElement.playbackRate = playbackSpeed);
         };
@@ -104,3 +109,3 @@ _this.requestFullscreen = function () {
             if (sourceType === 'video') {
-                requestFullScreen(_this.mediaRef.current);
+                requestFullScreen(_this.currentElement);
             }
@@ -151,2 +156,3 @@ };
         if (hasSrcChanged) {
+            // TODO: add test to cover this case
             if (status === 'playing') {
@@ -172,5 +178,21 @@ this.play();
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Video.prototype, "currentElement", {
+        get: function () {
+            var sourceType = this.props.sourceType;
+            if (sourceType === 'video' && this.videoRef.current) {
+                return this.videoRef.current;
+            }
+            else if (sourceType === 'audio' && this.audioRef.current) {
+                return this.audioRef.current;
+            }
+            else {
+                return undefined;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Video.prototype, "actions", {
@@ -191,3 +213,3 @@ get: function () {
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -198,6 +220,27 @@ });
         var _b = this.props, sourceType = _b.sourceType, poster = _b.poster, src = _b.src, children = _b.children, autoPlay = _b.autoPlay, controls = _b.controls, preload = _b.preload, crossOrigin = _b.crossOrigin;
-        var TagName = sourceType || 'video';
-        return children(React.createElement(TagName, { ref: this.mediaRef, poster: poster, 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, onError: this.onError, onWaiting: this.onWaiting, crossOrigin: crossOrigin }), videoState, actions, this.mediaRef);
+        var props = {
+            src: src,
+            preload: preload,
+            controls: controls,
+            autoPlay: autoPlay,
+            onLoadedData: this.onLoadedData,
+            onPlay: this.onPlay,
+            onPause: this.onPause,
+            onVolumeChange: this.onVolumeChange,
+            onTimeUpdate: this.onTimeUpdate,
+            onCanPlay: this.onCanPlay,
+            onDurationChange: this.onDurationChange,
+            onError: this.onError,
+            onWaiting: this.onWaiting,
+            crossOrigin: crossOrigin,
+        };
+        if (sourceType === 'video') {
+            return children(React.createElement("video", __assign({ ref: this.videoRef, poster: poster }, props)), videoState, actions, this.videoRef);
+        }
+        else {
+            return children(React.createElement("audio", __assign({ ref: this.audioRef }, props)), videoState, actions, this.audioRef);
+        }
     };
     Video.defaultProps = {
+        defaultTime: 0,
         sourceType: 'video',
@@ -204,0 +247,0 @@ autoPlay: false,

dist/es5/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 tslib_1 = require("tslib");
 var video_1 = require("./video");
-exports.default = video_1.Video;
-__export(require("./video"));
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return video_1.Video; } });
+tslib_1.__exportStar(require("./video"), exports);

dist/es5/utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.requestFullScreen = void 0;
 exports.requestFullScreen = function (element) {
@@ -4,0 +5,0 @@ var methods = ['requestFullscreen', 'webkitRequestFullscreen', 'mozRequestFullScreen', 'msRequestFullscreen'];

dist/es5/video.d.ts

@@ -1,4 +0,3 @@
-/// <reference types="react" />
 import * as React from 'react';
-import { Component, ReactNode, SyntheticEvent, RefObject } from 'react';
+import { Component, ReactElement, ReactNode, SyntheticEvent, RefObject } from 'react';
 export declare type VideoStatus = 'playing' | 'paused' | 'errored';
@@ -30,10 +29,11 @@ export declare type VideoError = MediaError | null;
 }
-export declare type RenderCallback = (videoElement: ReactNode, state: VideoState, actions: VideoActions, ref: RefObject<SourceElement>) => ReactNode;
+export declare type RenderCallback = (videoElement: ReactElement<SourceElement>, state: VideoState, actions: VideoActions, ref: RefObject<SourceElement>) => ReactNode;
 export interface VideoProps {
     src: string;
     children: RenderCallback;
-    sourceType?: 'video' | 'audio';
-    controls?: boolean;
-    autoPlay?: boolean;
-    preload?: string;
+    defaultTime: number;
+    sourceType: 'video' | 'audio';
+    controls: boolean;
+    autoPlay: boolean;
+    preload: string;
     poster?: string;
@@ -43,2 +43,3 @@ crossOrigin?: string;
     onError?: (event: SyntheticEvent<SourceElement>) => void;
+    onTimeChange?: (time: number) => void;
 }
@@ -58,5 +59,14 @@ export interface VideoComponentState {
     previousVolume: number;
-    mediaRef: RefObject<SourceElement>;
+    previousTime: number;
+    videoRef: RefObject<HTMLVideoElement>;
+    audioRef: RefObject<HTMLAudioElement>;
     state: VideoComponentState;
-    static defaultProps: Partial<VideoProps>;
+    static defaultProps: {
+        defaultTime: number;
+        sourceType: string;
+        autoPlay: boolean;
+        controls: boolean;
+        preload: string;
+    };
+    onLoadedData: () => void;
     componentDidUpdate(prevProps: VideoProps): void;
@@ -68,3 +78,3 @@ private onVolumeChange;
     private onPause;
-    private readonly videoState;
+    private get videoState();
     private play;
@@ -75,2 +85,3 @@ private pause;
     private setPlaybackSpeed;
+    private get currentElement();
     private requestFullscreen;
@@ -80,3 +91,3 @@ private mute;
     private toggleMute;
-    private readonly actions;
+    private get actions();
     private onDurationChange;
@@ -83,0 +94,0 @@ private onError;

dist/es5/video.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Video = void 0;
+var tslib_1 = require("tslib");
 var React = require("react");
@@ -25,8 +17,10 @@ var react_1 = require("react");
 var isSafari = typeof navigator !== 'undefined' ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent) : false;
-var Video = (function (_super) {
-    __extends(Video, _super);
+var Video = /** @class */ (function (_super) {
+    tslib_1.__extends(Video, _super);
     function Video() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.previousVolume = 1;
-        _this.mediaRef = React.createRef();
+        _this.previousTime = -1;
+        _this.videoRef = React.createRef();
+        _this.audioRef = React.createRef();
         _this.state = {
@@ -41,2 +35,8 @@ isLoading: true,
         };
+        _this.onLoadedData = function () {
+            var defaultTime = _this.props.defaultTime;
+            if (_this.currentElement) {
+                _this.currentElement.currentTime = defaultTime;
+            }
+        };
         _this.onVolumeChange = function (event) {
@@ -52,2 +52,8 @@ var video = event.target;
             var video = event.target;
+            var onTimeChange = _this.props.onTimeChange;
+            var flooredTime = Math.floor(video.currentTime);
+            if (onTimeChange && flooredTime !== _this.previousTime) {
+                onTimeChange(flooredTime);
+                _this.previousTime = flooredTime;
+            }
             _this.setState({
@@ -85,17 +91,17 @@ currentTime: video.currentTime
         _this.play = function () {
-            _this.mediaRef.current && _this.mediaRef.current.play();
+            _this.currentElement && _this.currentElement.play();
         };
         _this.pause = function () {
-            _this.mediaRef.current && _this.mediaRef.current.pause();
+            _this.currentElement && _this.currentElement.pause();
         };
         _this.navigate = function (time) {
             _this.setState({ currentTime: time });
-            _this.mediaRef.current && (_this.mediaRef.current.currentTime = time);
+            _this.currentElement && (_this.currentElement.currentTime = time);
         };
         _this.setVolume = function (volume) {
             _this.setState({ volume: volume });
-            _this.mediaRef.current && (_this.mediaRef.current.volume = volume);
+            _this.currentElement && (_this.currentElement.volume = volume);
         };
         _this.setPlaybackSpeed = function (playbackSpeed) {
-            _this.mediaRef.current && (_this.mediaRef.current.playbackRate = playbackSpeed);
+            _this.currentElement && (_this.currentElement.playbackRate = playbackSpeed);
         };
@@ -105,3 +111,3 @@ _this.requestFullscreen = function () {
             if (sourceType === 'video') {
-                utils_1.requestFullScreen(_this.mediaRef.current);
+                utils_1.requestFullScreen(_this.currentElement);
             }
@@ -152,2 +158,3 @@ };
         if (hasSrcChanged) {
+            // TODO: add test to cover this case
             if (status === 'playing') {
@@ -173,5 +180,21 @@ this.play();
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Video.prototype, "currentElement", {
+        get: function () {
+            var sourceType = this.props.sourceType;
+            if (sourceType === 'video' && this.videoRef.current) {
+                return this.videoRef.current;
+            }
+            else if (sourceType === 'audio' && this.audioRef.current) {
+                return this.audioRef.current;
+            }
+            else {
+                return undefined;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Video.prototype, "actions", {
@@ -192,3 +215,3 @@ get: function () {
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -199,6 +222,27 @@ });
         var _b = this.props, sourceType = _b.sourceType, poster = _b.poster, src = _b.src, children = _b.children, autoPlay = _b.autoPlay, controls = _b.controls, preload = _b.preload, crossOrigin = _b.crossOrigin;
-        var TagName = sourceType || 'video';
-        return children(React.createElement(TagName, { ref: this.mediaRef, poster: poster, 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, onError: this.onError, onWaiting: this.onWaiting, crossOrigin: crossOrigin }), videoState, actions, this.mediaRef);
+        var props = {
+            src: src,
+            preload: preload,
+            controls: controls,
+            autoPlay: autoPlay,
+            onLoadedData: this.onLoadedData,
+            onPlay: this.onPlay,
+            onPause: this.onPause,
+            onVolumeChange: this.onVolumeChange,
+            onTimeUpdate: this.onTimeUpdate,
+            onCanPlay: this.onCanPlay,
+            onDurationChange: this.onDurationChange,
+            onError: this.onError,
+            onWaiting: this.onWaiting,
+            crossOrigin: crossOrigin,
+        };
+        if (sourceType === 'video') {
+            return children(React.createElement("video", tslib_1.__assign({ ref: this.videoRef, poster: poster }, props)), videoState, actions, this.videoRef);
+        }
+        else {
+            return children(React.createElement("audio", tslib_1.__assign({ ref: this.audioRef }, props)), videoState, actions, this.audioRef);
+        }
     };
     Video.defaultProps = {
+        defaultTime: 0,
         sourceType: 'video',
@@ -205,0 +249,0 @@ autoPlay: false,

package.json

 {
   "name": "react-video-renderer",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "main": "dist/es5/index.js",
@@ -18,6 +18,6 @@ "jsnext:main": "dist/es2015/index.js",
     "react-gh-corner": "^1.1.2",
-    "ts-react-toolbox": "^0.1.23"
+    "ts-react-toolbox": "^1.0.1"
   },
   "engines": {
-    "node": ">=8.5.0"
+    "node": "^12.0.0"
   },
@@ -24,0 +24,0 @@ "scripts": {

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

30955

increased by11.11%

Lines of code

698

increased by17.91%

No dependency changes