1 | ## Migrating to `v2.0`
|
2 |
|
3 | Breaking changes are in 🔥 __bold and on fire__.
|
4 |
|
5 | ### Lazy players
|
6 |
|
7 | As of `v2.2`, if your build system supports `import()` statements, use `react-player/lazy` to [lazy load](https://reactjs.org/docs/code-splitting.html#reactlazy) the appropriate player for the `url` you pass in. This adds several `reactPlayer` chunks to your output, but reduces your main bundle size.
|
8 |
|
9 | Due to the use of `lazy` and `Suspense`, 🔥 __React 16.6 or later is now required__.
|
10 |
|
11 | ```jsx
|
12 | // Before
|
13 | import ReactPlayer from 'react-player'
|
14 |
|
15 | // After
|
16 | import ReactPlayer from 'react-player/lazy'
|
17 | ```
|
18 |
|
19 | Lazy players were the default import in `v2.1`, but moved to `react-player/lazy` in `v2.2` to avoid causing problems with common build systems.
|
20 |
|
21 | ### Single player imports
|
22 |
|
23 | As of `v2.2`, the 🔥 __location of single player imports has changed__. Single players are not available in `v2.0` and `v2.1`.
|
24 |
|
25 | ```jsx
|
26 | // Before
|
27 | import ReactPlayer from 'react-player/lib/players/YouTube'
|
28 |
|
29 | // After
|
30 | import ReactPlayer from 'react-player/youtube'
|
31 | ```
|
32 |
|
33 | ### Preloading
|
34 |
|
35 | The `preload` config option was originally added to solve a [very specific use case](https://github.com/CookPete/react-player/issues/7) a very long time ago. Modern browsers are trending towards disabling autoplay by default, which makes the preload behaviour quite useless. The implementation was also quite hacky, and added to the bundle size for a feature that seems to be very rarely used. For this reason, 🔥 __the `preload` option has been removed__.
|
36 |
|
37 | ### The `config` prop
|
38 |
|
39 | 🔥 __Deprecated config props have been removed.__ Previously these props still worked, but with a console warning.
|
40 |
|
41 | ```jsx
|
42 | // Before
|
43 | <ReactPlayer
|
44 | youtubeConfig={{ playerVars: { showinfo: 1 } }}
|
45 | />
|
46 |
|
47 | // After
|
48 | <ReactPlayer
|
49 | config={{ youtube: { playerVars: { showinfo: 1 } }}}
|
50 | />
|
51 | ```
|
52 |
|
53 | It is also worth noting that you no longer need to use separate config keys for different players. For example, if you are only ever using one type of `url` you can put player-specific options directly inside `config`.
|
54 |
|
55 | ```jsx
|
56 | // Before
|
57 | <ReactPlayer
|
58 | youtubeConfig={{ playerVars: { showinfo: 1 } }}
|
59 | />
|
60 |
|
61 | // After
|
62 | <ReactPlayer
|
63 | config={{ playerVars: { showinfo: 1 } }}
|
64 | />
|
65 | ```
|
66 |
|
67 | ### `onReady` is invoked with the player instance
|
68 |
|
69 | Previously, instance methods would be called using [refs](https://reactjs.org/docs/refs-and-the-dom.html). They still can, but in v2.0, `onReady` is called with the ReactPlayer instance, giving you the option of storing the instance and calling methods on it. This is especially useful when using `getInternalPlayer`.
|
70 |
|
71 | ```jsx
|
72 | // Before
|
73 | class Player extends Component {
|
74 | ref = player => {
|
75 | this.player = player // Store a player that may not be ready for methods
|
76 | this.player.getInternalPlayer() // Returns null if player is not ready
|
77 | }
|
78 | handleReady = () => {
|
79 | this.player.getInternalPlayer() // Internal player now ready
|
80 | }
|
81 | render () {
|
82 | return (
|
83 | <ReactPlayer ref={this.ref} onReady={this.handleReady} />
|
84 | )
|
85 | }
|
86 | }
|
87 |
|
88 | // After
|
89 | class Player extends Component {
|
90 | handleReady = player => {
|
91 | this.player = player // Store a player that is ready for methods
|
92 | this.player.getInternalPlayer() // Internal player now ready
|
93 | }
|
94 | render () {
|
95 | return (
|
96 | <ReactPlayer onReady={this.handleReady} />
|
97 | )
|
98 | }
|
99 | }
|
100 |
|
\ | No newline at end of file |