fix: move basic sample to typescript

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) {
+    if (this.state.currentTime > 0 && this.state.duration !== 0) {
-      return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
+      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

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) {
+    if (this.state.currentTime > 0 && this.state.duration !== 0) {
-      return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
+      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',
+  },
 });
-
+export default VideoPlayer
-AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer);

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) {
+    if (this.state.currentTime > 0 && this.state.duration !== 0) {
-      return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
+      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',
+  },
 });
-
+export default VideoPlayer
-AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer);

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"

examples/basic/index.js

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

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"];

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"

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');

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",

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"
+    ]
+  }

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

examples/basic/windows/VideoPlayer/VideoPlayer.vcxproj

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

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:
+eme-encryption-scheme-polyfill@^2.0.3:
-  version "2.0.1"
+  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.1.tgz#b080b01bffd74c75c9cf8044c1cabedf3b83954f"
+  resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.4.tgz#7d818302af3f3b19d5974255dcc92dc087413845"
-  integrity sha512-Wz+Ro1c0/2Wsx2RLFvTOO0m4LvYn+7cSnq3XOvRvLLBq8jbvUACH/zpU9s0/5+mQa5oaelkU69x+q0z/iWYrFA==
+  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:
+shaka-player@^3.3.2:
-  version "2.5.18"
+  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-2.5.18.tgz#5382d0b879ade01dc7cea5115d311d2168b7428a"
+  resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-3.3.2.tgz#6c903413d64d0205d2c9672440f041233075e748"
-  integrity sha512-kW6sNMl36E4ookOcAo7//D/+sNkKNw7kBCR58AAC0eYw+fpVXwUbFoN/aqsj5nhACZ00QGQQajTZXZyK1s8Dow==
+  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"