react-player - npm Package Compare versions

Comparing version 2.10.1 to 2.11.0

base.d.ts

@@ -1,2 +0,8 @@
-import { Component, ReactElement, CSSProperties, ComponentType, ReactNode } from 'react'
+import {
+  Component,
+  ReactElement,
+  CSSProperties,
+  ComponentType,
+  ReactNode
+} from 'react'
 import ReactPlayer from './lib'
@@ -10,2 +16,9 @@
 
+export interface OnProgressProps {
+  played: number
+  playedSeconds: number
+  loaded: number
+  loadedSeconds: number
+}
+
 export interface BaseReactPlayerProps {
@@ -28,5 +41,5 @@ url?: string | string[] | SourceProps[] | MediaStream
   stopOnUnmount?: boolean
-  light?: boolean | string
-  fallback?: ReactElement;
-  wrapper?: ComponentType<{children: ReactNode}>;
+  light?: boolean | string | ReactElement
+  fallback?: ReactElement
+  wrapper?: ComponentType<{ children: ReactNode }>
   onReady?: (player: ReactPlayer) => void
@@ -42,15 +55,17 @@ onStart?: () => void
   onDisablePIP?: () => void
-  onError?: (error: any, data?: any, hlsInstance?: any, hlsGlobal?: any) => void
+  onError?: (
+    error: any,
+    data?: any,
+    hlsInstance?: any,
+    hlsGlobal?: any
+  ) => void
   onDuration?: (duration: number) => void
   onSeek?: (seconds: number) => void
-  onProgress?: (state: {
-    played: number
-    playedSeconds: number
-    loaded: number
-    loadedSeconds: number
-  }) => void
+  onProgress?: (state: OnProgressProps) => void
   [otherProps: string]: any
 }
 
-export default class BaseReactPlayer<T extends BaseReactPlayerProps> extends Component<T, any> {
+export default class BaseReactPlayer<
+  T extends BaseReactPlayerProps
+> extends Component<T, any> {
   static canPlay (url: string): boolean;
@@ -57,0 +72,0 @@ static canEnablePIP (url: string): boolean;

lazy/Player.js

@@ -83,4 +83,9 @@ "use strict";
     _defineProperty(_assertThisInitialized(_this), "handlePlayerMount", function (player) {
-      if (_this.player) return; // Prevent loading twice in strict mode
+      if (_this.player) {
+        _this.progress(); // Ensure onProgress is still called in strict mode
 
+
+        return; // Return here to prevent loading twice in strict mode
+      }
+
       _this.player = player;
@@ -87,0 +92,0 @@

lazy/players/FilePlayer.js

@@ -216,2 +216,3 @@ "use strict";
     value: function componentWillUnmount() {
+      this.player.src = '';
       this.removeListeners(this.player);
@@ -218,0 +219,0 @@

lazy/players/Mixcloud.js

@@ -176,3 +176,4 @@ "use strict";
         src: "https://www.mixcloud.com/widget/iframe/?".concat(query),
-        frameBorder: "0"
+        frameBorder: "0",
+        allow: "autoplay"
       });
@@ -179,0 +180,0 @@ }

lazy/players/Vimeo.js

@@ -161,2 +161,6 @@ "use strict";
         _this2.player.on('bufferend', _this2.props.onBufferEnd);
+
+        _this2.player.on('playbackratechange', function (e) {
+          return _this2.props.onPlaybackRateChange(e.playbackRate);
+        });
       }, this.props.onError);
@@ -163,0 +167,0 @@ }

lazy/Preview.js

@@ -107,2 +107,6 @@ "use strict";
 
+      if ( /*#__PURE__*/_react["default"].isValidElement(light)) {
+        return;
+      }
+
       if (typeof light === 'string') {
@@ -143,2 +147,3 @@ this.setState({
       var _this$props2 = this.props,
+          light = _this$props2.light,
           onClick = _this$props2.onClick,
@@ -148,2 +153,5 @@ playIcon = _this$props2.playIcon,
       var image = this.state.image;
+
+      var isElement = /*#__PURE__*/_react["default"].isValidElement(light);
+
       var flexCenter = {
@@ -158,3 +166,3 @@ display: 'flex',
           height: '100%',
-          backgroundImage: image ? "url(".concat(image, ")") : undefined,
+          backgroundImage: image && !isElement ? "url(".concat(image, ")") : undefined,
           backgroundSize: 'cover',
@@ -168,3 +176,4 @@ backgroundPosition: 'center',
           width: ICON_SIZE,
-          height: ICON_SIZE
+          height: ICON_SIZE,
+          position: isElement ? 'absolute' : undefined
         }, flexCenter),
@@ -193,3 +202,3 @@ playIcon: {
         onKeyPress: this.handleKeyPress
-      }, playIcon || defaultPlayIcon);
+      }, isElement ? light : null, playIcon || defaultPlayIcon);
     }
