souporserious
Showing with 308 additions and 56 deletions.

+12 −0 CHANGELOG.md

+36 −17 example/MediaPlayer.jsx

+11 −10 example/main.scss

+2 −2 package.json

+8 −0 src/Player.jsx

+3 −2 src/utils/index.js

+10 −0 src/vendors/Youtube.jsx

+226 −25 yarn.lock
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,17 @@
 ## CHANGELOG
 
+### 0.7.9
+
+Fix build
+
+### 0.7.8
+
+### Features
+
+Add config prop [#75](https://github.com/souporserious/react-media-player/pull/75)
+
+Export `getVendor` utility [da19f297](https://github.com/souporserious/react-media-player/commit/da19f297)
+
 ### 0.7.7
 
 Add support for `isLoading` prop for Youtube vendor

diff --git a/example/MediaPlayer.jsx b/example/MediaPlayer.jsx
@@ -5,18 +5,25 @@ import PlayPause from './PlayPause'
 import MuteUnmute from './MuteUnmute'
 import Repeat from './Repeat'
 
-const { CurrentTime, Progress, SeekBar, Duration, Volume, Fullscreen } = controls
+const {
+  CurrentTime,
+  Progress,
+  SeekBar,
+  Duration,
+  Volume,
+  Fullscreen,
+} = controls
 const { keyboardControls } = utils
 
-const PrevTrack = (props) => (
+const PrevTrack = props => (
   <svg width="10px" height="12px" viewBox="0 0 10 12" {...props}>
-    <polygon fill="#FAFBFB" points="10,0 2,4.8 2,0 0,0 0,12 2,12 2,7.2 10,12"/>
+    <polygon fill="#FAFBFB" points="10,0 2,4.8 2,0 0,0 0,12 2,12 2,7.2 10,12" />
   </svg>
 )
 
-const NextTrack = (props) => (
+const NextTrack = props => (
   <svg width="10px" height="12px" viewBox="0 0 10 12" {...props}>
-    <polygon fill="#FAFBFB" points="8,0 8,4.8 0,0 0,12 8,7.2 8,12 10,12 10,0"/>
+    <polygon fill="#FAFBFB" points="8,0 8,4.8 0,0 0,12 8,7.2 8,12 10,12 10,0" />
   </svg>
 )
 
@@ -41,9 +48,12 @@ class MediaPlayer extends Component {
     const { src, currentTrack, repeatTrack, autoPlay } = this.props
     return (
       <Media>
-        { mediaProps =>
+        {mediaProps => (
           <div
-            className={'media-player' + (mediaProps.isFullscreen ? ' media-player--fullscreen' : '')}
+            className={
+              'media-player' +
+              (mediaProps.isFullscreen ? ' media-player--fullscreen' : '')
+            }
             onKeyDown={keyboardControls.bind(null, mediaProps)}
             tabIndex="0"
           >
@@ -56,39 +66,48 @@ class MediaPlayer extends Component {
                 loop={repeatTrack}
                 autoPlay={autoPlay}
                 onEnded={this._handleEnded}
+                config={{
+                  youtube: { modestBranding: 1, controls: 1, start: 30 },
+                }}
               />
             </div>
             <div className="media-controls media-controls--full">
               <div className="media-row">
-                <CurrentTime className="media-control media-control--current-time"/>
+                <CurrentTime className="media-control media-control--current-time" />
                 {currentTrack}
-                <Duration className="media-control media-control--duration"/>
+                <Duration className="media-control media-control--duration" />
               </div>
               <div className="media-control-group media-control-group--seek">
-                <Progress className="media-control media-control--progress"/>
-                <SeekBar className="media-control media-control--seekbar"/>
+                <Progress className="media-control media-control--progress" />
+                <SeekBar className="media-control media-control--seekbar" />
               </div>
               <div className="media-row">
                 <div className="media-control-group">
-                  <MuteUnmute className="media-control media-control--mute-unmute"/>
+                  <MuteUnmute className="media-control media-control--mute-unmute" />
                 </div>
                 <div className="media-control-group">
-                  <PrevTrack className="media-control media-control--prev-track" onClick={this._handlePrevTrack}/>
-                  <PlayPause className="media-control media-control--play-pause"/>
-                  <NextTrack className="media-control media-control--next-track" onClick={this._handleNextTrack}/>
+                  <PrevTrack
+                    className="media-control media-control--prev-track"
+                    onClick={this._handlePrevTrack}
+                  />
+                  <PlayPause className="media-control media-control--play-pause" />
+                  <NextTrack
+                    className="media-control media-control--next-track"
+                    onClick={this._handleNextTrack}
+                  />
                 </div>
                 <div className="media-control-group">
                   <Repeat
                     className="media-control media-control--repeat"
                     isActive={repeatTrack}
                     onClick={this._handleRepeatTrack}
                   />
-                  <Fullscreen/>
+                  <Fullscreen />
                 </div>
               </div>
             </div>
           </div>
-        }
+        )}
       </Media>
     )
   }

diff --git a/example/main.scss b/example/main.scss
@@ -1,4 +1,4 @@
-@import "./range-mixins.scss";
+@import './range-mixins.scss';
 
 * {
   box-sizing: border-box;
@@ -18,7 +18,7 @@ body {
   background-color: transparent;
 
   fill: none;
-  stroke: #D7DBDC;
+  stroke: #d7dbdc;
   stroke-width: 3;
 
   cursor: pointer;
@@ -76,23 +76,24 @@ body {
   embed {
     display: block;
     width: 100%;
-    height: 300%;
+    height: 100%;
     border: 0;
     position: absolute;
-    top: -100%;
+    top: 0;
     left: 0;
-    pointer-events: none;
   }
 }
 
 .media-controls {
   display: flex;
   align-items: center;
   padding: 12px;
-  background-color: #282F31;
+  background-color: #282f31;
   color: #fff;
 
-  svg, path, polygon {
+  svg,
+  path,
+  polygon {
     transform-origin: 50% 50%;
   }
 
@@ -183,7 +184,7 @@ body {
   margin-left: 6px;
 }
 
-input[type="range"] {
+input[type='range'] {
   // reset inputs to a plain state
   @include -range__reset(webkit, moz, ms);
 
@@ -270,7 +271,7 @@ input[type="range"] {
 }
 
 .media-playlist {
-  background-color: #282F31;
+  background-color: #282f31;
   color: #fff;
 }
 
@@ -290,6 +291,6 @@ input[type="range"] {
   }
 
   &.is-active {
-    color: #8bb955
+    color: #8bb955;
   }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-media-player",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "description": "React media player.",
   "main": "lib/react-media-player.js",
   "files": [
@@ -52,7 +52,7 @@
     "git-directory-deploy": "^1.5.1",
     "http-server": "^0.9.0",
     "node-libs-browser": "^1.0.0",
-    "node-sass": "^3.2.0",
+    "node-sass": "^4.13.1",
     "postcss-loader": "^0.13.0",
     "react": "15.3.2",
     "react-dom": "15.3.2",

diff --git a/src/Player.jsx b/src/Player.jsx
@@ -3,6 +3,12 @@ import PropTypes from 'prop-types'
 import contextTypes from './context-types'
 import getVendor from './utils/get-vendor'
 
+const defaultConfig = {
+  youtube: {},
+  vimeo: {},
+  html5: {},
+}
+
 class Player extends Component {
   static propTypes = {
     vendor: PropTypes.oneOf(['video', 'audio', 'youtube', 'vimeo']),
@@ -132,6 +138,7 @@ class Player extends Component {
     const {
       src,
       vendor: _vendor,
+      config,
       autoPlay,
       onReady,
       onEnded,
@@ -145,6 +152,7 @@ class Player extends Component {
       src,
       vendor,
       autoPlay,
+      config: { ...defaultConfig, ...config },
       extraProps,
       ref: this._setPlayer,
       isLoading: this._setLoading,

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -1,2 +1,3 @@
-export keyboardControls from "./keyboard-controls";
-export formatTime from "./format-time";
+export formatTime from './format-time'
+export getVendor from './get-vendor'
+export keyboardControls from './keyboard-controls'
diff --git a/src/vendors/Youtube.jsx b/src/vendors/Youtube.jsx
@@ -59,10 +59,13 @@ class Youtube extends Component {
     this._player = new YT.Player(this._node, {
       videoId: this._videoId,
       events: this._events(),
+      host: `${window.location.protocol}//www.youtube.com`,
       playerVars: {
         controls: 0,
         showinfo: 0,
         modestbranding: 1,
+        origin: window.location.origin,
+        ...this.props.config.youtube,
       },
     })
   }
@@ -79,6 +82,7 @@ class Youtube extends Component {
         this.props.onReady()
       },
       onStateChange: ({ data }) => {
+        const { start, end } = this.props.config.youtube
         const {
           PLAYING,
           PAUSED,
@@ -93,6 +97,12 @@ class Youtube extends Component {
           this.props.isLoading(false)
           this.props.onDuration(this._player.getDuration())
           this._timeUpdateId = requestAnimationFrame(this._handleTimeUpdate)
+          if (start || end) {
+            const currentTime = this._player.getCurrentTime()
+            if (currentTime < start || currentTime > end) {
+              this._player.seekTo(start === undefined ? end : start)
+            }
+          }
         } else {
           cancelAnimationFrame(this._timeUpdateId)
           this._timeUpdateId = null