railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introducing custom/native/embed skins

Browse Source
This commit is contained in:
Bernd Paradies 2015-12-22 17:39:04 -06:00
parent f4c3e14d19
commit f2b0dbd2db
16 changed files with 299 additions and 513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Examples/VideoPlayer/.gitignore vendored
View File

@ -1 +1,3 @@
node_modules/**/* node_modules/**/*
VideoPlayer.xcodeproj/project.xcworkspace/**/*
VideoPlayer.xcodeproj/xcuserdata/**/*

7
Examples/VideoPlayer/VideoPlayer.xcodeproj/project.xcworkspace/contents.xcworkspacedata generated
View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<Workspace
version = "1.0">
<FileRef
location = "self:VideoPlayer.xcodeproj">
</FileRef>
</Workspace>

41
Examples/VideoPlayer/VideoPlayer.xcodeproj/project.xcworkspace/xcshareddata/VideoPlayer.xccheckout
View File

@ -1,41 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDESourceControlProjectFavoriteDictionaryKey</key>
<false/>
<key>IDESourceControlProjectIdentifier</key>
<string>9B1B824B-5918-47F5-B27A-FA559B781ACC</string>
<key>IDESourceControlProjectName</key>
<string>VideoPlayer</string>
<key>IDESourceControlProjectOriginsDictionary</key>
<dict>
<key>D05F265D0E65FFE673B2E9F5A4680A7F46E27F31</key>
<string>github.com:johanneslumpe/react-native-video.git</string>
</dict>
<key>IDESourceControlProjectPath</key>
<string>Examples/VideoPlayer/VideoPlayer.xcodeproj</string>
<key>IDESourceControlProjectRelativeInstallPathDictionary</key>
<dict>
<key>D05F265D0E65FFE673B2E9F5A4680A7F46E27F31</key>
<string>../../../..</string>
</dict>
<key>IDESourceControlProjectURL</key>
<string>github.com:johanneslumpe/react-native-video.git</string>
<key>IDESourceControlProjectVersion</key>
<integer>111</integer>
<key>IDESourceControlProjectWCCIdentifier</key>
<string>D05F265D0E65FFE673B2E9F5A4680A7F46E27F31</string>
<key>IDESourceControlProjectWCConfigurations</key>
<array>
<dict>
<key>IDESourceControlRepositoryExtensionIdentifierKey</key>
<string>public.vcs.git</string>
<key>IDESourceControlWCCIdentifierKey</key>
<string>D05F265D0E65FFE673B2E9F5A4680A7F46E27F31</string>
<key>IDESourceControlWCCName</key>
<string>react-native-video</string>
</dict>
</array>
</dict>
</plist>

BIN
Examples/VideoPlayer/VideoPlayer.xcodeproj/project.xcworkspace/xcuserdata/brentvatne.xcuserdatad/UserInterfaceState.xcuserstate generated
View File

Binary file not shown.

88
Examples/VideoPlayer/VideoPlayer.xcodeproj/xcshareddata/xcschemes/VideoPlayer.xcscheme
View File

@ -1,88 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "0620"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
buildImplicitDependencies = "YES">
<BuildActionEntries>
<BuildActionEntry
buildForTesting = "YES"
buildForRunning = "YES"
buildForProfiling = "YES"
buildForArchiving = "YES"
buildForAnalyzing = "YES">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "VideoPlayer.app"
BlueprintName = "VideoPlayer"
ReferencedContainer = "container:VideoPlayer.xcodeproj">
</BuildableReference>
</BuildActionEntry>
</BuildActionEntries>
</BuildAction>
<TestAction
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
shouldUseLaunchSchemeArgsEnv = "YES"
buildConfiguration = "Debug">
<Testables>
</Testables>
<MacroExpansion>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "VideoPlayer.app"
BlueprintName = "VideoPlayer"
ReferencedContainer = "container:VideoPlayer.xcodeproj">
</BuildableReference>
</MacroExpansion>
</TestAction>
<LaunchAction
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
launchStyle = "0"
useCustomWorkingDirectory = "NO"
buildConfiguration = "Debug"
ignoresPersistentStateOnLaunch = "NO"
debugDocumentVersioning = "YES"
allowLocationSimulation = "YES">
<BuildableProductRunnable
runnableDebuggingMode = "0">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "VideoPlayer.app"
BlueprintName = "VideoPlayer"
ReferencedContainer = "container:VideoPlayer.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
<AdditionalOptions>
</AdditionalOptions>
</LaunchAction>
<ProfileAction
shouldUseLaunchSchemeArgsEnv = "YES"
savedToolIdentifier = ""
useCustomWorkingDirectory = "NO"
buildConfiguration = "Release"
debugDocumentVersioning = "YES">
<BuildableProductRunnable
runnableDebuggingMode = "0">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "VideoPlayer.app"
BlueprintName = "VideoPlayer"
ReferencedContainer = "container:VideoPlayer.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
</ProfileAction>
<AnalyzeAction
buildConfiguration = "Debug">
</AnalyzeAction>
<ArchiveAction
buildConfiguration = "Release"
revealArchiveInOrganizer = "YES">
</ArchiveAction>
</Scheme>

