Added xaml support and upgrading to Turbo Module for windows

examples/bare/metro.config.js

@@ -16,7 +16,10 @@ module.exports = makeMetroConfig({
     extraNodeModules: {
       common: path.resolve(__dirname, '../common'),
       'react-native-video': path.resolve(__dirname, '../../lib/'),
-      '@react-native-picker/picker': path.resolve(__dirname, 'node_modules/@react-native-picker/picker'),
+      '@react-native-picker/picker': path.resolve(
+        __dirname,
+        'node_modules/@react-native-picker/picker',
+      ),
     },
   },
   watchFolders: [

examples/bare/react-native.config.js

@@ -1,16 +1,16 @@
 const project = (() => {
   try {
-    const { configureProjects } = require("react-native-test-app");
+    const {configureProjects} = require('react-native-test-app');
     return configureProjects({
       android: {
-        sourceDir: "android",
+        sourceDir: 'android',
       },
       ios: {
-        sourceDir: "ios",
+        sourceDir: 'ios',
       },
       windows: {
-        sourceDir: "windows",
-        solutionFile: "windows/BareExample.sln",
+        sourceDir: 'windows',
+        solutionFile: 'windows/BareExample.sln',
       },
     });
   } catch (_) {
@@ -19,5 +19,5 @@ const project = (() => {
 })();
 
 module.exports = {
-  ...(project ? { project } : undefined),
+  ...(project ? {project} : undefined),
 };

examples/common/BasicExample.windows.tsx

@@ -56,7 +56,8 @@ class VideoPlayer extends Component {
       <TouchableOpacity
         onPress={() => {
           this.setState({rate: rate});
-        }}>
+        }}
+      >
         <Text style={style}>{rate}x</Text>
       </TouchableOpacity>
     );
@@ -73,7 +74,8 @@ class VideoPlayer extends Component {
       <TouchableOpacity
         onPress={() => {
           this.setState({resizeMode: resizeMode});
-        }}>
+        }}
+      >
         <Text style={style}>{resizeMode}</Text>
       </TouchableOpacity>
     );
@@ -90,7 +92,8 @@ class VideoPlayer extends Component {
       <TouchableOpacity
         onPress={() => {
           this.setState({volume: volume});
-        }}>
+        }}
+      >
         <Text style={style}>{volume * 100}%</Text>
       </TouchableOpacity>
     );
@@ -106,7 +109,8 @@ class VideoPlayer extends Component {
           style={styles.fullScreen}
           onPress={() => {
             this.setState({paused: !this.state.paused});
-          }}>
+          }}
+        >
           <Video
             source={require('./assets/videos/broadchurch.mp4')}
             style={styles.fullScreen}

examples/common/components/AudioTracksSelector.tsx

