Orientation

Demo/android/app/build.gradle

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

Demo/android/app/src/main/java/com/demo/MainActivity.java

@@ -1,6 +1,9 @@
 package com.demo;
 
 import com.facebook.react.ReactActivity;
+import com.github.yamill.orientation.OrientationPackage;
+import android.content.Intent; // <--- import
+import android.content.res.Configuration; // <--- import
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +15,11 @@ public class MainActivity extends ReactActivity {
     protected String getMainComponentName() {
         return "Demo";
     }
+    @Override
+      public void onConfigurationChanged(Configuration newConfig) {
+        super.onConfigurationChanged(newConfig);
+        Intent intent = new Intent("onConfigurationChanged");
+        intent.putExtra("newConfig", newConfig);
+        this.sendBroadcast(intent);
+    }
 }

Demo/android/app/src/main/java/com/demo/MainApplication.java

@@ -14,6 +14,8 @@
 
 import com.greatdroid.reactnative.media.MediaKitPackage;
 
+import com.github.yamill.orientation.OrientationPackage;
+
 public class MainApplication extends Application implements ReactApplication {
 
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@@ -26,7 +28,8 @@ protected boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
               new MainReactPackage(),
-              new MediaKitPackage()
+              new MediaKitPackage(),
+              new OrientationPackage()
       );
     }
   };

Demo/android/app/src/main/res/values/strings.xml

@@ -1,3 +1,4 @@
 <resources>
+
     <string name="app_name">Demo</string>
 </resources>

Demo/android/settings.gradle

@@ -1,6 +1,8 @@
 rootProject.name = 'Demo'
 
 include ':app'
+include ':react-native-orientation'
+project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android')
 
 include ':react-native-media-kit'
 project(':react-native-media-kit').projectDir = new File('../node_modules/react-native-media-kit/android')

Demo/ios/Demo.xcodeproj/project.pbxproj

