keybase · chrisnojima · May 18, 2026 · May 18, 2026 · May 18, 2026
diff --git a/shared/chat/conversation/messages/attachment/video/videoimpl.shared.tsx b/shared/chat/conversation/messages/attachment/video/videoimpl.shared.tsx
@@ -1,8 +1,47 @@
 import type * as T from '@/constants/types'
+import * as Kb from '@/common-adapters'
+import * as React from 'react'
 
 export type Props = {
   openFullscreen?: () => void
   showPopup?: () => void
   allowPlay: boolean
   message: T.Chat.MessageAttachment
 }
+
+export const usePosterState = (url: string) => {
+  const [showPoster, setShowPoster] = React.useState(true)
+  const [lastUrl, setLastUrl] = React.useState(url)
+  if (lastUrl !== url) {
+    setLastUrl(url)
+    setShowPoster(true)
+  }
+  return {showPoster, reveal: () => setShowPoster(false)}
+}
+
+export const sharedStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      durationContainer: {
+        alignSelf: 'flex-end',
+        backgroundColor: Kb.Styles.globalColors.black_50,
+        borderRadius: 2,
+        bottom: Kb.Styles.globalMargins.tiny,
+        padding: 1,
+        position: 'absolute',
+        right: Kb.Styles.globalMargins.tiny,
+      },
+      durationText: {
+        color: Kb.Styles.globalColors.white,
+        paddingLeft: 3,
+        paddingRight: 3,
+      },
+      playButton: {
+        left: '50%',
+        marginLeft: -32,
+        marginTop: -32,
+        position: 'absolute',
+        top: '50%',
+      },
+    }) as const
+)
diff --git a/shared/chat/conversation/messages/attachment/video/videoimpl.tsx b/shared/chat/conversation/messages/attachment/video/videoimpl.tsx
@@ -1,6 +1,7 @@
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import type {Props} from './videoimpl.shared'
+import {usePosterState, sharedStyles} from './videoimpl.shared'
 import {getAttachmentPreviewSize, ShowToastAfterSaving, maxHeight, maxWidth} from '../shared'
 import {useVideoPlayer, VideoView} from 'expo-video'
 import {useEventListener} from 'expo'
