77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
import * as React from 'react';
|
|
import { View, StyleSheet, Button } from 'react-native';
|
|
import { Video, AVPlaybackStatus } from 'expo-av';
|
|
import API from '../API';
|
|
import { useSnapshot } from 'valtio';
|
|
import GlobalState from '../contexts/GlobalState.js';
|
|
|
|
const VideoPlayer = ({ videosFiles, postId, profileId, poster, videoUrl, videoStyle }) => {
|
|
const gState = useSnapshot(GlobalState);
|
|
const viewer = gState.me;
|
|
const video = React.useRef(null);
|
|
const [status, setStatus] = React.useState({});
|
|
const [chosenVideo, setChosenVideo] = React.useState([]);
|
|
|
|
|
|
React.useEffect(()=>{
|
|
let chosenVideo = [];
|
|
if(videosFiles)
|
|
videosFiles.forEach((f) => {
|
|
if (f.rendition === 'adaptive') chosenVideo.push(f);
|
|
});
|
|
if(videoUrl) chosenVideo.push({link: videoUrl});
|
|
//console.log(chosenVideo);
|
|
setChosenVideo(chosenVideo);
|
|
}, [videoUrl, postId]);
|
|
|
|
const onLoad = async ()=>{
|
|
if(!viewer.data[postId]) return 0;
|
|
//console.log(postId + " loaded")
|
|
await video.current.setPositionAsync(viewer.data[postId].time*1000);
|
|
//video.current.isPlaying = true;
|
|
//video.current.presentFullscreenPlayer();
|
|
};
|
|
|
|
//console.log("status", status)
|
|
if(postId && status.isPlaying){
|
|
const ts = new Date();
|
|
const newData = {
|
|
watched: status.didJustFinish,
|
|
time: Math.round(status.positionMillis/1000),
|
|
ts: ts.getTime(),
|
|
duration: Math.round(status.durationMillis/1000),
|
|
postId: postId,
|
|
profileId: profileId,
|
|
};
|
|
//console.log(postId, newData);
|
|
API.setDataValue(postId, newData);
|
|
}
|
|
|
|
return (
|
|
<Video
|
|
ref={video}
|
|
style={{
|
|
...styles.video,
|
|
...videoStyle
|
|
}}
|
|
source={{
|
|
uri: chosenVideo.length ? chosenVideo[chosenVideo.length-1].link : '',
|
|
}}
|
|
useNativeControls={true}
|
|
shouldPlay={true}
|
|
resizeMode="contain"
|
|
onPlaybackStatusUpdate={status => setStatus(() => status)}
|
|
onLoad={onLoad}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default VideoPlayer;
|
|
|
|
const styles = StyleSheet.create({
|
|
video: {
|
|
alignSelf: 'center',
|
|
width: 320,
|
|
height: 200,
|
|
},
|
|
}); |