Fine tune compose

src/components/BottomSheet.tsx

@@ -10,7 +10,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { StyleConstants } from 'src/utils/styles/constants'
-import Button from './Button'
+import { ButtonRow } from './Button'
 
 export interface Props {
   children: React.ReactNode
@@ -84,7 +84,7 @@ const BottomSheet: React.FC<Props> = ({ children, visible, handleDismiss }) => {
             style={[styles.handle, { backgroundColor: theme.background }]}
           />
           {children}
-          <Button
+          <ButtonRow
             onPress={() => closeModal.start(() => handleDismiss())}
             text='取消'
           />

src/components/Button.tsx

@@ -1,82 +1,4 @@
-import { Feather } from '@expo/vector-icons'
-import React from 'react'
-import { Pressable, StyleSheet, Text } from 'react-native'
-import { StyleConstants } from 'src/utils/styles/constants'
-import { useTheme } from 'src/utils/styles/ThemeManager'
+import ButtonRound from './Button/ButtonRound'
+import ButtonRow from './Button/ButtonRow'
 
-type PropsBase = {
-  onPress: () => void
-  disabled?: boolean
-  buttonSize?: 'S' | 'M'
-}
-
-export interface PropsText extends PropsBase {
-  text: string
-  icon?: string
-  size?: 'S' | 'M' | 'L'
-}
-
-export interface PropsIcon extends PropsBase {
-  text?: string
-  icon: string
-  size?: 'S' | 'M' | 'L'
-}
-
-const Button: React.FC<PropsText | PropsIcon> = ({
-  onPress,
-  disabled = false,
-  buttonSize = 'M',
-  text,
-  icon,
-  size = 'M'
-}) => {
-  const { theme } = useTheme()
-
-  return (
-    <Pressable
-      {...(!disabled && { onPress })}
-      style={[
-        styles.button,
-        {
-          borderColor: disabled ? theme.secondary : theme.primary,
-          paddingTop: StyleConstants.Spacing[buttonSize === 'M' ? 'S' : 'XS'],
-          paddingBottom: StyleConstants.Spacing[buttonSize === 'M' ? 'S' : 'XS']
-        }
-      ]}
-    >
-      {icon ? (
-        <Feather
-          name={icon}
-          size={StyleConstants.Font.Size[size]}
-          color={disabled ? theme.secondary : theme.primary}
-        />
-      ) : (
-        <Text
-          style={[
-            styles.text,
-            {
-              color: disabled ? theme.secondary : theme.primary,
-              fontSize: StyleConstants.Font.Size[size]
-            }
-          ]}
-        >
-          {text}
-        </Text>
-      )}
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  button: {
-    paddingLeft: StyleConstants.Spacing.M,
-    paddingRight: StyleConstants.Spacing.M,
-    borderWidth: 1,
-    borderRadius: 100
-  },
-  text: {
-    textAlign: 'center'
-  }
-})
-
-export default Button
+export { ButtonRound, ButtonRow }

src/components/Button/ButtonRound.tsx

@@ -0,0 +1,60 @@
+import { Feather } from '@expo/vector-icons'
+import React from 'react'
+import { Pressable, StyleSheet } from 'react-native'
+import { StyleConstants } from 'src/utils/styles/constants'
+import { useTheme } from 'src/utils/styles/ThemeManager'
+
+export interface Props {
+  styles: any
+  onPress: () => void
+  icon: string
+  size?: 'S' | 'M' | 'L'
+  coordinate?: 'center' | 'default'
+}
+
+const ButtomRound: React.FC<Props> = ({
+  styles: extraStyles,
+  onPress,
+  icon,
+  size = 'M',
+  coordinate = 'default'
+}) => {
+  const { theme } = useTheme()
+  const dimension =
+    StyleConstants.Spacing.S * 1.5 + StyleConstants.Font.Size[size]
+
+  return (
+    <Pressable
+      style={[
+        styles.base,
+        extraStyles,
+        {
+          backgroundColor: theme.backgroundOverlay,
+          ...(coordinate === 'center' && {
+            transform: [
+              { translateX: -dimension / 2 },
+              { translateY: -dimension / 2 }
+            ]
+          })
+        }
+      ]}
+      onPress={onPress}
+    >
+      <Feather
+        name={icon}
+        size={StyleConstants.Font.Size[size]}
+        color={theme.primaryOverlay}
+      />
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    position: 'absolute',
+    padding: StyleConstants.Spacing.S * 1.5,
+    borderRadius: StyleConstants.Spacing.XL
+  }
+})
+
+export default ButtomRound

src/components/Button/ButtonRow.tsx

@@ -0,0 +1,82 @@
+import { Feather } from '@expo/vector-icons'
+import React from 'react'
+import { Pressable, StyleSheet, Text } from 'react-native'
+import { StyleConstants } from 'src/utils/styles/constants'
+import { useTheme } from 'src/utils/styles/ThemeManager'
+
+type PropsBase = {
+  onPress: () => void
+  disabled?: boolean
+  buttonSize?: 'S' | 'M'
+}
+
+export interface PropsText extends PropsBase {
+  text: string
+  icon?: string
+  size?: 'S' | 'M' | 'L'
+}
+
+export interface PropsIcon extends PropsBase {
+  text?: string
+  icon: string
+  size?: 'S' | 'M' | 'L'
+}
+
+const ButtonRow: React.FC<PropsText | PropsIcon> = ({
+  onPress,
+  disabled = false,
+  buttonSize = 'M',
+  text,
+  icon,
+  size = 'M'
+}) => {
+  const { theme } = useTheme()
+
+  return (
+    <Pressable
+      {...(!disabled && { onPress })}
+      style={[
+        styles.button,
+        {
+          borderColor: disabled ? theme.secondary : theme.primary,
+          paddingTop: StyleConstants.Spacing[buttonSize === 'M' ? 'S' : 'XS'],
+          paddingBottom: StyleConstants.Spacing[buttonSize === 'M' ? 'S' : 'XS']
+        }
+      ]}
+    >
+      {icon ? (
+        <Feather
+          name={icon}
+          size={StyleConstants.Font.Size[size]}
+          color={disabled ? theme.secondary : theme.primary}
+        />
+      ) : (
+        <Text
+          style={[
+            styles.text,
+            {
+              color: disabled ? theme.secondary : theme.primary,
+              fontSize: StyleConstants.Font.Size[size]
+            }
+          ]}
+        >
+          {text}
+        </Text>
+      )}
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    paddingLeft: StyleConstants.Spacing.M,
+    paddingRight: StyleConstants.Spacing.M,
+    borderWidth: 1,
+    borderRadius: 100
+  },
+  text: {
+    textAlign: 'center'
+  }
+})
+
+export default ButtonRow

