Use autoPlay instead of .play() (#10)

* Use autoPlay instead of .play()

* Fix video behavior in safari

src/api/comma-api.js

@@ -1,7 +1,7 @@
 // API gateway for `api.commadotai.com/v1` urls
 import { getCommaAccessToken } from "./comma-auth";
 
-const URL_ROOT = "//api.commadotai.com/v1/";
+const URL_ROOT = "https://api.commadotai.com/v1/";
 const ConfigRequest = require("config-request/instance");
 
 const request = ConfigRequest();

src/components/HLS.js

@@ -28,8 +28,20 @@ export default class HLS extends Component {
       this.props.onRestart();
     }
 
+    if (!this.videoElement.currentTime) {
+      this.videoElement.currentTime = nextProps.startTime;
+    }
+
+    if (nextProps.source !== this.props.source) {
+      this.loadSource(nextProps.source);
+    }
     if (nextProps.playing) {
-      this.videoElement.play();
+      if (
+        this.videoElement &&
+        (this.videoElement.paused || this.videoElement.currentTime < 0.01)
+      ) {
+        this.videoElement.play();
+      }
     } else {
       this.videoElement.pause();
     }
@@ -57,12 +69,21 @@ export default class HLS extends Component {
 
   componentDidMount() {
     this.player = new Hls();
-    this.player.loadSource(this.props.source);
-    this.player.attachMedia(this.videoElement);
+    this.loadSource();
+  }
 
-    this.props.onVideoElementAvailable(this.videoElement);
-    if (this.props.playing) {
-      this.videoElement.play();
+  loadSource(source = this.props.source) {
+    if (this.videoElement) {
+      this.player.loadSource(source);
+      this.player.attachMedia(this.videoElement);
+      this.props.onVideoElementAvailable(this.videoElement);
+    }
+  }
+
+  componentWillUnmount() {
+    // destroy hls video source
+    if (this.player) {
+      this.player.destroy();
     }
   }
 
@@ -76,6 +97,8 @@ export default class HLS extends Component {
           ref={video => {
             this.videoElement = video;
           }}
+          autoPlay={this.props.playing}
+          muted
           onWaiting={this.props.onLoadStart}
           onPlaying={this.props.onLoadEnd}
           onSeeking={this.onSeeking}