Merge branch 'master' into fix-1604/array-of-urls-not-working

README.md

@@ -115,6 +115,7 @@ Prop | Description
 `onBufferEnd` | Called when media has finished buffering<br />&nbsp; ◦ &nbsp;Works for files, YouTube and Facebook
 `onSeek` | Called when media seeks with `seconds` parameter
 `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
+`onPlaybackQualityChange` | Called when playback quality of the player changed<br />&nbsp; ◦ &nbsp;Only supported by YouTube ([if enabled](https://developers.google.com/youtube/iframe_api_reference#Events))
 `onEnded` | Called when media finishes playing<br />&nbsp; ◦ &nbsp;Does not fire when `loop` is set to `true`
 `onError` | Called when an error occurs whilst attempting to play media
 `onClickPreview` | Called when user clicks the `light` mode preview
@@ -151,7 +152,7 @@ Key | Options
 `mixcloud` | `options`: Override the [default player options](https://www.mixcloud.com/developers/widget/#methods)
 `dailymotion` | `params`: Override the [default player vars](https://developer.dailymotion.com/player#player-parameters)
 `twitch` | `options`: Override the [default player options](https://dev.twitch.tv/docs/embed)<br />`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))
-`file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)<br />`forceVideo`: Always render a `<video>` element<br />`forceAudio`: Always render an `<audio>` element<br />`forceHLS`: Use [hls.js](https://github.com/video-dev/hls.js) for HLS streams<br />`forceSafariHLS`: Use [hls.js](https://github.com/video-dev/hls.js) for HLS streams, [even on Safari](https://github.com/cookpete/react-player/pull/1560)<br />`forceDASH`: Always use [dash.js](https://github.com/Dash-Industry-Forum/dash.js) for DASH streams<br />`forceFLV`: Always use [flv.js](https://github.com/Bilibili/flv.js)<br />`hlsOptions`: Override the [default `hls.js` options](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning)<br />`hlsVersion`: Override the [`hls.js`](https://github.com/video-dev/hls.js) version loaded from [`jsdelivr`](https://www.jsdelivr.com/package/npm/hls.js), default: `0.13.1`<br />`dashVersion`: Override the [`dash.js`](https://github.com/Dash-Industry-Forum/dash.js) version loaded from [`cdnjs`](https://cdnjs.com/libraries/dashjs), default: `2.9.2`<br />`flvVersion`: Override the [`flv.js`](https://github.com/Bilibili/flv.js) version loaded from [`jsdelivr`](https://www.jsdelivr.com/package/npm/flv.js), default: `1.5.0`
+`file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)<br />`forceVideo`: Always render a `<video>` element<br />`forceAudio`: Always render an `<audio>` element<br />`forceHLS`: Use [hls.js](https://github.com/video-dev/hls.js) for HLS streams<br />`forceSafariHLS`: Use [hls.js](https://github.com/video-dev/hls.js) for HLS streams, [even on Safari](https://github.com/cookpete/react-player/pull/1560)<br />`forceDisableHLS`: Disable usage [hls.js](https://github.com/video-dev/hls.js) for HLS streams<br />`forceDASH`: Always use [dash.js](https://github.com/Dash-Industry-Forum/dash.js) for DASH streams<br />`forceFLV`: Always use [flv.js](https://github.com/Bilibili/flv.js)<br />`hlsOptions`: Override the [default `hls.js` options](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning)<br />`hlsVersion`: Override the [`hls.js`](https://github.com/video-dev/hls.js) version loaded from [`jsdelivr`](https://www.jsdelivr.com/package/npm/hls.js), default: `0.13.1`<br />`dashVersion`: Override the [`dash.js`](https://github.com/Dash-Industry-Forum/dash.js) version loaded from [`cdnjs`](https://cdnjs.com/libraries/dashjs), default: `2.9.2`<br />`flvVersion`: Override the [`flv.js`](https://github.com/Bilibili/flv.js) version loaded from [`jsdelivr`](https://www.jsdelivr.com/package/npm/flv.js), default: `1.5.0`
 
 ### Methods
 

src/Player.js

@@ -144,7 +144,7 @@ export default class Player extends Component {
     this.progressTimeout = setTimeout(this.progress, this.props.progressFrequency || this.props.progressInterval)
   }
 
-  seekTo (amount, type) {
+  seekTo (amount, type, keepPlaying = false) {
     // When seeking before player is ready, store value and seek later
     if (!this.isReady) {
       if (amount !== 0) {
@@ -161,10 +161,10 @@ export default class Player extends Component {
         console.warn('ReactPlayer: could not seek using fraction – duration not yet available')
         return
       }
-      this.player.seekTo(duration * amount)
+      this.player.seekTo(duration * amount, keepPlaying)
       return
     }
-    this.player.seekTo(amount)
+    this.player.seekTo(amount, keepPlaying)
   }
 
   handleReady = () => {

src/ReactPlayer.js

@@ -98,9 +98,9 @@ export const createReactPlayer = (players, fallback) => {
       return this.player.getInternalPlayer(key)
     }
 
-    seekTo = (fraction, type) => {
+    seekTo = (fraction, type, keepPlaying) => {
       if (!this.player) return null
-      this.player.seekTo(fraction, type)
+      this.player.seekTo(fraction, type, keepPlaying)
     }
 
     handleReady = () => {

src/demo/App.js

@@ -184,6 +184,7 @@ class App extends Component {
               onError={e => console.log('onError', e)}
               onProgress={this.handleProgress}
               onDuration={this.handleDuration}
+              onPlaybackQualityChange={e => console.log('onPlaybackQualityChange', e)}
             />
           </div>
 

src/patterns.js

@@ -1,6 +1,6 @@
 import { isMediaStream, isBlobUrl } from './utils'
 
-export const MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=|shorts\/|live\/))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//
+export const MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie|education)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=|shorts\/|live\/))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//
 export const MATCH_URL_SOUNDCLOUD = /(?:soundcloud\.com|snd\.sc)\/[^.]+$/
 export const MATCH_URL_VIMEO = /vimeo\.com\/(?!progressive_redirect).+/
 export const MATCH_URL_FACEBOOK = /^https?:\/\/(www\.)?facebook\.com.*\/(video(s)?|watch|story)(\.php?|\/).+$/

src/players/FilePlayer.js

@@ -32,7 +32,8 @@ export default class FilePlayer extends Component {
       this.player.src = this.getSource(url); // Ensure src is set in strict mode
     }
 
-    if (IS_IOS) {
+    if (IS_IOS || this.props.config.forceDisableHls) {
+
       this.player.load()
     }
   }
@@ -150,13 +151,10 @@ export default class FilePlayer extends Component {
   }
 
   shouldUseHLS (url) {
-    if (this.props.config.forceHLS) {
-      return true
-    }
-    if (IS_SAFARI && this.props.config.forceSafariHLS) {
+    if ((IS_SAFARI && this.props.config.forceSafariHLS) || this.props.config.forceHLS) {
       return true
     }
-    if (IS_IOS) {
+    if (IS_IOS || this.props.config.forceDisableHls) {
       return false
     }
     return HLS_EXTENSIONS.test(url) || MATCH_CLOUDFLARE_STREAM.test(url)

src/players/YouTube.js

@@ -68,6 +68,7 @@ export default class YouTube extends Component {
             this.props.onReady()
           },
           onPlaybackRateChange: event => this.props.onPlaybackRateChange(event.data),
+          onPlaybackQualityChange: event => this.props.onPlaybackQualityChange(event),
           onStateChange: this.onStateChange,
           onError: event => onError(event.data)
         },
@@ -143,9 +144,9 @@ export default class YouTube extends Component {
     this.callPlayer('stopVideo')
   }
 
-  seekTo (amount) {
+  seekTo (amount, keepPlaying) {
     this.callPlayer('seekTo', amount)
-    if (!this.props.playing) {
+    if (!keepPlaying && !this.props.playing) {
       this.pause()
     }
   }

src/props.js

@@ -56,6 +56,7 @@ export const propTypes = {
       forceAudio: bool,
       forceHLS: bool,
       forceSafariHLS: bool,
+      forceDisableHls: bool,
       forceDASH: bool,
       forceFLV: bool,
       hlsOptions: object,
@@ -90,6 +91,7 @@ export const propTypes = {
   onDuration: func,
   onSeek: func,
   onPlaybackRateChange: func,
+  onPlaybackQualityChange: func,
   onProgress: func,
   onClickPreview: func,
   onEnablePIP: func,
@@ -172,7 +174,8 @@ export const defaultProps = {
       hlsOptions: {},
       hlsVersion: '1.1.4',
       dashVersion: '3.1.3',
-      flvVersion: '1.5.0'
+      flvVersion: '1.5.0',
+      forceDisableHls: false
     },
     wistia: {
       options: {},
@@ -203,6 +206,7 @@ export const defaultProps = {
   onDuration: noop,
   onSeek: noop,
   onPlaybackRateChange: noop,
+  onPlaybackQualityChange: noop,
   onProgress: noop,
   onClickPreview: noop,
   onEnablePIP: noop,

types/file.d.ts

@@ -15,6 +15,7 @@ export interface FileConfig {
   forceAudio?: boolean
   forceHLS?: boolean
   forceSafariHLS?: boolean
+  forceDisableHls?: boolean
   forceDASH?: boolean
   forceFLV?: boolean
   hlsOptions?: Record<string, any>