Commit 8cc1dbda authored by Eric Rozell's avatar Eric Rozell
Browse files

feat(Windows): Adds Windows support to react-native-video 

This PR adds react-native-windows support to react-native-video.  The Video component is implemented with a XAML MediaPlayerElement.  Most of the features implemented by Android (and some additional ones) are implemented by Windows.

Known issues and missing features include:
* onReadyForDisplay event
* local URI convention (e.g., "broadchurch" in examples changed to require("./broadchurch.mp4")
* `playableDuration` in `onVideoProgress` event is always 0.0
* `playInBackground` is not yet supported
* Volume settings are applied, but the UWP control does not handle it properly
parent 605f4cf0

README.md

+53 −0
Changes for README.md: 53 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -80,6 +80,59 @@ 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.



Using Visual Studio 2015:

1. Right-click main application project > Add > Reference...

2. Check `ReactNativeVideo` from Solution Projects.



Manually from `windows/myapp/myapp.csproj`, add:

```xml

    <ProjectReference Include="..\..\node_modules\react-native-video\windows\ReactNativeVideo\ReactNativeVideo.csproj">

      <Project>{e8f5f57f-757e-4237-ad23-f7a8755427cd}</Project>

      <Name>ReactNativeVideo</Name>

    </ProjectReference>

```



**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