trying to fix seekbar and buffer

README.md

@@ -6,6 +6,7 @@ React media container component to help build video & audio players.
 
 - [x] Fix Progress component
 - [x] Fix Volume getting locked up when player is muted
+- [] SeekBar crashes Safari
 - [] Playlist feature
 - [] Show time preview when hovering scrubber
 - [] Show thumbnail preview when hovering scrubber

example/index.jsx

@@ -12,6 +12,7 @@ import './main.scss';
 // http://shapeshed.com/examples/HTML5-video-element/video/320x240.m4v
 // http://html5demos.com/assets/dizzy.mp4
 // http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
+// https://vid4u.org/ninja/5/dev/assets/madmax-intro.mp4
 
 class App extends Component {
 
@@ -33,7 +34,7 @@ class App extends Component {
         {props => {
 
           const { player, playing, duration, current, progress, muted, volume, fullscreen } = props;
-          
+
           return(
             <div className="media__container">
               <div

src/MediaContainer.jsx

@@ -102,10 +102,10 @@ class MediaContainer extends Component {
 
     player.addEventListener('loadedmetadata', ::this._handleLoadedMetaData);
 
-    player.addEventListener('loadeddata', () =>
-      // make sure video is ready before trying to check buffer progress
-      player.addEventListener('progress', ::this._handleProgress)
-    );
+    // player.addEventListener('loadeddata', () =>
+    //   // make sure video is ready before trying to check buffer progress
+    //   player.addEventListener('progress', ::this._handleProgress)
+    // );
 
     player.addEventListener('timeupdate', ::this._handleTimeUpdate);
 
@@ -148,7 +148,7 @@ class MediaContainer extends Component {
 
     this.setState({
       duration: duration,
-      progress: buffered.end(0) / duration
+      //progress: buffered.end(0) / duration
     });
   }
 

src/controls/SeekBar.jsx

@@ -2,29 +2,17 @@ import React, { Component } from 'react';
 
 class SeekBar extends Component {
 
-  dragging = false
-
   _handleChange(e) {
     const { player } = this.props;
     player.currentTime = +e.target.value;
   }
 
-  _handleDragging() {
-    this.dragging = true;
+  _handleMouseDown() {
+    this.props.player.pause();
   }
 
-  _handleDrag(e) {
-
-    const { player } = this.props;
-
-    if(this.dragging) {
-
-      player.currentTime = +e.target.value;
-
-      if(e.type === 'mouseup') {
-        this.dragging = false;
-      }
-    }
+  _handleMouseUp() {
+    this.props.player.play();
   }
 
   render() {
@@ -35,9 +23,8 @@ class SeekBar extends Component {
         max={(this.props.duration).toFixed(4)}
         value={this.props.current}
         onChange={::this._handleChange}
-        onMouseDown={::this._handleDragging}
-        onMouseMove={::this._handleDrag}
-        onMouseUp={::this._handleDrag}
+        onMouseDown={::this._handleMouseDown}
+        onMouseUp={::this._handleMouseUp}
       />
     );
   }