Floating video

components/Media.js

@@ -5,6 +5,7 @@ import API from './../API.js';
 import VideoPlayer from './VideoPlayer.js';
 import VimeoPlayer from './VimeoPlayer.js';
 import { WebView } from 'react-native-webview';
+import GlobalState from '../contexts/GlobalState.js';
 
 const videoIdF = (content) => {
     let vimeoTag = content.match(/@vimeo:[0-9]+/);
@@ -89,7 +90,10 @@ let Media = (props) => {
     const video2 = hlsUrl ? ( 
         loaded ? 
             <VideoPlayer videoUrl={hlsUrl} postId={props.postId} /> :
-            <TouchableHighlight onPress={() => setLoaded(true)}>
+            <TouchableHighlight onPress={() => {
+                    //setLoaded(true)
+                    GlobalState.currentMedia = hlsUrl;
+                }}>
                 {poster ? 
                     <Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} /> :
                     <Button

components/MediaView.js

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import { IconButton } from 'react-native-paper';
+import { View, StyleSheet } from 'react-native';
+import GlobalState from '../contexts/GlobalState.js';
+import { useSnapshot } from 'valtio';
+import VideoPlayer from './VideoPlayer';
+
+const MediaView = (props) => {
+    const gState = useSnapshot(GlobalState);
+    const currentMedia = gState.currentMedia;
+    const [state, setState] = useState('');
+    const currentStyles = state === "min" ? styles.min : styles.float;
+
+    return (
+        <>
+            {currentMedia ?
+            <>
+                <View style={{
+                   ...currentStyles
+                }}>
+                    <VideoPlayer 
+                        videoUrl={currentMedia} 
+                        postId={props.postId} 
+                        videoStyle={{
+                            top: -10
+                        }}
+                    />
+                    
+                </View>
+                <IconButton style={{
+                    backgroundColor: "#c44d56",
+                    width: 40,
+                    height: 40,
+                    borderRadius: 20,
+                    zIndex: 3,
+                    elevation: 20,
+                    position: 'absolute',
+                    right: 70,
+                    bottom: 260,
+                    opacity: 0.9
+                }} icon={"close"} color="#fff" onPress={()=>{
+                    GlobalState.currentMedia = '';
+                }}></IconButton>
+                <IconButton style={{
+                    backgroundColor: "#c44d56",
+                    width: 40,
+                    height: 40,
+                    borderRadius: 20,
+                    zIndex: 3,
+                    elevation: 20,
+                    position: 'absolute',
+                    right: 20,
+                    bottom: 260,
+                    opacity: 0.9
+                }} icon={"remove"} color="#fff" onPress={()=>{
+                    setState(state=="min" ? "" : 'min')
+                }}></IconButton>
+                </>
+                : <></>
+            }
+        </>
+    )
+}
+
+export default MediaView;
+
+
+const styles = StyleSheet.create({
+    float: {
+        height: 178,
+        width: 320,
+        position: "absolute",
+        bottom: 80,
+        right: 10,
+        backgroundColor: "#fff",
+        borderRadius: 30,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 20,
+        zIndex: 1,
+        overflow: "hidden",
+        paddingTop: -10,
+    },
+    min: {
+        height: 0,
+        width: 0,
+        position: "absolute",
+        bottom: 80,
+        right: 10,
+        backgroundColor: "#fff",
+        borderRadius: 30,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 20,
+        zIndex: 1,
+        overflow: "hidden",
+        paddingTop: -10,
+    }
+});

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 }) => {
+const VideoPlayer = ({ videosFiles, postId, poster, videoUrl, videoStyle }) => {
   const gState = useSnapshot(GlobalState);
   const viewer = gState.me;
   const video = React.useRef(null);
@@ -33,11 +33,14 @@ const VideoPlayer = ({ videosFiles, postId, poster, videoUrl }) => {
   return (
     <Video
       ref={video}
-      style={styles.video}
+      style={{
+        ...styles.video,
+        ...videoStyle
+      }}
       source={{
         uri: chosenVideo.length ? chosenVideo[chosenVideo.length-1].link : '',
       }}
-      useNativeControls
+      useNativeControls={false}
       shouldPlay={true}
       resizeMode="contain"
       onPlaybackStatusUpdate={status => setStatus(() => status)}