Floating video

App.js

@@ -3,7 +3,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { Provider as PaperProvider, DefaultTheme, Appbar, Button } from 'react-native-paper';
+import { Provider as PaperProvider, DefaultTheme, Appbar, Button, Text } from 'react-native-paper';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Login from "./Views/Login.js"
 import Feed from "./Views/Feed.js"
@@ -22,6 +22,7 @@ import { TouchableOpacity, View, Image } from 'react-native';
 import MenuView from './Views/Menu.js';
 import ProfileSettings from './Views/ProfileSettings.js';
 import InviteView from './Views/Invite.js';
+import MediaView from './components/MediaView.js';
 
 
 const Tab = createBottomTabNavigator();
@@ -114,6 +115,7 @@ const MainNavigation = () => {
 
 
     return (
+        <>
         <Tab.Navigator initialRouteName="Home"
             activeColor="#0d6efd"
             inactiveColor="#FFFFFF"
@@ -212,6 +214,7 @@ const MainNavigation = () => {
             />*/}
             
         </Tab.Navigator>
+        </>
     )
 }
 
@@ -277,6 +280,7 @@ export default function App() {
                     <Tab.Screen name="Logout" component={Login} />
                 </Stack.Navigator>
             </NavigationContainer>
+            <MediaView></MediaView>
         </PaperProvider>
     );
 }

Views/Courses.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
-import { Searchbar } from 'react-native-paper';
-import { ScrollView, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
-import { Title } from 'react-native-paper';
+import { Searchbar, Title } from 'react-native-paper';
+import { ScrollView, ActivityIndicator, StyleSheet, SafeAreaView, FlatList, View } from 'react-native';
 import API from "../API";
 import CourseCard from "../components/CourseCard";
 import { useSnapshot } from 'valtio';
@@ -134,8 +133,8 @@ const Courses = () => {
             <ScrollView>
                 {
                     watching.length ?
-                    <>
-                        <Title>{i18n.t("message.continueWatching")}:</Title>
+                    <View>
+                        <Title style={styles.title} >{i18n.t("message.continueWatching")}:</Title>
                         <FlatList
                             horizontal={true}
                             data={watching}
@@ -143,12 +142,12 @@ const Courses = () => {
                             keyExtractor={item => item.profile._id}
                             initialNumToRender={2}
                         />
-                    </> : <></>
+                    </View> : <></>
                 }
                 {
                     groups.length ?
                     <>
-                        <Title>{i18n.t("message.recentlyAdded")}:</Title>
+                        <Title style={styles.title} >{i18n.t("message.recentlyAdded")}:</Title>
                         <FlatList
                             horizontal={true}
                             data={groups}
@@ -161,7 +160,7 @@ const Courses = () => {
                 {
                     popular.length ?
                     <>
-                        <Title>{i18n.t("message.popularCourses")}:</Title>
+                        <Title style={styles.title} >{i18n.t("message.popularCourses")}:</Title>
                         <FlatList
                             horizontal={true}
                             data={popular}
@@ -182,4 +181,11 @@ const styles = StyleSheet.create({
     container: {
         flex: 1
     },
+    title: {
+        padding: 10,
+        fontSize: 30,
+        marginTop: 15,
+        fontWeight: "bold",
+        color: "#777"
+    }
 });

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

contexts/GlobalState.js

@@ -3,6 +3,7 @@ import { proxy, useSnapshot } from 'valtio';
 const GlobalState = proxy({ 
     me: {}, 
     profiles: {},
+    currentMedia: '',
 });
 
 export  default GlobalState;