├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
    ├── .babelrc
    ├── VideoPlayer.js
    ├── VimeoPlayer.js
    ├── YouTubePlayer.js
    ├── embeds
    │   ├── VideoEmbed.js
    │   ├── VimeoEmbed.js
    │   └── YouTubeEmbed.js
    ├── index.js
    └── playerController.js
└── tools
    ├── babel-preset.js
    └── build.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | /embeds
 3 | es
 4 | node_modules
 5 | umd
 6 | /*.js
 7 | *.sublime-project
 8 | *.sublime-workspace
 9 | npm-debug.log
10 | yarn-error.log
11 | !rollup.config.js
12 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | tools
2 | rollup.config.js
3 | *.sublime-project
4 | *.sublime-workspace
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 - 2020 Ryan Hefner <hi@ryanhefner.com> (https://www.ryanhefner.com)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-video-players
  2 | 
  3 | A library of React video player components that share a similar interface and makes
  4 | it easy to work with various video platforms (Vimeo, YouTube, etc.) and players,
  5 | consistently in your site or application.
  6 | 
  7 | ## Install
  8 | 
  9 | Via [npm](https://npmjs.com/package/react-video-players):
 10 | 
 11 | ```sh
 12 | npm install --save react-video-players
 13 | ```
 14 | 
 15 | Via [Yarn](https://yarn.fyi/react-video-players):
 16 | 
 17 | ```sh
 18 | yarn add react-video-players
 19 | ```
 20 | 
 21 | ## Video Players
 22 | 
 23 | The goal of this library is to offer a variety of different player "types", while
 24 | maintaining a similar/common interface across each component. Currently, there
 25 | are three video player components available: `VimeoPlayer`, `YouTubePlayer` and
 26 | `VideoPlayer` (standard `<video>` tag implemenation).
 27 | 
 28 | In addition to the three components, this library also include the High Order Component
 29 | that the three players use, in the event you’d like to use that to build your own
 30 | video player component.
 31 | 
 32 | ### Common Properties
 33 | 
 34 | * `aspectRatio:String` - Used to calculate aspect ratio for the container so that
 35 | video is displayed responsively.
 36 | * `config:Object` - Optional config settings. See [VimeoPlayer Props](#props) or [YouTubePlayer Props](#props-1)
 37 | * `controls:Element` - A React component that contains controls setup to control
 38 | the video. See [Player Controls](#player-controls)
 39 | * `height:Number || String` - Height of the player. Default `100%`.
 40 | * `loop:Boolean` - Whether or not the video should loop playback. Default `false`.
 41 | * `play:Boolean` - Whether or not the video should play on load. Default `false`.
 42 | * `time:Number` - Time to play when the player loads, or seek time if the player is already loaded. Default `0`.
 43 | * `width:Number || String` - Width of the player. Default `100%`.
 44 | 
 45 | ### Callbacks
 46 | 
 47 | * `onEnded:Function` - Callback when video playback has ended.
 48 | * `onError:Function` - Callback when an error occurs within the player.
 49 | * `onPause:Function` - Callback when video player is paused.
 50 | * `onPlay:Function` - Callback when video player is played.
 51 | * `onReady:Function` - Callback when video player is ready.
 52 | * `onTimeUpdate:Function` - Callback when video player time updates.
 53 | 
 54 | ### Player Components
 55 | 
 56 | #### `VimeoPlayer`
 57 | 
 58 | The `VimeoPlayer` component is a simple React wrapper around the standard Vimeo
 59 | Player embed. For more informatin on how to work with the Vimeo Player directly,
 60 | check out this repo, [@vimeo/player.js](https://github.com/vimeo/player.js), for
 61 | more info and examples.
 62 | 
 63 | The `VimeoPlayer` component offers limited control of the player via the `props`
 64 | on the component: `loop`, `play`, `time` and `volume`. I’m open to adding more
 65 | access to some of the other methods available on the player via props, but to
 66 | keep it simple I’ve started with these four.
 67 | 
 68 | ##### Props
 69 | 
 70 | * `config:Object` - Options that are passed to the player on setup,
 71 | Available [embedOptions](https://github.com/vimeo/player.js#embed-options).
 72 | * `videoId:Number` - ID of the Vimeo video you'd like to load in the player.
 73 | 
 74 | ##### Example
 75 | 
 76 | ```js
 77 | import {VimeoPlayer} from 'react-video-players';
 78 | 
 79 | ...
 80 | 
 81 |   render() {
 82 |     return (
 83 |       <div>
 84 |         <VimeoPlayer videoId="225408543" />
 85 |       </div>
 86 |     );
 87 |   }
 88 | 
 89 | ...
 90 | 
 91 | ```
 92 | 
 93 | #### `YouTubePlayer`
 94 | 
 95 | Similar to the `VimeoPlayer` component, the `YouTubePlayer` component is a simple
 96 | React wrapper around the YouTube Player, allowing for basic control and configuration,
 97 | allowing you to use it how you want within your React sites/applications.
 98 | 
 99 | ##### Props
100 | 
101 | * `config:Object` - The `config` object is mapped to the `playerVars` property
102 | used when creating the player. Available [playerVars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters).
103 | * `playlist:String` - An optional value that can be set when you would like to
104 | load a playlist into the player. This property is also set to the `videoId` when
105 | the `loop` flag has been set on the player (which is required for the YouTube Player
106 | to loop the video).
107 | * `videoId:String` - String to the YouTube video ID you would like to load in the player.
108 | 
109 | ##### Example
110 | 
111 | ```js
112 | import {YouTubePlayer} from 'react-video-players';
113 | 
114 | ...
115 | 
116 |   render() {
117 |     return (
118 |       <div>
119 |         <YouTubePlayer videoId="8gXpZmQ7j70" />
120 |       </div>
121 |     );
122 |   }
123 | 
124 | ...
125 | 
126 | ```
127 | 
128 | #### `VideoPlayer`
129 | 
130 | Just your plain ole’ `<video>` tag, wrapped in a similar interface to the other
131 | platform specific players. You could use this as is if you have direct access
132 | to video urls, or use it as a base for a more complex video player that you’re
133 | building in React.
134 | 
135 | ##### Props
136 | 
137 | * `config:Object` - An object containing the additional attributes that are available
138 | for the `<video>` tag, but are not exposed via other props. (Ex. `controls`, `poster`, `preload`, etc.)
139 | * `src:String` - URL to video content.
140 | 
141 | ##### Example
142 | 
143 | ```js
144 | import {VideoPlayer} from 'react-video-players';
145 | 
146 | ...
147 | 
148 |   render() {
149 |     return (
150 |       <div>
151 |         <VideoPlayer src="[...your video source url...]" />
152 |       </div>
153 |     );
154 |   }
155 | 
156 | ...
157 | 
158 | ```
159 | 
160 | ### `playerController` (Higher Order Component)
161 | 
162 | Want to build your own embeddable player using a different providers player? No problem 😎
163 | 
164 | Included in this library is the a High Order Component that wraps all the players
165 | in this library, `playerController`. The `playerController` is responsible for
166 | wiring up the `controls`, along with handling some basic style and callback handling
167 | within video component instances so that we’re not repeating ourselves too much.
168 | 
169 | Feel free to use the `playerController` to write your own React video players that
170 | wrap embeddable players from other video providers. Also, if you end up writing
171 | a really awesome component for another provider, and you’d like to add it to this
172 | repo, just make a PR with your additions and I’ll check’em out and merge them in
173 | as soon as I can.
174 | 
175 | #### Example
176 | 
177 | ```js
178 | import React, {Component} from 'react';
179 | import {playerController} from 'react-video-players';
180 | 
181 | class YourRadVideoPlayer extends Component {
182 | 
183 | ...
184 | 
185 | }
186 | ...
187 | 
188 | export default playerController(YourRadVideoPlayer);
189 | 
190 | ```
191 | 
192 | ## Player Controls
193 | 
194 | The `controls` property on the video player components makes it easy to compose
195 | controls in context with the video player and provide a simple way to keep controls
196 | in sync with the video state, while also providing callbacks that can be used
197 | to control video playback.
198 | 
199 | ### Properties
200 | 
201 | * `loop:Boolean` - Loop status of video
202 | * `play:Boolean` - Playing status of video
203 | * `time:Number` - Current time of video
204 | * `volume:Number` - Current volume of video
205 | 
206 | ### Callback
207 | 
208 | * `onPause:Function` - Callback to pause video
209 | * `onPlay:Function` - Callback to play video
210 | * `onSeek:Function` - Callback to seek video
211 | * `onVolumeChange:Function` - Callback to change the volume of video
212 | 
213 | ## License
214 | 
215 | [MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)
216 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-video-players",
 3 |   "version": "0.1.11",
 4 |   "license": "MIT",
 5 |   "description": "React video player component library that offers a consistent API across YouTube and Vimeo video player React components.",
 6 |   "repository": "ryanhefner/react-video-players",
 7 |   "bugs": "https://github.com/ryanhefner/react-video-players/issues",
 8 |   "author": "Ryan Hefner <hi@ryanhefner.com> (https://www.ryanhefner.com)",
 9 |   "files": [
10 |     "embeds",
11 |     "es",
12 |     "index.js",
13 |     "playerController.js",
14 |     "src",
15 |     "umd",
16 |     "VideoPlayer.js",
17 |     "VimeoPlayer.js",
18 |     "YouTubePlayer.js"
19 |   ],
20 |   "directories": {
21 |     "lib": "/src"
22 |   },
23 |   "main": "index.js",
24 |   "module": "es/index.js",
25 |   "jsnext:main": "src/index.js",
26 |   "scripts": {
27 |     "clean": "rm -f index.js && rm -f playerController.js && rm -f VideoPlayer.js && rm -f VimeoPlayer.js && rm -f YouTubePlayer.js && rm -rf embeds && rm -rf es && rm -rf umd",
28 |     "prebuild": "npm run clean",
29 |     "build": "node ./tools/build.js",
30 |     "watch": "babel ./src -d . --ignore __tests__ --watch",
31 |     "prepare": "npm run build",
32 |     "prepublishOnly": "node ./tools/build.js",
33 |     "push-release": "git push origin master && git push --tags",
34 |     "test": "echo \"Error: no test specified\" && exit 1"
35 |   },
36 |   "peerDependencies": {
37 |     "react": ">=15"
38 |   },
39 |   "dependencies": {
40 |     "@vimeo/player": "^2.10.0",
41 |     "clean-react-props": "^0.3.4",
42 |     "lomit": "^0.1.1",
43 |     "prop-types": "^15.7.2",
44 |     "youtube-player": "^5.5.2"
45 |   },
46 |   "devDependencies": {
47 |     "@babel/cli": "^7.8.4",
48 |     "@babel/core": "^7.8.6",
49 |     "@babel/plugin-external-helpers": "^7.8.3",
50 |     "@babel/preset-env": "^7.8.6",
51 |     "@babel/preset-react": "^7.8.3",
52 |     "babel-cli": "^6.26.0",
53 |     "babel-plugin-dev-expression": "^0.2.2",
54 |     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
55 |     "gzip-size": "^5.1.1",
56 |     "jest": "^25.1.0",
57 |     "pretty-bytes": "^5.3.0",
58 |     "react": "^16.13.0",
59 |     "rollup": "^1.32.0",
60 |     "rollup-plugin-babel": "^4.3.3",
61 |     "rollup-plugin-commonjs": "^10.1.0",
62 |     "rollup-plugin-json": "^4.0.0",
63 |     "rollup-plugin-node-resolve": "^5.2.0",
64 |     "rollup-plugin-uglify": "^6.0.4",
65 |     "rollup-watch": "^4.3.1"
66 |   },
67 |   "browserify": {
68 |     "transform": [
69 |       "loose-envify"
70 |     ]
71 |   },
72 |   "keywords": [
73 |     "react",
74 |     "react-component",
75 |     "video",
76 |     "player",
77 |     "vimeo",
78 |     "youtube",
79 |     "higher-order-component"
80 |   ]
81 | }
82 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import babel from 'rollup-plugin-babel';
 2 | import commonjs from 'rollup-plugin-commonjs';
 3 | import json from 'rollup-plugin-json';
 4 | import resolve from 'rollup-plugin-node-resolve';
 5 | import { uglify } from 'rollup-plugin-uglify';
 6 | import pkg from './package.json';
 7 | 
 8 | const config = {
 9 |   input: 'src/index.js',
10 |   output: {
11 |     name: 'react-video-players',
12 |     file: './index.js',
13 |     exports: 'named',
14 |     format: 'umd',
15 |     globals: {
16 |       '@vimeo/player': 'Player',
17 |       'react': 'React',
18 |       'youtube-player': 'Player',
19 |     },
20 |     banner: `/*! ${pkg.name} v${pkg.version} | (c) ${new Date().getFullYear()} Ryan Hefner | ${pkg.license} License | https://github.com/${pkg.repository} !*/`,
21 |     footer: '/* follow me on Twitter! @ryanhefner */',
22 |   },
23 |   external: [
24 |     '@vimeo/player',
25 |     'react',
26 |     'youtube-player',
27 |   ],
28 |   plugins: [
29 |     babel({
30 |       exclude: 'node_modules/**',
31 |       externalHelpers: process.env.BABEL_ENV === 'umd',
32 |     }),
33 |     resolve(),
34 |     commonjs({
35 |       include: /node_modules/,
36 |     }),
37 |     json(),
38 |   ],
39 | };
40 | 
41 | if (process.env.NODE_ENV === 'production') {
42 |   config.plugins.push(uglify());
43 | }
44 | 
45 | export default config;
46 | 


--------------------------------------------------------------------------------
/src/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [ "../tools/babel-preset" ]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/VideoPlayer.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import playerController from './playerController';
 4 | import VideoEmbed from './embeds/VideoEmbed';
 5 | 
 6 | class VideoPlayer extends Component {
 7 |   render() {
 8 |     const {
 9 |       aspectRatio,
10 |     } = this.props;
11 | 
12 |     let style = {};
13 | 
14 |     if (aspectRatio) {
15 |       const [width, height] = aspectRatio.split(':');
16 |       style = {
17 |         position: 'relative',
18 |         height: 0,
19 |         paddingBottom: `${height / width * 100}%`,
20 |       };
21 |     }
22 | 
23 |     return (
24 |       <VideoEmbed {...this.props} style={style} />
25 |     );
26 |   }
27 | }
28 | 
29 | VideoPlayer.propTypes = {
30 |   aspectRatio: PropTypes.string,
31 |   config: PropTypes.object,
32 |   loop: PropTypes.bool,
33 |   play: PropTypes.bool,
34 |   time: PropTypes.number,
35 |   volume: PropTypes.number,
36 |   onEnded: PropTypes.func,
37 |   onError: PropTypes.func,
38 |   onPause: PropTypes.func,
39 |   onPlay: PropTypes.func,
40 |   onReady: PropTypes.func,
41 |   onTimeUpdate: PropTypes.func,
42 |   onVolumeChange: PropTypes.func,
43 | };
44 | 
45 | VideoPlayer.defaultProps = {
46 |   aspectRatio: '16:9',
47 |   config: {},
48 |   loop: false,
49 |   play: false,
50 |   time: 0,
51 |   volume: 1,
52 |   onEnded: () => {},
53 |   onError: () => {},
54 |   onPause: () => {},
55 |   onPlay: () => {},
56 |   onReady: () => {},
57 |   onTimeUpdate: () => {},
58 |   onVolumeChange: () => {},
59 | };
60 | 
61 | export default playerController(VideoPlayer);
62 | 


--------------------------------------------------------------------------------
/src/VimeoPlayer.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import playerController from './playerController';
 4 | import VimeoEmbed from './embeds/VimeoEmbed';
 5 | 
 6 | class VimeoPlayer extends Component {
 7 |   render() {
 8 |     const {
 9 |       aspectRatio,
10 |     } = this.props;
11 | 
12 |     let style = {};
13 | 
14 |     if (aspectRatio) {
15 |       const [width, height] = aspectRatio.split(':');
16 |       style = {
17 |         position: 'relative',
18 |         height: 0,
19 |         paddingBottom: `${height / width * 100}%`,
20 |       };
21 |     }
22 | 
23 |     return (
24 |       <VimeoEmbed {...this.props} style={style} />
25 |     );
26 |   }
27 | }
28 | 
29 | VimeoPlayer.propTypes = {
30 |   aspectRatio: PropTypes.string,
31 |   loop: PropTypes.bool,
32 |   play: PropTypes.bool,
33 |   time: PropTypes.number,
34 |   volume: PropTypes.number,
35 |   onEnded: PropTypes.func,
36 |   onError: PropTypes.func,
37 |   onPause: PropTypes.func,
38 |   onPlay: PropTypes.func,
39 |   onReady: PropTypes.func,
40 |   onTimeUpdate: PropTypes.func,
41 |   onVolumeChange: PropTypes.func,
42 | };
43 | 
44 | VimeoPlayer.defaultProps = {
45 |   aspectRatio: '16:9',
46 |   loop: false,
47 |   play: false,
48 |   time: 0,
49 |   volume: 1,
50 |   onEnded: () => {},
51 |   onError: () => {},
52 |   onPause: () => {},
53 |   onPlay: () => {},
54 |   onReady: () => {},
55 |   onTimeUpdate: () => {},
56 |   onVolumeChange: () => {},
57 | };
58 | 
59 | export default playerController(VimeoPlayer);
60 | 


--------------------------------------------------------------------------------
/src/YouTubePlayer.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import playerController from './playerController';
 4 | import YouTubeEmbed from './embeds/YouTubeEmbed';
 5 | 
 6 | class YouTubePlayer extends Component {
 7 |   render() {
 8 |     const {
 9 |       aspectRatio,
10 |     } = this.props;
11 | 
12 |     let style = {};
13 | 
14 |     if (aspectRatio) {
15 |       const [width, height] = aspectRatio.split(':');
16 |       style = {
17 |         position: 'relative',
18 |         height: 0,
19 |         paddingBottom: `${height / width * 100}%`,
20 |       };
21 |     }
22 | 
23 |     return (
24 |       <YouTubeEmbed {...this.props} style={style} />
25 |     );
26 |   }
27 | }
28 | 
29 | YouTubePlayer.propTypes = {
30 |   aspectRatio: PropTypes.string,
31 |   loop: PropTypes.bool,
32 |   play: PropTypes.bool,
33 |   time: PropTypes.number,
34 |   volume: PropTypes.number,
35 |   onEnded: PropTypes.func,
36 |   onError: PropTypes.func,
37 |   onPause: PropTypes.func,
38 |   onPlay: PropTypes.func,
39 |   onReady: PropTypes.func,
40 |   onTimeUpdate: PropTypes.func,
41 |   onVolumeChange: PropTypes.func,
42 | };
43 | 
44 | YouTubePlayer.defaultProps = {
45 |   aspectRatio: '16:9',
46 |   loop: false,
47 |   play: false,
48 |   time: 0,
49 |   volume: 1,
50 |   onEnded: () => {},
51 |   onError: () => {},
52 |   onPause: () => {},
53 |   onPlay: () => {},
54 |   onReady: () => {},
55 |   onTimeUpdate: () => {},
56 |   onVolumeChange: () => {},
57 | };
58 | 
59 | export default playerController(YouTubePlayer);
60 | 


--------------------------------------------------------------------------------
/src/embeds/VideoEmbed.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import cleanProps from 'clean-react-props';
  4 | 
  5 | class VideoEmbed extends Component {
  6 |   constructor(props) {
  7 |     super(props);
  8 | 
  9 |     this.onEnded = this.onEnded.bind(this);
 10 |     this.onError = this.onError.bind(this);
 11 |     this.onLoadedMetadata = this.onLoadedMetadata.bind(this);
 12 |     this.onPause = this.onPause.bind(this);
 13 |     this.onPlay = this.onPlay.bind(this);
 14 |     this.onTimeUpdate = this.onTimeUpdate.bind(this);
 15 |     this.onVolumeChange = this.onVolumeChange.bind(this);
 16 |   }
 17 | 
 18 |   componentDidMount() {
 19 |     const {
 20 |       play,
 21 |       time,
 22 |       volume,
 23 |       onReady,
 24 |     } = this.props;
 25 | 
 26 |     this.player = this.refPlayer;
 27 |     this.player.addEventListener('ended', this.onEnded);
 28 |     this.player.addEventListener('error', this.onError);
 29 |     this.player.addEventListener('loadedmetadata', this.onLoadedMetadata);
 30 |     this.player.addEventListener('pause', this.onPause);
 31 |     this.player.addEventListener('play', this.onPlay);
 32 |     this.player.addEventListener('timeupdate', this.onTimeUpdate);
 33 |     this.player.addEventListener('volumechange', this.onVolumeChange);
 34 | 
 35 |     onReady();
 36 | 
 37 |     if (play) {
 38 |       this.player.play();
 39 |     }
 40 |   }
 41 | 
 42 |   componentWillReceiveProps(nextProps) {
 43 |     const {
 44 |       loop,
 45 |       play,
 46 |       time,
 47 |       src,
 48 |       volume,
 49 |     } = nextProps;
 50 | 
 51 |     if (this.props.src !== src) {
 52 |       this.player.setAttribute('src', src);
 53 |     }
 54 | 
 55 |     if (this.props.play !== play) {
 56 |       if (play) {
 57 |         this.player.play();
 58 |       }
 59 |       else {
 60 |         this.player.pause();
 61 |       }
 62 |     }
 63 | 
 64 |     if (this.props.loop !== loop) {
 65 |       this.player.setAttribute('loop', loop);
 66 |     }
 67 | 
 68 |     if (this.props.time !== time) {
 69 |       this.player.setAttribute('currentTime', time);
 70 |     }
 71 | 
 72 |     if (this.props.volume !== volume) {
 73 |       this.player.setAttribute('volume', volume);
 74 |     }
 75 |   }
 76 | 
 77 |   shouldComponentUpdate() {
 78 |     return false;
 79 |   }
 80 | 
 81 |   componentWillUnmount() {
 82 |     this.player.removeEventListener('ended', this.onEnded);
 83 |     this.player.removeEventListener('error', this.onError);
 84 |     this.player.removeEventListener('loadedmetadata', this.onLoadedMetadata);
 85 |     this.player.removeEventListener('pause', this.onPause);
 86 |     this.player.removeEventListener('play', this.onPlay);
 87 |     this.player.removeEventListener('timeupdate', this.onTimeUpdate);
 88 |     this.player.removeEventListener('volumechange', this.onVolumeChange);
 89 |   }
 90 | 
 91 |   getCurrentStatus() {
 92 |     return {
 93 |       duration: !isNaN(this.player.duration) ? this.player.duration : 0,
 94 |       percent: !isNaN(this.player.duration)
 95 |         ? ((!isNaN(this.player.currentTime) ? this.player.currentTime : 0) / this.player.duration)
 96 |         : 0,
 97 |       seconds: !isNaN(this.player.currentTime) ? this.player.currentTime : 0,
 98 |     }
 99 |   }
100 | 
101 |   onEnded(evt) {
102 |     const {
103 |       onEnded,
104 |     } = this.props;
105 | 
106 |     onEnded(this.getCurrentStatus());
107 |   }
108 | 
109 |   onError(evt) {
110 |     const {
111 |       onError,
112 |     } = this.props;
113 | 
114 |     onError(this.player.error);
115 |   }
116 | 
117 |   onLoadedMetadata() {
118 |     const {
119 |       time,
120 |       volume,
121 |     } = this.props;
122 | 
123 |     this.player.currentTime = time;
124 |     this.player.volume = volume;
125 |   }
126 | 
127 |   onPause(evt) {
128 |     const {
129 |       onPause,
130 |     } = this.props;
131 | 
132 |     onPause();
133 |   }
134 | 
135 |   onPlay(evt) {
136 |     const {
137 |       onPlay,
138 |     } = this.props;
139 | 
140 |     onPlay(this.getCurrentStatus());
141 |   }
142 | 
143 |   onTimeUpdate(evt) {
144 |     const {
145 |       onTimeUpdate,
146 |     } = this.props;
147 | 
148 |     onTimeUpdate(this.getCurrentStatus());
149 |   }
150 | 
151 |   onVolumeChange(evt) {
152 |     const {
153 |       onVolumeChange,
154 |     } = this.props;
155 | 
156 |     onVolumeChange({
157 |       volume: evt.target.volume,
158 |     });
159 |   }
160 | 
161 |   render() {
162 |     const {
163 |       aspectRatio,
164 |       children,
165 |       config,
166 |       loop,
167 |       src,
168 |     } = this.props;
169 | 
170 |     let playerStyle = {};
171 | 
172 |     if (aspectRatio) {
173 |       playerStyle = {
174 |         position: 'absolute',
175 |         top: 0,
176 |         right: 0,
177 |         bottom: 0,
178 |         left: 0,
179 |       };
180 |     }
181 | 
182 |     const omitProps = [
183 |       'height',
184 |       'loop',
185 |       'src',
186 |       'width',
187 |       'onEnded',
188 |       'onError',
189 |       'onPause',
190 |       'onPlay',
191 |       'onTimeUpdate',
192 |       'onVolumeChange',
193 |     ];
194 | 
195 |     return (
196 |       <div {...cleanProps(this.props, omitProps)}>
197 |         <video
198 |           {...config}
199 |           height="100%"
200 |           loop={loop}
201 |           ref={(element) => {
202 |             this.refPlayer = element;
203 |           }}
204 |           src={src}
205 |           style={playerStyle}
206 |           width="100%"
207 |         ></video>
208 |         {children}
209 |       </div>
210 |     );
211 |   }
212 | }
213 | 
214 | VideoEmbed.propTypes = {
215 |   aspectRatio: PropTypes.string,
216 |   config: PropTypes.object,
217 |   height: PropTypes.oneOfType([
218 |     PropTypes.number,
219 |     PropTypes.string,
220 |   ]),
221 |   loop: PropTypes.bool,
222 |   play: PropTypes.bool,
223 |   src: PropTypes.string,
224 |   time: PropTypes.number,
225 |   volume: PropTypes.number,
226 |   width: PropTypes.oneOfType([
227 |     PropTypes.number,
228 |     PropTypes.string,
229 |   ]),
230 |   onEnded: PropTypes.func,
231 |   onError: PropTypes.func,
232 |   onPause: PropTypes.func,
233 |   onPlay: PropTypes.func,
234 |   onReady: PropTypes.func,
235 |   onTimeUpdate: PropTypes.func,
236 | };
237 | 
238 | VideoEmbed.defaultProps = {
239 |   aspectRatio: '16:9',
240 |   height: '100%',
241 |   loop: false,
242 |   play: false,
243 |   time: 0,
244 |   volume: 1,
245 |   width: '100%',
246 |   onEnded: () => {},
247 |   onError: () => {},
248 |   onPause: () => {},
249 |   onPlay: () => {},
250 |   onReady: () => {},
251 |   onTimeUpdate: () => {},
252 | };
253 | 
254 | export default VideoEmbed;
255 | 


--------------------------------------------------------------------------------
/src/embeds/VimeoEmbed.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import cleanProps from 'clean-react-props';
  4 | import Player from '@vimeo/player';
  5 | 
  6 | class VimeoEmbed extends Component {
  7 |   constructor(props) {
  8 |     super(props);
  9 | 
 10 |     this.onPlayerReady = this.onPlayerReady.bind(this);
 11 |   }
 12 | 
 13 |   componentDidMount() {
 14 |     this.createPlayer();
 15 |   }
 16 | 
 17 |   componentWillReceiveProps(nextProps) {
 18 |     const {
 19 |       loop,
 20 |       play,
 21 |       time,
 22 |       volume,
 23 |     } = nextProps;
 24 | 
 25 |     if (this.props.play !== play) {
 26 |       if (play) {
 27 |         this.player.play();
 28 |       }
 29 |       else {
 30 |         this.player.pause();
 31 |       }
 32 |     }
 33 | 
 34 |     if (this.props.loop !== loop) {
 35 |       this.player.setLoop(loop);
 36 |     }
 37 | 
 38 |     if (this.props.time !== time) {
 39 |       this.player.setCurrentTime(time);
 40 |     }
 41 | 
 42 |     if (this.props.volume !== volume) {
 43 |       this.player.setVolume(volume);
 44 |     }
 45 |   }
 46 | 
 47 |   shouldComponentUpdate() {
 48 |     return false;
 49 |   }
 50 | 
 51 |   componentWillUnmount() {
 52 |     const {
 53 |       onEnded,
 54 |       onPlay,
 55 |       onTimeUpdate,
 56 |       onVolumeChange,
 57 |     } = this.props;
 58 | 
 59 |     this.player.off('play', onPlay);
 60 |     this.player.off('ended', onEnded);
 61 |     this.player.off('timeupdate', onTimeUpdate);
 62 |     this.player.off('volumechange', onVolumeChange);
 63 |   }
 64 | 
 65 |   createPlayer() {
 66 |     const {
 67 |       config,
 68 |       height,
 69 |       videoId,
 70 |       videoUrl,
 71 |       width,
 72 |       onEnded,
 73 |       onError,
 74 |       onPause,
 75 |       onPlay,
 76 |       onTimeUpdate,
 77 |       onVolumeChange,
 78 |     } = this.props;
 79 | 
 80 |     Object.assign(config,
 81 |       videoId ? {id: videoId} : {},
 82 |       videoUrl ? {url: videoUrl} : {},
 83 |       {height, width}
 84 |     );
 85 | 
 86 |     this.player = new Player(this.refPlayer, config);
 87 |     this.player.on('ended', onEnded);
 88 |     this.player.on('error', onError);
 89 |     this.player.on('pause', onPause);
 90 |     this.player.on('play', onPlay);
 91 |     this.player.on('timeupdate', onTimeUpdate);
 92 |     this.player.on('volumechange', onVolumeChange);
 93 | 
 94 |     this.player.ready()
 95 |       .then(this.onPlayerReady);
 96 | 
 97 |     return Promise.resolve(this.player);
 98 |   }
 99 | 
100 |   onPlayerReady() {
101 |     const {
102 |       height,
103 |       play,
104 |       time,
105 |       volume,
106 |       width,
107 |       onReady,
108 |     } = this.props;
109 | 
110 |     const iframe = this.refPlayer.querySelector('iframe');
111 |     iframe.width = width;
112 |     iframe.height = height;
113 | 
114 |     this.player.setVolume(volume);
115 | 
116 |     if (play) {
117 |       this.player.play();
118 |       this.player.setCurrentTime(time);
119 |     }
120 | 
121 |     onReady();
122 |   }
123 | 
124 |   render() {
125 |     const {
126 |       aspectRatio,
127 |       children,
128 |     } = this.props;
129 | 
130 |     let playerStyle = {};
131 | 
132 |     if (aspectRatio) {
133 |       playerStyle = {
134 |         position: 'absolute',
135 |         top: 0,
136 |         right: 0,
137 |         bottom: 0,
138 |         left: 0,
139 |       };
140 |     }
141 | 
142 |     const omitProps = [
143 |       'height',
144 |       'loop',
145 |       'width',
146 |       'onEnded',
147 |       'onError',
148 |       'onPause',
149 |       'onPlay',
150 |       'onTimeUpdate',
151 |       'onVolumeChange',
152 |     ];
153 | 
154 |     return (
155 |       <div {...cleanProps(this.props, omitProps)}>
156 |         <div
157 |           ref={(element) => {
158 |             this.refPlayer = element;
159 |           }}
160 |           style={playerStyle}
161 |         ></div>
162 |         {children}
163 |       </div>
164 |     );
165 |   }
166 | }
167 | 
168 | VimeoEmbed.propTypes = {
169 |   aspectRatio: PropTypes.string,
170 |   config: PropTypes.object,
171 |   height: PropTypes.oneOfType([
172 |     PropTypes.number,
173 |     PropTypes.string,
174 |   ]),
175 |   loop: PropTypes.bool,
176 |   play: PropTypes.bool,
177 |   time: PropTypes.number,
178 |   videoId: PropTypes.oneOfType([
179 |     PropTypes.number,
180 |     PropTypes.string,
181 |   ]),
182 |   videoUrl: PropTypes.string,
183 |   volume: PropTypes.number,
184 |   width: PropTypes.oneOfType([
185 |     PropTypes.number,
186 |     PropTypes.string,
187 |   ]),
188 |   onEnded: PropTypes.func,
189 |   onError: PropTypes.func,
190 |   onPause: PropTypes.func,
191 |   onPlay: PropTypes.func,
192 |   onReady: PropTypes.func,
193 |   onTimeUpdate: PropTypes.func,
194 |   onVolumeChange: PropTypes.func,
195 | };
196 | 
197 | VimeoEmbed.defaultProps = {
198 |   aspectRatio: '16:9',
199 |   config: {},
200 |   height: '100%',
201 |   loop: false,
202 |   play: false,
203 |   time: 0,
204 |   volume: 1,
205 |   width: '100%',
206 |   onEnded: () => {},
207 |   onError: () => {},
208 |   onPause: () => {},
209 |   onPlay: () => {},
210 |   onReady: () => {},
211 |   onTimeUpdate: () => {},
212 |   onVolumeChange: () => {},
213 | };
214 | 
215 | export default VimeoEmbed;
216 | 


--------------------------------------------------------------------------------
/src/embeds/YouTubeEmbed.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import cleanProps from 'clean-react-props';
  4 | import Player from 'youtube-player';
  5 | 
  6 | export const PlayerStates = {
  7 |   UNSTARTED: -1,
  8 |   ENDED: 0,
  9 |   PLAYING: 1,
 10 |   PAUSED: 2,
 11 |   BUFFERING: 3,
 12 |   VIDEO_CUED: 5,
 13 | };
 14 | 
 15 | class YouTubeEmbed extends Component {
 16 |   constructor(props) {
 17 |     super(props);
 18 | 
 19 |     this.onPlayerError = this.onPlayerError.bind(this);
 20 |     this.onPlayerReady = this.onPlayerReady.bind(this);
 21 |     this.onPlayerStateChange = this.onPlayerStateChange.bind(this);
 22 | 
 23 |     this.playbackInterval = null;
 24 |   }
 25 | 
 26 |   componentDidMount() {
 27 |     this.createPlayer();
 28 |   }
 29 | 
 30 |   componentWillReceiveProps(nextProps) {
 31 |     const {
 32 |       loop,
 33 |       play,
 34 |       time,
 35 |       volume,
 36 |     } = nextProps;
 37 | 
 38 |     if (this.props.play !== play) {
 39 |       if (play) {
 40 |         this.player.playVideo();
 41 |       }
 42 |       else {
 43 |         this.player.pauseVideo();
 44 |       }
 45 |     }
 46 | 
 47 |     if (this.props.loop !== loop) {
 48 |       this.player.setLoop(loop);
 49 |     }
 50 | 
 51 |     if (this.props.time !== time) {
 52 |       this.player.seekTo(time);
 53 |     }
 54 | 
 55 |     if (this.props.volume !== volume) {
 56 |       this.player.setVolume(volume * 100);
 57 |     }
 58 |   }
 59 | 
 60 |   shouldComponentUpdate() {
 61 |     return false;
 62 |   }
 63 | 
 64 |   componentWillUnmount() {
 65 |     if (this.errorListener) {
 66 |       this.player.off(this.errorListener);
 67 |     }
 68 | 
 69 |     if (this.readyListener) {
 70 |       this.player.off(this.readyListener);
 71 |     }
 72 | 
 73 |     if (this.stateChangeListener) {
 74 |       this.player.off(this.stateChangeListener);
 75 |     }
 76 |   }
 77 | 
 78 |   createPlayer() {
 79 |     const promise = new Promise((resolve, reject) => {
 80 |       try {
 81 |         const {
 82 |           config,
 83 |           width,
 84 |           height,
 85 |           loop,
 86 |           play,
 87 |           playlist,
 88 |           time,
 89 |           videoId,
 90 |           volume,
 91 |           onReady,
 92 |         } = this.props;
 93 | 
 94 |         Object.assign(config, {
 95 |           autoplay: play ? 1 : 0,
 96 |           loop: loop ? 1 : 0,
 97 |           playlist,
 98 |         });
 99 | 
100 |         this.player = Player(this.refPlayer, {
101 |           playerVars: config,
102 |           height,
103 |           videoId,
104 |           width,
105 |         });
106 |         this.errorListener = this.player.on('error', this.onPlayerError);
107 |         this.readyListener = this.player.on('ready', this.onPlayerReady);
108 |         this.stateChangeListener = this.player.on('stateChange', this.onPlayerStateChange);
109 | 
110 |         resolve(this.player);
111 |       }
112 |       catch (err) {
113 |         reject(err);
114 |       }
115 |     });
116 | 
117 |     return promise;
118 |   }
119 | 
120 |   onPlayerError(evt) {
121 |     const {
122 |       onError,
123 |     } = this.props;
124 | 
125 |     switch (evt.data) {
126 |       case 2:
127 |         return onError({
128 |           code: evt.data,
129 |           message: 'Invalid parameter',
130 |         });
131 | 
132 |       case 5:
133 |         return onError({
134 |           code: evt.data,
135 |           message: 'HTML 5 error',
136 |         });
137 | 
138 |       case 100:
139 |         return onError({
140 |           code: evt.data,
141 |           message: 'Video not found',
142 |         });
143 | 
144 |       case 101:
145 |         return onError({
146 |           code: evt.data,
147 |           message: 'Video cannot be played in embedded players',
148 |         });
149 | 
150 |       // 🖕
151 |       case 150:
152 |         return onError({
153 |           code: evt.data,
154 |           message: 'This error is the same as 101. It’s just a 101 error in disguise!',
155 |         });
156 | 
157 |       default:
158 | 
159 |     }
160 |   }
161 | 
162 |   onPlayerReady() {
163 |     const {
164 |       play,
165 |       time,
166 |       volume,
167 |       onReady,
168 |     } = this.props;
169 | 
170 |     this.player.setVolume(volume * 100);
171 | 
172 |     if (play) {
173 |       this.player.playVideo();
174 |       this.player.seekTo(time);
175 |     }
176 | 
177 |     onReady();
178 |   }
179 | 
180 |   onPlayerStateChange(evt) {
181 |     const {
182 |       onEnded,
183 |       onPause,
184 |       onPlay,
185 |       onTimeUpdate,
186 |     } = this.props;
187 | 
188 |     const duration = this.player.getDuration();
189 |     const seconds = this.player.getCurrentTime();
190 |     const percent = duration === 0 ? 0 : (seconds / duration);
191 | 
192 |     switch (evt.data) {
193 |       case PlayerStates.UNSTARTED:
194 |         break;
195 | 
196 |       case PlayerStates.ENDED:
197 |         clearInterval(this.playbackInterval);
198 | 
199 |         onEnded({
200 |           duration,
201 |           percent,
202 |           seconds,
203 |         });
204 |         break;
205 | 
206 |       case PlayerStates.PLAYING:
207 |         onPlay({
208 |           duration,
209 |           percent,
210 |           seconds,
211 |         });
212 | 
213 |         this.playbackInterval = setInterval(() => {
214 |           const intDuration = this.player.getDuration();
215 |           const intSeconds = this.player.getCurrentTime();
216 |           onTimeUpdate({
217 |             duration: intDuration,
218 |             percent: intDuration === 0 ? 0 : (intSeconds / intDuration),
219 |             seconds: intSeconds,
220 |           });
221 |         }, 250);
222 |         break;
223 | 
224 |       case PlayerStates.PAUSED:
225 |         clearInterval(this.playbackInterval);
226 | 
227 |         onPause({
228 |           duration,
229 |           percent,
230 |           seconds,
231 |         });
232 |         break;
233 | 
234 |       case PlayerStates.BUFFERING:
235 |         break;
236 | 
237 |       case PlayerStates.VIDEO_CUED:
238 |         break;
239 | 
240 |       default:
241 |         break;
242 |     }
243 |   }
244 | 
245 |   render() {
246 |     const {
247 |       children,
248 |       aspectRatio,
249 |     } = this.props;
250 | 
251 |     let playerStyle = {};
252 | 
253 |     if (aspectRatio) {
254 |       playerStyle = {
255 |         position: 'absolute',
256 |         top: 0,
257 |         right: 0,
258 |         bottom: 0,
259 |         left: 0,
260 |       };
261 |     }
262 | 
263 |     const omitProps = [
264 |       'height',
265 |       'loop',
266 |       'width',
267 |       'onEnded',
268 |       'onError',
269 |       'onPause',
270 |       'onPlay',
271 |       'onTimeUpdate',
272 |       'onVolumeChange',
273 |     ];
274 | 
275 |     return (
276 |       <div {...cleanProps(this.props, omitProps)}>
277 |         <div
278 |           ref={(element) => {
279 |             this.refPlayer = element;
280 |           }}
281 |           style={playerStyle}
282 |         ></div>
283 |         {children}
284 |       </div>
285 |     );
286 |   }
287 | }
288 | 
289 | YouTubeEmbed.propTypes = {
290 |   aspectRatio: PropTypes.string,
291 |   height: PropTypes.oneOfType([
292 |     PropTypes.number,
293 |     PropTypes.string,
294 |   ]),
295 |   loop: PropTypes.bool,
296 |   play: PropTypes.bool,
297 |   time: PropTypes.number,
298 |   videoId: PropTypes.string,
299 |   volume: PropTypes.number,
300 |   width: PropTypes.oneOfType([
301 |     PropTypes.number,
302 |     PropTypes.string,
303 |   ]),
304 |   onEnded: PropTypes.func,
305 |   onError: PropTypes.func,
306 |   onPause: PropTypes.func,
307 |   onPlay: PropTypes.func,
308 |   onReady: PropTypes.func,
309 |   onTimeUpdate: PropTypes.func,
310 |   onVolumeChange: PropTypes.func,
311 | };
312 | 
313 | YouTubeEmbed.defaultProps = {
314 |   aspectRatio: '16:9',
315 |   config: {},
316 |   height: '100%',
317 |   loop: false,
318 |   play: false,
319 |   time: 0,
320 |   volume: 1,
321 |   width: '100%',
322 |   onEnded: () => {},
323 |   onError: () => {},
324 |   onPause: () => {},
325 |   onPlay: () => {},
326 |   onReady: () => {},
327 |   onTimeUpdate: () => {},
328 |   onVolumeChange: () => {},
329 | };
330 | 
331 | export default YouTubeEmbed;
332 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as VideoPlayer } from './VideoPlayer';
2 | export { default as VimeoPlayer } from './VimeoPlayer';
3 | export { default as YouTubePlayer } from './YouTubePlayer';
4 | export { default as playerController } from './playerController';
5 | 


--------------------------------------------------------------------------------
/src/playerController.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import omit from 'lomit';
  4 | 
  5 | const playerController = (PlayerComponent) => {
  6 |   return class extends Component {
  7 |     constructor(props) {
  8 |       super(props);
  9 | 
 10 |       this.onControlsPlay = this.onControlsPlay.bind(this);
 11 |       this.onControlsPause = this.onControlsPause.bind(this);
 12 |       this.onControlsSeek = this.onControlsSeek.bind(this);
 13 |       this.onControlsVolumeChange = this.onControlsVolumeChange.bind(this);
 14 | 
 15 |       this.onPlayerTimeUpdate = this.onPlayerTimeUpdate.bind(this);
 16 |       this.onPlayerVolumeChange = this.onPlayerVolumeChange.bind(this);
 17 | 
 18 |       this.state = {
 19 |         loop: props.loop,
 20 |         play: props.play,
 21 |         seekTo: props.time,
 22 |         time: props.time,
 23 |         volume: props.volume,
 24 |       };
 25 |     }
 26 | 
 27 |     componentWillReceiveProps(nextProps) {
 28 |       const {
 29 |         loop,
 30 |         play,
 31 |         time,
 32 |         volume,
 33 |       } = nextProps;
 34 | 
 35 |       this.setState({
 36 |         seekTo: time,
 37 |         loop,
 38 |         play,
 39 |         volume,
 40 |       });
 41 |     }
 42 | 
 43 |     shouldComponentUpdate(nextProps, nextState) {
 44 |       /**
 45 |        * @todo See if there could be any optimization introduced here. - Ryan
 46 |        */
 47 |       return true;
 48 |     }
 49 | 
 50 |     onControlsPlay() {
 51 |       this.setState({
 52 |         play: true,
 53 |       });
 54 |     }
 55 | 
 56 |     onControlsPause() {
 57 |       this.setState({
 58 |         play: false,
 59 |       });
 60 |     }
 61 | 
 62 |     onControlsSeek(time) {
 63 |       this.setState({
 64 |         time,
 65 |       });
 66 |     }
 67 | 
 68 |     onControlsVolumeChange(volume) {
 69 |       this.setState({
 70 |         volume,
 71 |       });
 72 |     }
 73 | 
 74 |     onPlayerTimeUpdate(time) {
 75 |       this.setState({
 76 |         time,
 77 |       });
 78 | 
 79 |       if (this.props.onTimeUpdate) {
 80 |         this.props.onTimeUpdate(time);
 81 |       }
 82 |     }
 83 | 
 84 |     onPlayerVolumeChange(volume) {
 85 |       this.setState({
 86 |         volume,
 87 |       });
 88 | 
 89 |       if (this.props.onVolumeChange) {
 90 |         this.props.onVolumeChange(volume);
 91 |       }
 92 |     }
 93 | 
 94 |     render() {
 95 |       const {
 96 |         children,
 97 |         controls,
 98 |       } = this.props;
 99 | 
100 |       const {
101 |         loop,
102 |         play,
103 |         time,
104 |         seekTo,
105 |         volume,
106 |       } = this.state;
107 | 
108 |       const clonedControls = controls
109 |         ? React.cloneElement(controls, {
110 |             loop,
111 |             play,
112 |             time,
113 |             volume,
114 |             onPause: this.onControlsPause,
115 |             onPlay: this.onControlsPlay,
116 |             onSeek: this.onControlsSeek,
117 |             onVolumeChange: this.onControlsVolumeChange,
118 |           })
119 |         : null;
120 | 
121 |       const cleanProps = omit(this.props, [
122 |         'controls',
123 |         'loop',
124 |         'play',
125 |         'time',
126 |         'volume',
127 |         'onTimeUpdate',
128 |         'onVolumeChange',
129 |       ]);
130 | 
131 |       const cleanState = omit(this.state, [
132 |         'time',
133 |       ]);
134 | 
135 |       return (
136 |         <PlayerComponent
137 |           {...cleanProps}
138 |           {...cleanState}
139 |           time={seekTo}
140 |           onTimeUpdate={this.onPlayerTimeUpdate}
141 |           onVolumeChange={this.onPlayerTimeUpdate}
142 |         >
143 |           {clonedControls}
144 |           {children}
145 |         </PlayerComponent>
146 |       );
147 |     }
148 |   }
149 | };
150 | 
151 | export default playerController;
152 | 


--------------------------------------------------------------------------------
/tools/babel-preset.js:
--------------------------------------------------------------------------------
 1 | const BABEL_ENV = process.env.BABEL_ENV;
 2 | const building = BABEL_ENV != undefined && BABEL_ENV !== 'cjs';
 3 | 
 4 | const plugins = [];
 5 | 
 6 | if (process.env.NODE_ENV === 'production') {
 7 |   plugins.push(
 8 |     'babel-plugin-dev-expression',
 9 |     'babel-plugin-transform-react-remove-prop-types'
10 |   );
11 | }
12 | 
13 | module.exports = () => {
14 |   return {
15 |     presets: [
16 |       ['@babel/preset-env', {
17 |         'loose': true,
18 |         'modules': building ? false : 'commonjs',
19 |       }],
20 |       '@babel/preset-react'
21 |     ],
22 |     plugins: plugins
23 |   };
24 | };
25 | 


--------------------------------------------------------------------------------
/tools/build.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const execSync = require('child_process').execSync
 3 | const prettyBytes = require('pretty-bytes')
 4 | const gzipSize = require('gzip-size')
 5 | 
 6 | const exec = (command, extraEnv) => {
 7 |   execSync(command, {
 8 |     stdio: 'inherit',
 9 |     env: Object.assign({}, process.env, extraEnv)
10 |   });
11 | };
12 | 
13 | console.log('Building CommonJS modules ...');
14 | 
15 | exec('babel src -d . --ignore __tests__', {
16 |   BABEL_ENV: 'cjs'
17 | });
18 | 
19 | console.log('\nBuilding ES modules ...');
20 | 
21 | exec('babel src -d es --ignore __tests__', {
22 |   BABEL_ENV: 'es'
23 | });
24 | 
25 | console.log('\nBuilding react-video-players.js ...');
26 | 
27 | exec('rollup -c -f umd -o umd/react-video-players.js', {
28 |   BABEL_ENV: 'umd',
29 |   NODE_ENV: 'development'
30 | });
31 | 
32 | console.log('\nBuilding react-video-players.min.js ...');
33 | 
34 | exec('rollup -c -f umd -o umd/react-video-players.min.js', {
35 |   BABEL_ENV: 'umd',
36 |   NODE_ENV: 'production'
37 | });
38 | 
39 | const size = gzipSize.sync(
40 |   fs.readFileSync('umd/react-video-players.min.js')
41 | );
42 | 
43 | console.log('\ngzipped, the UMD build is %s', prettyBytes(size));
44 | 


--------------------------------------------------------------------------------