@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -24,6 +23,7 @@
 		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
 		5F5493631D40F4C800E267B3 /* libreact-native-media-kit.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5F5493611D40F4BD00E267B3 /* libreact-native-media-kit.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
+		EA27F0AAAA8E4B5B8FAC84A0 /* libRCTOrientation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A0C0F07CD4714765A4AF08EA /* libRCTOrientation.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -136,6 +136,8 @@
 		5F5493531D40F4BD00E267B3 /* react-native-media-kit.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = "react-native-media-kit.xcodeproj"; path = "../node_modules/react-native-media-kit/ios/react-native-media-kit.xcodeproj"; sourceTree = "<group>"; };
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
+		D4CE702FEBAB46E6BE6B2A73 /* RCTOrientation.xcodeproj */ = {isa = PBXFileReference; name = "RCTOrientation.xcodeproj"; path = "../node_modules/react-native-orientation/iOS/RCTOrientation.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		A0C0F07CD4714765A4AF08EA /* libRCTOrientation.a */ = {isa = PBXFileReference; name = "libRCTOrientation.a"; path = "libRCTOrientation.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -162,6 +164,7 @@
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
 				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
+				EA27F0AAAA8E4B5B8FAC84A0 /* libRCTOrientation.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -293,6 +296,7 @@
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
 				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
+				D4CE702FEBAB46E6BE6B2A73 /* RCTOrientation.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -371,7 +375,7 @@
 		83CBB9F71A601CBA00E9B192 /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 0610;
+				LastUpgradeCheck = 610;
 				ORGANIZATIONNAME = Facebook;
 				TargetAttributes = {
 					00E356ED1AD99517003FC87E = {
@@ -615,6 +619,10 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Demo.app/Demo";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
 			};
 			name = Debug;
 		};
@@ -628,6 +636,10 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Demo.app/Demo";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
 			};
 			name = Release;
 		};
@@ -640,6 +652,7 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-orientation/iOS/RCTOrientation/**",
 				);
 				INFOPLIST_FILE = Demo/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -660,6 +673,7 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-orientation/iOS/RCTOrientation/**",
 				);
 				INFOPLIST_FILE = Demo/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -710,6 +724,7 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-orientation/iOS/RCTOrientation/**",
 				);
 				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
@@ -750,6 +765,7 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-orientation/iOS/RCTOrientation/**",
 				);
 				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = NO;

Demo/ios/Demo/AppDelegate.m

@@ -11,6 +11,7 @@
 
 #import "RCTBundleURLProvider.h"
 #import "RCTRootView.h"
+#import "Orientation.h"
 
 @implementation AppDelegate
 
@@ -35,4 +36,8 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   return YES;
 }
 
+- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
+  return [Orientation getOrientation];
+}
+
 @end

Demo/package.json

@@ -7,9 +7,10 @@
   },
   "dependencies": {
     "react": "15.2.1",
+    "react-mixin": "^2.0.2",
     "react-native": "^0.29.2",
     "react-native-media-kit": "azendoo/react-native-media-kit",
-    "react-mixin": "^2.0.2",
+    "react-native-orientation": "yamill/react-native-orientation",
     "react-timer-mixin": "^0.13.3"
   }
 }

Demo/src/App.js

@@ -15,6 +15,7 @@ import CustomTextInput from './TextInput';
 import Button from './Button';
 import reactMixin from 'react-mixin';
 import TimerMixin from 'react-timer-mixin';
+import Orientation from 'react-native-orientation';
 
 import { Video } from 'react-native-media-kit';
 
@@ -72,6 +73,7 @@ class App extends Component {
 
   render() {
 
+    Orientation.lockToPortrait();
     let VideoComponent;
     if (!this.state.reload) {
       VideoComponent = (
@@ -160,6 +162,7 @@ class App extends Component {
     this.props.navigator.push({
       index: 1,
       currentState: this.state,
+      currentTime: currentTime,
     });
   }
 

Demo/src/Fullscreen.js

@@ -2,46 +2,56 @@ import React, { Component } from 'react';
 import {
   BackAndroid,
   Dimensions,
-  View
+  View,
+  StatusBar
 } from 'react-native';
-
+import Orientation from 'react-native-orientation';
 import { Video } from 'react-native-media-kit';
 
-const {
-  width,
-  height
-} = Dimensions.get('window');
-
 class Fullscreen extends Component {
 
   render() {
-    const { currentState } = this.props;
+    const { currentState, currentTime } = this.props;
 
     if (currentState) {
+      Orientation.lockToLandscape();
+      const {
+        width,
+        height
+      } = Dimensions.get('window');
       return (
-        <Video
+        <View
           style={{
-            width: width,
-            height: height,
-          }}
-          src={currentState.src}
-          title={currentState.title}
-          autoplay={currentState.autoplay}
-          loop={currentState.loop}
-          muted={currentState.muted}
-          fullscreenEnable={currentState.fullscreenEnable}
-          onFullscreen={this.onFullscreen.bind(this)}
-          showControlsTimer={currentState.showControlsTimer}
-          controls={currentState.controls}
-          poster={currentState.poster}/>
+            width: height,
+            height: width,
+            backgroundColor: 'black',
+          }}>
+          <StatusBar hidden={true}/>
+          <Video
+            style={{
+              width: height,
+              height: width,
+              backgroundColor: 'black',
+            }}
+            src={currentState.src}
+            title={currentState.title}
+            autoplay={true}
+            loop={currentState.loop}
+            muted={currentState.muted}
+            fullscreenEnable={true}
+            onFullscreen={this.onFullscreen.bind(this)}
+            showControlsTimer={currentState.showControlsTimer}
+            controls={true}
+            seekTo={currentTime}/>
+          </View>
         );
     } else {
       return <View/>;
     }
   }
 
   onFullscreen() {
-
+    this.props.navigator.pop();
   }
 }
 

Demo/src/Navigator.js

@@ -45,7 +45,7 @@ class AppNavigator extends Component {
     if (route.index === 0) {
       return (<App navigator={navigator}/>);
     } else if (route.index === 1) {
-      return (<Fullscreen navigator={navigator} currentState={route.currentState}/>);
+      return (<Fullscreen navigator={navigator} currentState={route.currentState} currentTime={route.currentTime}/>);
     }
   }
 }

library/MediaPlayerView.js

@@ -190,7 +190,7 @@ class MediaPlayerView extends Component {
     }
 
     return (
-      <TouchableWithoutFeedback style={this.props.style}
+      <TouchableWithoutFeedback style={[{backgroundColor: 'black'}, this.props.style]}
         onLayout={this._onLayout.bind(this)}
         onPress={this.onPress.bind(this)}>
         <View style={this.props.style}>