Extremely rough working

1 files changed, 26 insertions, 3 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index c6cf767f..912865ae 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -69,8 +69,10 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const [tags, setTags] = useState<MomentTagType[]>(
     selectedTags ? selectedTags : [],
   );
+  const [aspectRatio, setAspectRatio] = useState<number>(1);
   const [taggedList, setTaggedList] = useState<string>('');
   const mediaUri = moment ? moment.moment_url : route.params.media!.uri;
+  // console.log('mediaUri', mediaUri);
   // TODO: change this once moment refactor is done
   const isMediaAVideo = moment
     ? !(
@@ -229,8 +231,8 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               {...{title: moment ? moment.moment_category : title ?? ''}}
             />
             {isMediaAVideo ? (
-              <>
-                <VideoPlayer
+              <View style={styles.mediaContainer}>
+                {/* <VideoPlayer
                   //style={styles.media}
                   ref={(ref) => (this.videoPlayerRef = ref)}
                   startTime={startTime} // seconds
@@ -260,8 +262,24 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                     setStartTime(e.startTime);
                     setEndTime(e.endTime);
                   }}
+                /> */}
+                <Video
+                  source={{uri: mediaUri}}
+                  volume={1}
+                  style={[
+                    styles.media,
+                    {
+                      height: SCREEN_WIDTH / aspectRatio,
+                    },
+                  ]}
+                  repeat={false}
+                  resizeMode={'contain'}
+                  onLoad={(response) => {
+                    const {width, height} = response.naturalSize;
+                    setAspectRatio(width / height);
+                  }}
                 />
-              </>
+              </View>
             ) : (
               <Image
                 style={styles.media}
@@ -331,6 +349,11 @@ const styles = StyleSheet.create({
     width: SCREEN_WIDTH,
     aspectRatio: 1,
     marginBottom: '3%',
+    flex: 1,
+  },
+  mediaContainer: {
+    width: SCREEN_WIDTH,
+    aspectRatio: 1,
   },
   text: {
     position: 'relative',