add proptype validation and more eslint checks for react (#533)

.eslintrc

@@ -5,6 +5,7 @@ env:
 
 extends:
   - eslint:recommended
+  - plugin:react/recommended
 
 globals:
   unsafeWindow: false
@@ -19,8 +20,6 @@ plugins:
 root: true
 
 rules:
-  react/jsx-uses-react: 1
-  react/jsx-uses-vars: 1
 
   eqeqeq: 2
   indent: [2, 2]

components/app-view.js

@@ -4,7 +4,7 @@ const PlayerView = require('./player-view');
 const LoadingView = require('./loading-view');
 const ErrorView = require('./error-view');
 
-module.exports = class AppView extends React.Component {
+class AppView extends React.Component {
   render() {
     return (
         <div className='app'>
@@ -19,3 +19,10 @@ module.exports = class AppView extends React.Component {
     );
   }
 }
+
+AppView.propTypes = {
+  error: React.PropTypes.bool,
+  loaded: React.PropTypes.bool
+};
+
+module.exports = AppView;

components/error-view.js

@@ -4,7 +4,7 @@ const sendToAddon = require('../client-lib/send-to-addon');
 const sendMetricsEvent = require('../client-lib/send-metrics-event');
 const GeneralControls = require('./general-controls');
 
-module.exports = class ErrorView extends React.Component {
+class ErrorView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {hovered: false};
@@ -56,3 +56,13 @@ module.exports = class ErrorView extends React.Component {
     );
   }
 }
+
+ErrorView.propTypes = {
+  id: React.PropTypes.string,
+  tabId: React.PropTypes.number,
+  domain: React.PropTypes.string,
+  strings: React.PropTypes.object,
+  minimized: React.PropTypes.bool
+};
+
+module.exports = ErrorView;

components/general-controls.js

@@ -3,7 +3,7 @@ const cn = require('classnames');
 const ReactTooltip = require('react-tooltip');
 const emitter = require('../client-lib/emitter');
 
-module.exports = class GeneralControls extends React.Component {
+class GeneralControls extends React.Component {
   close() {
     emitter.emit('close');
   }
@@ -42,3 +42,10 @@ module.exports = class GeneralControls extends React.Component {
     );
   }
 }
+
+GeneralControls.propTypes = {
+  strings: React.PropTypes.object,
+  minimized: React.PropTypes.bool
+};
+
+module.exports = GeneralControls;

components/loading-view.js

@@ -2,7 +2,7 @@ const React = require('react');
 const cn = require('classnames');
 const GeneralControls = require('./general-controls');
 
-module.exports = class LoadingView extends React.Component {
+class LoadingView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {hovered: false};
@@ -30,3 +30,10 @@ module.exports = class LoadingView extends React.Component {
     );
   }
 }
+
+LoadingView.propTypes = {
+  strings: React.PropTypes.object,
+  minimized: React.PropTypes.bool
+};
+
+module.exports = LoadingView;

components/player-controls.js

@@ -6,7 +6,7 @@ const appData = require('../client-lib/app-data');
 
 const GeneralControls = require('./general-controls');
 
-module.exports = class PlayerControls extends React.Component {
+class PlayerControls extends React.Component {
   constructor(props) {
     super(props);
     this.state = {showVolume: false};
@@ -111,3 +111,15 @@ module.exports = class PlayerControls extends React.Component {
     );
   }
 }
+
+PlayerControls.propTypes = {
+  muted: React.PropTypes.bool,
+  exited: React.PropTypes.bool,
+  volume: React.PropTypes.number,
+  playing: React.PropTypes.bool,
+  hovered: React.PropTypes.bool,
+  strings: React.PropTypes.object,
+  minimized: React.PropTypes.bool,
+};
+
+module.exports = PlayerControls;

components/player-view.js

@@ -4,7 +4,7 @@ const PlayerControls = require('../components/player-controls');
 const ReplayView = require('../components/replay-view');
 const Progress = require('../components/progress');
 
-module.exports = class Player extends React.Component {
+class Player extends React.Component {
   constructor(props) {
     super(props);
     this.state = {hovered: false};
@@ -108,13 +108,13 @@ module.exports = class Player extends React.Component {
     const noop = () => false;
 
     const audioEl = this.props.player === 'audio' ?
-          (<canvas id='audio-vis' ref='audio-vis' onContextMenu={noop} width={this.props.width} height={this.props.height}
+          (<canvas id='audio-vis' ref='audio-vis' onContextMenu={noop}
                    onClick={this.handleVideoClick.bind(this)}/>) : null;
 
     const visualEl = audioEl ? audioEl :
           (this.props.player === 'youtube') ?
           (<iframe id='video-yt' ref='video' src={this.props.src} onContextMenu={noop} />) :
-          (<video id='video' ref='video' src={this.props.src} autoplay={false}
+          (<video id='video' ref='video' src={this.props.src} autoPlay={false}
                   onContextMenu={noop} muted={this.props.muted} volume={this.props.volume}
                   currentTime={this.props.currentTime} />);
 
@@ -134,3 +134,15 @@ module.exports = class Player extends React.Component {
     );
   }
 }
+
+Player.propTypes = {
+  src: React.PropTypes.string,
+  muted: React.PropTypes.bool,
+  exited: React.PropTypes.bool,
+  playing: React.PropTypes.bool,
+  volume: React.PropTypes.number,
+  player: React.PropTypes.string,
+  currentTime: React.PropTypes.number
+};
+
+module.exports = Player;

components/progress.js

@@ -3,7 +3,7 @@ const ReactTooltip = require('react-tooltip');
 const cn = require('classnames');
 const emitter = require('../client-lib/emitter');
 
-module.exports = class ProgressView extends React.Component {
+class ProgressView extends React.Component {
   setTime(ev) {
     ev.stopPropagation();
     const x = ev.pageX - ev.target.offsetLeft;
@@ -34,3 +34,16 @@ module.exports = class ProgressView extends React.Component {
     );
   }
 }
+
+
+ProgressView.propTypes = {
+  time: React.PropTypes.string,
+  domain: React.PropTypes.string,
+  player: React.PropTypes.string,
+  strings: React.PropTypes.object,
+  hovered: React.PropTypes.bool,
+  progress: React.PropTypes.number,
+  minimized: React.PropTypes.bool
+};
+
+module.exports = ProgressView;

components/replay-view.js

@@ -2,7 +2,7 @@ const React = require('react');
 const cn = require('classnames');
 const emitter = require('../client-lib/emitter');
 
-module.exports = class ReplayView extends React.Component {
+class ReplayView extends React.Component {
   replay() {
     emitter.emit('replay');
   }
@@ -22,3 +22,10 @@ module.exports = class ReplayView extends React.Component {
     );
   }
 }
+
+ReplayView.propTypes = {
+  exited: React.PropTypes.bool,
+  minimized: React.PropTypes.bool
+}
+
+module.exports = ReplayView;