Made further improvments to player

components/ControlBar.js

@@ -28,62 +28,48 @@ const ControlBar = (props) => {
 
   return (
     <LinearGradient colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.75)']} style={styles.container}>
-      <Time time={currentTime} theme={theme} />
+      <Time time={currentTime} theme={theme.seconds} />
       <Scrubber
         onSeek={pos => onSeek(pos)}
         onSeekRelease={pos => onSeekRelease(pos)}
         progress={progress}
-        theme={theme}
+        theme={{ scrubberThumb: theme.scrubberThumb, scrubberBar: theme.scrubberBar }}
       />
       <ToggleIcon
         paddingLeft
-        theme={theme}
+        theme={theme.volume}
         onPress={() => props.toggleMute()}
         isOn={muted}
         iconOff="volume-up"
         iconOn="volume-mute"
         size={20}
       />
-      <Time time={duration} theme={theme} />
+      <Time time={duration} theme={theme.duration} />
       { !inlineOnly &&
       <ToggleIcon
         paddingRight
         onPress={() => props.toggleFS()}
         iconOff="fullscreen"
         iconOn="fullscreen-exit"
         isOn={fullscreen}
-        theme={theme}
+        theme={theme.fullscreen}
       />}
     </LinearGradient>
   )
 }
 
 ControlBar.propTypes = {
-  toggleFS: PropTypes.func,
-  toggleMute: PropTypes.func,
-  onSeek: PropTypes.func,
-  onSeekRelease: PropTypes.func,
-  fullscreen: PropTypes.bool,
-  muted: PropTypes.bool,
-  inlineOnly: PropTypes.bool,
-  progress: PropTypes.number,
-  currentTime: PropTypes.number,
-  duration: PropTypes.number,
-  theme: PropTypes.string
-}
-
-ControlBar.defaultProps = {
-  toggleFS: undefined,
-  toggleMute: undefined,
-  onSeek: undefined,
-  onSeekRelease: undefined,
-  inlineOnly: false,
-  fullscreen: false,
-  muted: false,
-  progress: 0,
-  currentTime: 0,
-  duration: 0,
-  theme: null
+  toggleFS: PropTypes.func.isRequired,
+  toggleMute: PropTypes.func.isRequired,
+  onSeek: PropTypes.func.isRequired,
+  onSeekRelease: PropTypes.func.isRequired,
+  fullscreen: PropTypes.bool.isRequired,
+  muted: PropTypes.bool.isRequired,
+  inlineOnly: PropTypes.bool.isRequired,
+  progress: PropTypes.number.isRequired,
+  currentTime: PropTypes.number.isRequired,
+  duration: PropTypes.number.isRequired,
+  theme: PropTypes.object.isRequired
 }
 
 export { ControlBar }

components/Controls.js