@@ -196,0 +205,0 @@ }]);

lazy/props.js

@@ -36,3 +36,3 @@ "use strict";
   stopOnUnmount: bool,
-  light: oneOfType([bool, string]),
+  light: oneOfType([bool, string, object]),
   playIcon: node,
@@ -39,0 +39,0 @@ previewTabIndex: number,

lazy/ReactPlayer.js

@@ -260,4 +260,5 @@ "use strict";
         var attributes = this.getAttributes(url);
+        var wrapperRef = typeof Wrapper === 'string' ? this.references.wrapper : undefined;
         return /*#__PURE__*/_react["default"].createElement(Wrapper, _extends({
-          ref: this.references.wrapper,
+          ref: wrapperRef,
           style: _objectSpread(_objectSpread({}, style), {}, {
@@ -264,0 +265,0 @@ width: width,

lib/Player.js

@@ -83,4 +83,9 @@ "use strict";
     _defineProperty(_assertThisInitialized(_this), "handlePlayerMount", function (player) {
-      if (_this.player) return; // Prevent loading twice in strict mode
+      if (_this.player) {
+        _this.progress(); // Ensure onProgress is still called in strict mode
 
+
+        return; // Return here to prevent loading twice in strict mode
+      }
+
       _this.player = player;
@@ -87,0 +92,0 @@

lib/players/FilePlayer.js

@@ -216,2 +216,3 @@ "use strict";
     value: function componentWillUnmount() {
+      this.player.src = '';
       this.removeListeners(this.player);
@@ -218,0 +219,0 @@

lib/players/Mixcloud.js

@@ -176,3 +176,4 @@ "use strict";
         src: "https://www.mixcloud.com/widget/iframe/?".concat(query),
-        frameBorder: "0"
+        frameBorder: "0",
+        allow: "autoplay"
       });
@@ -179,0 +180,0 @@ }

lib/players/Vimeo.js

@@ -161,2 +161,6 @@ "use strict";
         _this2.player.on('bufferend', _this2.props.onBufferEnd);
+
+        _this2.player.on('playbackratechange', function (e) {
+          return _this2.props.onPlaybackRateChange(e.playbackRate);
+        });
       }, this.props.onError);
@@ -163,0 +167,0 @@ }

lib/Preview.js

@@ -107,2 +107,6 @@ "use strict";
 
+      if ( /*#__PURE__*/_react["default"].isValidElement(light)) {
+        return;
+      }
+
       if (typeof light === 'string') {
@@ -143,2 +147,3 @@ this.setState({
       var _this$props2 = this.props,
+          light = _this$props2.light,
           onClick = _this$props2.onClick,
@@ -148,2 +153,5 @@ playIcon = _this$props2.playIcon,
       var image = this.state.image;
+
+      var isElement = /*#__PURE__*/_react["default"].isValidElement(light);
+
       var flexCenter = {
@@ -158,3 +166,3 @@ display: 'flex',
           height: '100%',
-          backgroundImage: image ? "url(".concat(image, ")") : undefined,
+          backgroundImage: image && !isElement ? "url(".concat(image, ")") : undefined,
           backgroundSize: 'cover',
@@ -168,3 +176,4 @@ backgroundPosition: 'center',
           width: ICON_SIZE,
-          height: ICON_SIZE
+          height: ICON_SIZE,
+          position: isElement ? 'absolute' : undefined
         }, flexCenter),
@@ -193,3 +202,3 @@ playIcon: {
         onKeyPress: this.handleKeyPress
-      }, playIcon || defaultPlayIcon);
+      }, isElement ? light : null, playIcon || defaultPlayIcon);
     }
@@ -196,0 +205,0 @@ }]);

lib/props.js

