heygen

src/screens/Playbacks/components/PlaybackItem.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { View, StyleSheet } from 'react-native'
+import { Pressable, View, StyleSheet } from 'react-native'
 import { responsiveHeight } from 'react-native-responsive-dimensions'
 import { SheetManager } from 'react-native-actions-sheet'
 import { useUser } from '../../../providers/UserDataProvider'
@@ -53,6 +53,18 @@ const PlaybackItem = ({ item, isActive, userCache }) => {
     isActive,
   })
 
+  const togglePlayback = useCallback(() => {
+    if (!isActive || !videoUrl || !videoPlayer) return
+
+    try {
+      if (videoPlayer.playing) {
+        videoPlayer.pause()
+      } else {
+        videoPlayer.play()
+      }
+    } catch (e) {}
+  }, [isActive, videoPlayer, videoUrl])
+
   const alignedWords = useMemo(() => {
     const idx = Number(item?.songIndex) || 0
     const ts = item?.musicTimestamps?.[idx]
@@ -124,7 +136,11 @@ const PlaybackItem = ({ item, isActive, userCache }) => {
   }, [item?.userId])
 
   return (
-    <View style={styles.container}>
+    <Pressable
+      accessible={false}
+      onPress={togglePlayback}
+      style={styles.container}
+    >
       <PlaybackVideo videoUrl={videoUrl} videoPlayer={videoPlayer} />
       <View style={styles.overlay}>
         <PlaybackActions
@@ -148,7 +164,7 @@ const PlaybackItem = ({ item, isActive, userCache }) => {
           fallbackTitle={item?.title}
         />
       </View>
-    </View>
+    </Pressable>
   )
 }