feat: Completely refactor the FrameProcessorPlugins.ts file into mu…

…ltiple files (#2830) * feat: Completely refactor the `FrameProcessorPlugins.ts` file into multiple files * Refactor * Prepare * Update some docs * fix: Fix invalid `options` param (undefined) * Update FRAME_PROCESSORS_CREATE_OVERVIEW.mdx
mrousavy · May 1, 2024 · 2e2d9b4 · 2e2d9b4
1 parent e75bb9f
commit 2e2d9b4
Show file tree

Hide file tree

Showing 18 changed files with 378 additions and 307 deletions.
diff --git a/docs/docs/guides/FRAME_PROCESSORS_CREATE_OVERVIEW.mdx b/docs/docs/guides/FRAME_PROCESSORS_CREATE_OVERVIEW.mdx
@@ -64,7 +64,7 @@ Returns a `string` in JS:
 ```js
 export function detectObject(frame: Frame): string {
   'worklet'
-  const result = FrameProcessorPlugins.detectObject(frame)
+  const result = detectObject(frame)
   console.log(result) // <-- "cat"
 }
 ```

diff --git a/docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx b/docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx
@@ -9,9 +9,9 @@ sidebar_label: Finish creating your Frame Processor Plugin
 To make the Frame Processor Plugin available to the Frame Processor Worklet Runtime, create the following wrapper function in JS/TS:
 
 ```ts
-import { VisionCameraProxy, Frame } from 'react-native-vision-camera'
+import { initFrameProcessorPlugin, Frame } from 'react-native-vision-camera'
 
-const plugin = VisionCameraProxy.initFrameProcessorPlugin('scanFaces')
+const plugin = initFrameProcessorPlugin('scanFaces')
 
 /**
  * Scans faces.

diff --git a/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_ANDROID.mdx b/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_ANDROID.mdx
@@ -109,7 +109,7 @@ public class FaceDetectorFrameProcessorPluginPackage implements ReactPackage {
 ```
 
 :::note
-The Frame Processor Plugin will be exposed to JS through the `VisionCameraProxy` object. In this case, it would be `VisionCameraProxy.initFrameProcessorPlugin("detectFaces")`.
+The Frame Processor Plugin can be initialized from JavaScript using `initFrameProcessorPlugin("detectFaces")`.
 :::
 
 6. Register the package in MainApplication.java
@@ -181,7 +181,7 @@ class FaceDetectorFrameProcessorPluginPackage : ReactPackage {
 ```
 
 :::note
-The Frame Processor Plugin will be exposed to JS through the `VisionCameraProxy` object. In this case, it would be `VisionCameraProxy.initFrameProcessorPlugin("detectFaces")`.
+The Frame Processor Plugin can be initialized from JavaScript using `initFrameProcessorPlugin("detectFaces")`.
 :::
 
 6. Register the package in MainApplication.java

diff --git a/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_IOS.mdx b/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_IOS.mdx
@@ -72,7 +72,7 @@ VISION_EXPORT_FRAME_PROCESSOR(FaceDetectorFrameProcessorPlugin, detectFaces)
 ```
 
 :::note
-The Frame Processor Plugin will be exposed to JS through the `VisionCameraProxy` object. In this case, it would be `VisionCameraProxy.initFrameProcessorPlugin("detectFaces")`.
+The Frame Processor Plugin can be initialized from JavaScript using `initFrameProcessorPlugin("detectFaces")`.
 :::
 
 4. **Implement your Frame Processing.** See the [Example Plugin (Objective-C)](https://github.com/mrousavy/react-native-vision-camera/blob/main/package/example/ios/FrameProcessors%20Plugins/Example%20Plugin/ExampleFrameProcessorPlugin.m) for reference.

diff --git a/package/example/src/frame-processors/ExampleKotlinSwiftPlugin.ts b/package/example/src/frame-processors/ExampleKotlinSwiftPlugin.ts
@@ -1,7 +1,7 @@
 import type { Frame } from 'react-native-vision-camera'
-import { VisionCameraProxy } from 'react-native-vision-camera'
+import { initFrameProcessorPlugin } from 'react-native-vision-camera'
 
-const plugin = VisionCameraProxy.initFrameProcessorPlugin('example_kotlin_swift_plugin', { foo: 'bar' })
+const plugin = initFrameProcessorPlugin('example_kotlin_swift_plugin', { foo: 'bar' })
 
 export function exampleKotlinSwiftPlugin(frame: Frame): string[] {
   'worklet'

diff --git a/package/example/src/frame-processors/ExamplePlugin.ts b/package/example/src/frame-processors/ExamplePlugin.ts
@@ -1,7 +1,7 @@
 import type { Frame } from 'react-native-vision-camera'
-import { VisionCameraProxy } from 'react-native-vision-camera'
+import { initFrameProcessorPlugin } from 'react-native-vision-camera'
 
-const plugin = VisionCameraProxy.initFrameProcessorPlugin('example_plugin')
+const plugin = initFrameProcessorPlugin('example_plugin')
 
 interface Result {
   example_array: (string | number | boolean)[]

diff --git a/package/src/Camera.tsx b/package/src/Camera.tsx
@@ -8,7 +8,7 @@ import { CameraModule } from './NativeCameraModule'
 import type { PhotoFile, TakePhotoOptions } from './types/PhotoFile'
 import type { Point } from './types/Point'
 import type { RecordVideoOptions, VideoFile } from './types/VideoFile'
-import { VisionCameraProxy } from './FrameProcessorPlugins'
+import { VisionCameraProxy } from './frame-processors/VisionCameraProxy'
 import { CameraDevices } from './CameraDevices'
 import type { EmitterSubscription, NativeSyntheticEvent, NativeMethods } from 'react-native'
 import type { TakeSnapshotOptions } from './types/Snapshot'

diff --git a/package/src/FrameProcessorPlugins.ts b/package/src/FrameProcessorPlugins.ts
diff --git a/package/src/frame-processors/FrameProcessorsUnavailableError.ts b/package/src/frame-processors/FrameProcessorsUnavailableError.ts
@@ -0,0 +1,11 @@
+import { CameraRuntimeError } from '../CameraError'
+
+export class FrameProcessorsUnavailableError extends CameraRuntimeError {
+  constructor(reason: unknown) {
+    super(
+      'system/frame-processors-unavailable',
+      'Frame Processors are not available, react-native-worklets-core is not installed! ' +
+        `Error: ${reason instanceof Error ? reason.message : reason}`,
+    )
+  }
+}