Merge pull request #373 from rozele/windows (b1ad115d) · Commits · codevise / react-native-video

README.md

+45 −0

Changes for README.md: 45 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -80,6 +80,51 @@ Under `.addPackage(new MainReactPackage())`:
		.addPackage(new ReactVideoPackage())
		```

		#### Windows

		Make the following additions to the given files manually:

		windows/myapp.sln

		Add the `ReactNativeVideo` project to your solution.

		1. Open the solution in Visual Studio 2015
		2. Right-click Solution icon in Solution Explorer > Add > Existing Project...
		3. Select `node_modules\react-native-video\windows\ReactNativeVideo\ReactNativeVideo.csproj`

		windows/myapp/myapp.csproj

		Add a reference to `ReactNativeVideo` to your main application project. From Visual Studio 2015:

		1. Right-click main application project > Add > Reference...
		2. Check `ReactNativeVideo` from Solution Projects.

		MainPage.cs

		Add the `ReactVideoPackage` class to your list of exported packages.
		```cs
		using ReactNative;
		using ReactNative.Modules.Core;
		using ReactNative.Shell;
		using ReactNativeVideo; // <-- Add this
		using System.Collections.Generic;
		...

		public override List<IReactPackage> Packages
		{
		get
		{
		return new List<IReactPackage>
		{
		new MainReactPackage(),
		new ReactVideoPackage(), // <-- Add this
		};
		}
		}

		...
		```

		## Usage

		```javascript

Video.js

+1 −1

Changes for Video.js: 1 added line, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -125,7 +125,7 @@ export default class Video extends Component {
		}

		const isNetwork = !!(uri && uri.match(/^https?:/));
		const isAsset = !!(uri && uri.match(/^(assets-library\|file\|content):/));
		const isAsset = !!(uri && uri.match(/^(assets-library\|file\|content\|ms-appx\|ms-appdata):/));

		let nativeResizeMode;
		if (resizeMode === VideoResizeMode.stretch) {

example/index.windows.js

0 → 100644

+210 −0

Changes for example/index.windows.js: 210 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		'use strict';

		import React, {
		Component
		} from 'react';

		import {
		AppRegistry,
		StyleSheet,
		Text,
		TouchableOpacity,
		View,
		} from 'react-native';

		import Video from 'react-native-video';

		class VideoPlayer extends Component {
		constructor(props) {
		super(props);
		this.onLoad = this.onLoad.bind(this);
		this.onProgress = this.onProgress.bind(this);
		}

		state = {
		rate: 1,
		volume: 1,
		muted: false,
		resizeMode: 'contain',
		duration: 0.0,
		currentTime: 0.0,
		};

		onLoad(data) {
		this.setState({duration: data.duration});
		}

		onProgress(data) {
		this.setState({currentTime: data.currentTime});
		}

		getCurrentTimePercentage() {
		if (this.state.currentTime > 0) {
		return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
		} else {
		return 0;
		}
		}

		renderRateControl(rate) {
		const isSelected = (this.state.rate == rate);

		return (
		<TouchableOpacity onPress={() => { this.setState({rate: rate}) }}>
		<Text style={[styles.controlOption, {fontWeight: isSelected ? "bold" : "normal"}]}>
		{rate}x
		</Text>
		</TouchableOpacity>
		)
		}

		renderResizeModeControl(resizeMode) {
		const isSelected = (this.state.resizeMode == resizeMode);

		return (
		<TouchableOpacity onPress={() => { this.setState({resizeMode: resizeMode}) }}>
		<Text style={[styles.controlOption, {fontWeight: isSelected ? "bold" : "normal"}]}>
		{resizeMode}
		</Text>
		</TouchableOpacity>
		)
		}

		renderVolumeControl(volume) {
		const isSelected = (this.state.volume == volume);

		return (
		<TouchableOpacity onPress={() => { this.setState({volume: volume}) }}>
		<Text style={[styles.controlOption, {fontWeight: isSelected ? "bold" : "normal"}]}>
		{volume * 100}%
		</Text>
		</TouchableOpacity>
		)
		}

		render() {
		const flexCompleted = this.getCurrentTimePercentage() * 100;
		const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;

		return (
		<View style={styles.container}>
		<TouchableOpacity style={styles.fullScreen} onPress={() => {this.setState({paused: !this.state.paused})}}>
		<Video source={require('./broadchurch.mp4')}
		style={styles.fullScreen}
		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={() => { console.log('Done!') }}
		repeat={true} />
		</TouchableOpacity>

		<View style={styles.controls}>
		<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>

		<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 style={styles.trackingControls}>
		<View style={styles.progress}>
		<View style={[styles.innerProgressCompleted, {flex: flexCompleted}]} />
		<View style={[styles.innerProgressRemaining, {flex: flexRemaining}]} />
		</View>
		</View>
		</View>
		</View>
		);
		}
		}


		const styles = StyleSheet.create({
		container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'black',
		},
		fullScreen: {
		position: 'absolute',
		top: 0,
		left: 0,
		bottom: 0,
		right: 0,
		},
		controls: {
		backgroundColor: "transparent",
		borderRadius: 5,
		position: 'absolute',
		bottom: 20,
		left: 20,
		right: 20,
		},
		progress: {
		flex: 1,
		flexDirection: 'row',
		borderRadius: 3,
		overflow: 'hidden',
		},
		innerProgressCompleted: {
		height: 20,
		backgroundColor: '#cccccc',
		},
		innerProgressRemaining: {
		height: 20,
		backgroundColor: '#2C2C2C',
		},
		generalControls: {
		flex: 1,
		flexDirection: 'row',
		borderRadius: 4,
		overflow: 'hidden',
		paddingBottom: 10,
		},
		rateControl: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'center',
		},
		volumeControl: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'center',
		},
		resizeModeControl: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		},
		controlOption: {
		alignSelf: 'center',
		fontSize: 11,
		color: "white",
		paddingLeft: 2,
		paddingRight: 2,
		lineHeight: 12,
		},
		});

		AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer);

