Video records API

API.js

@@ -194,7 +194,7 @@ const API = {
     async getMe() {
         if (!CurrentProfileData)
             if(!CurrentProfile) await this.isLoggedIn();
-            CurrentProfileData = await this.getUserProfile(CurrentProfile);
+            CurrentProfileData = await this.getUserProfile(CurrentProfile, true);
         return CurrentProfileData;
     },
     getMyProfiles() {

App.js

@@ -23,6 +23,7 @@ import MenuView from './Views/Menu.js';
 import ProfileSettings from './Views/ProfileSettings.js';
 import InviteView from './Views/Invite.js';
 import MediaView from './components/MediaView.js';
+import GlobalState from './contexts/GlobalState.js';
 
 
 const Tab = createBottomTabNavigator();
@@ -107,9 +108,16 @@ const MainNavigation = () => {
             console.log(response);
         });
 
+        const interval = setInterval(async () => {
+            if(await API.isLoggedIn())
+                console.log("Updating me")
+                GlobalState.me = await API.getMe();
+        }, 10000);
+
         return () => {
             Notifications.removeNotificationSubscription(notificationListener.current);
             Notifications.removeNotificationSubscription(responseListener.current);
+            clearInterval(interval);
         };
     }, []);
 
@@ -232,14 +240,7 @@ export default function App() {
                                 {props.navigation.canGoBack() ? <Appbar.BackAction onPress={()=>{
                                     props.navigation.goBack();
                                 }} /> : <></>}
-                                <Appbar.Content title={
-                                    <Button icon={({ size, color }) => (
-                                        <Image
-                                        source={require('./assets/icon.png')}
-                                        style={{ width: size, height: size }}
-                                        />
-                                    )} mode="text" >EMI Fellowship</Button>
-                                } titleStyle={{}}/>
+                                <Appbar.Content title="EMI Fellowship" titleStyle={{}}/>
                                 <Appbar.Action icon="chat" onPress={()=>{alert("Chats are comming soon.")}} />
                                 <Appbar.Action icon="search" onPress={()=>{props.navigation.navigate("Search")}} />
                                 <Appbar.Action icon="notifications" onPress={()=>{props.navigation.navigate("Notifications")}} />

Views/Feed.js

@@ -40,8 +40,9 @@ let Feed = ({ navigation, route }) => {
                 return navigation.navigate('Profile', { profileid: route.params.profileid })
             }
             API.getMe().then((me) => {
-                if (subscribed)
+                if (subscribed){
                     GlobalState.me = me;
+                }
             });
             console.log("Feed from cache")
             let cacheFeed = await getFeed() || [];

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

contexts/GlobalState.js

@@ -1,9 +1,11 @@
 import { proxy, useSnapshot } from 'valtio';
+import API from '../API';
 
 const GlobalState = proxy({ 
     me: {}, 
     profiles: {},
     currentMedia: '',
+    mediaPost: {},
 });
 
 export  default GlobalState;