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

fix: move basic sample to typescript

Browse Source
This commit is contained in:
olivier bouillet 2022-04-23 22:23:10 +02:00
parent 89f6c40686
commit a0c9b4e090
13 changed files with 128 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
examples/basic/index.android.js → examples/basic/VideoPlayer.android.tsx
View File

@ -5,7 +5,6 @@ import React, {
} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableOpacity,
@ -28,11 +27,11 @@ class VideoPlayer extends Component {
video: Video;
onLoad = (data) => {
onLoad = (data: any) => {
this.setState({ duration: data.duration });
};
onProgress = (data) => {
onProgress = (data: any) => {
this.setState({ currentTime: data.currentTime });
};
@ -50,25 +49,25 @@ class VideoPlayer extends Component {
};
getCurrentTimePercentage() {
if (this.state.currentTime > 0) {
return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
if (this.state.currentTime > 0 && this.state.duration !== 0) {
return this.state.currentTime / this.state.duration;
}
return 0;
};
renderRateControl(rate) {
renderRateControl(rate: number) {
const isSelected = (this.state.rate === rate);
return (
<TouchableOpacity onPress={() => { this.setState({ rate }) }}>
<Text style={[styles.controlOption, { fontWeight: isSelected ? 'bold' : 'normal' }]}>
{rate}x
{rate}
</Text>
</TouchableOpacity>
);
}
renderResizeModeControl(resizeMode) {
renderResizeModeControl(resizeMode: string) {
const isSelected = (this.state.resizeMode === resizeMode);
return (
@ -77,10 +76,10 @@ class VideoPlayer extends Component {
{resizeMode}
</Text>
</TouchableOpacity>
)
)
}
renderVolumeControl(volume) {
renderVolumeControl(volume: number) {
const isSelected = (this.state.volume === volume);
return (
@ -121,7 +120,6 @@ class VideoPlayer extends Component {
repeat={false}
/>
</TouchableOpacity>
<View style={styles.controls}>
<View style={styles.generalControls}>
<View style={styles.rateControl}>
@ -225,6 +223,12 @@ const styles = StyleSheet.create({
paddingRight: 2,
lineHeight: 12,
},
trackingControls: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
});
AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer);
export default VideoPlayer

36
examples/basic/index.ios.js → examples/basic/VideoPlayer.ios.tsx
View File

@ -5,7 +5,6 @@ import React, {
import {
AlertIOS,
AppRegistry,
Platform,
StyleSheet,
Text,
@ -35,7 +34,7 @@ const filterTypes = [
];
class VideoPlayer extends Component {
constructor(props) {
constructor(props: any) {
super(props);
this.onLoad = this.onLoad.bind(this);
this.onProgress = this.onProgress.bind(this);
@ -58,12 +57,12 @@ class VideoPlayer extends Component {
filterEnabled: true
};
onLoad(data) {
onLoad(data: any) {
console.log('On load fired!');
this.setState({duration: data.duration});
}
onProgress(data) {
onProgress(data: any) {
this.setState({currentTime: data.currentTime});
}
@ -72,14 +71,14 @@ class VideoPlayer extends Component {
}
getCurrentTimePercentage() {
if (this.state.currentTime > 0) {
return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
if (this.state.currentTime > 0 && this.state.duration !== 0) {
return this.state.currentTime / this.state.duration;
} else {
return 0;
}
}
setFilter(step) {
setFilter(step: number) {
let index = filterTypes.indexOf(this.state.filter) + step;
if (index === filterTypes.length) {
@ -108,7 +107,7 @@ class VideoPlayer extends Component {
);
}
renderRateControl(rate) {
renderRateControl(rate: number) {
const isSelected = (this.state.rate == rate);
return (
@ -120,7 +119,7 @@ class VideoPlayer extends Component {
)
}
renderResizeModeControl(resizeMode) {
renderResizeModeControl(resizeMode: string) {
const isSelected = (this.state.resizeMode == resizeMode);
return (
@ -132,7 +131,7 @@ class VideoPlayer extends Component {
)
}
renderVolumeControl(volume) {
renderVolumeControl(volume: number) {
const isSelected = (this.state.volume == volume);
return (
@ -144,7 +143,7 @@ class VideoPlayer extends Component {
)
}
renderIgnoreSilentSwitchControl(ignoreSilentSwitch) {
renderIgnoreSilentSwitchControl(ignoreSilentSwitch: string) {
const isSelected = (this.state.ignoreSilentSwitch == ignoreSilentSwitch);
return (
@ -156,7 +155,7 @@ class VideoPlayer extends Component {
)
}
renderMixWithOthersControl(mixWithOthers) {
renderMixWithOthersControl(mixWithOthers: string) {
const isSelected = (this.state.mixWithOthers == mixWithOthers);
return (
@ -442,8 +441,13 @@ const styles = StyleSheet.create({
},
nativeVideoControls: {
top: 184,
height: 300
}
height: 300,
},
trackingControls: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
});
AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer);
export default VideoPlayer

27
examples/basic/index.windows.js → examples/basic/VideoPlayer.windows.tsx
View File

@ -5,7 +5,6 @@ import React, {
} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableOpacity,
@ -15,7 +14,7 @@ import {
import Video from 'react-native-video';
class VideoPlayer extends Component {
constructor(props) {
constructor(props: any) {
super(props);
this.onLoad = this.onLoad.bind(this);
this.onProgress = this.onProgress.bind(this);
@ -28,25 +27,26 @@ class VideoPlayer extends Component {
resizeMode: 'contain',
duration: 0.0,
currentTime: 0.0,
paused: 0,
};
onLoad(data) {
onLoad(data: any) {
this.setState({duration: data.duration});
}
onProgress(data) {
onProgress(data: any) {
this.setState({currentTime: data.currentTime});
}
getCurrentTimePercentage() {
if (this.state.currentTime > 0) {
return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
if (this.state.currentTime > 0 && this.state.duration !== 0) {
return this.state.currentTime / this.state.duration;
} else {
return 0;
}
}
renderRateControl(rate) {
renderRateControl(rate: number) {
const isSelected = (this.state.rate == rate);
return (
@ -58,7 +58,7 @@ class VideoPlayer extends Component {
)
}
renderResizeModeControl(resizeMode) {
renderResizeModeControl(resizeMode: string) {
const isSelected = (this.state.resizeMode == resizeMode);
return (
@ -70,7 +70,7 @@ class VideoPlayer extends Component {
)
}
renderVolumeControl(volume) {
renderVolumeControl(volume: number) {
const isSelected = (this.state.volume == volume);
return (
@ -205,6 +205,11 @@ const styles = StyleSheet.create({
paddingRight: 2,
lineHeight: 12,
},
trackingControls: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
});
AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer);
export default VideoPlayer

2
examples/basic/android/app/build.gradle
View File

@ -66,7 +66,7 @@ import com.android.build.OutputFile
*/
project.ext.react = [
entryFile: "index.android.js",
entryFile: "index.js",
enableHermes: false,
]
apply from: "../../node_modules/react-native/react.gradle"

5
examples/basic/index.js Normal file
View File

@ -0,0 +1,5 @@
import VideoPlayer from './VideoPlayer';
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer);

4
examples/basic/ios/AppDelegate.m
View File

@ -26,12 +26,12 @@
//
// To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
// iOS device are on the same Wi-Fi network.
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios&dev=true"];
// OPTION 2
// Load from pre-bundled file on disk. To re-generate the static bundle, run
//
// $ curl 'http://localhost:8081/index.ios.bundle?dev=false&minify=true' -o iOS/main.jsbundle
// $ curl 'http://localhost:8081/index.bundle?dev=false&minify=true' -o iOS/main.jsbundle
//
// and uncomment the next following line
// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

2
examples/basic/ios/VideoPlayer/AppDelegate.m
View File

@ -18,7 +18,7 @@
{
NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"VideoPlayer"

2
examples/basic/ios/main.jsbundle
View File

@ -1,5 +1,5 @@
// Offline JS
// To re-generate the offline bundle, run this from root of your project
// $ curl 'http://localhost:8081/index.ios.bundle?dev=false&minify=true' -o iOS/main.jsbundle
// $ curl 'http://localhost:8081/index.bundle?dev=false&minify=true' -o iOS/main.jsbundle
throw new Error('Offline JS file is empty. See iOS/main.jsbundle for instructions');

2
examples/basic/package.json
View File

@ -18,6 +18,8 @@
"@babel/core": "^7.6.0",
"@babel/runtime": "^7.6.0",
"@react-native-community/eslint-config": "^0.0.5",
"@types/react": "^18.0.6",
"@types/react-native": "^0.67.6",
"babel-jest": "^24.9.0",
"eslint": "^6.4.0",
"jest": "^24.9.0",

20
examples/basic/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react-native",
"lib": ["es2017"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}

2
examples/basic/windows/VideoPlayer/App.cpp
View File

@ -18,7 +18,7 @@ App::App() noexcept
MainComponentName(L"VideoPlayer");
#if BUNDLE
JavaScriptBundleFile(L"index.windows");
JavaScriptBundleFile(L"index");
InstanceSettings().UseWebDebugger(false);
InstanceSettings().UseFastRefresh(false);
#else

2
examples/basic/windows/VideoPlayer/VideoPlayer.vcxproj
View File

@ -152,7 +152,7 @@
<Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
<PropertyGroup>
<BundleCommand>
npx --no-install react-native bundle --platform windows --entry-file index.js --bundle-output $(MSBuildThisFileDirectory)/Bundle/index.windows.bundle --assets-dest $(MSBuildThisFileDirectory)/Bundle
npx --no-install react-native bundle --platform windows --entry-file index.js --bundle-output $(MSBuildThisFileDirectory)/Bundle/index.bundle --assets-dest $(MSBuildThisFileDirectory)/Bundle
</BundleCommand>
<AppxPackageSigningEnabled>True</AppxPackageSigningEnabled>
</PropertyGroup>

53
examples/basic/yarn.lock
View File

@ -1024,6 +1024,32 @@
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
integrity sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==
"@types/prop-types@*":
version "15.7.5"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
"@types/react-native@^0.67.6":
version "0.67.6"
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.67.6.tgz#9a7de5feba6065aec9f44f9a1e8f6e55ee5d015c"
integrity sha512-NM6atxrefIXMLE/PyQ1bIQjQ/lWLdls3uVxItzKvNUUVZlGqgn/uGN4MarM9quSf90uSqJYPIAeAgTtBTUjhgg==
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^18.0.6":
version "18.0.6"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.6.tgz#30206c3830af6ce8639b91ace5868bc2d3d1d96c"
integrity sha512-bPqwzJRzKtfI0mVYr5R+1o9BOE8UEXefwc1LwcBtfnaAn6OoqMhLa/91VA8aeWfDPJt1kHvYKI8RHcQybZLHHA==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/scheduler@*":
version "0.16.2"
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
"@types/stack-utils@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@ -2002,6 +2028,11 @@ cssstyle@^1.0.0:
dependencies:
cssom "0.3.x"
csstype@^3.0.2:
version "3.0.11"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
dashdash@^1.12.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@ -2180,10 +2211,10 @@ ee-first@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
eme-encryption-scheme-polyfill@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.1.tgz#b080b01bffd74c75c9cf8044c1cabedf3b83954f"
integrity sha512-Wz+Ro1c0/2Wsx2RLFvTOO0m4LvYn+7cSnq3XOvRvLLBq8jbvUACH/zpU9s0/5+mQa5oaelkU69x+q0z/iWYrFA==
eme-encryption-scheme-polyfill@^2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.4.tgz#7d818302af3f3b19d5974255dcc92dc087413845"
integrity sha512-MHYJX1v145Pjj2YJTrVVuJOYyXrxGVy8LWf6kV5M4jrV/GyoeuJKyTuD+GaD+VAiE8Ip+MptiH4dXk6ZVmMNow==
emoji-regex@^7.0.1:
version "7.0.3"
@ -5378,11 +5409,11 @@ react-is@^16.8.4, react-is@^16.8.6:
integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
"react-native-video@file:../..":
version "5.1.0-alpha8"
version "5.2.0"
dependencies:
keymirror "^0.1.1"
prop-types "^15.7.2"
shaka-player "^2.5.9"
shaka-player "^3.3.2"
react-native-windows@^0.61.0-0:
version "0.61.15"
@ -5940,12 +5971,12 @@ setprototypeof@1.1.1:
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
shaka-player@^2.5.9:
version "2.5.18"
resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-2.5.18.tgz#5382d0b879ade01dc7cea5115d311d2168b7428a"
integrity sha512-kW6sNMl36E4ookOcAo7//D/+sNkKNw7kBCR58AAC0eYw+fpVXwUbFoN/aqsj5nhACZ00QGQQajTZXZyK1s8Dow==
shaka-player@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-3.3.2.tgz#6c903413d64d0205d2c9672440f041233075e748"
integrity sha512-6N9J/Dy7xprT8xKcs9+YYiEJsXfKn3xtVzLndLRFP2hR13tn3YzVhP83hZmbnLzOEFBpuYlRq4kNrBNlOA+4/g==
dependencies:
eme-encryption-scheme-polyfill "^2.0.1"
eme-encryption-scheme-polyfill "^2.0.3"
shebang-command@^1.2.0:
version "1.2.0"