@@ -33,7 +33,8 @@ export const AudioTrackSelector = ({
             console.log('on audio value change ' + itemValue);
             onValueChange(itemValue);
           }
-        }}>
+        }}
+      >
         {audioTracks?.length <= 0 ? (
           <Picker.Item label={'empty'} value={'empty'} key={'empty'} />
         ) : (

examples/common/components/MultiValueControl.tsx

@@ -38,14 +38,15 @@ export const MultiValueControl = <T extends number | string | ResizeMode>({
 
   return (
     <View style={styles.container}>
-      {values.map(value => {
+      {values.map((value) => {
         const _style = value === selected ? selectedStyle : unselectedStyle;
         return (
           <TouchableOpacity
             key={value}
             onPress={() => {
               onPress?.(value);
-            }}>
+            }}
+          >
             <Text style={_style}>{value}</Text>
           </TouchableOpacity>
         );

examples/common/components/Overlay.tsx

@@ -139,18 +139,18 @@ const _Overlay = forwardRef<VideoRef, Props>((props, ref) => {
   }, []);
 
   const toggleFullscreen = () => {
-    setFullscreen(prev => !prev);
+    setFullscreen((prev) => !prev);
   };
   const toggleControls = () => {
-    setControls(prev => !prev);
+    setControls((prev) => !prev);
   };
 
   const openDecoration = () => {
     typeof ref !== 'function' && ref?.current?.setFullScreen(true);
   };
 
   const toggleShowNotificationControls = () => {
-    setShowNotificationControls(prev => !prev);
+    setShowNotificationControls((prev) => !prev);
   };
 
   const onSelectedAudioTrackChange = (itemValue: string | number) => {
@@ -200,15 +200,15 @@ const _Overlay = forwardRef<VideoRef, Props>((props, ref) => {
     setResizeMode(value);
   };
 
-  const toggleCache = () => setUseCache(prev => !prev);
+  const toggleCache = () => setUseCache((prev) => !prev);
 
-  const togglePause = () => setPaused(prev => !prev);
+  const togglePause = () => setPaused((prev) => !prev);
 
-  const toggleRepeat = () => setRepeat(prev => !prev);
+  const toggleRepeat = () => setRepeat((prev) => !prev);
 
-  const togglePoster = () => setShowPoster(prev => !prev);
+  const togglePoster = () => setShowPoster((prev) => !prev);
 
-  const toggleMuted = () => setMuted(prev => !prev);
+  const toggleMuted = () => setMuted((prev) => !prev);
 
   return (
     <>
@@ -318,7 +318,7 @@ const _Overlay = forwardRef<VideoRef, Props>((props, ref) => {
               currentTime={currentTime}
               duration={duration}
               isLoading={isLoading}
-              videoSeek={prop => videoSeek(prop)}
+              videoSeek={(prop) => videoSeek(prop)}
               isUISeeking={isSeeking}
             />
             <View style={styles.generalControls}>

examples/common/components/Seeker.tsx

@@ -137,11 +137,13 @@ export const Seeker = ({
     <View
       style={styles.seekbarContainer}
       {...seekPanResponder.panHandlers}
-      {...styles.generalControls}>
+      {...styles.generalControls}
+    >
       <View
         style={styles.seekbarTrack}
-        onLayout={event => setSeekerWidth(event.nativeEvent.layout.width)}
-        pointerEvents={'none'}>
+        onLayout={(event) => setSeekerWidth(event.nativeEvent.layout.width)}
+        pointerEvents={'none'}
+      >
         <View style={seekerStyle} pointerEvents={'none'} />
       </View>
       <View style={seekerPositionStyle} pointerEvents={'none'}>

examples/common/components/TextTracksSelector.tsx

@@ -32,7 +32,8 @@ export const TextTrackSelector = ({
           if (itemValue !== 'empty') {
             onValueChange(itemValue);
           }
-        }}>
+        }}
+      >
         {textTracks?.length <= 0 ? (
           <Picker.Item label={'empty'} value={'empty'} key={'empty'} />
         ) : (

examples/common/components/TopControl.tsx

@@ -25,7 +25,8 @@ const _TopControl: FC<Props> = ({
         <TouchableOpacity
           onPress={() => {
             toggleControls();
-          }}>
+          }}
+        >
           <Text style={styles.leftRightControlOption}>
             {showRNVControls ? 'Hide controls' : 'Show controls'}
           </Text>

examples/common/components/VideoTracksSelector.tsx

@@ -31,18 +31,19 @@ export const VideoTrackSelector = ({
             ? 'auto'
             : `${selectedVideoTrack?.value}`
         }
-        onValueChange={itemValue => {
+        onValueChange={(itemValue) => {
           if (itemValue !== 'empty') {
             onValueChange(itemValue);
           }
-        }}>
+        }}
+      >
         <Picker.Item label={'auto'} value={'auto'} key={'auto'} />
         {videoTracks?.length <= 0 || videoTracks?.length <= 0 ? (
           <Picker.Item label={'empty'} value={'empty'} key={'empty'} />
         ) : (
           <Picker.Item label={'none'} value={'none'} key={'none'} />
         )}
-        {videoTracks?.map(track => {
+        {videoTracks?.map((track) => {
           if (!track) {
             return;
           }

examples/expo/metro.config.js

@@ -27,7 +27,11 @@ const pak = require('../../package.json');
 const modules = Object.keys({...pak.peerDependencies});
 
 // Watch the
-config.watchFolders = [repoRoot, path.resolve(projectRoot, '../..'), path.resolve(projectRoot, '../common')];
+config.watchFolders = [
+  repoRoot,
+  path.resolve(projectRoot, '../..'),
+  path.resolve(projectRoot, '../common'),
+];
 
 // Add the root node_modules to the resolver's search path
 config.resolver.nodeModulesPaths = [
@@ -42,7 +46,10 @@ config.resolver.extraNodeModules = modules.reduce((acc, name) => {
   return acc;
 }, {});
 
-config.resolver.extraNodeModules = {...config.resolver.extraNodeModules, 'common': path.resolve(projectRoot, '../common')}
+config.resolver.extraNodeModules = {
+  ...config.resolver.extraNodeModules,
+  common: path.resolve(projectRoot, '../common'),
+};
 
 // We need to make sure that only one version is loaded for peerDependencies
 // So we block them at the root, and alias them to the versions in example's node_modules