@@ -15,31 +16,20 @@ const DesktopVideoImpl = (p: Props) => {
   const {allowPlay, message, openFullscreen} = p
   const {fileURL: url, videoDuration} = message
   const {previewURL, height, width} = getAttachmentPreviewSize(message)
-  const [showPoster, setShowPoster] = React.useState(true)
-  const [lastUrl, setLastUrl] = React.useState(url)
-
-  if (lastUrl !== url) {
-    setLastUrl(url)
-    setShowPoster(true)
-  }
-
-  const onPress = () => {
-    setShowPoster(false)
-  }
+  const {showPoster, reveal} = usePosterState(url)
+  const ref = React.useRef<VideoElementRef | null>(null)
 
   const onDoubleClick = () => {
     ref.current?.pause()
     openFullscreen?.()
   }
 
-  const ref = React.useRef<VideoElementRef | null>(null)
-
   return showPoster ? (
-    <div onClick={onPress} style={desktopStyles.posterContainer}>
+    <div onClick={reveal} style={desktopStyles.posterContainer}>
       <Kb.Image src={previewURL} style={{height, width}} />
-      {allowPlay ? <Kb.ImageIcon type="icon-play-64" style={desktopStyles.playButton} /> : null}
-      <Kb.Box2 direction="vertical" overflow="hidden" style={desktopStyles.durationContainer}>
-        <Kb.Text type="BodyTinyBold" style={desktopStyles.durationText}>
+      {allowPlay ? <Kb.ImageIcon type="icon-play-64" style={sharedStyles.playButton} /> : null}
+      <Kb.Box2 direction="vertical" overflow="hidden" style={sharedStyles.durationContainer}>
+        <Kb.Text type="BodyTinyBold" style={sharedStyles.durationText}>
           {videoDuration}
         </Kb.Text>
       </Kb.Box2>
@@ -67,22 +57,15 @@ const NativeVideoImpl = (p: Props) => {
   const {allowPlay, message, showPopup} = p
   const {fileURL: url, transferState, videoDuration} = message
   const {previewURL, height, width} = getAttachmentPreviewSize(message)
+  const {showPoster, reveal} = usePosterState(url)
   const sourceUri = `${url}&contentforce=true`
 
   const player = useVideoPlayer(sourceUri, pl => {
     pl.loop = false
   })
 
-  const [showPoster, setShowPoster] = React.useState(true)
-  const [lastUrl, setLastUrl] = React.useState(url)
-
-  if (lastUrl !== url) {
-    setLastUrl(url)
-    setShowPoster(true)
-  }
-
   const onPress = () => {
-    setShowPoster(false)
+    reveal()
     player.play()
   }
 
@@ -100,9 +83,9 @@ const NativeVideoImpl = (p: Props) => {
             style={Kb.Styles.collapseStyles([nativeStyles.posterContainer, {height, width}])}
           >
             <Kb.Image src={previewURL} style={Kb.Styles.collapseStyles([nativeStyles.poster, {height, width}])} />
-            {allowPlay ? <Kb.ImageIcon type="icon-play-64" style={nativeStyles.playButton} /> : null}
-            <Kb.Box2 direction="vertical" overflow="hidden" style={nativeStyles.durationContainer}>
-              <Kb.Text type="BodyTinyBold" style={nativeStyles.durationText}>
+            {allowPlay ? <Kb.ImageIcon type="icon-play-64" style={sharedStyles.playButton} /> : null}
+            <Kb.Box2 direction="vertical" overflow="hidden" style={sharedStyles.durationContainer}>
+              <Kb.Text type="BodyTinyBold" style={sharedStyles.durationText}>
                 {videoDuration}
               </Kb.Text>
             </Kb.Box2>
@@ -123,27 +106,6 @@ const NativeVideoImpl = (p: Props) => {
 const desktopStyles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      durationContainer: {
-        alignSelf: 'flex-end',
-        backgroundColor: Kb.Styles.globalColors.black_50,
-        borderRadius: 2,
-        bottom: Kb.Styles.globalMargins.tiny,
-        padding: 1,
-        position: 'absolute',
-        right: Kb.Styles.globalMargins.tiny,
-      },
-      durationText: {
-        color: Kb.Styles.globalColors.white,
-        paddingLeft: 3,
-        paddingRight: 3,
-      },
-      playButton: {
-        left: '50%',
-        marginLeft: -32,
-        marginTop: -32,
-        position: 'absolute',
-        top: '50%',
-      },
       posterContainer: {
         display: 'flex',
         flexShrink: 1,
@@ -163,27 +125,6 @@ const desktopStyles = Kb.Styles.styleSheetCreate(
 const nativeStyles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      durationContainer: {
-        alignSelf: 'flex-end',
-        backgroundColor: Kb.Styles.globalColors.black_50,
-        borderRadius: 2,
-        bottom: Kb.Styles.globalMargins.tiny,
-        padding: 1,
-        position: 'absolute',
-        right: Kb.Styles.globalMargins.tiny,
-      },
-      durationText: {
-        color: Kb.Styles.globalColors.white,
-        paddingLeft: 3,
-        paddingRight: 3,
-      },
-      playButton: {
-        left: '50%',
-        marginLeft: -32,
-        marginTop: -32,
-        position: 'absolute',
-        top: '50%',
-      },
       poster: {
         backgroundColor: Kb.Styles.globalColors.black_05_on_white,
         opacity: 1,

diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.shared.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.shared.tsx
@@ -1,3 +1,6 @@
+import * as Kb from '@/common-adapters'
+import * as React from 'react'
+
 export type Props = {
   autoPlay: boolean
   height: number
@@ -6,3 +9,37 @@ export type Props = {
   url: string
   width: number
 }
+
+export const usePlayState = (url: string, autoPlay: boolean) => {
+  const [playing, setPlaying] = React.useState(autoPlay)
+  const [lastAutoPlay, setLastAutoPlay] = React.useState(autoPlay)
+  const [lastUrl, setLastUrl] = React.useState(url)
+  if (lastAutoPlay !== autoPlay || lastUrl !== url) {
+    setLastAutoPlay(autoPlay)
+    setLastUrl(url)
+    setPlaying(autoPlay)
+  }
+  return {playing, setPlaying}
+}
+
+export const sharedStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      absoluteContainer: {
+        left: 0,
+        position: 'absolute',
+        top: 0,
+      },
+      playButton: {
+        bottom: '50%',
+        left: '50%',
+        marginBottom: -32,
+        marginLeft: -32,
+        marginRight: -32,
+        marginTop: -32,
+        position: 'absolute',
+        right: '50%',
+        top: '50%',
+      },
+    }) as const
+)
diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx
@@ -1,6 +1,7 @@
 import * as Kb from '@/common-adapters/index'
 import * as React from 'react'
 import type {Props} from './video.shared'
+import {usePlayState, sharedStyles} from './video.shared'
 import logger from '@/logger'
 import {useVideoPlayer, VideoView} from 'expo-video'
 
@@ -13,15 +14,7 @@ type VideoElementRef = {
 const DesktopVideo = (p: Props) => {
   const {autoPlay, onClick, height, width, style, url} = p
   const videoRef = React.useRef<VideoElementRef | null>(null)
-  const [playing, setPlaying] = React.useState(autoPlay)
-  const [lastAutoPlay, setLastAutoPlay] = React.useState(autoPlay)
-  const [lastUrl, setLastUrl] = React.useState(url)
-
-  if (lastAutoPlay !== autoPlay || lastUrl !== url) {
-    setLastAutoPlay(autoPlay)
-    setLastUrl(url)
-    setPlaying(autoPlay)
-  }
+  const {playing, setPlaying} = usePlayState(url, autoPlay)
 
   const _onClick = () => {
     if (onClick) {
@@ -44,8 +37,8 @@ const DesktopVideo = (p: Props) => {
 
   return (
     <Kb.Box2 direction="horizontal" relative={true} style={desktopStyles.container}>
-      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([desktopStyles.absoluteContainer, {height, width}])}>
-        {!playing && <Kb.ImageIcon type="icon-play-64" style={desktopStyles.playButton} />}
+      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([sharedStyles.absoluteContainer, {height, width}])}>
+        {!playing && <Kb.ImageIcon type="icon-play-64" style={sharedStyles.playButton} />}
       </Kb.Box2>
       <video
         ref={videoRef as React.RefObject<HTMLVideoElement>}
@@ -62,15 +55,7 @@ const DesktopVideo = (p: Props) => {
 
 const NativeVideo = (props: Props) => {
   const {autoPlay, onClick, url, style, width, height} = props
-  const [playing, setPlaying] = React.useState(autoPlay)
-  const [lastAutoPlay, setLastAutoPlay] = React.useState(autoPlay)
-  const [lastUrl, setLastUrl] = React.useState(url)
-
-  if (lastAutoPlay !== autoPlay || lastUrl !== url) {
-    setLastAutoPlay(autoPlay)
-    setLastUrl(url)
-    setPlaying(autoPlay)
-  }
+  const {playing, setPlaying} = usePlayState(url, autoPlay)
 
   const uri = url.length > 0 ? url : 'https://'
   const sourceUri = `${uri}&autoplay=${autoPlay ? 'true' : 'false'}&contentforce=true`
@@ -116,8 +101,8 @@ const NativeVideo = (props: Props) => {
         contentFit="contain"
         style={(Kb.Styles.collapseStyles([nativeStyles.player, style]) ?? {}) as object}
       />
-      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([nativeStyles.absoluteContainer, {height, width}])}>
-        {!playing && <Kb.ImageIcon type="icon-play-64" style={nativeStyles.playButton} />}
+      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([sharedStyles.absoluteContainer, {height, width}])}>
+        {!playing && <Kb.ImageIcon type="icon-play-64" style={sharedStyles.playButton} />}
       </Kb.Box2>
     </Kb.ClickableBox>
   )
@@ -126,51 +111,19 @@ const NativeVideo = (props: Props) => {
 const desktopStyles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      absoluteContainer: {
-        left: 0,
-        position: 'absolute',
-        top: 0,
-      },
       container: {
         alignSelf: 'flex-start',
       },
-      playButton: {
-        bottom: '50%',
-        left: '50%',
-        marginBottom: -32,
-        marginLeft: -32,
-        marginRight: -32,
-        marginTop: -32,
-        position: 'absolute',
-        right: '50%',
-        top: '50%',
-      },
     }) as const
 )
 
 const nativeStyles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      absoluteContainer: {
-        left: 0,
-        position: 'absolute',
-        top: 0,
-      },
       container: {
         alignSelf: 'flex-start',
         position: 'relative',
       },
-      playButton: {
-        bottom: '50%',
-        left: '50%',
-        marginBottom: -32,
-        marginLeft: -32,
-        marginRight: -32,
-        marginTop: -32,
-        position: 'absolute',
-        right: '50%',
-        top: '50%',
-      },
       player: {
         position: 'relative',
       },

diff --git a/shared/stores/push.tsx b/shared/stores/push.tsx
@@ -223,11 +223,13 @@ export const usePushState = Z.createZustand<State>('push', (set, get) => {
               }
               break
             case 'chat.newmessageSilent_2':
+              // entirely handled by go on ios and in onNotification on Android
               break
             case 'chat.newmessage':
               await handleLoudMessage(notification)
               break
             case 'follow':
+              // We only care if the user clicked while in session
               if (notification.userInteraction) {
                 const {username} = notification
                 emitDeepLink(`keybase://profile/show/${username}`)
@@ -267,6 +269,7 @@ export const usePushState = Z.createZustand<State>('push', (set, get) => {
       const f = async () => {
         const hasPermissions = await get().dispatch.checkPermissions()
         if (hasPermissions) {
+          // Get the token
           await requestPermissionsFromNative()
           fetchIOSTokenIfNeeded()
         } else {
@@ -303,6 +306,7 @@ export const usePushState = Z.createZustand<State>('push', (set, get) => {
         if (isIOS) {
           const shownPushPrompt = await askNativeIfSystemPushPromptHasBeenShown()
           if (shownPushPrompt) {
+            // we've already shown the prompt, take them to settings
             openAppSettings()
             get().dispatch.showPermissionsPrompt({persistSkip: true, show: false})
             return