21
Examples/VideoPlayer/VideoPlayer.xcodeproj/xcuserdata/brentvatne.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist
View File

@ -1,21 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<Bucket
type = "1"
version = "2.0">
<Breakpoints>
<BreakpointProxy
BreakpointExtensionID = "Xcode.Breakpoint.FileBreakpoint">
<BreakpointContent
shouldBeEnabled = "No"
ignoreCount = "0"
continueAfterRunningActions = "No"
filePath = "iOS/main.m"
timestampString = "450209799.468907"
startingColumnNumber = "9223372036854775807"
endingColumnNumber = "9223372036854775807"
startingLineNumber = "9"
endingLineNumber = "9">
</BreakpointContent>
</BreakpointProxy>
</Breakpoints>
</Bucket>

22
Examples/VideoPlayer/VideoPlayer.xcodeproj/xcuserdata/brentvatne.xcuserdatad/xcschemes/xcschememanagement.plist
View File

@ -1,22 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>SchemeUserState</key>
<dict>
<key>VideoPlayer.xcscheme_^#shared#^_</key>
<dict>
<key>orderHint</key>
<integer>0</integer>
</dict>
</dict>
<key>SuppressBuildableAutocreation</key>
<dict>
<key>13B07F861A680F5B00A75B9A</key>
<dict>
<key>primary</key>
<true/>
</dict>
</dict>
</dict>
</plist>

103
Examples/VideoPlayer/index.ios.js
View File

