Feat/camera boilerplate

client/package.json

@@ -24,8 +24,10 @@
     "class-variance-authority": "^0.7.1",
     "expo": "53.0.12",
     "expo-blur": "~14.1.5",
+    "expo-camera": "~16.1.10",
     "expo-constants": "~17.1.6",
     "expo-dev-client": "~5.2.1",
+    "expo-file-system": "~18.1.11",
     "expo-gradle-ext-vars": "^0.1.3",
     "expo-haptics": "~14.1.4",
     "expo-linking": "~7.1.5",

client/src/components/overlays/camera.tsx

@@ -0,0 +1,165 @@
+import { IconContainer } from "@/components/ui/icons/icon-container";
+import { Icons } from "@/components/ui/icons/icons";
+import { BlurView } from "expo-blur";
+import React, { useEffect } from "react";
+import {
+  Pressable,
+  View,
+  ScrollView as ScrollViewType,
+  Platform,
+  KeyboardAvoidingView,
+  StyleSheet,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../ui/button";
+import { logger } from "@/shared/instances/logger.instance";
+import { useCamera } from "@/shared/hooks/useCamera";
+import { CameraView } from "expo-camera";
+
+interface CameraOverlayProps {
+  visible?: boolean;
+  onClose: () => void;
+  onSucces: () => void;
+}
+
+export const CameraOverlay = ({
+  visible,
+  onClose,
+  onSucces,
+}: CameraOverlayProps) => {
+  const {
+    cameraRef,
+    permission,
+    requestPermission,
+    facing,
+    toggleFacing,
+    takePhoto,
+  } = useCamera();
+
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (visible) {
+      opacity.value = withTiming(1, { duration: 300 });
+    } else {
+      opacity.value = withTiming(0, { duration: 300 });
+    }
+  }, [visible]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  if (!permission) {
+    return <View />;
+  }
+  return (
+    <Animated.View
+      style={animatedStyle}
+      className="absolute w-full h-full flex justify-end items-center z-30"
+      pointerEvents={visible ? "auto" : "none"}
+    >
+      <Pressable
+        onPress={onClose}
+        className="absolute top-0 left-0 right-0 bottom-0"
+      />
+      <BlurView
+        experimentalBlurMethod="dimezisBlurView"
+        intensity={100}
+        tint="dark"
+        className="absolute w-full h-full z-10"
+      />
+
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ zIndex: 30 }}
+        keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 0}
+        className={twMerge(
+          "py-[40px] px-[36px] h-[85%] mb-[80px] flex-1 rounded-[30px] w-full z-30 flex flex-col justify-end gap-16"
+        )}
+      >
+        <View className="flex flex-col justify-center">
+          {!permission.granted && (
+            <Button
+              text={"Дать разрешение на использование камеры"}
+              onPress={requestPermission}
+            />
+          )}
+          <View className="w-[360px] h-[360px] rounded-[16px] z-10 overflow-hidden">
+            {permission.granted && visible && (
+              <CameraView
+                style={styles.camera}
+                ref={cameraRef}
+                facing={facing}
+              />
+            )}
+          </View>
+        </View>
+
+        <View className="flex flex-row gap-[53px] pb-12 items-center justify-center w-full">
+          <Pressable onPress={() => {}} className="opacity-0">
+            <IconContainer className="bg-accent_primary">
+              <Icons.Camera />
+            </IconContainer>
+          </Pressable>
+          <Pressable
+            onPress={async () => {
+              try {
+                const photo = await takePhoto();
+                onSucces();
+              } catch (error) {
+                logger.error("ui", "Error taking photo");
+              }
+            }}
+          >
+            <IconContainer className="bg-accent_primary border-[3px] border-[#FFF] w-[86px] h-[86px]">
+              <Icons.TakePhoto />
+            </IconContainer>
+          </Pressable>
+          <Pressable onPress={toggleFacing}>
+            <IconContainer className="bg-primary p-[13px]">
+              <Icons.Revert />
+            </IconContainer>
+          </Pressable>
+        </View>
+      </KeyboardAvoidingView>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+  },
+  message: {
+    textAlign: "center",
+    paddingBottom: 10,
+  },
+  camera: {
+    flex: 1,
+    width: 360,
+    height: 360,
+  },
+  buttonContainer: {
+    flex: 1,
+    flexDirection: "row",
+    backgroundColor: "transparent",
+    margin: 64,
+  },
+  button: {
+    flex: 1,
+    alignSelf: "flex-end",
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "white",
+  },
+});

