Fine tune compose

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 })