[Video] Visibility detection view (#4741)

Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>

3 files changed, 55 insertions, 0 deletions

diff --git a/modules/expo-bluesky-swiss-army/src/VisibilityView/index.native.tsx b/modules/expo-bluesky-swiss-army/src/VisibilityView/index.native.tsx
new file mode 100644
index 000000000..9d0e8cf22
--- /dev/null
+++ b/modules/expo-bluesky-swiss-army/src/VisibilityView/index.native.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import {StyleProp, ViewStyle} from 'react-native'
+import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core'
+
+import {VisibilityViewProps} from './types'
+const NativeView: React.ComponentType<{
+  onChangeStatus: (e: {nativeEvent: {isActive: boolean}}) => void
+  children: React.ReactNode
+  enabled: Boolean
+  style: StyleProp<ViewStyle>
+}> = requireNativeViewManager('ExpoBlueskyVisibilityView')
+
+const NativeModule = requireNativeModule('ExpoBlueskyVisibilityView')
+
+export async function updateActiveViewAsync() {
+  await NativeModule.updateActiveViewAsync()
+}
+
+export default function VisibilityView({
+  children,
+  onChangeStatus: onChangeStatusOuter,
+  enabled,
+}: VisibilityViewProps) {
+  const onChangeStatus = React.useCallback(
+    (e: {nativeEvent: {isActive: boolean}}) => {
+      onChangeStatusOuter(e.nativeEvent.isActive)
+    },
+    [onChangeStatusOuter],
+  )
+
+  return (
+    <NativeView
+      onChangeStatus={onChangeStatus}
+      enabled={enabled}
+      style={{flex: 1}}>
+      {children}
+    </NativeView>
+  )
+}
diff --git a/modules/expo-bluesky-swiss-army/src/VisibilityView/index.tsx b/modules/expo-bluesky-swiss-army/src/VisibilityView/index.tsx
new file mode 100644
index 000000000..8b4f1928c
--- /dev/null
+++ b/modules/expo-bluesky-swiss-army/src/VisibilityView/index.tsx
@@ -0,0 +1,10 @@
+import {NotImplementedError} from '../NotImplemented'
+import {VisibilityViewProps} from './types'
+
+export async function updateActiveViewAsync() {
+  throw new NotImplementedError()
+}
+
+export default function VisibilityView({children}: VisibilityViewProps) {
+  return children
+}
diff --git a/modules/expo-bluesky-swiss-army/src/VisibilityView/types.ts b/modules/expo-bluesky-swiss-army/src/VisibilityView/types.ts
new file mode 100644
index 000000000..312acf2d2
--- /dev/null
+++ b/modules/expo-bluesky-swiss-army/src/VisibilityView/types.ts
@@ -0,0 +1,6 @@
+import React from 'react'
+export interface VisibilityViewProps {
+  children: React.ReactNode
+  onChangeStatus: (isActive: boolean) => void
+  enabled: boolean
+}