@@ -36,3 +36,3 @@ "use strict";
   stopOnUnmount: bool,
-  light: oneOfType([bool, string]),
+  light: oneOfType([bool, string, object]),
   playIcon: node,
@@ -39,0 +39,0 @@ previewTabIndex: number,

lib/ReactPlayer.js

@@ -260,4 +260,5 @@ "use strict";
         var attributes = this.getAttributes(url);
+        var wrapperRef = typeof Wrapper === 'string' ? this.references.wrapper : undefined;
         return /*#__PURE__*/_react["default"].createElement(Wrapper, _extends({
-          ref: this.references.wrapper,
+          ref: wrapperRef,
           style: _objectSpread(_objectSpread({}, style), {}, {
@@ -264,0 +265,0 @@ width: width,

package.json

 {
   "name": "react-player",
-  "version": "2.10.1",
+  "version": "2.11.0",
   "description": "A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion",
@@ -21,3 +21,3 @@ "main": "lib/index.js",
     "build:dist": "cross-env NODE_ENV=production webpack --config webpack/dist.babel.js",
-    "build:standalone": "cross-env NODE_ENV=production webpack --config webpack/standalone.babel.js",
+    "build:standalone": "cross-env NODE_ENV=production webpack --config webpack/standalone.babel.js && node scripts/standalone-es6.js",
     "preversion": "npm run lint && npm run test",
@@ -24,0 +24,0 @@ "version": "auto-changelog -p && npm run build:dist && npm run build:standalone && git add CHANGELOG.md dist",

README.md

@@ -64,3 +64,3 @@ <h1 align='center'>
 
-The component parses a URL and loads in the appropriate markup and external SDKs to play media from [various sources](#supported-media). [Props](#props) can be passed in to control playback and react to events such as buffering or media ending. See [the demo source](https://github.com/CookPete/react-player/blob/master/src/demo/App.js) for a full example.
+The component parses a URL and loads in the appropriate markup and external SDKs to play media from [various sources](#supported-media). [Props](#props) can be passed in to control playback and react to events such as buffering or media ending. See [the demo source](https://github.com/cookpete/react-player/blob/master/src/demo/App.js) for a full example.
 
@@ -87,3 +87,3 @@ For platforms without direct use of `npm` modules, a minified version of `ReactPlayer` is located in `dist` after installing. To generate this file yourself, checkout the repo and run `npm run build:dist`.
 `light` | Set to `true` to show just the video thumbnail, which loads the full player on click<br />&nbsp; ◦ &nbsp;Pass in an image URL to override the preview image | `false`
-`volume` | Set the volume of the player, between `0` and `1`<br/>&nbsp; ◦ &nbsp;`null` uses default volume on all players [`#357`](https://github.com/CookPete/react-player/issues/357) | `null`
+`volume` | Set the volume of the player, between `0` and `1`<br/>&nbsp; ◦ &nbsp;`null` uses default volume on all players [`#357`](https://github.com/cookpete/react-player/issues/357) | `null`
 `muted` | Mutes the player<br/>&nbsp; ◦ &nbsp;Only works if `volume` is set | `false`
@@ -119,3 +119,3 @@ `playbackRate` | Set the playback rate of the player<br />&nbsp; ◦ &nbsp;Only supported by YouTube, Wistia, and file paths | `1`
 `onSeek` | Called when media seeks with `seconds` parameter
-`onPlaybackRateChange` | Called when playback rate of the player changed<br />&nbsp; ◦ &nbsp;Only supported by YouTube, Wistia, and file paths
+`onPlaybackRateChange` | Called when playback rate of the player changed<br />&nbsp; ◦ &nbsp;Only supported by YouTube, Vimeo ([if enabled](https://developer.vimeo.com/player/sdk/reference#playbackratechange)), Wistia, and file paths
 `onEnded` | Called when media finishes playing<br />&nbsp; ◦ &nbsp;Does not fire when `loop` is set to `true`
@@ -231,3 +231,3 @@ `onError` | Called when an error occurs whilst attempting to play media
 
-You can use your own version of any player SDK, assuming the correct `window` global is set before the player mounts. For example, to use a local version of [`hls.js`](https://cdnjs.com/libraries/hls.js), add `<script src='/path/hls.js'></script>` to your app. If `window.Hls` is available when ReactPlayer mounts, it will use that instead of loading `hls.js` from `cdnjs`. See [#605](https://github.com/CookPete/react-player/issues/605#issuecomment-492561909) for more information.
+You can use your own version of any player SDK, assuming the correct `window` global is set before the player mounts. For example, to use a local version of [`hls.js`](https://cdnjs.com/libraries/hls.js), add `<script src='/path/hls.js'></script>` to your app. If `window.Hls` is available when ReactPlayer mounts, it will use that instead of loading `hls.js` from `cdnjs`. See [#605](https://github.com/cookpete/react-player/issues/605#issuecomment-492561909) for more information.
 
@@ -343,8 +343,8 @@ #### Standalone player
 
-See the [contribution guidelines](https://github.com/CookPete/react-player/blob/master/CONTRIBUTING.md) before creating a pull request.
+See the [contribution guidelines](https://github.com/cookpete/react-player/blob/master/CONTRIBUTING.md) before creating a pull request.
 
 ### Thanks
 
-- Thanks to anyone who has [contributed](https://github.com/CookPete/react-player/graphs/contributors).
-- Huge thanks to my Patreon sponsors:
+- Thanks to anyone who has [contributed](https://github.com/cookpete/react-player/graphs/contributors).
+- Big thanks to my [Patreon](https://patreon.com/cookpete) supporters!
 
@@ -354,5 +354,8 @@ <table>
     <td align='center'>
-      <a href='https://github.com/josephfung'><img src='https://avatars3.githubusercontent.com/u/114566?s=120&v=4' /><br />Joseph Fung</a>
+      <a href='https://the100.tv'><img src='https://the100.tv/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fthe100-tv-alone-2k.2e7c7877.png&w=384&q=75' width='120' /><br />Jackson Doherty</a>
     </td>
+    <td align='center'>
+      <a href='https://github.com/jaxomlotus'><img src='https://avatars.githubusercontent.com/u/485706?s=120&v=4' /><br />Joseph Fung</a>
+    </td>
   </tr>
 </table>

types/base.d.ts

@@ -1,2 +0,8 @@
-import { Component, ReactElement, CSSProperties, ComponentType, ReactNode } from 'react'
+import {
+  Component,
+  ReactElement,
+  CSSProperties,
+  ComponentType,
+  ReactNode
+} from 'react'
 import ReactPlayer from './lib'
@@ -10,2 +16,9 @@
 
+export interface OnProgressProps {
+  played: number
+  playedSeconds: number
+  loaded: number
+  loadedSeconds: number
+}
+
 export interface BaseReactPlayerProps {
@@ -28,5 +41,5 @@ url?: string | string[] | SourceProps[] | MediaStream
   stopOnUnmount?: boolean
-  light?: boolean | string
-  fallback?: ReactElement;
-  wrapper?: ComponentType<{children: ReactNode}>;
+  light?: boolean | string | ReactElement
+  fallback?: ReactElement
+  wrapper?: ComponentType<{ children: ReactNode }>
   onReady?: (player: ReactPlayer) => void
@@ -42,15 +55,17 @@ onStart?: () => void
   onDisablePIP?: () => void
-  onError?: (error: any, data?: any, hlsInstance?: any, hlsGlobal?: any) => void
+  onError?: (
+    error: any,
+    data?: any,
+    hlsInstance?: any,
+    hlsGlobal?: any
+  ) => void
   onDuration?: (duration: number) => void
   onSeek?: (seconds: number) => void
-  onProgress?: (state: {
-    played: number
-    playedSeconds: number
-    loaded: number
-    loadedSeconds: number
-  }) => void
+  onProgress?: (state: OnProgressProps) => void
   [otherProps: string]: any
 }
 
-export default class BaseReactPlayer<T extends BaseReactPlayerProps> extends Component<T, any> {
+export default class BaseReactPlayer<
+  T extends BaseReactPlayerProps
+> extends Component<T, any> {
   static canPlay (url: string): boolean;
@@ -57,0 +72,0 @@ static canEnablePIP (url: string): boolean;

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

Lines of code

10598

increased by0.03%

Number of lines in readme file

356

increased by0.85%

Worsened metrics

Total package byte prevSize

1724530

decreased by-23.24%

Number of package files

100

decreased by-21.87%

Number of low supply chain risk alerts

3

increased by50%

No dependency changes