src/components/Timelines/Timeline/Shared/Attachment/AttachmentVideo.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useRef, useState } from 'react'
-import { Pressable, View } from 'react-native'
+import { View } from 'react-native'
 import { Video } from 'expo-av'
-import { Feather } from '@expo/vector-icons'
+import { ButtonRound } from 'src/components/Button'
 
 export interface Props {
-  media_attachments: Mastodon.Attachment[]
+  media_attachments: Mastodon.AttachmentVideo[]
   width: number
 }
 
@@ -19,7 +19,7 @@ const AttachmentVideo: React.FC<Props> = ({ media_attachments, width }) => {
       ? (width / video.meta.original.width) * video.meta.original.height
       : (width / 16) * 9
 
-  const onPressVideo = useCallback(() => {
+  const playOnPress = useCallback(() => {
     // @ts-ignore
     videoPlayer.current.presentFullscreenPlayer()
     setVideoPlay(true)
@@ -46,22 +46,13 @@ const AttachmentVideo: React.FC<Props> = ({ media_attachments, width }) => {
         shouldPlay={videoPlay}
       />
       {videoPlayer.current && !videoPlay && (
-        <Pressable
-          onPress={onPressVideo}
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: 'rgba(0, 0, 0, 0.25)'
-          }}
-        >
-          <Feather name='play' size={36} color='black' />
-        </Pressable>
+        <ButtonRound
+          icon='play'
+          size='L'
+          onPress={playOnPress}
+          styles={{ top: videoHeight / 2, left: videoWidth / 2 }}
+          coordinate='center'
+        />
       )}
     </View>
   )

src/components/Timelines/Timeline/Shared/Poll.tsx

@@ -3,7 +3,7 @@ import React, { useMemo, useState } from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { useMutation, useQueryCache } from 'react-query'
 import client from 'src/api/client'
-import Button from 'src/components/Button'
+import { ButtonRow } from 'src/components/Button'
 import { toast } from 'src/components/toast'
 import relativeTime from 'src/utils/relativeTime'
 import { StyleConstants } from 'src/utils/styles/constants'
@@ -214,7 +214,7 @@ const TimelinePoll: React.FC<Props> = ({ queryKey, status: { poll } }) => {
       <View style={styles.meta}>
         {!poll.expired && !poll.own_votes?.length && (
           <View style={styles.button}>
-            <Button
+            <ButtonRow
               onPress={() => {
                 if (poll.multiple) {
                   mutateAction({ id: poll.id, options: multipleOptions })