Make force disabling PIP dependent on prop (#964)

* Make force disabling PIP dependent on prop

* Rename to stopOnUnmount (true by default)

Co-authored-by: Pete Cook <pete@cookpete.com>

README.md

@@ -92,6 +92,7 @@ Prop | Description | Default
 `progressInterval` | The time between `onProgress` callbacks, in milliseconds | `1000`
 `playsinline` | Applies the `playsinline` attribute where supported | `false`
 `pip` | Set to `true` or `false` to enable or disable [picture-in-picture mode](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)<br/>&nbsp; ◦ &nbsp;Only available when playing file URLs in [certain browsers](https://caniuse.com/#feat=picture-in-picture) | `false`
+`stopOnUnmount` | If you are using `pip` you may want to use `stopOnUnmount={false}` to continue playing in picture-in-picture mode even after ReactPlayer unmounts | `true`
 `wrapper` | Element or component to use as the container element | `div`
 `playIcon` | Element or component to use as the play icon in light mode
 `config` | Override options for the various players, see [config prop](#config-prop)

index.d.ts

@@ -88,6 +88,7 @@ export interface ReactPlayerProps {
   progressInterval?: number;
   playsinline?: boolean;
   pip?: boolean;
+  stopOnUnmount?: boolean;
   light?: boolean | string;
   wrapper?: any;
   config?: Config;

src/Player.js

@@ -26,7 +26,7 @@ export default class Player extends Component {
   componentWillUnmount () {
     clearTimeout(this.progressTimeout)
     clearTimeout(this.durationCheckTimeout)
-    if (this.isReady) {
+    if (this.isReady && this.props.stopOnUnmount) {
       this.player.stop()
 
       if (this.player.disablePIP) {

src/props.js

@@ -16,6 +16,7 @@ export const propTypes = {
   progressInterval: number,
   playsinline: bool,
   pip: bool,
+  stopOnUnmount: bool,
   light: oneOfType([bool, string]),
   playIcon: node,
   wrapper: oneOfType([
@@ -101,6 +102,7 @@ export const defaultProps = {
   progressInterval: 1000,
   playsinline: false,
   pip: false,
+  stopOnUnmount: true,
   light: false,
   wrapper: 'div',
   config: {