@vibehooks/react 0.0.5 → 0.0.7

package/dist/useCameraCapture.d.ts

@@ -22,9 +22,7 @@ interface UseCameraCaptureOptions {
   onCapture?: (dataUrl: string, blob: Blob) => void;
   /**
    * Desired output width for the captured image.
-   * The height is automatically calculated to preserve the aspect ratio.
-   *
-   * @default 320
+   * If ommited, the image is captured at native camera resolution.
    */
   width?: number;
 }
@@ -50,6 +48,10 @@ interface UseCameraCaptureReturn {
    * Stops all active media tracks and releases the camera.
    */
   stop: () => void;
+  /**
+   * Toggles between front and back camera if available.
+   */
+  toggleCamera: () => void;
   /**
    * Indicates whether camera permissions has been granted.
    */

package/dist/useCameraCapture.js

@@ -33,17 +33,37 @@ function useCameraCapture(options = {}) {
 	const imageRef = React.useRef(null);
 	const streamRef = React.useRef(null);
 	const streamingRef = React.useRef(false);
-	const heightRef = React.useRef(0);
+	const devicesRef = React.useRef([]);
+	const currentDeviceIndexRef = React.useRef(0);
 	const isBrowser = typeof window !== "undefined";
 	const permissionStoreRef = React.useRef(createExternalStore(() => !!streamRef.current));
 	const streamingStoreRef = React.useRef(createExternalStore(() => streamingRef.current));
+	const isTouchDevice = () => {
+		if (!isBrowser) return false;
+		return "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+	};
+	const loadVideDevices = React.useCallback(async () => {
+		if (!navigator.mediaDevices?.enumerateDevices) return;
+		const videoInputs = (await navigator.mediaDevices.enumerateDevices()).filter((device) => device.kind === "videoinput");
+		devicesRef.current = videoInputs;
+		if (videoInputs.length === 0) return;
+		const touch = isTouchDevice();
+		const backCameraIndex = videoInputs.findIndex((device) => /back|rear|environment/i.test(device.label));
+		if (touch && backCameraIndex !== -1) currentDeviceIndexRef.current = backCameraIndex;
+		else currentDeviceIndexRef.current = 0;
+	}, [isBrowser]);
 	const requestPermission = React.useCallback(async () => {
 		if (!isBrowser) return false;
 		if (!navigator.mediaDevices?.getUserMedia) return false;
 		try {
+			if (devicesRef.current.length === 0) {
+				(await navigator.mediaDevices.getUserMedia({ video: true })).getTracks().forEach((track) => track.stop());
+				await loadVideDevices();
+			}
+			const device = devicesRef.current[currentDeviceIndexRef.current];
 			const stream = await navigator.mediaDevices.getUserMedia({
 				audio: false,
-				video: true
+				video: device ? { deviceId: { exact: device.deviceId } } : true
 			});
 			streamRef.current = stream;
 			permissionStoreRef.current.notify();
@@ -51,24 +71,13 @@ function useCameraCapture(options = {}) {
 			if (!video) return false;
 			video.srcObject = stream;
 			await video.play();
-			if (!streamingRef.current) {
-				const { videoHeight, videoWidth } = video;
-				heightRef.current = videoHeight / (videoWidth / width);
-				video.width = width;
-				video.height = heightRef.current;
-				const canvas = canvasRef.current;
-				if (canvas) {
-					canvas.width = width;
-					canvas.height = heightRef.current;
-				}
-				streamingRef.current = true;
-				streamingStoreRef.current.notify();
-			}
+			streamingRef.current = true;
+			streamingStoreRef.current.notify();
 			return true;
 		} catch {
 			return false;
 		}
-	}, [isBrowser, width]);
+	}, [isBrowser, loadVideDevices]);
 	const capture = React.useCallback(() => {
 		const video = videoRef.current;
 		const canvas = canvasRef.current;
@@ -76,9 +85,19 @@ function useCameraCapture(options = {}) {
 		if (!video || !canvas || !streamingRef.current) return null;
 		const context = canvas.getContext("2d");
 		if (!context) return null;
-		canvas.width = width;
-		canvas.height = heightRef.current;
-		context.drawImage(video, 0, 0, width, heightRef.current);
+		const videoWidth = video.videoWidth;
+		const videoHeight = video.videoHeight;
+		if (!videoWidth || !videoHeight) return null;
+		if (width) {
+			const scaledHeight = videoHeight / (videoWidth / width);
+			canvas.width = width;
+			canvas.height = scaledHeight;
+			context.drawImage(video, 0, 0, width, scaledHeight);
+		} else {
+			canvas.width = videoWidth;
+			canvas.height = videoHeight;
+			context.drawImage(video, 0, 0, videoWidth, videoHeight);
+		}
 		const dataUrl = canvas.toDataURL(output.type, output.quality);
 		image?.setAttribute("src", dataUrl);
 		if (onCapture) canvas.toBlob((blob) => {
@@ -93,11 +112,18 @@ function useCameraCapture(options = {}) {
 	]);
 	const stop = React.useCallback(() => {
 		streamRef.current?.getTracks().forEach((track) => track.stop());
+		if (videoRef.current) videoRef.current.srcObject = null;
 		streamRef.current = null;
 		streamingRef.current = false;
 		permissionStoreRef.current.notify();
 		streamingStoreRef.current.notify();
 	}, []);
+	const toggleCamera = React.useCallback(async () => {
+		if (devicesRef.current.length <= 1) return false;
+		stop();
+		currentDeviceIndexRef.current = (currentDeviceIndexRef.current + 1) / devicesRef.current.length;
+		return await requestPermission();
+	}, [requestPermission, stop]);
 	const usePermission = () => React.useSyncExternalStore(permissionStoreRef.current.subscribe, permissionStoreRef.current.getSnapshot, () => false);
 	const useStreaming = () => React.useSyncExternalStore(streamingStoreRef.current.subscribe, streamingStoreRef.current.getSnapshot, () => false);
 	return {
@@ -106,6 +132,7 @@ function useCameraCapture(options = {}) {
 		imageRef,
 		requestPermission,
 		stop,
+		toggleCamera,
 		usePermission,
 		useStreaming,
 		videoRef

package/dist/useScreenOrientation.js

@@ -16,28 +16,37 @@ import * as React from "react";
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API
 */
 function useScreenOrientation() {
-	const isSupported = typeof screen !== "undefined" && screen.orientation !== void 0;
-	const [type, setType] = React.useState(isSupported ? screen.orientation.type : null);
-	const [angle, setAngle] = React.useState(isSupported ? screen.orientation.angle : null);
-	const lock = React.useCallback(async (orientation) => {
-		if (!isSupported) return;
-		await screen.orientation.lock(orientation);
-	}, [isSupported]);
+	const orientation = typeof window !== "undefined" && "orientation" in screen ? screen.orientation : null;
+	const isSupported = !!orientation && typeof orientation.lock === "function" && typeof orientation.unlock === "function";
+	const [type, setType] = React.useState(orientation?.type ?? null);
+	const [angle, setAngle] = React.useState(orientation?.angle ?? null);
+	const lock = React.useCallback(async (orientationLock) => {
+		if (!isSupported || !orientation) return;
+		try {
+			await orientation.lock(orientationLock);
+		} catch (error) {
+			console.warn("Orientation lock failed:", error);
+		}
+	}, [isSupported, orientation]);
 	const unlock = React.useCallback(() => {
-		if (!isSupported) return;
-		screen.orientation.unlock();
-	}, [isSupported]);
+		if (!isSupported || !orientation) return;
+		try {
+			orientation.unlock();
+		} catch (error) {
+			console.warn("Orientation unlock failed:", error);
+		}
+	}, [isSupported, orientation]);
 	React.useEffect(() => {
-		if (!isSupported) return;
+		if (!orientation) return;
 		const handleChange = () => {
-			setType(screen.orientation.type);
-			setAngle(screen.orientation.angle);
+			setType(orientation.type);
+			setAngle(orientation.angle);
 		};
-		screen.orientation.addEventListener("change", handleChange);
+		orientation.addEventListener("change", handleChange);
 		return () => {
-			screen.orientation.removeEventListener("change", handleChange);
+			orientation.removeEventListener("change", handleChange);
 		};
-	}, [isSupported]);
+	}, [orientation]);
 	return {
 		angle,
 		isSupported,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vibehooks/react",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Modern React and Next.js hooks, unopinionated and focused on developer experience.",
   "author": "Sebastian Marat Urdanegui Bisalaya <sebasurdanegui@gmail.com>",
   "license": "MIT",