example/package.json

+5 −1

Changes for example/package.json: 5 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -8,6 +8,10 @@
		"dependencies": {
		"react": "15.3.1",
		"react-native": "^0.33.0",
		"react-native-video": "file:../"
		"react-native-video": "file:../",
		"react-native-windows": "^0.33.4"
		},
		"devDependencies": {
		"rnpm-plugin-windows": "^0.2.3"
		}
		}

example/windows/.gitignore

0 → 100644

+89 −0

Changes for example/windows/.gitignore: 89 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		AppPackages
		BundleArtifacts
		ReactAssets

		#OS junk files
		[Tt]humbs.db
		*.DS_Store

		#Visual Studio files
		*.[Oo]bj
		*.user
		*.aps
		*.pch
		*.vspscc
		*.vssscc
		*_i.c
		*_p.c
		*.ncb
		*.suo
		*.tlb
		*.tlh
		*.bak
		*.[Cc]ache
		*.ilk
		*.log
		*.lib
		*.sbr
		*.sdf
		*.opensdf
		*.opendb
		*.unsuccessfulbuild
		ipch/
		[Oo]bj/
		[Bb]in
		[Dd]ebug*/
		[Rr]elease*/
		Ankh.NoLoad

		# Visual C++ cache files
		ipch/
		*.aps
		*.ncb
		*.opendb
		*.opensdf
		*.sdf
		*.cachefile
		*.VC.db
		*.VC.VC.opendb

		#MonoDevelop
		*.pidb
		*.userprefs

		#Tooling
		_ReSharper*/
		*.resharper
		[Tt]est[Rr]esult*
		*.sass-cache

		#Project files
		[Bb]uild/

		#Subversion files
		.svn

		# Office Temp Files
		~$*

		# vim Temp Files
		*~

		#NuGet
		packages/
		*.nupkg

		#ncrunch
		ncrunch
		crunch.local.xml

		# visual studio database projects
		*.dbmdl

		#Test files
		*.testsettings

		#Other files
		*.DotSettings
		.vs/
		*project.lock.json