fix: camera problems

src/app/layout.tsx

@@ -93,14 +93,14 @@ export default function RootLayout({
 				)}
 
 				<Providers>
-					<Suspense fallback={<div>Loading header...</div>}>
+					<SessionProvider>
-						<SessionProvider>
+						<Suspense fallback={<div>Loading header...</div>}>
 							<Header />
-						</SessionProvider>
+						</Suspense>
-					</Suspense>
+						<AdminBanner />
-					<AdminBanner />
+						<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">{children}</main>
-					<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">{children}</main>
+						<Footer />
-					<Footer />
+					</SessionProvider>
 				</Providers>
 			</body>
 		</html>

src/app/mii/[id]/page.tsx

@@ -316,7 +316,7 @@ export default async function MiiPage({ params }: Props) {
 								{/* Submission name */}
 								<h1 className="text-4xl font-extrabold wrap-break-word text-amber-700">{mii.name}</h1>
 								{/* Like button */}
-								<LikeButton likes={mii._count.likedBy ?? 0} miiId={mii.id} isLiked={(mii.likedBy ?? []).length > 0} isLoggedIn={session?.user != null} big />
+								<LikeButton likes={mii._count.likedBy ?? 0} miiId={mii.id} isLiked={(mii.likedBy ?? []).length > 0} big />
 							</div>
 							{/* Tags */}
 							<div id="tags" className="flex flex-wrap gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">

src/app/random/page.tsx

@@ -1,6 +1,8 @@
 import { redirect } from "next/navigation";
 import { prisma } from "@/lib/prisma";
 
+export const dynamic = "force-dynamic";
+
 export default async function RandomPage() {
 	const count = await prisma.mii.count();
 	if (count === 0) redirect("/");

src/components/like-button.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Icon, loadIcons } from "@iconify/react";
@@ -9,13 +10,13 @@ interface Props {
 	likes: number;
 	miiId?: number | undefined;
 	isLiked: boolean;
-	isLoggedIn?: boolean;
 	disabled?: boolean;
 	abbreviate?: boolean;
 	big?: boolean;
 }
 
-export default function LikeButton({ likes, isLiked, miiId, isLoggedIn, disabled, abbreviate, big }: Props) {
+export default function LikeButton({ likes, isLiked, miiId, disabled, abbreviate, big }: Props) {
+	const session = useSession();
 	const router = useRouter();
 
 	const [isLikedState, setIsLikedState] = useState(isLiked);
@@ -24,7 +25,7 @@ export default function LikeButton({ likes, isLiked, miiId, isLoggedIn, disabled
 
 	const onClick = async () => {
 		if (disabled) return;
-		if (!isLoggedIn) {
+		if (!session.data?.user) {
 			router.push("/login");
 			return;
 		}

src/components/mii/list/index.tsx

@@ -224,7 +224,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 							</div>
 
 							<div className="mt-auto grid grid-cols-2 items-center">
-								<LikeButton likes={mii.likes} miiId={mii.id} isLiked={mii.isLiked} isLoggedIn={session?.user != null} abbreviate />
+								<LikeButton likes={mii.likes} miiId={mii.id} isLiked={mii.isLiked} abbreviate />
 
 								{!userId && (
 									<Link href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis">

src/components/submit-form/camera.tsx

@@ -10,11 +10,12 @@ import { useSelect } from "downshift";
 interface Props {
 	isOpen: boolean;
 	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	onCapture?: () => void;
 	setImage?: React.Dispatch<React.SetStateAction<string | undefined>>;
 	setQrBytesRaw?: React.Dispatch<React.SetStateAction<number[]>>;
 }
 
-export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: Props) {
+export default function Camera({ isOpen, setIsOpen, onCapture, setImage, setQrBytesRaw }: Props) {
 	const [isVisible, setIsVisible] = useState(false);
 
 	const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null);
@@ -23,6 +24,7 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
 	const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);
 
 	const videoRef = useRef<HTMLVideoElement>(null);
+	const streamRef = useRef<MediaStream | null>(null);
 	const requestRef = useRef<number>(null);
 	const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -65,6 +67,7 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
 
 		if (setImage) {
 			setImage(canvas.toDataURL());
+			if (onCapture) onCapture();
 			close();
 			return;
 		}
@@ -89,14 +92,34 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
 
 		navigator.mediaDevices
 			.getUserMedia({ video: true, audio: false })
-			.then(() => setPermissionGranted(true))
+			.then((stream) => {
+				// immediately stop this temp stream
+				stream.getTracks().forEach((track) => track.stop());
+				setPermissionGranted(true);
+			})
 			.catch((err) => {
 				setPermissionGranted(false);
 				console.error("An error occurred trying to access the camera", err);
 			});
 	};
 
+	const stopCamera = () => {
+		if (requestRef.current) {
+			cancelAnimationFrame(requestRef.current);
+			requestRef.current = null;
+		}
+		if (videoRef.current) {
+			videoRef.current.pause();
+			videoRef.current.srcObject = null;
+		}
+		if (streamRef.current) {
+			streamRef.current.getTracks().forEach((track) => track.stop());
+			streamRef.current = null;
+		}
+	};
+
 	const close = () => {
+		stopCamera();
 		setIsVisible(false);
 		setTimeout(() => {
 			setIsOpen(false);
@@ -132,6 +155,7 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
 			})
 			.then((stream) => {
 				if (!stream || !videoRef.current) return;
+				streamRef.current = stream;
 				videoRef.current.srcObject = stream;
 				videoRef.current.play();
 			})
@@ -141,16 +165,9 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
 
 		// cleanup
 		return () => {
-			if (requestRef.current) {
+			stopCamera();
-				cancelAnimationFrame(requestRef.current);
-			}
-			if (videoRef.current?.srcObject) {
-				const stream = videoRef.current.srcObject as MediaStream;
-				stream.getTracks().forEach((track) => track.stop());
-				videoRef.current.srcObject = null;
-			}
 		};
-	}, [isOpen, permissionGranted, selectedDeviceId, takePicture]);
+	}, [isOpen, permissionGranted, selectedDeviceId]);
 
 	return (
 		<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
@@ -218,7 +235,10 @@ export default function Camera({ isOpen, setIsOpen, setImage, setQrBytesRaw }: P
 						</div>
 					)}
 
-					<video ref={videoRef} className={`size-full rounded-2xl border-2 border-amber-500 max-h-96 ${setQrBytesRaw ? "object-cover" : ""}`} />
+					<div className="rounded-2xl border-2 border-amber-500 max-h-96 flex justify-center items-center overflow-hidden">
+						<img src="/loading.svg" alt="loading indicator" width={256} height={256} className="absolute" />
+						<video ref={videoRef} className={`size-full z-10 ${setQrBytesRaw ? "object-cover" : ""}`} />
+					</div>
 					{setQrBytesRaw && <QrFinder />}
 					<canvas ref={canvasRef} className="hidden" />
 				</div>

src/components/submit-form/edit-form.tsx

@@ -25,6 +25,25 @@ interface Props {
 	likes: number;
 }
 
+function deepMerge<T>(target: T, source: Partial<T>): T {
+	const output = structuredClone(target);
+
+	if (typeof source !== "object" || source === null) return output;
+
+	for (const key in source) {
+		const sourceValue = source[key];
+		const targetValue = (output as any)[key];
+
+		if (typeof sourceValue === "object" && sourceValue !== null && !Array.isArray(sourceValue)) {
+			(output as any)[key] = deepMerge(targetValue, sourceValue);
+		} else {
+			(output as any)[key] = sourceValue;
+		}
+	}
+
+	return output;
+}
+
 export default function EditForm({ mii, likes }: Props) {
 	const [files, setFiles] = useState<FileWithPath[]>([]);
 
@@ -46,7 +65,7 @@ export default function EditForm({ mii, likes }: Props) {
 	const [makeup, setMakeup] = useState<MiiMakeup>(mii.makeup ?? "PARTIAL");
 	const hasFilesChanged = useRef(false);
 
-	const instructions = useRef<SwitchMiiInstructions>({ ...defaultInstructions, ...(mii.instructions as object as Partial<SwitchMiiInstructions>) });
+	const instructions = useRef<SwitchMiiInstructions>(deepMerge(defaultInstructions, (mii.instructions as object) ?? {}));
 
 	const handleSubmit = async () => {
 		// Validate before sending request

src/components/submit-form/switch-file-upload.tsx

@@ -17,7 +17,6 @@ interface Props {
 export default function SwitchFileUpload({ text, forceCrop, image, setImage }: Props) {
 	const [isCameraOpen, setIsCameraOpen] = useState(false);
 	const [isCropOpen, setIsCropOpen] = useState(false);
-	const [hasImage, setHasImage] = useState(false);
 
 	const handleDrop = useCallback(
 		(acceptedFiles: FileWithPath[]) => {
@@ -26,7 +25,6 @@ export default function SwitchFileUpload({ text, forceCrop, image, setImage }: P
 			const reader = new FileReader();
 			reader.onload = async (event) => {
 				setImage(event.target!.result as string);
-				setHasImage(true);
 				if (forceCrop) setIsCropOpen(true);
 			};
 			reader.readAsDataURL(file);
@@ -34,16 +32,11 @@ export default function SwitchFileUpload({ text, forceCrop, image, setImage }: P
 		[setImage],
 	);
 
-	useEffect(() => {
-		if (!isCameraOpen) return;
-		if (forceCrop) setIsCropOpen(true);
-	}, [isCameraOpen]);
-
 	return (
 		<div className="max-w-md w-full flex flex-col items-center gap-2">
 			<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
 				<p className="text-center text-sm">
-					{!hasImage ? (
+					{!image ? (
 						<>
 							Drag and drop {text}
 							<br />
@@ -66,7 +59,14 @@ export default function SwitchFileUpload({ text, forceCrop, image, setImage }: P
 				Crop Image
 			</button>
 
-			<Camera isOpen={isCameraOpen} setIsOpen={setIsCameraOpen} setImage={setImage} />
+			<Camera
+				isOpen={isCameraOpen}
+				setIsOpen={setIsCameraOpen}
+				setImage={setImage}
+				onCapture={() => {
+					if (forceCrop) setIsCropOpen(true);
+				}}
+			/>
 			<CropPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage} />
 		</div>
 	);