@@ -99,7 +99,7 @@ class Controls extends Component {
     return (
       <Touchable style={styles.container} onPress={() => this.showControls()}>
         <Animated.View style={[styles.container, { paddingBottom: this.progressbar }]}>
-          <ProgressBar theme={this.props.theme} progress={this.props.progress} />
+          <ProgressBar theme={this.props.theme.progress} progress={this.props.progress} />
         </Animated.View>
       </Touchable>
     )
@@ -108,7 +108,7 @@ class Controls extends Component {
   loading() {
     return (
       <View style={styles.container}>
-        <Loading theme={this.props.theme} />
+        <Loading theme={this.props.theme.loading} />
       </View>
     )
   }
@@ -130,6 +130,8 @@ class Controls extends Component {
       inlineOnly
     } = this.props
 
+    const { center, ...controlBar } = theme
+
     return (
       <Touchable onPress={() => this.hideControls()}>
         <Animated.View style={[styles.container, { opacity: this.animControls }]}>
@@ -138,14 +140,14 @@ class Controls extends Component {
             logo={logo}
             more={more}
             onMorePress={() => onMorePress()}
-            theme={theme}
+            theme={{ title: theme.title, more: theme.more }}
           />
           <Animated.View style={[styles.flex, { transform: [{ scale: this.scale }] }]}>
             <PlayButton
               onPress={() => this.props.togglePlay()}
               paused={paused}
               loading={loading}
-              theme={theme}
+              theme={center}
             />
           </Animated.View>
           <ControlBar
@@ -160,7 +162,7 @@ class Controls extends Component {
             progress={progress}
             currentTime={currentTime}
             duration={duration}
-            theme={theme}
+            theme={controlBar}
             inlineOnly={inlineOnly}
           />
         </Animated.View>
@@ -178,45 +180,24 @@ class Controls extends Component {
 }
 
 Controls.propTypes = {
-  toggleFS: PropTypes.func,
-  toggleMute: PropTypes.func,
-  togglePlay: PropTypes.func,
-  onSeek: PropTypes.func,
-  onSeekRelease: PropTypes.func,
-  onMorePress: PropTypes.func,
-  paused: PropTypes.bool,
-  inlineOnly: PropTypes.bool,
-  fullscreen: PropTypes.bool,
-  muted: PropTypes.bool,
-  more: PropTypes.bool,
-  loading: PropTypes.bool,
-  progress: PropTypes.number,
-  currentTime: PropTypes.number,
-  duration: PropTypes.number,
-  title: PropTypes.string,
-  logo: PropTypes.string,
-  theme: PropTypes.string
-}
-
-Controls.defaultProps = {
-  toggleFS: undefined,
-  toggleMute: undefined,
-  togglePlay: undefined,
-  onMorePress: undefined,
-  onSeek: undefined,
-  onSeekRelease: undefined,
-  paused: false,
-  more: false,
-  inlineOnly: false,
-  fullscreen: false,
-  muted: false,
-  loading: true,
-  progress: 0,
-  currentTime: 0,
-  duration: 0,
-  title: '',
-  logo: undefined,
-  theme: null
+  toggleFS: PropTypes.func.isRequired,
+  toggleMute: PropTypes.func.isRequired,
+  togglePlay: PropTypes.func.isRequired,
+  onSeek: PropTypes.func.isRequired,
+  onSeekRelease: PropTypes.func.isRequired,
+  onMorePress: PropTypes.func.isRequired,
+  paused: PropTypes.bool.isRequired,
+  inlineOnly: PropTypes.bool.isRequired,
+  fullscreen: PropTypes.bool.isRequired,
+  muted: PropTypes.bool.isRequired,
+  more: PropTypes.bool.isRequired,
+  loading: PropTypes.bool.isRequired,
+  progress: PropTypes.number.isRequired,
+  currentTime: PropTypes.number.isRequired,
+  duration: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  logo: PropTypes.string.isRequired,
+  theme: PropTypes.object.isRequired
 }
 
 export { Controls }

components/Loading.js

@@ -81,13 +81,12 @@ class Loading extends Component {
 }
 
 Loading.propTypes = {
-  loading: PropTypes.bool,
-  theme: PropTypes.string
+  theme: PropTypes.string.isRequired,
+  loading: PropTypes.bool
 }
 
 Loading.defaultProps = {
-  loading: true,
-  theme: null
+  loading: true
 }
 
 export { Loading }

components/PlayButton.js

@@ -33,15 +33,9 @@ const PlayButton = props => (
 )
 
 PlayButton.propTypes = {
-  onPress: PropTypes.func,
-  paused: PropTypes.bool,
-  theme: PropTypes.string
-}
-
-PlayButton.defaultProps = {
-  onPress: undefined,
-  paused: false,
-  theme: null
+  onPress: PropTypes.func.isRequired,
+  paused: PropTypes.bool.isRequired,
+  theme: PropTypes.string.isRequired
 }
 
 export { PlayButton }

components/ProgressBar.js

@@ -48,11 +48,7 @@ class ProgressBar extends Component {
 
 ProgressBar.propTypes = {
   progress: PropTypes.number.isRequired,
-  theme: PropTypes.string
-}
-
-ProgressBar.defaultProps = {
-  theme: 'white'
+  theme: PropTypes.string.isRequired
 }
 
 export { ProgressBar }

components/ScrollView.js

@@ -9,12 +9,13 @@ class ScrollView extends Component {
     super(props)
     this.scrollPos = 0
     this.state = {
-      fullscreen: false
+      fullscreen: false,
+      key: 0
     }
   }
 
-  onFullScreenChange(fullscreen) {
-    this.setState({ fullscreen }, () => {
+  onFullScreenChange(fullscreen, key) {
+    this.setState({ fullscreen, key }, () => {
       if (!fullscreen) this.scrollBackToPosition()
     })
   }
@@ -23,31 +24,33 @@ class ScrollView extends Component {
     if (this.scroll) this.scroll.scrollTo({ y: this.scrollPos, animated: false })
   }
 
-  cloneElement(child) {
+  cloneElement(child, key) {
+    if (this.state.fullscreen && key !== this.state.key) return null
+
     return React.cloneElement(child, {
       onFullScreen: (val) => {
         child.props.onFullScreen(val)
-        this.onFullScreenChange(val)
+        this.onFullScreenChange(val, key)
       }
     })
   }
 
   renderChildren(children) {
-    return React.Children.map(children, (child) => {
+    return React.Children.map(children, (child, key) => {
       const element = child.type.name
       switch (true) {
         case element === 'Container': {
           const props = this.state.fullscreen ? { style: {} } : child.props
           const components = React.Children.map(child.props.children, (component) => {
             const { name } = component.type
-            if (name === 'Video') return this.cloneElement(component)
+            if (name === 'Video') return this.cloneElement(component, key)
             if (this.state.fullscreen && name !== 'Video') return null
             return component
           })
           return React.cloneElement(child, props, components)
         }
         case element === 'Video':
-          return this.cloneElement(child)
+          return this.cloneElement(child, key)
         case (this.state.fullscreen && element !== 'Video'):
           return null
         default:
@@ -72,7 +75,7 @@ class ScrollView extends Component {
         bounces={fullscreen ? !fullscreen : bounces}
         onScroll={(event) => {
           if (!fullscreen) this.scrollPos = event.nativeEvent.contentOffset.y
-          onScroll()
+          onScroll(event)
         }}
         scrollEventThrottle={scrollEventThrottle}
       >

components/Scrubber.js

@@ -30,10 +30,10 @@ const Scrubber = (props) => {
           onValueChange={val => props.onSeek(val)}
           onSlidingComplete={val => props.onSeekRelease(val)}
           value={progress === Number.POSITIVE_INFINITY ? 0 : progress}
-          thumbTintColor={theme}
+          thumbTintColor={theme.scrubberThumb}
           thumbStyle={thumbStyle}
           trackStyle={trackStyle}
-          minimumTrackTintColor={theme}
+          minimumTrackTintColor={theme.scrubberBar}
           maximumTrackTintColor={trackColor}
         />
       :
@@ -42,8 +42,8 @@ const Scrubber = (props) => {
           onValueChange={val => props.onSeek(val)}
           onSlidingComplete={val => props.onSeekRelease(val)}
           value={progress}
-          thumbTintColor={theme}
-          minimumTrackTintColor={theme}
+          thumbTintColor={theme.scrubberThumb}
+          minimumTrackTintColor={theme.scrubberBar}
           maximumTrackTintColor={trackColor}
         />
       }
@@ -52,17 +52,10 @@ const Scrubber = (props) => {
 }
 
 Scrubber.propTypes = {
-  onSeek: PropTypes.func,
-  onSeekRelease: PropTypes.func,
-  progress: PropTypes.number,
-  theme: PropTypes.string
-}
-
-Scrubber.defaultProps = {
-  onSeek: undefined,
-  onSeekRelease: undefined,
-  progress: 0,
-  theme: null
+  onSeek: PropTypes.func.isRequired,
+  onSeekRelease: PropTypes.func.isRequired,
+  progress: PropTypes.number.isRequired,
+  theme: PropTypes.object.isRequired
 }
 
 export { Scrubber }

components/Time.js

@@ -39,13 +39,8 @@ class Time extends Component {
 }
 
 Time.propTypes = {
-  time: PropTypes.number,
-  theme: PropTypes.string
-}
-
-Time.defaultProps = {
-  time: 0,
-  theme: null
+  time: PropTypes.number.isRequired,
+  theme: PropTypes.string.isRequired
 }
 
 export { Time }

components/ToggleIcon.js

@@ -50,7 +50,7 @@ ToggleIcon.propTypes = {
   isOn: PropTypes.bool,
   iconOff: PropTypes.string.isRequired,
   iconOn: PropTypes.string.isRequired,
-  theme: PropTypes.string,
+  theme: PropTypes.string.isRequired,
   size: PropTypes.number,
   paddingRight: PropTypes.bool,
   paddingLeft: PropTypes.bool
@@ -59,7 +59,6 @@ ToggleIcon.propTypes = {
 ToggleIcon.defaultProps = {
   onPress: undefined,
   isOn: false,
-  theme: null,
   size: 25,
   paddingRight: false,
   paddingLeft: false