From 4eee3568ce4e02b919c9188b700d66f6b7e08668 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Tue, 31 Dec 2024 18:27:40 -0800
Subject: [PATCH] rendering play icon

---
 .../message/videoAsset/VideoAsset.styled.ts   | 14 +++++-----
 .../src/message/videoAsset/VideoAsset.tsx     | 26 +++++++++++--------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts b/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
index f2a51c3d..26c89ca5 100644
--- a/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
+++ b/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
@@ -9,15 +9,10 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  container: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 16,
-    backgroundColor: 'yellow',
-  },
   button: {
     position: 'absolute',
+    borderRadius: 13,
+    backgroundColor: '#444444',
   },
   blur: {
     position: 'absolute',
@@ -27,9 +22,14 @@ export const styles = StyleSheet.create({
     height: '100%',
   },
   video: {
+    position: 'relative',
   },
   thumb: {
     borderRadius: 4,
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   full: {
     position: 'absolute',
diff --git a/app/client/mobile/src/message/videoAsset/VideoAsset.tsx b/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
index c329828d..8aa09b88 100644
--- a/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
+++ b/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
@@ -33,17 +33,21 @@ export function VideoAsset({ topicId, asset }: { topicId: string, asset: MediaAs
   }
 
   return (
-    <View style={styles.image}>
+    <View style={styles.video}>
       { state.thumbUrl && (
-        <Pressable onPress={showVideo}>
-          <Animated.Image
-            style={[styles.thumb,{opacity},]}
-            resizeMode="contain"
-            height={92}
-            width={92 * state.ratio}
-            source={{ uri: state.thumbUrl }}
-            onLoad={actions.loaded}
-          />
+        <Pressable style={styles.container} onPress={showVideo}>
+          <Animated.View style={[styles.thumb,{opacity},]}>
+            <Image
+              resizeMode="contain"
+              height={92}
+              width={92 * state.ratio}
+              source={{ uri: state.thumbUrl }}
+              onLoad={actions.loaded}
+            />
+            <View style={styles.button}>
+              <Icon size={32} source="play-circle-outline" />
+            </View>
+          </Animated.View>
         </Pressable>
       )}
       <Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={modal} onRequestClose={hideVideo}>
@@ -56,7 +60,7 @@ export function VideoAsset({ topicId, asset }: { topicId: string, asset: MediaAs
           />
           { state.dataUrl && (
           <Video source={{ uri: state.dataUrl }} style={styles.full}
-            controls={false} onLoad={(e)=>console.log("LOAD", e)} onError={(e)=>console.log("ERR", e)} resizeMode="contain" />
+            controls={false} resizeMode="contain" />
           )}
           { state.loading && (
             <View style={styles.progress}>