From f3627ad2e86cd8c951d269a4603caa9f55694406 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sat, 18 Jan 2025 20:40:36 -0800
Subject: [PATCH] styling video control icon

---
 .../src/message/videoAsset/VideoAsset.styled.ts    |  4 ++--
 .../mobile/src/message/videoAsset/VideoAsset.tsx   | 14 +++++++++-----
 app/client/mobile/src/settings/useSettings.hook.ts |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts b/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
index f0c380bb..97d677b5 100644
--- a/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
+++ b/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
@@ -15,11 +15,11 @@ export const styles = StyleSheet.create({
   control: {
     position: 'absolute',
     backgroundColor: 'transparent',
+    opacity: 0.6
   },
   button: {
     position: 'absolute',
-    borderRadius: 13,
-    backgroundColor: '#444444',
+    borderRadius: 16,
   },
   blur: {
     position: 'absolute',
diff --git a/app/client/mobile/src/message/videoAsset/VideoAsset.tsx b/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
index 96e2bcf3..47f39f1f 100644
--- a/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
+++ b/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { SafeAreaView, Share, Modal, Pressable, Animated, View, Image, useAnimatedValue } from 'react-native'
-import { Text, Icon, ProgressBar, IconButton } from 'react-native-paper'
+import { Text, Surface, Icon, ProgressBar, IconButton } from 'react-native-paper'
 import { useVideoAsset } from './useVideoAsset.hook';
 import { MediaAsset } from '../../conversation/Conversation';
 import { styles } from './VideoAsset.styled'
@@ -93,9 +93,9 @@ export function VideoAsset({ topicId, asset, loaded, show }: { topicId: string,
               source={{ uri: state.thumbUrl }}
               onLoad={actions.loaded}
             />
-            <View style={styles.button}>
+            <Surface elevation={2} style={styles.button}>
               <Icon size={32} source="play-circle-outline" />
-            </View>
+            </Surface>
           </Animated.View>
         </Pressable>
       )}
@@ -113,10 +113,14 @@ export function VideoAsset({ topicId, asset, loaded, show }: { topicId: string,
               controls={false} resizeMode="contain" />
           )}
           { status === 'playing' && showControl && (
-            <IconButton style={styles.control} size={64} icon="pause" onPress={pause} />
+            <Surface elevation={2} style={styles.control}>
+              <IconButton size={64} icon="pause" onPress={pause} />
+            </Surface>
           )}
           { status === 'paused' && showControl && (
-            <IconButton style={styles.control} size={64} icon="play" onPress={play} />
+            <Surface elevation={2} style={styles.control}>
+              <IconButton size={64} icon="play" onPress={play} />
+            </Surface>
           )}
           { state.loading && (
             <View style={styles.progress}>
diff --git a/app/client/mobile/src/settings/useSettings.hook.ts b/app/client/mobile/src/settings/useSettings.hook.ts
index 9bd7d4a8..0b519e30 100644
--- a/app/client/mobile/src/settings/useSettings.hook.ts
+++ b/app/client/mobile/src/settings/useSettings.hook.ts
@@ -15,7 +15,7 @@ export function useSettings() {
     profile: {} as Profile,
     profileSet: false,
     imageUrl: null,
-    strings: display.state.strings,
+    strings: {},
     all: false,
     password: '',
     confirm: '',