Introducing custom/native/embed skins

Examples/VideoPlayer/index.ios.js

@@ -21,6 +21,9 @@ var VideoPlayer = React.createClass({
       resizeMode: 'contain',
       duration: 0.0,
       currentTime: 0.0,
+      controls: false,
+      paused: true,
+      skin: 'custom'
     }
   },
 
@@ -40,6 +43,21 @@ var VideoPlayer = React.createClass({
     }
   },
 
+  renderSkinControl(skin) {
+    var isSelected = this.state.skin == skin;
+    var selectControls = skin == 'native' || skin == 'embed';
+    return (
+      <TouchableOpacity onPress={() => { this.setState({
+          controls: selectControls,
+          skin: skin
+        }) }}>
+        <Text style={[styles.controlOption, {fontWeight: isSelected ? "bold" : "normal"}]}>
+          {skin}
+        </Text>
+      </TouchableOpacity>
+    );
+  },
+
   renderRateControl(rate) {
     var isSelected = (this.state.rate == rate);
 
@@ -76,7 +94,7 @@ var VideoPlayer = React.createClass({
     )
   },
 
-  render() {
+  renderCustomSkin() {
     var flexCompleted = this.getCurrentTimePercentage() * 100;
     var flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;
 
@@ -97,12 +115,17 @@ var VideoPlayer = React.createClass({
         </TouchableOpacity>
 
         <View style={styles.controls}>
+          <View style={styles.generalControls}>
+            <View style={styles.skinControl}>
+              {this.renderSkinControl('custom')}
+              {this.renderSkinControl('native')}
+              {this.renderSkinControl('embed')}
+            </View>
+          </View>
           <View style={styles.generalControls}>
             <View style={styles.rateControl}>
-              {this.renderRateControl(0.25)}
               {this.renderRateControl(0.5)}
               {this.renderRateControl(1.0)}
-              {this.renderRateControl(1.5)}
               {this.renderRateControl(2.0)}
             </View>
 
@@ -128,7 +151,63 @@ var VideoPlayer = React.createClass({
         </View>
       </View>
     );
+  },
+
+  renderNativeSkin() {
+    var videoStyle = this.state.skin == 'embed' ? styles.nativeVideoControls : styles.fullScreen;
+    return (
+      <View style={styles.container}>
+        <View style={styles.fullScreen}>
+          <Video source={{uri: "broadchurch"}}
+                 style={videoStyle}
+                 rate={this.state.rate}
+                 paused={this.state.paused}
+                 volume={this.state.volume}
+                 muted={this.state.muted}
+                 resizeMode={this.state.resizeMode}
+                 onLoad={this.onLoad}
+                 onProgress={this.onProgress}
+                 onEnd={() => { AlertIOS.alert('Done!') }}
+                 repeat={true}
+                 controls={this.state.controls} />
+        </View>
+        <View style={styles.controls}>
+          <View style={styles.generalControls}>
+            <View style={styles.skinControl}>
+              {this.renderSkinControl('custom')}
+              {this.renderSkinControl('native')}
+              {this.renderSkinControl('embed')}
+            </View>
+          </View>
+          <View style={styles.generalControls}>
+            <View style={styles.rateControl}>
+              {this.renderRateControl(0.5)}
+              {this.renderRateControl(1.0)}
+              {this.renderRateControl(2.0)}
+            </View>
+
+            <View style={styles.volumeControl}>
+              {this.renderVolumeControl(0.5)}
+              {this.renderVolumeControl(1)}
+              {this.renderVolumeControl(1.5)}
+            </View>
+
+            <View style={styles.resizeModeControl}>
+              {this.renderResizeModeControl('cover')}
+              {this.renderResizeModeControl('contain')}
+              {this.renderResizeModeControl('stretch')}
+            </View>
+          </View>
+        </View>
+
+      </View>
+    );
+  },
+  
+  render() {
+    return this.state.controls ? this.renderNativeSkin() : this.renderCustomSkin();
   }
+  
 });
 
 
@@ -150,9 +229,9 @@ var styles = StyleSheet.create({
     backgroundColor: "transparent",
     borderRadius: 5,
     position: 'absolute',
-    bottom: 20,
-    left: 20,
-    right: 20,
+    bottom: 44,
+    left: 4,
+    right: 4,
   },
   progress: {
     flex: 1,
@@ -171,10 +250,14 @@ var styles = StyleSheet.create({
   generalControls: {
     flex: 1,
     flexDirection: 'row',
-    borderRadius: 4,
     overflow: 'hidden',
     paddingBottom: 10,
   },
+  skinControl: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
   rateControl: {
     flex: 1,
     flexDirection: 'row',
@@ -189,7 +272,7 @@ var styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
   controlOption: {
     alignSelf: 'center',
@@ -199,6 +282,10 @@ var styles = StyleSheet.create({
     paddingRight: 2,
     lineHeight: 12,
   },
+  nativeVideoControls: {
+    top: 184,
+    height: 300
+  }
 });
 
 AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer);