Video records API

components/Media.js

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { View, TouchableHighlight, Image, StyleSheet, FlatList } from 'react-native';
-import { Button } from 'react-native-paper';
+import { Button, Text, ProgressBar } from 'react-native-paper';
 import API from './../API.js';
 import VideoPlayer from './VideoPlayer.js';
 import VimeoPlayer from './VimeoPlayer.js';
 import { WebView } from 'react-native-webview';
+import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
+import Moment from 'moment';
 
 const videoIdF = (content) => {
     let vimeoTag = content.match(/@vimeo:[0-9]+/);
@@ -54,6 +56,8 @@ const iframeTagF = (content) => {
 
 
 let Media = (props) => {
+    const gState = useSnapshot(GlobalState);
+    const viewer = gState.me;
     const imagesTag = imagesTagF(props.content);
     const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
     const videosId = videoIdF(props.content);
@@ -93,6 +97,7 @@ let Media = (props) => {
             <TouchableHighlight onPress={() => {
                     //setLoaded(true)
                     GlobalState.currentMedia = hlsUrl;
+                    GlobalState.mediaPost = props.post;
                 }}>
                 {poster ? 
                     <Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} /> :
@@ -117,6 +122,16 @@ let Media = (props) => {
     const renderImages = (({ item }) => {
         return (<Image source={{ uri: item[1] }} style={styles.flatlistImages} />);
     });
+    let progress = <></>;
+    if(viewer.data && viewer.data[props.postId]) {
+        const percent = Math.round(viewer.data[props.postId].time / viewer.data[props.postId].duration * 100);
+        if(percent)
+            progress =
+                <>
+                    <Text>{percent}% {Moment(viewer.data[props.postId].ts).fromNow()}</Text>
+                    <ProgressBar progress={viewer.data[props.postId].time / viewer.data[props.postId].duration} />
+                </>;
+    }
     return (
         <View>
             {
@@ -143,6 +158,7 @@ let Media = (props) => {
             {video2}
             {iframe}
             {youtubeEmb}
+            {progress}
         </View>
     );
 }

components/MediaView.js

@@ -8,8 +8,10 @@ import VideoPlayer from './VideoPlayer';
 const MediaView = (props) => {
     const gState = useSnapshot(GlobalState);
     const currentMedia = gState.currentMedia;
+    const mediaPost = gState.mediaPost;
     const [state, setState] = useState('');
     const currentStyles = state === "min" ? styles.min : styles.float;
+    //console.log(mediaPost)
 
     return (
         <>
@@ -20,7 +22,8 @@ const MediaView = (props) => {
                 }}>
                     <VideoPlayer 
                         videoUrl={currentMedia} 
-                        postId={props.postId} 
+                        postId={mediaPost._id}
+                        profileId={mediaPost.profileid}
                         videoStyle={{
                             top: -10
                         }}
@@ -40,6 +43,7 @@ const MediaView = (props) => {
                     opacity: 0.9
                 }} icon={"close"} color="#fff" onPress={()=>{
                     GlobalState.currentMedia = '';
+                    GlobalState.mediaPost = {};
                 }}></IconButton>
                 <IconButton style={{
                     backgroundColor: "#c44d56",

components/Post.js

@@ -70,7 +70,7 @@ let Post = (props) => {
                                 </Text>
                             </Text>
                             <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
-                            <Media content={post.content} postId={post._id} />
+                            <Media content={post.content} postId={post._id} post={post} />
                         </View> :
                         <View>
                             <Chip icon="new-releases" style={{ width: 100 }} >{i18n.t("message.news")}</Chip>

components/VideoPlayer.js

@@ -5,7 +5,7 @@ import API from '../API';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
 
-const VideoPlayer = ({ videosFiles, postId, poster, videoUrl, videoStyle }) => {
+const VideoPlayer = ({ videosFiles, postId, profileId, poster, videoUrl, videoStyle }) => {
   const gState = useSnapshot(GlobalState);
   const viewer = gState.me;
   const video = React.useRef(null);
@@ -28,7 +28,23 @@ const VideoPlayer = ({ videosFiles, postId, poster, videoUrl, videoStyle }) => {
     if(!viewer.data[postId]) return 0;
     console.log(postId + " loaded")
     video.current.setPositionAsync(viewer.data[postId].time*1000);
+    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