diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx index 349db185..0a58a362 100644 --- a/app/client/mobile/src/conversation/Conversation.tsx +++ b/app/client/mobile/src/conversation/Conversation.tsx @@ -175,7 +175,7 @@ export function Conversation({close}: {close: ()=>void}) { if (asset.type === 'image') { return actions.removeAsset(index)} /> } else if (asset.type === 'video') { - return actions.removeAsset(index)} /> + return actions.setThumbPosition(index, position)} disabled={sending} remove={()=>actions.removeAsset(index)} /> } else if (asset.type === 'audio') { return actions.removeAsset(index)} /> } else { diff --git a/app/client/mobile/src/conversation/videoFile/VideoFile.styled.ts b/app/client/mobile/src/conversation/videoFile/VideoFile.styled.ts index db0e31ed..7407e521 100644 --- a/app/client/mobile/src/conversation/videoFile/VideoFile.styled.ts +++ b/app/client/mobile/src/conversation/videoFile/VideoFile.styled.ts @@ -14,4 +14,9 @@ export const styles = StyleSheet.create({ right: 0, borderRadius: 4, }, + next: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-end', + } }); diff --git a/app/client/mobile/src/conversation/videoFile/VideoFile.tsx b/app/client/mobile/src/conversation/videoFile/VideoFile.tsx index 69561387..055ac432 100644 --- a/app/client/mobile/src/conversation/videoFile/VideoFile.tsx +++ b/app/client/mobile/src/conversation/videoFile/VideoFile.tsx @@ -1,13 +1,23 @@ -import React, { useEffect } from 'react'; -import { View, Animated, useAnimatedValue } from 'react-native' -import { IconButton, Text } from 'react-native-paper'; +import React, { useEffect, useRef, useState } from 'react'; +import { Pressable, View, Animated, useAnimatedValue } from 'react-native' +import { Icon, IconButton, Text } from 'react-native-paper'; import { useVideoFile } from './useVideoFile.hook'; import {styles} from './VideoFile.styled' -import Video from 'react-native-video' +import Video, { VideoRef } from 'react-native-video' -export function VideoFile({ path, disabled, remove }: {path: string, disabled: boolean, remove: ()=>void}) { +export function VideoFile({ path, thumbPosition, disabled, remove }: {path: string, thumbPosition: (position: number)=>void, disabled: boolean, remove: ()=>void}) { const { state, actions } = useVideoFile(); const opacity = useAnimatedValue(0); + const videoRef = useRef(null as null | VideoRef); + const [seek, setSeek] = useState(0); + + const next = () => { + const step = state.duration / 10; + const pos = seek + step > state.duration ? 0 : seek + step; + thumbPosition(pos); + videoRef.current.seek(pos); + setSeek(pos); + } useEffect(() => { if (state.loaded) { @@ -22,7 +32,12 @@ export function VideoFile({ path, disabled, remove }: {path: string, disabled: b return ( - diff --git a/app/client/mobile/src/conversation/videoFile/useVideoFile.hook.ts b/app/client/mobile/src/conversation/videoFile/useVideoFile.hook.ts index 9654f57d..0f2f630f 100644 --- a/app/client/mobile/src/conversation/videoFile/useVideoFile.hook.ts +++ b/app/client/mobile/src/conversation/videoFile/useVideoFile.hook.ts @@ -4,6 +4,7 @@ export function useVideoFile(source: any) { const [state, setState] = useState({ loaded: false, ratio: 1, + duration: 0, }) // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -14,7 +15,7 @@ export function useVideoFile(source: any) { const actions = { loaded: (e) => { const { width, height } = e.naturalSize; - updateState({ loaded: true, ratio: width / height }); + updateState({ loaded: true, ratio: width / height, duration: e.duration }); }, }