Test video support

react-native-comparison-slider-example/ComparisonSlider.js

@@ -6,9 +6,10 @@ import {
   ImageBackground,
 } from "react-native";
 
-//  @Copyright: jeanregisser 
+//  @Copyright: jeanregisser
 //  MIT: https://github.com/jeanregisser/react-native-slider
 import Slider from "react-native-slider";
+import Video from 'react-native-video';
 
 //	@Copyright: jhampton
 //	MIT: https://github.com/jhampton/react-native-cropping.git
@@ -20,8 +21,8 @@ const CroppedImage = function(props) {
 			width: props.cropWidth,
 			backgroundColor: "transparent"
 		}, props.style]}>
-		
-			<Image 
+
+			<Image
 				style={{
 					position: "absolute",
 					top: props.cropTop * -1,
@@ -37,6 +38,32 @@ const CroppedImage = function(props) {
 	);
 }
 
+const CroppedVideo = function(props) {
+	return (
+		<View style={[{
+			overflow: "hidden",
+			height: props.cropHeight,
+			width: props.cropWidth,
+			backgroundColor: "transparent"
+		}, props.style]}>
+
+			<Video
+        repeat={true}
+				style={{
+					position: "absolute",
+					top: props.cropTop * -1,
+					left: props.cropLeft * -1,
+					width: props.width,
+					height: props.height
+				}}
+				source={props.source}
+				resizeMode={props.resizeMode}>
+					{props.children}
+			</Video>
+		</View>
+	);
+}
+
 export default class ComparisonSlider extends Component {
 
 	constructor(props) {
@@ -50,8 +77,8 @@ export default class ComparisonSlider extends Component {
 		const rightImage = props.rightImage;
 
 		if(props.rightImageURI && !props.imageWidth && !props.imageHeight) {
-			Image.getSize(props.rightImageURI, (width, height) =>  this.setState({ 
-				imgWidth: width, 
+			Image.getSize(props.rightImageURI, (width, height) =>  this.setState({
+				imgWidth: width,
 				imgHeight: height,
 				cropWidth: width * initialPosition + thumbWidth / 2, }));
 		}
@@ -69,8 +96,9 @@ export default class ComparisonSlider extends Component {
 		}
 	}
 
-	onChange(value) {
 
+
+	onChange(value) {
 		const newValue = ((value * 100 * this.state.imgWidth) / 100);
 		if(this.props.onValueChange) {
 			this.props.onValueChange(value);
@@ -89,14 +117,14 @@ export default class ComparisonSlider extends Component {
 
 		const defaultStyle ={
 			left: (this.state.value * this.state.imgWidth),
-			width: 2, 
-			height: this.state.imgHeight / 2 - ballSize / 2, 
-			backgroundColor: color, 
+			width: 2,
+			height: this.state.imgHeight / 2 - ballSize / 2,
+			backgroundColor: color,
 			position: "absolute",
 			borderWidth: 1,
 			borderColor: color,
 			borderRadius: ballSize / 2,
-		} 
+		}
 
 		const defaultStyleTriangle = {
 			width: 0,
@@ -112,16 +140,16 @@ export default class ComparisonSlider extends Component {
 		}
 
 		return (
-			<View style={{ 
+			<View style={{
 				height: this.state.imgHeight,
 				position: "absolute",
 				justifyContent: "center",
 			}}>
-			   <View style={{ 
+			   <View style={{
 					left: (this.state.value * this.state.imgWidth) - ballSize / 2,
-					width: ballSize, 
-					height: ballSize, 
-					backgroundColor: "transparent", 
+					width: ballSize,
+					height: ballSize,
+					backgroundColor: "transparent",
 					position: "absolute",
 					borderWidth: 2,
 					borderColor: color,
@@ -132,96 +160,159 @@ export default class ComparisonSlider extends Component {
 
 					{/** Triangle **/}
 					<View style={{ flexDirection: "row",}}>
-						<View 
+						<View
 							style={[
-								defaultStyleTriangle, 
-								{ 
-									marginRight: ballSize / 20, 
-									transform: [{ rotate: "270deg"}], 
-								}]} 
-						/> 
-						<View 
+								defaultStyleTriangle,
+								{
+									marginRight: ballSize / 20,
+									transform: [{ rotate: "270deg"}],
+								}]}
+						/>
+						<View
 							style={[
-								defaultStyleTriangle, 
-								{ 
-									left: ballSize / 20, 
-									transform: [{ rotate: "90deg"}], 
-								}]} 
-						/> 
+								defaultStyleTriangle,
+								{
+									left: ballSize / 20,
+									transform: [{ rotate: "90deg"}],
+								}]}
+						/>
 					</View>
-					
+
 				</View>
 
-				{/** Line **/} 
+				{/** Line **/}
 				<View style={[ defaultStyle, { top: 0, }]} />
-				<View style={[ defaultStyle, { bottom: 0, }]} />	        
+				<View style={[ defaultStyle, { bottom: 0, }]} />
 			</View>
 		)
 	}
 
 	render() {
 
-		if(this.props.thumnailRender && !this.props.thumbnailWidth) {
-			console.log("When using thumbnail render, thumbnailWidth should be specified! ");
-		}
+    if (this.props.video) {
+      return (
+  			<View>
+  				<Video
+            repeat={true}
+  					source={ this.state.rightImage ? this.state.rightImage : { uri: this.state.rightImageURI } }
+  					style={[ {
+  						width: this.state.imgWidth,
+  						height: this.state.imgHeight,
+  						backgroundColor: "transparent",
+  						justifyContent: "center",
+  					}, this.props.imageStyle]}>
+
+  					<CroppedVideo
+  						source={ this.state.leftImage ? this.state.leftImage : { uri: this.state.leftImageURI } }
+  						style={this.props.imageStyle}
+  						cropTop={0}
+  						cropLeft={0}
+  						cropWidth={this.state.cropWidth}
+  						cropHeight={this.state.imgHeight}
+  						width={this.state.imgWidth}
+  						height={this.state.imgHeight} />
+
+
+  						{ this.props.thumnailRender && this.props.thumbnailWidth ?
+  							<View style={{
+  								position: "absolute",
+  								left: (this.state.value * this.state.imgWidth) - this.props.thumbnailWidth / 2,
+  							}}>{this.props.thumnailRender()}</View> :
+
+  							this.renderDefaultThumbView() }
+
+  						<Slider
+  							value={this.state.value}
+  							onValueChange={(value) => this.onChange(value) }
+  							onSlidingStart={() => this.props.onSlidingStart && this.props.onSlidingStart()}
+  							onSlidingComplete={() => this.props.onSlidingComplete && this.props.onSlidingComplete()}
+  							minimumTrackTintColor={this.state.sliderTrackColor}
+  							maximumTrackTintColor={this.state.sliderTrackColor}
+  							// thumbImage={require("./img/left.jpeg")}
+  							thumbTouchSize={{
+  								width: this.state.thumbWidth * 33,
+  								height: this.state.imgHeight
+  							}}
+  							thumbStyle={{
+  								backgroundColor: "transparent",
+  								width: this.state.thumbWidth,
+  								height: this.state.imgHeight,
+
+  							}}
+  							style={{
+  								zIndex: 3,
+  								position: "absolute",
+  								width: this.state.imgWidth,
+  							}}
+  						/>
+  				</Video>
+  			</View>
+  		);
+    } else {
+      if(this.props.thumnailRender && !this.props.thumbnailWidth) {
+  			console.log("When using thumbnail render, thumbnailWidth should be specified! ");
+  		}
+
+      return (
+  			<View>
+  				<ImageBackground
+  					source={ this.state.rightImage ? this.state.rightImage : { uri: this.state.rightImageURI } }
+  					style={[ {
+  						width: this.state.imgWidth,
+  						height: this.state.imgHeight,
+  						backgroundColor: "transparent",
+  						justifyContent: "center",
+  					}, this.props.imageStyle]}>
+
+  					<CroppedImage
+  						source={ this.state.leftImage ? this.state.leftImage : { uri: this.state.leftImageURI } }
+  						style={this.props.imageStyle}
+  						cropTop={0}
+  						cropLeft={0}
+  						cropWidth={this.state.cropWidth}
+  						cropHeight={this.state.imgHeight}
+  						width={this.state.imgWidth}
+  						height={this.state.imgHeight} />
+
+
+  						{ this.props.thumnailRender && this.props.thumbnailWidth ?
+  							<View style={{
+  								position: "absolute",
+  								left: (this.state.value * this.state.imgWidth) - this.props.thumbnailWidth / 2,
+  							}}>{this.props.thumnailRender()}</View> :
+
+  							this.renderDefaultThumbView() }
+
+  						<Slider
+  							value={this.state.value}
+  							onValueChange={(value) => this.onChange(value) }
+  							onSlidingStart={() => this.props.onSlidingStart && this.props.onSlidingStart()}
+  							onSlidingComplete={() => this.props.onSlidingComplete && this.props.onSlidingComplete()}
+  							minimumTrackTintColor={this.state.sliderTrackColor}
+  							maximumTrackTintColor={this.state.sliderTrackColor}
+  							// thumbImage={require("./img/left.jpeg")}
+  							thumbTouchSize={{
+  								width: this.state.thumbWidth * 33,
+  								height: this.state.imgHeight
+  							}}
+  							thumbStyle={{
+  								backgroundColor: "transparent",
+  								width: this.state.thumbWidth,
+  								height: this.state.imgHeight,
+
+  							}}
+  							style={{
+  								zIndex: 3,
+  								position: "absolute",
+  								width: this.state.imgWidth,
+  							}}
+  						/>
+  				</ImageBackground>
+  			</View>
+  		);
+    }
+
 
-		return (
-			<View>
-				<ImageBackground
-					source={ this.state.rightImage ? this.state.rightImage : { uri: this.state.rightImageURI } }
-					style={[ {
-						width: this.state.imgWidth,
-						height: this.state.imgHeight,
-						backgroundColor: "transparent",
-						justifyContent: "center",
-					}, this.props.imageStyle]}>
-
-					<CroppedImage
-						source={ this.state.leftImage ? this.state.leftImage : { uri: this.state.leftImageURI } }
-						style={this.props.imageStyle}
-						cropTop={0}
-						cropLeft={0}
-						cropWidth={this.state.cropWidth}
-						cropHeight={this.state.imgHeight}
-						width={this.state.imgWidth}
-						height={this.state.imgHeight} />
-
-
-						{ this.props.thumnailRender && this.props.thumbnailWidth ? 
-							<View style={{ 
-								position: "absolute", 
-								left: (this.state.value * this.state.imgWidth) - this.props.thumbnailWidth / 2,
-							}}>{this.props.thumnailRender()}</View> : 
-
-							this.renderDefaultThumbView() }
-
-						<Slider
-							value={this.state.value}
-							onValueChange={(value) => this.onChange(value) }
-							onSlidingStart={() => this.props.onSlidingStart && this.props.onSlidingStart()}
-							onSlidingComplete={() => this.props.onSlidingComplete && this.props.onSlidingComplete()}
-							minimumTrackTintColor={this.state.sliderTrackColor}
-							maximumTrackTintColor={this.state.sliderTrackColor}
-							// thumbImage={require("./img/left.jpeg")}
-							thumbTouchSize={{ 
-								width: this.state.thumbWidth * 33, 
-								height: this.state.imgHeight
-							}}
-							thumbStyle={{ 
-								backgroundColor: "transparent",
-								width: this.state.thumbWidth, 
-								height: this.state.imgHeight, 
-
-							}}
-							style={{
-								zIndex: 3,
-								position: "absolute",
-								width: this.state.imgWidth,
-							}} 
-						/>
-				</ImageBackground>
-			</View>
-		);
 	}
 }
 

react-native-comparison-slider-example/android/app/build.gradle

@@ -133,6 +133,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-video')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules

react-native-comparison-slider-example/android/app/src/main/java/com/comparisonslider/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.brentvatne.react.ReactVideoPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -22,7 +23,8 @@ public boolean getUseDeveloperSupport() {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
+          new MainReactPackage(),
+            new ReactVideoPackage()
       );
     }
   };

react-native-comparison-slider-example/android/settings.gradle

@@ -1,3 +1,5 @@
 rootProject.name = 'ComparisonSlider'
+include ':react-native-video'
+project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
 
 include ':app'