[Video] Remove expo-video, use bluesky-video (#5282)

Co-authored-by: Samuel Newman <[email protected]>

app.config.js

@@ -211,7 +211,6 @@ module.exports = function (config) {
             sounds: PLATFORM === 'ios' ? ['assets/dm.aiff'] : ['assets/dm.mp3'],
           },
         ],
-        'expo-video',
         'react-native-compressor',
         './plugins/starterPackAppClipExtension/withStarterPackAppClip.js',
         './plugins/withAndroidManifestPlugin.js',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.91.0",
+  "version": "1.91.1",
   "private": true,
   "engines": {
     "node": ">=18"
@@ -68,6 +68,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
+    "@haileyok/bluesky-video": "0.1.2",
     "@lingui/react": "^4.5.0",
     "@mattermost/react-native-paste-input": "^0.7.1",
     "@miblanchard/react-native-slider": "^2.3.1",
@@ -139,7 +140,6 @@
     "expo-system-ui": "~3.0.4",
     "expo-task-manager": "~11.8.1",
     "expo-updates": "~0.25.14",
-    "expo-video": "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-2.tgz",
     "expo-web-browser": "~13.0.3",
     "fast-text-encoding": "^1.0.6",
     "history": "^5.3.0",

src/App.native.tsx

@@ -52,7 +52,6 @@ import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
 import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
 import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
 import {TestCtrls} from '#/view/com/testing/TestCtrls'
-import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoNativeContext'
 import * as Toast from '#/view/com/util/Toast'
 import {Shell} from '#/view/shell'
 import {ThemeProvider as Alf} from '#/alf'
@@ -63,7 +62,6 @@ import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialo
 import {Provider as PortalProvider} from '#/components/Portal'
 import {Splash} from '#/Splash'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
-import {AudioCategory, PlatformInfo} from '../modules/expo-bluesky-swiss-army'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -110,45 +108,42 @@ function InnerApp() {
     <Alf theme={theme}>
       <ThemeProvider theme={theme}>
         <Splash isReady={isReady && hasCheckedReferrer}>
-          <ActiveVideoProvider>
-            <RootSiblingParent>
-              <React.Fragment
-                // Resets the entire tree below when it changes:
-                key={currentAccount?.did}>
-                <QueryProvider currentDid={currentAccount?.did}>
-                  <StatsigProvider>
-                    <MessagesProvider>
-                      {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                      <LabelDefsProvider>
-                        <ModerationOptsProvider>
-                          <LoggedOutViewProvider>
-                            <SelectedFeedProvider>
-                              <HiddenRepliesProvider>
-                                <UnreadNotifsProvider>
-                                  <BackgroundNotificationPreferencesProvider>
-                                    <MutedThreadsProvider>
-                                      <ProgressGuideProvider>
-                                        <GestureHandlerRootView
-                                          style={s.h100pct}>
-                                          <TestCtrls />
-                                          <Shell />
-                                          <NuxDialogs />
-                                        </GestureHandlerRootView>
-                                      </ProgressGuideProvider>
-                                    </MutedThreadsProvider>
-                                  </BackgroundNotificationPreferencesProvider>
-                                </UnreadNotifsProvider>
-                              </HiddenRepliesProvider>
-                            </SelectedFeedProvider>
-                          </LoggedOutViewProvider>
-                        </ModerationOptsProvider>
-                      </LabelDefsProvider>
-                    </MessagesProvider>
-                  </StatsigProvider>
-                </QueryProvider>
-              </React.Fragment>
-            </RootSiblingParent>
-          </ActiveVideoProvider>
+          <RootSiblingParent>
+            <React.Fragment
+              // Resets the entire tree below when it changes:
+              key={currentAccount?.did}>
+              <QueryProvider currentDid={currentAccount?.did}>
+                <StatsigProvider>
+                  <MessagesProvider>
+                    {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                    <LabelDefsProvider>
+                      <ModerationOptsProvider>
+                        <LoggedOutViewProvider>
+                          <SelectedFeedProvider>
+                            <HiddenRepliesProvider>
+                              <UnreadNotifsProvider>
+                                <BackgroundNotificationPreferencesProvider>
+                                  <MutedThreadsProvider>
+                                    <ProgressGuideProvider>
+                                      <GestureHandlerRootView style={s.h100pct}>
+                                        <TestCtrls />
+                                        <Shell />
+                                        <NuxDialogs />
+                                      </GestureHandlerRootView>
+                                    </ProgressGuideProvider>
+                                  </MutedThreadsProvider>
+                                </BackgroundNotificationPreferencesProvider>
+                              </UnreadNotifsProvider>
+                            </HiddenRepliesProvider>
+                          </SelectedFeedProvider>
+                        </LoggedOutViewProvider>
+                      </ModerationOptsProvider>
+                    </LabelDefsProvider>
+                  </MessagesProvider>
+                </StatsigProvider>
+              </QueryProvider>
+            </React.Fragment>
+          </RootSiblingParent>
         </Splash>
       </ThemeProvider>
     </Alf>
@@ -159,8 +154,6 @@ function App() {
   const [isReady, setReady] = useState(false)
 
   React.useEffect(() => {
-    PlatformInfo.setAudioCategory(AudioCategory.Ambient)
-    PlatformInfo.setAudioActive(false)
     initPersistedState().then(() => setReady(true))
   }, [])
 

src/components/video/PlayButtonIcon.tsx

@@ -4,7 +4,7 @@ import {View} from 'react-native'
 import {atoms as a, useTheme} from '#/alf'
 import {Play_Filled_Corner0_Rounded as PlayIcon} from '#/components/icons/Play'
 
-export function PlayButtonIcon({size = 36}: {size?: number}) {
+export function PlayButtonIcon({size = 32}: {size?: number}) {
   const t = useTheme()
   const bg = t.name === 'light' ? t.palette.contrast_25 : t.palette.contrast_975
   const fg = t.name === 'light' ? t.palette.contrast_975 : t.palette.contrast_25

src/view/com/composer/videos/VideoPreview.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-shadow */
 import React from 'react'
 import {View} from 'react-native'
 import {ImagePickerAsset} from 'expo-image-picker'
-import {useVideoPlayer, VideoView} from 'expo-video'
+import {BlueskyVideoView} from '@haileyok/bluesky-video'
 
 import {CompressedVideo} from '#/lib/media/video/types'
 import {clamp} from '#/lib/numbers'
@@ -22,15 +21,8 @@ export function VideoPreview({
   clear: () => void
 }) {
   const t = useTheme()
+  const playerRef = React.useRef<BlueskyVideoView>(null)
   const autoplayDisabled = useAutoplayDisabled()
-  const player = useVideoPlayer(video.uri, player => {
-    player.loop = true
-    player.muted = true
-    if (!autoplayDisabled) {
-      player.play()
-    }
-  })
-
   let aspectRatio = asset.width / asset.height
 
   if (isNaN(aspectRatio)) {
@@ -50,12 +42,12 @@ export function VideoPreview({
         t.atoms.border_contrast_low,
         {backgroundColor: 'black'},
       ]}>
-      <VideoView
-        player={player}
-        style={a.flex_1}
-        allowsPictureInPicture={false}
-        nativeControls={false}
-        contentFit="contain"
+      <BlueskyVideoView
+        url={video.uri}
+        autoplay={autoplayDisabled}
+        beginMuted={true}
+        forceTakeover={true}
+        ref={playerRef}
       />
       <ExternalEmbedRemoveBtn onRemove={clear} />
       {autoplayDisabled && (

src/view/com/util/List.tsx

@@ -1,14 +1,14 @@
 import React, {memo} from 'react'
 import {FlatListProps, RefreshControl, ViewToken} from 'react-native'
 import {runOnJS, useSharedValue} from 'react-native-reanimated'
+import {updateActiveVideoViewAsync} from '@haileyok/bluesky-video'
 
 import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useScrollHandlers} from '#/lib/ScrollContext'
 import {useDedupe} from 'lib/hooks/useDedupe'
 import {addStyle} from 'lib/styles'
 import {isIOS} from 'platform/detection'
-import {updateActiveViewAsync} from '../../../../modules/expo-bluesky-swiss-army/src/VisibilityView'
 import {FlatList_INTERNAL} from './Views'
 
 export type ListMethods = FlatList_INTERNAL
@@ -69,7 +69,7 @@ function ListImpl<ItemT>(
       onBeginDragFromContext?.(e, ctx)
     },
     onEndDrag(e, ctx) {
-      runOnJS(updateActiveViewAsync)()
+      runOnJS(updateActiveVideoViewAsync)()
       onEndDragFromContext?.(e, ctx)
     },
     onScroll(e, ctx) {
@@ -84,13 +84,13 @@ function ListImpl<ItemT>(
       }
 
       if (isIOS) {
-        runOnJS(dedupe)(updateActiveViewAsync)
+        runOnJS(dedupe)(updateActiveVideoViewAsync)
       }
     },
     // Note: adding onMomentumBegin here makes simulator scroll
     // lag on Android. So either don't add it, or figure out why.
     onMomentumEnd(e, ctx) {
-      runOnJS(updateActiveViewAsync)()
+      runOnJS(updateActiveVideoViewAsync)()
       onMomentumEndFromContext?.(e, ctx)
     },
   })