client/src/components/overlays/send-photo.tsx

@@ -0,0 +1,148 @@
+import { IconContainer } from "@/components/ui/icons/icon-container";
+import { Icons } from "@/components/ui/icons/icons";
+import { BlurView } from "expo-blur";
+import React, { useEffect, useState } from "react";
+import {
+  Pressable,
+  View,
+  Platform,
+  KeyboardAvoidingView,
+  StyleSheet,
+  Text,
+  Image,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../ui/button";
+import { useCameraStore } from "@/shared/stores/camera.store";
+import { uploadImageToS3 } from "@/shared/api/s3.api";
+import { logger } from "@/shared/instances/logger.instance";
+import { useAuthStore } from "@/shared/stores/auth.store";
+import { useGameStore } from "@/shared/stores/game.store";
+import { Role } from "@/shared/interfaces/game/role";
+
+interface CameraOverlayProps {
+  visible?: boolean;
+  onClose: () => void;
+}
+
+export const SendPhotoOverlay = ({ visible, onClose }: CameraOverlayProps) => {
+  const { photo } = useCameraStore();
+  const { token } = useAuthStore();
+
+  const { game } = useGameStore();
+  const { user } = useAuthStore();
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (visible) {
+      opacity.value = withTiming(1, { duration: 300 });
+    } else {
+      opacity.value = withTiming(0, { duration: 300 });
+    }
+  }, [visible]);
+
+  const [role, setRole] = useState<Role>("catcher");
+  useEffect(() => {
+    const userRole = game?.players.find((x) => x.user.id === user?.id)?.role;
+    if (userRole) setRole(userRole);
+  }, [game]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View
+      style={animatedStyle}
+      className="absolute w-full h-full flex justify-end items-center z-30"
+      pointerEvents={visible ? "auto" : "none"}
+    >
+      <Pressable
+        onPress={onClose}
+        className="absolute top-0 left-0 right-0 bottom-0"
+      />
+      <BlurView
+        experimentalBlurMethod="dimezisBlurView"
+        intensity={100}
+        tint="dark"
+        className="absolute w-full h-full z-10"
+      />
+
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ zIndex: 30 }}
+        keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 0}
+        className={twMerge(
+          "py-[40px] px-[36px] h-[85%] mb-[80px] flex-1 rounded-[30px] w-full z-30 flex flex-col justify-end gap-16"
+        )}
+      >
+        <View className="flex flex-col justify-center">
+          <View className="w-[360px] h-[360px] rounded-[16px] overflow-hidden">
+            <Image
+              source={{ uri: photo?.uri }}
+              style={{ width: 360, height: 360 }}
+            />
+          </View>
+        </View>
+
+        <View className="flex flex-row gap-[53px] pb-12 items-center justify-center w-full">
+          <Button
+            text="Отправить"
+            onPress={async () => {
+              const result = await uploadImageToS3(
+                photo?.uri ?? "",
+                undefined,
+                "games"
+              );
+
+              if (role === "catcher") {
+              }
+              if (role === "runner") {
+              }
+
+              logger.log("ui", result.url);
+            }}
+          />
+        </View>
+      </KeyboardAvoidingView>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+  },
+  message: {
+    textAlign: "center",
+    paddingBottom: 10,
+  },
+  camera: {
+    zIndex: 1000,
+    flex: 1,
+    width: 360,
+    height: 360,
+  },
+  buttonContainer: {
+    flex: 1,
+    flexDirection: "row",
+    backgroundColor: "transparent",
+    margin: 64,
+  },
+  button: {
+    flex: 1,
+    alignSelf: "flex-end",
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "white",
+  },
+});