From a006718174893bc7113432e700cde7e5d0379964 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sun, 19 Jan 2025 08:29:43 -0800
Subject: [PATCH] styling media play button

---
 .../mobile/src/message/audioAsset/AudioAsset.styled.ts      | 4 ++++
 app/client/mobile/src/message/audioAsset/AudioAsset.tsx     | 4 ++--
 .../mobile/src/message/videoAsset/VideoAsset.styled.ts      | 6 +++++-
 app/client/mobile/src/message/videoAsset/VideoAsset.tsx     | 4 ++--
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts b/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts
index 73c80826..435ea5a2 100644
--- a/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts
+++ b/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts
@@ -14,7 +14,11 @@ export const styles = StyleSheet.create({
   },
   control: {
     position: 'absolute',
+    borderRadius: 8,
+  },
+  iconButton: {
     backgroundColor: 'transparent',
+    borderRadius: 8,
   },
   button: {
     position: 'absolute',
diff --git a/app/client/mobile/src/message/audioAsset/AudioAsset.tsx b/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
index ba1267af..d72e007d 100644
--- a/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
+++ b/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
@@ -105,12 +105,12 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
           )}
           { status === 'playing' && (
             <Surface elevation={2} style={styles.control}>
-              <IconButton size={64} icon="pause" onPress={pause} />
+              <IconButton style={styles.iconButton} size={64} icon="pause" onPress={pause} />
             </Surface>
           )}
           { status === 'paused' && (
             <Surface elevation={2} style={styles.control}>
-              <IconButton size={64} icon="play" onPress={play} />
+              <IconButton style={styles.iconButton} size={64} icon="play" onPress={play} />
             </Surface>
           )}
           { state.loading && (
diff --git a/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts b/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
index 97d677b5..57e3ef3a 100644
--- a/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
+++ b/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
@@ -14,8 +14,12 @@ export const styles = StyleSheet.create({
   },
   control: {
     position: 'absolute',
+    opacity: 0.6,
+    borderRadius: 8,
+  },
+  iconButton: {
     backgroundColor: 'transparent',
-    opacity: 0.6
+    borderRadius: 8,
   },
   button: {
     position: 'absolute',
diff --git a/app/client/mobile/src/message/videoAsset/VideoAsset.tsx b/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
index 973210fc..8d4c205a 100644
--- a/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
+++ b/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
@@ -117,12 +117,12 @@ export function VideoAsset({ topicId, asset, loaded, show }: { topicId: string,
           )}
           { status === 'playing' && showControl && (
             <Surface elevation={2} style={styles.control}>
-              <IconButton size={64} icon="pause" onPress={pause} />
+              <IconButton style={styles.iconButton} size={64} icon="pause" onPress={pause} />
             </Surface>
           )}
           { status === 'paused' && showControl && (
             <Surface elevation={2} style={styles.control}>
-              <IconButton size={64} icon="play" onPress={play} />
+              <IconButton style={styles.iconButton} size={64} icon="play" onPress={play} />
             </Surface>
           )}
           { state.loading && (