admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed image viewer and added mobile feature check.

Browse Source
This commit is contained in:
Patrick Fic
2022-06-20 16:53:13 -07:00
parent 67312c1847
commit 49b77315ba
13 changed files with 406 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
components/media-cache-overlay/media-cache-overlay.component.jsx
View File

@@ -1,76 +1,76 @@
import { Ionicons } from "@expo/vector-icons";
import { Video } from "expo-av";
import React, { useState } from "react";
import {
Dimensions,
Modal,
SafeAreaView,
TouchableOpacity,
} from "react-native";
import Gallery from "react-native-image-gallery";
import { SafeAreaView } from "react-native";
import React from "react";
import { ImageGallery } from "@georstat/react-native-image-gallery";
export default function MediaCacheOverlay({
photos,
previewVisible,
setPreviewVisible,
imgIndex,
setImgIndex,
}) {
const [currentIndex, setcurrentIndex] = useState(0);
const [dragging, setDragging] = useState(false);
const videoRef = React.useRef(null);
//const videoRef = React.useRef(null);
return (
<Modal
onDismiss={() => setPreviewVisible(false)}
onRequestClose={() => setPreviewVisible(false)}
visible={previewVisible}
transparent={false}
>
<SafeAreaView style={{ flex: 1, backgroundColor: "black" }}>
<Gallery
initialPage={imgIndex}
images={photos}
onPageScroll={({ position }) => setcurrentIndex(position)}
onPageScrollStateChanged={(state) =>
state === "idle" ? setDragging(false) : setDragging(true)
}
/>
<TouchableOpacity
style={{ position: "absolute" }}
onPress={() => setPreviewVisible(false)}
>
<Ionicons
name="ios-close"
size={64}
color="dodgerblue"
style={{ margin: 20 }}
/>
</TouchableOpacity>
{!dragging && photos[currentIndex] && photos[currentIndex].videoUrl && (
<TouchableOpacity
style={{
position: "absolute",
left: Dimensions.get("window").width / 2 - 32,
top: Dimensions.get("window").height / 2 - 32,
justifyContent: "center",
alignItems: "center",
}}
onPress={async () => {
await videoRef.current.loadAsync(
{ uri: photos[currentIndex].videoUrl },
{},
false
);
videoRef.current.presentFullscreenPlayer();
}}
>
<Ionicons name="play" size={64} color="white" />
</TouchableOpacity>
)}
</SafeAreaView>
<Video ref={videoRef} useNativeControls />
</Modal>
<SafeAreaView>
<ImageGallery
close={() => setPreviewVisible(false)}
isOpen={previewVisible}
images={photos}
initialIndex={imgIndex}
/>
</SafeAreaView>
);
// return (
// <Modal
// onDismiss={() => setPreviewVisible(false)}
// onRequestClose={() => setPreviewVisible(false)}
// visible={previewVisible}
// transparent={false}
// >
// <SafeAreaView style={{ flex: 1, backgroundColor: "black" }}>
// <Gallery
// initialPage={imgIndex}
// images={photos}
// onPageScroll={({ position }) => setcurrentIndex(position)}
// onPageScrollStateChanged={(state) =>
// state === "idle" ? setDragging(false) : setDragging(true)
// }
// />
// <TouchableOpacity
// style={{ position: "absolute" }}
// onPress={() => setPreviewVisible(false)}
// >
// <Ionicons
// name="ios-close"
// size={64}
// color="dodgerblue"
// style={{ margin: 20 }}
// />
// </TouchableOpacity>
// {!dragging && photos[currentIndex] && photos[currentIndex].videoUrl && (
// <TouchableOpacity
// style={{
// position: "absolute",
// left: Dimensions.get("window").width / 2 - 32,
// top: Dimensions.get("window").height / 2 - 32,
// justifyContent: "center",
// alignItems: "center",
// }}
// onPress={async () => {
// await videoRef.current.loadAsync(
// { uri: photos[currentIndex].videoUrl },
// {},
// false
// );
// videoRef.current.presentFullscreenPlayer();
// }}
// >
// <Ionicons name="play" size={64} color="white" />
// </TouchableOpacity>
// )}
// </SafeAreaView>
// <Video ref={videoRef} useNativeControls />
// </Modal>
// );
}