From 05d05f79f744e69c974e97198cca10293a7e071d Mon Sep 17 00:00:00 2001
From: Adolfo Reyna <aeroreyna@gmail.com>
Date: Sun, 8 Jan 2023 22:15:43 -0500
Subject: [PATCH] Floating video

---
 App.js                    |   6 ++-
 Views/Courses.js          |  22 +++++---
 components/Media.js       |   6 ++-
 components/MediaView.js   | 109 ++++++++++++++++++++++++++++++++++++++
 components/VideoPlayer.js |   9 ++--
 contexts/GlobalState.js   |   1 +
 6 files changed, 140 insertions(+), 13 deletions(-)
 create mode 100644 components/MediaView.js

diff --git a/App.js b/App.js
index 9cf0939..756a935 100644
--- a/App.js
+++ b/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>
     );
 }
diff --git a/Views/Courses.js b/Views/Courses.js
index c0b8efd..e2725f0 100644
--- a/Views/Courses.js
+++ b/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"
+    }
 });
diff --git a/components/Media.js b/components/Media.js
index 8bcbfd3..c573f6b 100644
--- a/components/Media.js
+++ b/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
diff --git a/components/MediaView.js b/components/MediaView.js
new file mode 100644
index 0000000..d3b59c6
--- /dev/null
+++ b/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,
+    }
+});
\ No newline at end of file
diff --git a/components/VideoPlayer.js b/components/VideoPlayer.js
index 9c1d740..51a5053 100644
--- a/components/VideoPlayer.js
+++ b/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)}
diff --git a/contexts/GlobalState.js b/contexts/GlobalState.js
index da5eb87..e18f073 100644
--- a/contexts/GlobalState.js
+++ b/contexts/GlobalState.js
@@ -3,6 +3,7 @@ import { proxy, useSnapshot } from 'valtio';
 const GlobalState = proxy({ 
     me: {}, 
     profiles: {},
+    currentMedia: '',
 });
 
 export  default GlobalState;