113 lines
3.2 KiB
JavaScript
113 lines
3.2 KiB
JavaScript
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 mediaPost = gState.mediaPost;
|
|
const [state, setState] = useState('');
|
|
const currentStyles = state === "min" ? styles.min : styles.float;
|
|
//console.log(mediaPost)
|
|
|
|
return (
|
|
<>
|
|
{currentMedia ?
|
|
<>
|
|
<View style={{
|
|
...currentStyles
|
|
}}>
|
|
<VideoPlayer
|
|
videoUrl={currentMedia}
|
|
postId={mediaPost._id}
|
|
profileId={mediaPost.profileid}
|
|
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 = '';
|
|
GlobalState.mediaPost = {};
|
|
}}></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,
|
|
}
|
|
}); |