about summary refs log tree commit diff
diff options
context:
space:
mode:
-rw-r--r--package.json2
-rw-r--r--src/components/StarterPack/Main/ProfilesList.tsx2
-rw-r--r--src/components/video/PlayButtonIcon.tsx35
-rw-r--r--src/view/com/composer/videos/VideoPreview.tsx2
-rw-r--r--src/view/com/composer/videos/VideoPreview.web.tsx2
-rw-r--r--src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx15
-rw-r--r--src/view/com/util/post-embeds/VideoEmbed.tsx2
-rw-r--r--src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx4
-rw-r--r--src/view/shell/index.tsx25
-rw-r--r--yarn.lock4
10 files changed, 77 insertions, 16 deletions
diff --git a/package.json b/package.json
index 3f9f0bced..eff665a64 100644
--- a/package.json
+++ b/package.json
@@ -139,7 +139,7 @@
     "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-1.tgz",
+    "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",
diff --git a/src/components/StarterPack/Main/ProfilesList.tsx b/src/components/StarterPack/Main/ProfilesList.tsx
index 6174bff02..a5c7cd1b7 100644
--- a/src/components/StarterPack/Main/ProfilesList.tsx
+++ b/src/components/StarterPack/Main/ProfilesList.tsx
@@ -40,7 +40,7 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
     ref,
   ) {
     const t = useTheme()
-    const bottomBarOffset = useBottomBarOffset(200)
+    const bottomBarOffset = useBottomBarOffset(300)
     const initialNumToRender = useInitialNumToRender()
     const {currentAccount} = useSession()
     const {data, refetch, isError} = useAllListMembersQuery(listUri)
diff --git a/src/components/video/PlayButtonIcon.tsx b/src/components/video/PlayButtonIcon.tsx
index 5415084ff..90e93f744 100644
--- a/src/components/video/PlayButtonIcon.tsx
+++ b/src/components/video/PlayButtonIcon.tsx
@@ -2,24 +2,47 @@ import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'
-import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
+import {Play_Filled_Corner0_Rounded as PlayIcon} from '#/components/icons/Play'
 
-export function PlayButtonIcon({size = 44}: {size?: number}) {
+export function PlayButtonIcon({size = 36}: {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
 
   return (
     <View
       style={[
         a.rounded_full,
+        a.overflow_hidden,
         a.align_center,
         a.justify_center,
+        t.atoms.shadow_lg,
         {
-          backgroundColor: t.palette.primary_500,
-          width: size + 16,
-          height: size + 16,
+          width: size + size / 1.5,
+          height: size + size / 1.5,
         },
       ]}>
-      <PlayIcon height={size} width={size} style={{color: 'white'}} />
+      <View
+        style={[
+          a.absolute,
+          a.inset_0,
+          {
+            backgroundColor: bg,
+            opacity: 0.7,
+          },
+        ]}
+      />
+      <PlayIcon
+        width={size}
+        fill={fg}
+        style={[
+          a.relative,
+          a.z_10,
+          {
+            left: size / 50,
+          },
+        ]}
+      />
     </View>
   )
 }
diff --git a/src/view/com/composer/videos/VideoPreview.tsx b/src/view/com/composer/videos/VideoPreview.tsx
index 28b46bae2..60b467d62 100644
--- a/src/view/com/composer/videos/VideoPreview.tsx
+++ b/src/view/com/composer/videos/VideoPreview.tsx
@@ -60,7 +60,7 @@ export function VideoPreview({
       <ExternalEmbedRemoveBtn onRemove={clear} />
       {autoplayDisabled && (
         <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
-          <PlayButtonIcon size={48} />
+          <PlayButtonIcon />
         </View>
       )}
     </View>
diff --git a/src/view/com/composer/videos/VideoPreview.web.tsx b/src/view/com/composer/videos/VideoPreview.web.tsx
index 9473be074..b8fd15950 100644
--- a/src/view/com/composer/videos/VideoPreview.web.tsx
+++ b/src/view/com/composer/videos/VideoPreview.web.tsx
@@ -83,7 +83,7 @@ export function VideoPreview({
       />
       {autoplayDisabled && (
         <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
-          <PlayButtonIcon size={48} />
+          <PlayButtonIcon />
         </View>
       )}
     </View>
diff --git a/src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx b/src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx
index da8c7a98c..95fa0bb0e 100644
--- a/src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx
+++ b/src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {useVideoPlayer, VideoPlayer} from 'expo-video'
 
-import {isNative} from '#/platform/detection'
+import {isAndroid, isNative} from '#/platform/detection'
 
 const Context = React.createContext<{
   activeSource: string
@@ -26,7 +26,18 @@ export function Provider({children}: {children: React.ReactNode}) {
   })
 
   const setActiveSourceOuter = (src: string | null, viewId: string | null) => {
-    setActiveSource(src ? src : '')
+    // HACK
+    // expo-video doesn't like it when you try and move a `player` to another `VideoView`. Instead, we need to actually
+    // unregister that player to let the new screen register it. This is only a problem on Android, so we only need to
+    // apply it there.
+    if (src === activeSource && isAndroid) {
+      setActiveSource('')
+      setTimeout(() => {
+        setActiveSource(src ? src : '')
+      }, 100)
+    } else {
+      setActiveSource(src ? src : '')
+    }
     setActiveViewId(viewId ? viewId : '')
   }
 
diff --git a/src/view/com/util/post-embeds/VideoEmbed.tsx b/src/view/com/util/post-embeds/VideoEmbed.tsx
index e5457555b..9c3a34dda 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbed.tsx
@@ -71,7 +71,7 @@ function InnerWrapper({embed}: Props) {
 
   const [playerStatus, setPlayerStatus] = useState<
     VideoPlayerStatus | 'paused'
-  >(player.playing ? 'readyToPlay' : 'paused')
+  >('paused')
   const [isMuted, setIsMuted] = useState(player.muted)
   const [isFullscreen, setIsFullscreen] = React.useState(false)
   const [timeRemaining, setTimeRemaining] = React.useState(0)
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
index 31e863038..de9a2c74c 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
@@ -8,6 +8,7 @@ import {useLingui} from '@lingui/react'
 
 import {HITSLOP_30} from '#/lib/constants'
 import {clamp} from '#/lib/numbers'
+import {isAndroid} from 'platform/detection'
 import {useActiveVideoNative} from 'view/com/util/post-embeds/ActiveVideoNativeContext'
 import {atoms as a, useTheme} from '#/alf'
 import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
@@ -61,6 +62,9 @@ export function VideoEmbedInnerNative({
           PlatformInfo.setAudioActive(true)
           player.muted = false
           setIsFullscreen(true)
+          if (isAndroid) {
+            player.play()
+          }
         }}
         onFullscreenExit={() => {
           PlatformInfo.setAudioCategory(AudioCategory.Ambient)
diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index 7d080e57b..aed92cbb7 100644
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@@ -11,7 +11,7 @@ import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import * as NavigationBar from 'expo-navigation-bar'
 import {StatusBar} from 'expo-status-bar'
-import {useNavigationState} from '@react-navigation/native'
+import {useNavigation, useNavigationState} from '@react-navigation/native'
 
 import {useSession} from '#/state/session'
 import {
@@ -20,6 +20,7 @@ import {
   useSetDrawerOpen,
 } from '#/state/shell'
 import {useCloseAnyActiveElement} from '#/state/util'
+import {useDedupe} from 'lib/hooks/useDedupe'
 import {useNotificationsHandler} from 'lib/hooks/useNotificationHandler'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useNotificationsRegistration} from 'lib/notifications/notifications'
@@ -33,6 +34,7 @@ import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
+import {updateActiveViewAsync} from '../../../modules/expo-bluesky-swiss-army/src/VisibilityView'
 import {RoutesContainer, TabsNavigator} from '../../Navigation'
 import {Composer} from './Composer'
 import {DrawerContent} from './Drawer'
@@ -76,6 +78,27 @@ function ShellInner() {
     }
   }, [closeAnyActiveElement])
 
+  // HACK
+  // expo-video doesn't like it when you try and move a `player` to another `VideoView`. Instead, we need to actually
+  // unregister that player to let the new screen register it. This is only a problem on Android, so we only need to
+  // apply it there.
+  // The `state` event should only fire whenever we push or pop to a screen, and should not fire consecutively quickly.
+  // To be certain though, we will also dedupe these calls.
+  const navigation = useNavigation()
+  const dedupe = useDedupe(1000)
+  React.useEffect(() => {
+    if (!isAndroid) return
+    const onFocusOrBlur = () => {
+      setTimeout(() => {
+        dedupe(updateActiveViewAsync)
+      }, 500)
+    }
+    navigation.addListener('state', onFocusOrBlur)
+    return () => {
+      navigation.removeListener('state', onFocusOrBlur)
+    }
+  }, [dedupe, navigation])
+
   return (
     <>
       <Animated.View
diff --git a/yarn.lock b/yarn.lock
index b241ab57b..cc440109a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12414,9 +12414,9 @@ expo-updates@~0.25.14:
     ignore "^5.3.1"
     resolve-from "^5.0.0"
 
-"expo-video@https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-1.tgz":
+"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":
   version "1.2.4"
-  resolved "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-1.tgz#57f61a72f41b86e5a587d9782d32bd32487a551e"
+  resolved "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-2.tgz#4127dd5cea5fdf7ab745104c73b8ecf5506f5d34"
 
 expo-web-browser@~13.0.3:
   version "13.0.3"