Merge pull request #212 from moskalakamil/perf/optimize-rerenders

perf: optimize rerenders
TheWidlarzGroup · Jan 22, 2025 · 8aaa5a6 · 8aaa5a6
2 parents 7d89296 + 1aa9554
commit 8aaa5a6
Show file tree

Hide file tree

Showing 16 changed files with 1,514 additions and 742 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -11,7 +11,15 @@ body:
   - type: input
     id: version
     attributes:
-      label: Version
+      label: Version of react-native-video-player
+      description: What version are you using? Put the exact version from your package.json
+    validations:
+      required: true
+
+  - type: input
+    id: rnv-version
+    attributes:
+      label: Version of react-native-video
       description: What version are you using? Put the exact version from your package.json
     validations:
       required: true

diff --git a/.github/scripts/validate.js b/.github/scripts/validate.js
@@ -54,7 +54,7 @@ const MESSAGE = {
 const checkLatestVersion = async () => {
   try {
     const response = await fetch(
-      'https://registry.npmjs.org/react-native-video/latest'
+      'https://registry.npmjs.org/react-native-video-player/latest'
     );
     const data = await response.json();
     return data.version;

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -970,6 +970,29 @@ PODS:
   - React-Mapbuffer (0.74.5):
     - glog
     - React-debug
+  - react-native-skia (1.5.10):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React
+    - React-callinvoker
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-video (6.8.0):
     - DoubleConversion
     - glog
@@ -1242,6 +1265,93 @@ PODS:
     - React-logger (= 0.74.5)
     - React-perflogger (= 0.74.5)
     - React-utils (= 0.74.5)
+  - RNReanimated (3.16.6):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated (= 3.16.6)
+    - RNReanimated/worklets (= 3.16.6)
+    - Yoga
+  - RNReanimated/reanimated (3.16.6):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated/apple (= 3.16.6)
+    - Yoga
+  - RNReanimated/reanimated/apple (3.16.6):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNReanimated/worklets (3.16.6):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SocketRocket (0.7.0)
   - Yoga (0.0.0)
 
@@ -1285,6 +1395,7 @@ DEPENDENCIES:
   - React-jsitracing (from `../node_modules/react-native/ReactCommon/hermes/executor/`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
+  - "react-native-skia (from `../node_modules/@shopify/react-native-skia`)"
   - react-native-video (from `../node_modules/react-native-video`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1309,6 +1420,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNReanimated (from `../../node_modules/react-native-reanimated`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1391,6 +1503,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   React-Mapbuffer:
     :path: "../node_modules/react-native/ReactCommon"
+  react-native-skia:
+    :path: "../node_modules/@shopify/react-native-skia"
   react-native-video:
     :path: "../node_modules/react-native-video"
   React-nativeconfig:
@@ -1439,6 +1553,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNReanimated:
+    :path: "../../node_modules/react-native-reanimated"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1480,6 +1596,7 @@ SPEC CHECKSUMS:
   React-jsitracing: 3b6060bbf5317663667e1dd93560c7943ab86ccc
   React-logger: 257858bd55f3a4e1bc0cf07ddc8fb9faba6f8c7c
   React-Mapbuffer: 6c1cacdbf40b531f549eba249e531a7d0bfd8e7f
+  react-native-skia: 6e137273ac478a9c840b45ca53b7a248f9103fe2
   react-native-video: 854c3152eedf203fdbd5fea46298a307885061bf
   React-nativeconfig: ba9a2e54e2f0882cf7882698825052793ed4c851
   React-NativeModulesApple: 8d11ff8955181540585c944cf48e9e7236952697
@@ -1504,6 +1621,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: cfbe85c3510c541ec6dc815c7729b41304b67961
   React-utils: f242eb7e7889419d979ca0e1c02ccc0ea6e43b29
   ReactCommon: f7da14a8827b72704169a48c929bcde802698361
+  RNReanimated: 89f50dfc59d679f39debe0b00ccdb928dc655cb3
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 950bbfd7e6f04790fdb51149ed51df41f329fcc8
 

diff --git a/example/package.json b/example/package.json
@@ -10,13 +10,16 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~3.2.3",
+    "@shopify/react-native-skia": "^1.5.10",
     "expo": "~51.0.28",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
+    "react-native-reanimated": "^3.16.6",
     "react-native-video": "6.8.0",
-    "react-native-web": "~0.19.10"
+    "react-native-web": "~0.19.10",
+    "react-scan": "native"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -6,61 +6,69 @@ import {
   SafeAreaView,
   ActivityIndicator,
   StyleSheet,
+  Platform,
 } from 'react-native';
 import VideoPlayer, { type VideoPlayerRef } from 'react-native-video-player';
+import { ReactScan } from 'react-scan/native';
 
 const App = () => {
   const playerRef = useRef<VideoPlayerRef>(null);
   const progress = useRef(0);
 
   return (
     <SafeAreaView>
-      <Text style={{ fontSize: 22, marginTop: 22 }}>
-        React Native Video Player
-      </Text>
-      <VideoPlayer
-        endWithThumbnail
-        thumbnail={{
-          uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
+      <ReactScan
+        options={{
+          enabled: Platform.OS === 'ios',
         }}
-        // pauseOnPress={true}
-        // autoplay={true}
-        // repeat={true}
-        source={{
-          uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-        }}
-        renderLoader={() => (
-          <View
-            style={{
-              flex: 1,
-              backgroundColor: 'black',
-              justifyContent: 'center',
-            }}
-          >
-            <ActivityIndicator size={'large'} />
-          </View>
-        )}
-        controlsTimeout={2000}
-        onProgress={({ currentTime }) => {
-          progress.current = currentTime;
-        }}
-        onError={(e) => console.log(e)}
-        showDuration={true}
-        ref={playerRef}
-      />
-      <View style={styles.btnContainer}>
-        <Button onPress={() => playerRef.current?.stop()} title="Stop" />
-        <Button onPress={() => playerRef.current?.pause()} title="Pause" />
-        <Button onPress={() => playerRef.current?.resume()} title="Resume" />
-        <Button
-          onPress={() => playerRef.current?.seek(progress.current + 10)}
-          title="Seek"
-        />
-        <Button
-          onPress={() => playerRef.current?.setFullScreen(true)}
-          title="Open fullscreen"
+      >
+        <Text style={{ fontSize: 22, marginTop: 22 }}>
+          React Native Video Player
+        </Text>
+        <VideoPlayer
+          endWithThumbnail
+          thumbnail={{
+            uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
+          }}
+          // pauseOnPress={true}
+          // autoplay={true}
+          // repeat={true}
+          source={{
+            uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+          }}
+          renderLoader={() => (
+            <View
+              style={{
+                flex: 1,
+                backgroundColor: 'black',
+                justifyContent: 'center',
+              }}
+            >
+              <ActivityIndicator size={'large'} />
+            </View>
+          )}
+          controlsTimeout={2000}
+          onProgress={({ currentTime }) => {
+            progress.current = currentTime;
+          }}
+          onError={(e) => console.log(e)}
+          showDuration={true}
+          ref={playerRef}
         />
-      </View>
+        <View style={styles.btnContainer}>
+          <Button onPress={() => playerRef.current?.stop()} title="Stop" />
+          <Button onPress={() => playerRef.current?.pause()} title="Pause" />
+          <Button onPress={() => playerRef.current?.resume()} title="Resume" />
+          <Button
+            onPress={() => playerRef.current?.seek(progress.current + 10)}
+            title="Seek"
+          />
+          <Button
+            onPress={() => playerRef.current?.setFullScreen(true)}
+            title="Open fullscreen"
+          />
+        </View>
+      </ReactScan>
     </SafeAreaView>
   );
 };