Floating video

2023-01-08 22:15:43 -05:00
parent caf2a8ee04
commit 05d05f79f7
6 changed files with 140 additions and 13 deletions
--- a/components/MediaView.js
+++ 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,
+    }
+});