From a0c9b4e09054430a852f8dfec97caf934a57f832 Mon Sep 17 00:00:00 2001 From: olivier bouillet Date: Sat, 23 Apr 2022 22:23:10 +0200 Subject: [PATCH] fix: move basic sample to typescript --- ...dex.android.js => VideoPlayer.android.tsx} | 28 +++++----- .../{index.ios.js => VideoPlayer.ios.tsx} | 36 +++++++------ ...dex.windows.js => VideoPlayer.windows.tsx} | 27 ++++++---- examples/basic/android/app/build.gradle | 2 +- examples/basic/index.js | 5 ++ examples/basic/ios/AppDelegate.m | 4 +- examples/basic/ios/VideoPlayer/AppDelegate.m | 2 +- examples/basic/ios/main.jsbundle | 2 +- examples/basic/package.json | 2 + examples/basic/tsconfig.json | 20 +++++++ examples/basic/windows/VideoPlayer/App.cpp | 2 +- .../windows/VideoPlayer/VideoPlayer.vcxproj | 2 +- examples/basic/yarn.lock | 53 +++++++++++++++---- 13 files changed, 128 insertions(+), 57 deletions(-) rename examples/basic/{index.android.js => VideoPlayer.android.tsx} (92%) rename examples/basic/{index.ios.js => VideoPlayer.ios.tsx} (95%) rename examples/basic/{index.windows.js => VideoPlayer.windows.tsx} (90%) create mode 100644 examples/basic/index.js create mode 100644 examples/basic/tsconfig.json diff --git a/examples/basic/index.android.js b/examples/basic/VideoPlayer.android.tsx similarity index 92% rename from examples/basic/index.android.js rename to examples/basic/VideoPlayer.android.tsx index 1242ddd0..927ac4bf 100644 --- a/examples/basic/index.android.js +++ b/examples/basic/VideoPlayer.android.tsx @@ -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 ( { this.setState({ rate }) }}> - {rate}x + {rate} ); } - renderResizeModeControl(resizeMode) { + renderResizeModeControl(resizeMode: string) { const isSelected = (this.state.resizeMode === resizeMode); return ( @@ -77,10 +76,10 @@ class VideoPlayer extends Component { {resizeMode} - ) + ) } - renderVolumeControl(volume) { + renderVolumeControl(volume: number) { const isSelected = (this.state.volume === volume); return ( @@ -121,7 +120,6 @@ class VideoPlayer extends Component { repeat={false} /> - @@ -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 \ No newline at end of file diff --git a/examples/basic/index.ios.js b/examples/basic/VideoPlayer.ios.tsx similarity index 95% rename from examples/basic/index.ios.js rename to examples/basic/VideoPlayer.ios.tsx index c4c21c3d..de6f328a 100644 --- a/examples/basic/index.ios.js +++ b/examples/basic/VideoPlayer.ios.tsx @@ -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 diff --git a/examples/basic/index.windows.js b/examples/basic/VideoPlayer.windows.tsx similarity index 90% rename from examples/basic/index.windows.js rename to examples/basic/VideoPlayer.windows.tsx index a3d21c6f..4894a8ae 100644 --- a/examples/basic/index.windows.js +++ b/examples/basic/VideoPlayer.windows.tsx @@ -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 diff --git a/examples/basic/android/app/build.gradle b/examples/basic/android/app/build.gradle index dcde52e3..c117dd5a 100644 --- a/examples/basic/android/app/build.gradle +++ b/examples/basic/android/app/build.gradle @@ -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" diff --git a/examples/basic/index.js b/examples/basic/index.js new file mode 100644 index 00000000..d6ecd293 --- /dev/null +++ b/examples/basic/index.js @@ -0,0 +1,5 @@ +import VideoPlayer from './VideoPlayer'; + +import { AppRegistry } from 'react-native'; + +AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer); diff --git a/examples/basic/ios/AppDelegate.m b/examples/basic/ios/AppDelegate.m index 74dbce6d..0e5653a5 100644 --- a/examples/basic/ios/AppDelegate.m +++ b/examples/basic/ios/AppDelegate.m @@ -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"]; diff --git a/examples/basic/ios/VideoPlayer/AppDelegate.m b/examples/basic/ios/VideoPlayer/AppDelegate.m index 6c27cb41..31bf2249 100644 --- a/examples/basic/ios/VideoPlayer/AppDelegate.m +++ b/examples/basic/ios/VideoPlayer/AppDelegate.m @@ -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" diff --git a/examples/basic/ios/main.jsbundle b/examples/basic/ios/main.jsbundle index 4f50ea33..5d7f29bf 100644 --- a/examples/basic/ios/main.jsbundle +++ b/examples/basic/ios/main.jsbundle @@ -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'); diff --git a/examples/basic/package.json b/examples/basic/package.json index 0b6e6292..3d7c9de8 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -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", diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json new file mode 100644 index 00000000..70d85743 --- /dev/null +++ b/examples/basic/tsconfig.json @@ -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" + ] + } \ No newline at end of file diff --git a/examples/basic/windows/VideoPlayer/App.cpp b/examples/basic/windows/VideoPlayer/App.cpp index 9bc4bf46..7630a218 100644 --- a/examples/basic/windows/VideoPlayer/App.cpp +++ b/examples/basic/windows/VideoPlayer/App.cpp @@ -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 diff --git a/examples/basic/windows/VideoPlayer/VideoPlayer.vcxproj b/examples/basic/windows/VideoPlayer/VideoPlayer.vcxproj index 6b91ab55..ebb90852 100644 --- a/examples/basic/windows/VideoPlayer/VideoPlayer.vcxproj +++ b/examples/basic/windows/VideoPlayer/VideoPlayer.vcxproj @@ -152,7 +152,7 @@ - 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 True diff --git a/examples/basic/yarn.lock b/examples/basic/yarn.lock index d9970938..aa10ff13 100644 --- a/examples/basic/yarn.lock +++ b/examples/basic/yarn.lock @@ -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"