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>
     );
 }