@ -21,6 +21,9 @@ var VideoPlayer = React.createClass({
resizeMode: 'contain', resizeMode: 'contain',
duration: 0.0, duration: 0.0,
currentTime: 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) { renderRateControl(rate) {
var isSelected = (this.state.rate == rate); var isSelected = (this.state.rate == rate);
@ -76,7 +94,7 @@ var VideoPlayer = React.createClass({
) )
}, },
render() { renderCustomSkin() {
var flexCompleted = this.getCurrentTimePercentage() * 100; var flexCompleted = this.getCurrentTimePercentage() * 100;
var flexRemaining = (1 - this.getCurrentTimePercentage()) * 100; var flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;
@ -97,12 +115,17 @@ var VideoPlayer = React.createClass({
</TouchableOpacity> </TouchableOpacity>
<View style={styles.controls}> <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.generalControls}>
<View style={styles.rateControl}> <View style={styles.rateControl}>
{this.renderRateControl(0.25)}
{this.renderRateControl(0.5)} {this.renderRateControl(0.5)}
{this.renderRateControl(1.0)} {this.renderRateControl(1.0)}
{this.renderRateControl(1.5)}
{this.renderRateControl(2.0)} {this.renderRateControl(2.0)}
</View> </View>
@ -128,7 +151,63 @@ var VideoPlayer = React.createClass({
</View> </View>
</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", backgroundColor: "transparent",
borderRadius: 5, borderRadius: 5,
position: 'absolute', position: 'absolute',
bottom: 20, bottom: 44,
left: 20, left: 4,
right: 20, right: 4,
}, },
progress: { progress: {
flex: 1, flex: 1,
@ -171,10 +250,14 @@ var styles = StyleSheet.create({
generalControls: { generalControls: {
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
borderRadius: 4,
overflow: 'hidden', overflow: 'hidden',
paddingBottom: 10, paddingBottom: 10,
}, },
skinControl: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
rateControl: { rateControl: {
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
@ -189,7 +272,7 @@ var styles = StyleSheet.create({
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center'
}, },
controlOption: { controlOption: {
alignSelf: 'center', alignSelf: 'center',
@ -199,6 +282,10 @@ var styles = StyleSheet.create({
paddingRight: 2, paddingRight: 2,
lineHeight: 12, lineHeight: 12,
}, },
nativeVideoControls: {
top: 184,
height: 300
}
}); });
AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer); AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer);

260
Examples/VideoPlayer/node_modules/react-native-video/RCTVideo.xcodeproj/project.pbxproj generated vendored
View File

@ -1,260 +0,0 @@
// !$*UTF8*$!
{
archiveVersion = 1;
classes = {
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
BBD49E3F1AC8DEF000610F8E /* RCTVideo.m in Sources */ = {isa = PBXBuildFile; fileRef = BBD49E3A1AC8DEF000610F8E /* RCTVideo.m */; };
BBD49E401AC8DEF000610F8E /* RCTVideoManager.m in Sources */ = {isa = PBXBuildFile; fileRef = BBD49E3C1AC8DEF000610F8E /* RCTVideoManager.m */; };
/* End PBXBuildFile section */
/* Begin PBXCopyFilesBuildPhase section */
58B511D91A9E6C8500147676 /* CopyFiles */ = {
isa = PBXCopyFilesBuildPhase;
buildActionMask = 2147483647;
dstPath = "include/$(PRODUCT_NAME)";
dstSubfolderSpec = 16;
files = (
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXCopyFilesBuildPhase section */
/* Begin PBXFileReference section */
134814201AA4EA6300B7C361 /* libRCTVideo.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRCTVideo.a; sourceTree = BUILT_PRODUCTS_DIR; };
BBD49E391AC8DEF000610F8E /* RCTVideo.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTVideo.h; sourceTree = "<group>"; };
BBD49E3A1AC8DEF000610F8E /* RCTVideo.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTVideo.m; sourceTree = "<group>"; };
BBD49E3B1AC8DEF000610F8E /* RCTVideoManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTVideoManager.h; sourceTree = "<group>"; };
BBD49E3C1AC8DEF000610F8E /* RCTVideoManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTVideoManager.m; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
58B511D81A9E6C8500147676 /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXFrameworksBuildPhase section */
/* Begin PBXGroup section */
134814211AA4EA7D00B7C361 /* Products */ = {
isa = PBXGroup;
children = (
134814201AA4EA6300B7C361 /* libRCTVideo.a */,
);
name = Products;
sourceTree = "<group>";
};
58B511D21A9E6C8500147676 = {
isa = PBXGroup;
children = (
BBD49E391AC8DEF000610F8E /* RCTVideo.h */,
BBD49E3A1AC8DEF000610F8E /* RCTVideo.m */,
BBD49E3B1AC8DEF000610F8E /* RCTVideoManager.h */,
BBD49E3C1AC8DEF000610F8E /* RCTVideoManager.m */,
134814211AA4EA7D00B7C361 /* Products */,
);
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
58B511DA1A9E6C8500147676 /* RCTVideo */ = {
isa = PBXNativeTarget;
buildConfigurationList = 58B511EF1A9E6C8500147676 /* Build configuration list for PBXNativeTarget "RCTVideo" */;
buildPhases = (
58B511D71A9E6C8500147676 /* Sources */,
58B511D81A9E6C8500147676 /* Frameworks */,
58B511D91A9E6C8500147676 /* CopyFiles */,
);
buildRules = (
);
dependencies = (
);
name = RCTVideo;
productName = RCTDataManager;
productReference = 134814201AA4EA6300B7C361 /* libRCTVideo.a */;
productType = "com.apple.product-type.library.static";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
58B511D31A9E6C8500147676 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0610;
ORGANIZATIONNAME = Facebook;
TargetAttributes = {
58B511DA1A9E6C8500147676 = {
CreatedOnToolsVersion = 6.1.1;
};
};
};
buildConfigurationList = 58B511D61A9E6C8500147676 /* Build configuration list for PBXProject "RCTVideo" */;
compatibilityVersion = "Xcode 3.2";
developmentRegion = English;
hasScannedForEncodings = 0;
knownRegions = (
en,
);
mainGroup = 58B511D21A9E6C8500147676;
productRefGroup = 58B511D21A9E6C8500147676;
projectDirPath = "";
projectRoot = "";
targets = (
58B511DA1A9E6C8500147676 /* RCTVideo */,
);
};
/* End PBXProject section */
/* Begin PBXSourcesBuildPhase section */
58B511D71A9E6C8500147676 /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
BBD49E3F1AC8DEF000610F8E /* RCTVideo.m in Sources */,
BBD49E401AC8DEF000610F8E /* RCTVideoManager.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin XCBuildConfiguration section */
58B511ED1A9E6C8500147676 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_OPTIMIZATION_LEVEL = 0;
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
GCC_SYMBOLS_PRIVATE_EXTERN = NO;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 7.0;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
};
name = Debug;
};
58B511EE1A9E6C8500147676 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 7.0;
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
VALIDATE_PRODUCT = YES;
};
name = Release;
};
58B511F01A9E6C8500147676 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../React/**",
"$(SRCROOT)/../react-native/React/**",
"$(SRCROOT)/node_modules/react-native/React/**",
);
LIBRARY_SEARCH_PATHS = "$(inherited)";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = RCTVideo;
SKIP_INSTALL = YES;
};
name = Debug;
};
58B511F11A9E6C8500147676 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../React/**",
"$(SRCROOT)/../react-native/React/**",
"$(SRCROOT)/node_modules/react-native/React/**",
);
LIBRARY_SEARCH_PATHS = "$(inherited)";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = RCTVideo;
SKIP_INSTALL = YES;
};
name = Release;
};
/* End XCBuildConfiguration section */
/* Begin XCConfigurationList section */
58B511D61A9E6C8500147676 /* Build configuration list for PBXProject "RCTVideo" */ = {
isa = XCConfigurationList;
buildConfigurations = (
58B511ED1A9E6C8500147676 /* Debug */,
58B511EE1A9E6C8500147676 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
58B511EF1A9E6C8500147676 /* Build configuration list for PBXNativeTarget "RCTVideo" */ = {
isa = XCConfigurationList;
buildConfigurations = (
58B511F01A9E6C8500147676 /* Debug */,
58B511F11A9E6C8500147676 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
/* End XCConfigurationList section */
};
rootObject = 58B511D31A9E6C8500147676 /* Project object */;
}

5
Examples/VideoPlayer/package.json
View File

@ -5,8 +5,11 @@
"scripts": { "scripts": {
"start": "node_modules/react-native/packager/packager.sh" "start": "node_modules/react-native/packager/packager.sh"
}, },
"scripts": {
"postinstall" : "cp ../../*.js ../../*.m ../../*.h ../../README.md ../../package.json ./node_modules/react-native-video && cp ../../RCTVideo.xcodeproj/project.pbxproj ./node_modules/react-native-video/RCTVideo.xcodeproj/project.pbxproj"
},
"dependencies": { "dependencies": {
"react-native": "^0.16.0", "react-native": "^0.16.0",
"react-native-video": "brentvatne/react-native-video#feature/android-support" "react-native-video": "brentvatne/react-native-video"
} }
} }

4
RCTVideo.h
View File

@ -1,4 +1,6 @@
#import "RCTView.h" #import "RCTView.h"
#import <AVFoundation/AVFoundation.h>
#import "AVKit/AVKit.h"
@class RCTEventDispatcher; @class RCTEventDispatcher;
@ -6,4 +8,6 @@
- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER; - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;
- (AVPlayerViewController*)createPlayerViewController:(AVPlayer*)player withPlayerItem:(AVPlayerItem*)playerItem;
@end @end

246
RCTVideo.m
View File

@ -3,7 +3,6 @@
#import "RCTBridgeModule.h" #import "RCTBridgeModule.h"
#import "RCTEventDispatcher.h" #import "RCTEventDispatcher.h"
#import "UIView+React.h" #import "UIView+React.h"
#import <AVFoundation/AVFoundation.h>
static NSString *const statusKeyPath = @"status"; static NSString *const statusKeyPath = @"status";
static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"; static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp";
@ -14,6 +13,7 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
AVPlayerItem *_playerItem; AVPlayerItem *_playerItem;
BOOL _playerItemObserversSet; BOOL _playerItemObserversSet;
AVPlayerLayer *_playerLayer; AVPlayerLayer *_playerLayer;
AVPlayerViewController *_playerViewController;
NSURL *_videoURL; NSURL *_videoURL;
/* Required to publish events */ /* Required to publish events */
@ -24,9 +24,9 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
float _lastSeekTime; float _lastSeekTime;
/* For sending videoProgress events */ /* For sending videoProgress events */
id _progressUpdateTimer; Float64 _progressUpdateInterval;
int _progressUpdateInterval; BOOL _controls;
NSDate *_prevProgressUpdateTime; id _timeObserver;
/* Keep track of any modifiers, need to be applied after each play */ /* Keep track of any modifiers, need to be applied after each play */
float _volume; float _volume;
@ -48,6 +48,8 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
_pendingSeek = false; _pendingSeek = false;
_pendingSeekTime = 0.0f; _pendingSeekTime = 0.0f;
_lastSeekTime = 0.0f; _lastSeekTime = 0.0f;
_progressUpdateInterval = 250;
_controls = NO;
[[NSNotificationCenter defaultCenter] addObserver:self [[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(applicationWillResignActive:) selector:@selector(applicationWillResignActive:)
@ -63,6 +65,42 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
return self; return self;
} }
- (AVPlayerViewController*)createPlayerViewController:(AVPlayer*)player withPlayerItem:(AVPlayerItem*)playerItem {
AVPlayerViewController* playerLayer= [[AVPlayerViewController alloc] init];
playerLayer.view.frame = self.bounds;
playerLayer.player = _player;
playerLayer.view.frame = self.bounds;
return playerLayer;
}
/* ---------------------------------------------------------
** Get the duration for a AVPlayerItem.
** ------------------------------------------------------- */
- (CMTime)playerItemDuration
{
AVPlayerItem *playerItem = [_player currentItem];
if (playerItem.status == AVPlayerItemStatusReadyToPlay)
{
return([playerItem duration]);
}
return(kCMTimeInvalid);
}
/* Cancels the previously registered time observer. */
-(void)removePlayerTimeObserver
{
if (_timeObserver)
{
[_player removeTimeObserver:_timeObserver];
_timeObserver = nil;
}
}
#pragma mark - Progress
- (void)dealloc - (void)dealloc
{ {
[[NSNotificationCenter defaultCenter] removeObserver:self]; [[NSNotificationCenter defaultCenter] removeObserver:self];
@ -73,14 +111,13 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
- (void)applicationWillResignActive:(NSNotification *)notification - (void)applicationWillResignActive:(NSNotification *)notification
{ {
if (!_paused) { if (!_paused) {
[self stopProgressTimer]; [_player pause];
[_player setRate:0.0]; [_player setRate:0.0];
} }
} }
- (void)applicationWillEnterForeground:(NSNotification *)notification - (void)applicationWillEnterForeground:(NSNotification *)notification
{ {
[self startProgressTimer];
[self applyModifiers]; [self applyModifiers];
} }
@ -88,18 +125,29 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
- (void)sendProgressUpdate - (void)sendProgressUpdate
{ {
AVPlayerItem *video = [_player currentItem]; AVPlayerItem *video = [_player currentItem];
if (video == nil || video.status != AVPlayerItemStatusReadyToPlay) { if (video == nil || video.status != AVPlayerItemStatusReadyToPlay) {
return; return;
} }
CMTime playerDuration = [self playerItemDuration];
if (CMTIME_IS_INVALID(playerDuration)) {
return;
}
if (_prevProgressUpdateTime == nil || (([_prevProgressUpdateTime timeIntervalSinceNow] * -1000.0) >= _progressUpdateInterval)) { CMTime currentTime = _player.currentTime;
[_eventDispatcher sendInputEventWithName:@"onVideoProgress" const Float64 duration = CMTimeGetSeconds(playerDuration);
body:@{@"currentTime": [NSNumber numberWithFloat:CMTimeGetSeconds(video.currentTime)], const Float64 currentTimeSecs = CMTimeGetSeconds(currentTime);
@"playableDuration": [self calculatePlayableDuration], if( currentTimeSecs >= 0 && currentTimeSecs <= duration) {
@"target": self.reactTag}]; [_eventDispatcher sendInputEventWithName:@"onVideoProgress"
_prevProgressUpdateTime = [NSDate date]; body:@{
} @"currentTime": [NSNumber numberWithFloat:CMTimeGetSeconds(currentTime)],
@"playableDuration": [self calculatePlayableDuration],
@"atValue": [NSNumber numberWithLongLong:currentTime.value],
@"atTimescale": [NSNumber numberWithInt:currentTime.timescale],
@"target": self.reactTag
}];
}
} }
/*! /*!
@ -127,22 +175,6 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
return [NSNumber numberWithInteger:0]; return [NSNumber numberWithInteger:0];
} }
- (void)stopProgressTimer
{
[_progressUpdateTimer invalidate];
}
- (void)startProgressTimer
{
_progressUpdateInterval = 250;
_prevProgressUpdateTime = nil;
[self stopProgressTimer];
_progressUpdateTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(sendProgressUpdate)];
[_progressUpdateTimer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}
- (void)addPlayerItemObservers - (void)addPlayerItemObservers
{ {
[_playerItem addObserver:self forKeyPath:statusKeyPath options:0 context:nil]; [_playerItem addObserver:self forKeyPath:statusKeyPath options:0 context:nil];
@ -166,25 +198,27 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
- (void)setSrc:(NSDictionary *)source - (void)setSrc:(NSDictionary *)source
{ {
[self removePlayerTimeObserver];
[self removePlayerItemObservers]; [self removePlayerItemObservers];
_playerItem = [self playerItemForSource:source]; _playerItem = [self playerItemForSource:source];
[self addPlayerItemObservers]; [self addPlayerItemObservers];
[_player pause]; [_player pause];
[_playerLayer removeFromSuperlayer]; [_playerLayer removeFromSuperlayer];
_playerLayer = nil;
[_playerViewController.view removeFromSuperview];
_playerViewController = nil;
_player = [AVPlayer playerWithPlayerItem:_playerItem]; _player = [AVPlayer playerWithPlayerItem:_playerItem];
_player.actionAtItemEnd = AVPlayerActionAtItemEndNone; _player.actionAtItemEnd = AVPlayerActionAtItemEndNone;
_playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player]; const Float64 progressUpdateIntervalMS = _progressUpdateInterval / 1000;
_playerLayer.frame = self.bounds; // @see endScrubbing in AVPlayerDemoPlaybackViewController.m of https://developer.apple.com/library/ios/samplecode/AVPlayerDemo/Introduction/Intro.html
_playerLayer.needsDisplayOnBoundsChange = YES; __weak RCTVideo *weakSelf = self;
_timeObserver = [_player addPeriodicTimeObserverForInterval:CMTimeMakeWithSeconds(progressUpdateIntervalMS, NSEC_PER_SEC)
[self applyModifiers]; queue:NULL
usingBlock:^(CMTime time) { [weakSelf sendProgressUpdate]; }
[self.layer addSublayer:_playerLayer]; ];
self.layer.needsDisplayOnBoundsChange = YES;
[_eventDispatcher sendInputEventWithName:@"onVideoLoadStart" [_eventDispatcher sendInputEventWithName:@"onVideoLoadStart"
body:@{@"src": @{ body:@{@"src": @{
@"uri": [source objectForKey:@"uri"], @"uri": [source objectForKey:@"uri"],
@ -214,7 +248,7 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{ {
if (object == _playerItem) { if (object == _playerItem) {
if ([keyPath isEqualToString:statusKeyPath]) { if ([keyPath isEqualToString:statusKeyPath]) {
// Handle player item status change. // Handle player item status change.
@ -236,7 +270,6 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
@"canStepForward": [NSNumber numberWithBool:_playerItem.canStepForward], @"canStepForward": [NSNumber numberWithBool:_playerItem.canStepForward],
@"target": self.reactTag}]; @"target": self.reactTag}];
[self startProgressTimer];
[self attachListeners]; [self attachListeners];
[self applyModifiers]; [self applyModifiers];
} else if(_playerItem.status == AVPlayerItemStatusFailed) { } else if(_playerItem.status == AVPlayerItemStatusFailed) {
@ -253,7 +286,7 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
} }
} }
} else { } else {
[super observeValueForKeyPath:keyPath ofObject:object change:change context:context]; [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
} }
} }
@ -281,23 +314,40 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
- (void)setResizeMode:(NSString*)mode - (void)setResizeMode:(NSString*)mode
{ {
if( _controls )
{
_playerViewController.videoGravity = mode;
}
else
{
_playerLayer.videoGravity = mode;
}
_resizeMode = mode; _resizeMode = mode;
_playerLayer.videoGravity = mode;
} }
- (void)setPaused:(BOOL)paused - (void)setPaused:(BOOL)paused
{ {
if (paused) { if (paused) {
[self stopProgressTimer]; [_player pause];
[_player setRate:0.0]; [_player setRate:0.0];
} else { } else {
[self startProgressTimer]; [_player play];
[_player setRate:_rate]; [_player setRate:_rate];
} }
_paused = paused; _paused = paused;
} }
- (float)getCurrentTime
{
return _playerItem != NULL ? CMTimeGetSeconds(_playerItem.currentTime) : 0;
}
- (void)setCurrentTime:(float)currentTime
{
[self setSeek: currentTime];
}
- (void)setSeek:(float)seekTime - (void)setSeek:(float)seekTime
{ {
int timeScale = 10000; int timeScale = 10000;
@ -310,7 +360,7 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
CMTime current = item.currentTime; CMTime current = item.currentTime;
// TODO figure out a good tolerance level // TODO figure out a good tolerance level
CMTime tolerance = CMTimeMake(1000, timeScale); CMTime tolerance = CMTimeMake(1000, timeScale);
if (CMTimeCompare(current, cmSeekTime) != 0) { if (CMTimeCompare(current, cmSeekTime) != 0) {
[_player seekToTime:cmSeekTime toleranceBefore:tolerance toleranceAfter:tolerance completionHandler:^(BOOL finished) { [_player seekToTime:cmSeekTime toleranceBefore:tolerance toleranceAfter:tolerance completionHandler:^(BOOL finished) {
[_eventDispatcher sendInputEventWithName:@"onVideoSeek" [_eventDispatcher sendInputEventWithName:@"onVideoSeek"
@ -360,48 +410,126 @@ static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp"
[self setResizeMode:_resizeMode]; [self setResizeMode:_resizeMode];
[self setRepeat:_repeat]; [self setRepeat:_repeat];
[self setPaused:_paused]; [self setPaused:_paused];
[self setControls:_controls];
} }
- (void)setRepeat:(BOOL)repeat { - (void)setRepeat:(BOOL)repeat {
_repeat = repeat; _repeat = repeat;
} }
- (void)usePlayerViewController
{
if( _player )
{
_playerViewController = [self createPlayerViewController:_player withPlayerItem:_playerItem];
[self addSubview:_playerViewController.view];
}
}
- (void)usePlayerLayer
{
if( _player )
{
_playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player];
_playerLayer.frame = self.bounds;
_playerLayer.needsDisplayOnBoundsChange = YES;
[self.layer addSublayer:_playerLayer];
self.layer.needsDisplayOnBoundsChange = YES;
}
}
- (void)setControls:(BOOL)controls
{
if( _controls != controls || (!_playerLayer && !_playerViewController) )
{
_controls = controls;
if( _controls )
{
[_playerLayer removeFromSuperlayer];
_playerLayer = nil;
[self usePlayerViewController];
}
else
{
[_playerViewController.view removeFromSuperview];
_playerViewController = nil;
[self usePlayerLayer];
}
}
}
#pragma mark - React View Management #pragma mark - React View Management
- (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex - (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
{ {
RCTLogError(@"video cannot have any subviews"); // We are early in the game and somebody wants to set a subview.
// That can only be in the context of playerViewController.
if( !_controls && !_playerLayer && !_playerViewController )
{
[self setControls:true];
}
if( _controls )
{
view.frame = self.bounds;
[_playerViewController.contentOverlayView insertSubview:view atIndex:atIndex];
}
else
{
RCTLogError(@"video cannot have any subviews");
}
return; return;
} }
- (void)removeReactSubview:(UIView *)subview - (void)removeReactSubview:(UIView *)subview
{ {
RCTLogError(@"video cannot have any subviews"); if( _controls )
{
[subview removeFromSuperview];
}
else
{
RCTLogError(@"video cannot have any subviews");
}
return; return;
} }
- (void)layoutSubviews - (void)layoutSubviews
{ {
[super layoutSubviews]; [super layoutSubviews];
[CATransaction begin]; if( _controls )
[CATransaction setAnimationDuration:0]; {
_playerLayer.frame = self.bounds; _playerViewController.view.frame = self.bounds;
[CATransaction commit];
// also adjust all subviews of contentOverlayView
for (UIView* subview in _playerViewController.contentOverlayView.subviews) {
subview.frame = self.bounds;
}
}
else
{
[CATransaction begin];
[CATransaction setAnimationDuration:0];
_playerLayer.frame = self.bounds;
[CATransaction commit];
}
} }
#pragma mark - Lifecycle #pragma mark - Lifecycle
- (void)removeFromSuperview - (void)removeFromSuperview
{ {
[_progressUpdateTimer invalidate];
_prevProgressUpdateTime = nil;
[_player pause]; [_player pause];
_player = nil; _player = nil;
[_playerLayer removeFromSuperlayer]; [_playerLayer removeFromSuperlayer];
_playerLayer = nil; _playerLayer = nil;
[_playerViewController.view removeFromSuperview];
_playerViewController = nil;
[self removePlayerTimeObserver];
[self removePlayerItemObservers]; [self removePlayerItemObservers];
_eventDispatcher = nil; _eventDispatcher = nil;

2
RCTVideo.xcodeproj/project.pbxproj
View File

@ -205,7 +205,6 @@
HEADER_SEARCH_PATHS = ( HEADER_SEARCH_PATHS = (
"$(inherited)", "$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../React/**",
"$(SRCROOT)/../react-native/React/**", "$(SRCROOT)/../react-native/React/**",
"$(SRCROOT)/node_modules/react-native/React/**", "$(SRCROOT)/node_modules/react-native/React/**",
); );
@ -222,7 +221,6 @@
HEADER_SEARCH_PATHS = ( HEADER_SEARCH_PATHS = (
"$(inherited)", "$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../React/**",
"$(SRCROOT)/../react-native/React/**", "$(SRCROOT)/../react-native/React/**",
"$(SRCROOT)/node_modules/react-native/React/**", "$(SRCROOT)/node_modules/react-native/React/**",
); );

2
RCTVideoManager.m
View File

@ -38,9 +38,11 @@ RCT_EXPORT_VIEW_PROPERTY(resizeMode, NSString);
RCT_EXPORT_VIEW_PROPERTY(repeat, BOOL); RCT_EXPORT_VIEW_PROPERTY(repeat, BOOL);
RCT_EXPORT_VIEW_PROPERTY(paused, BOOL); RCT_EXPORT_VIEW_PROPERTY(paused, BOOL);
RCT_EXPORT_VIEW_PROPERTY(muted, BOOL); RCT_EXPORT_VIEW_PROPERTY(muted, BOOL);
RCT_EXPORT_VIEW_PROPERTY(controls, BOOL);
RCT_EXPORT_VIEW_PROPERTY(volume, float); RCT_EXPORT_VIEW_PROPERTY(volume, float);
RCT_EXPORT_VIEW_PROPERTY(rate, float); RCT_EXPORT_VIEW_PROPERTY(rate, float);
RCT_EXPORT_VIEW_PROPERTY(seek, float); RCT_EXPORT_VIEW_PROPERTY(seek, float);
RCT_EXPORT_VIEW_PROPERTY(currentTime, float);
- (NSDictionary *)constantsToExport - (NSDictionary *)constantsToExport
{ {

6
Video.js
View File

@ -127,13 +127,15 @@ Video.propTypes = {
muted: PropTypes.bool, muted: PropTypes.bool,
volume: PropTypes.number, volume: PropTypes.number,
rate: PropTypes.number, rate: PropTypes.number,
controls: PropTypes.bool,
currentTime: PropTypes.number,
onLoadStart: PropTypes.func, onLoadStart: PropTypes.func,
onLoad: PropTypes.func, onLoad: PropTypes.func,
onError: PropTypes.func, onError: PropTypes.func,
onProgress: PropTypes.func, onProgress: PropTypes.func,
onSeek: PropTypes.func, onSeek: PropTypes.func,
onEnd: PropTypes.func, onEnd: PropTypes.func,
/* Required by react-native */ /* Required by react-native */
scaleX: React.PropTypes.number, scaleX: React.PropTypes.number,
scaleY: React.PropTypes.number, scaleY: React.PropTypes.number,
@ -146,7 +148,7 @@ Video.propTypes = {
const RCTVideo = requireNativeComponent('RCTVideo', Video, { const RCTVideo = requireNativeComponent('RCTVideo', Video, {
nativeOnly: { nativeOnly: {
src: true, src: true,
seek: true, seek: true
}, },
}); });

3
package.json
View File

@ -19,8 +19,7 @@
"RCTVideoManager.m", "RCTVideoManager.m",
"README.md", "README.md",
"Video.js", "Video.js",
"VideoResizeMode.js", "VideoResizeMode.js"
"VideoStylePropTypes.js"
], ],
"contributors": [ "contributors": [
{ {