File size: 1,991 Bytes
065d164 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import { useState, useEffect, useCallback, useRef } from 'react';
/**
* Combined hook for device detection and canvas management
* @returns {Object} Device and canvas management utilities
*/
const useDeviceAndCanvas = () => {
// Device detection state
const [isMobile, setIsMobile] = useState(false);
const [isMac, setIsMac] = useState(false);
// Canvas management state
const [canvasWidth, setCanvasWidth] = useState(640);
const [canvasHeight, setCanvasHeight] = useState(480);
const [videoAspectRatio, setVideoAspectRatio] = useState(4/3);
const isComponentMounted = useRef(true);
// Device detection effect
useEffect(() => {
isComponentMounted.current = true;
const checkMobile = () => {
const mobile = window.innerWidth < 768;
setIsMobile(mobile);
};
checkMobile();
window.addEventListener('resize', checkMobile);
// Check if user is on Mac
if (typeof navigator !== 'undefined') {
setIsMac(navigator.platform.includes('Mac'));
}
return () => {
isComponentMounted.current = false;
window.removeEventListener('resize', checkMobile);
};
}, []);
// Function to update canvas size based on container width and video aspect ratio
const updateCanvasSize = useCallback((aspectRatio) => {
if (!isComponentMounted.current) return;
const containerWidth = document.querySelector('.canvas-container')?.clientWidth || window.innerWidth;
// Set maximum width for the canvas - increased for desktop
const maxWidth = Math.min(containerWidth, isMobile ? 640 : 960);
const height = maxWidth / aspectRatio;
setCanvasWidth(maxWidth);
setCanvasHeight(height);
}, [isMobile]);
return {
// Device detection
isMobile,
isMac,
// Canvas management
canvasWidth,
canvasHeight,
videoAspectRatio,
setVideoAspectRatio,
updateCanvasSize,
isComponentMounted
};
};
export default useDeviceAndCanvas; |