Simplify API

example/index.html

@@ -15,14 +15,6 @@
     .player {
       flex: 1;
       min-height: 0;
-      position: relative;
-    }
-    .overlay {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
     }
     .controls {
       display: flex;

example/renderer.js

@@ -95,13 +95,12 @@ class Main extends React.PureComponent {
   render() {
     return (
       <div className="container">
-        <div className="player">
-          <MPV
-            onReady={this.handleMPVReady}
-            onPropertyChange={this.handlePropertyChange}
-          />
-          <div className="overlay" onClick={this.togglePause} />
-        </div>
+        <MPV
+          className="player"
+          onReady={this.handleMPVReady}
+          onPropertyChange={this.handlePropertyChange}
+          onMouseDown={this.togglePause}
+        />
         <div className="controls">
           <button className="control" onClick={this.togglePause}>
             {this.state.pause ? "▶" : "▮▮"}

index.js

@@ -10,7 +10,7 @@ const React = require("react");
 /**
  * React wrapper.
  */
-class ReactMPV extends React.Component {
+class ReactMPV extends React.PureComponent {
   /**
    * Send a command to the player.
    *
@@ -119,23 +119,22 @@ class ReactMPV extends React.Component {
   componentDidMount() {
     this.node().addEventListener("message", this._handleMessage.bind(this));
   }
-  shouldComponentUpdate(nextProps) {
-    return nextProps.className !== this.props.className ||
-           nextProps.style !== this.props.style;
-  }
   render() {
     const defaultStyle = {display: "block", width: "100%", height: "100%"};
-    return React.createElement("embed", {
+    const props = Object.assign({}, this.props, {
       ref: "plugin",
       type: "application/x-mpvjs",
-      className: this.props.className,
       style: Object.assign(defaultStyle, this.props.style),
     });
+    delete props.onReady;
+    delete props.onPropertyChange;
+    return React.createElement("embed", props);
   }
 }
 
 /**
- * Accepted properties.
+ * Accepted properties. Other properties (not documented) are applied to
+ * the plugin element.
  */
 ReactMPV.propTypes = {
   /**

package.json

@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/Kagami/mpv.js#readme",
   "peerDependencies": {
-    "react": ">=0.13.0 <16.0.0"
+    "react": "^15.3.0"
   },
   "devDependencies": {
     "babel-standalone": "^6.23.1",