Reduced graphics (computer) for mobile rendering

Author: khemssharma

src/components/canvas/Computers.jsx

@@ -45,20 +45,30 @@ const ComputersCanvas = () => {
     };
 
     // Add the callback function as a listener for changes to the media query
-    mediaQuery.addEventListener("change", handleMediaQueryChange);
+    // Use addEventListener if available, otherwise fall back to addListener
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleMediaQueryChange);
+    } else if (mediaQuery.addListener) {
+      mediaQuery.addListener(handleMediaQueryChange);
+    }
 
     // Remove the listener when the component is unmounted
     return () => {
-      mediaQuery.removeEventListener("change", handleMediaQueryChange);
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", handleMediaQueryChange);
+      } else if (mediaQuery.removeListener) {
+        mediaQuery.removeListener(handleMediaQueryChange);
+      }
     };
   }, []);
 
   return (
-    <Canvas className="sm:block hidden"
+    <Canvas
+      className="w-full"
       frameloop='demand'
-      shadows
-      dpr={[1, 2]}
-      camera={{ position: [20, 3, 5], fov: 25 }}
+      shadows={!isMobile}
+      dpr={isMobile ? 1 : [1, 2]}
+      camera={{ position: isMobile ? [20, 2, 5] : [20, 3, 5], fov: 25 }}
       gl={{ preserveDrawingBuffer: true }}
     >
       <Suspense fallback={<CanvasLoader />}>