From 1e1971399416c188cfe4dda09c6ff81343f02a4c Mon Sep 17 00:00:00 2001
From: alij <ali.josheghani2005@gmail.com>
Date: Sun, 16 Jun 2024 10:25:00 +0430
Subject: [PATCH] feat : Optimization for particles and not showing on weak
 devices

---
 src/components/particle/index.tsx | 55 ++++++++++++++++++++++++-------
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/components/particle/index.tsx b/src/components/particle/index.tsx
index e7097eb..b413bbb 100644
--- a/src/components/particle/index.tsx
+++ b/src/components/particle/index.tsx
@@ -6,24 +6,21 @@ import {
   MoveDirection,
   OutMode,
 } from "@tsparticles/engine";
-// import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
-// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
-import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
-// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
+import { loadSlim } from "@tsparticles/slim"; // اگر قصد استفاده از loadSlim دارید، حتما بسته "@tsparticles/slim" را نصب کنید
 
 export default function Particle() {
   const [init, setInit] = useState(false);
+  const [showParticles, setShowParticles] = useState(true);
 
-  // this should be run only once per application lifetime
   useEffect(() => {
+    // بررسی قدرت دستگاه و تنظیم نمایش یا عدم نمایش Particles
+    if (isLowEndDevice()) {
+      setShowParticles(false);
+      return;
+    }
+
     initParticlesEngine(async (engine) => {
-      // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
-      // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
-      // starting from v2 you can add only the features you need reducing the bundle size
-      //await loadAll(engine);
-      //await loadFull(engine);
       await loadSlim(engine);
-      //await loadBasic(engine);
     }).then(() => {
       setInit(true);
     });
@@ -75,7 +72,7 @@ export default function Particle() {
           shadow: {
             enable: true,
             blur: 5,
-            color: "#71fbb2",  
+            color: "#71fbb2",
           },
           warp: {
             enable: true,
@@ -118,6 +115,10 @@ export default function Particle() {
     []
   );
 
+  if (!showParticles) {
+    return <></>; // در صورت ضعیف بودن دستگاه، Particles نمایش داده نمی‌شود
+  }
+
   if (init) {
     return (
       <Particles
@@ -130,3 +131,33 @@ export default function Particle() {
 
   return <></>;
 }
+
+// تابع بررسی قدرت دستگاه
+function isLowEndDevice(): boolean {
+  const userAgent = navigator.userAgent;
+
+  // بررسی برخی از دستگاه‌های قدیمی و ضعیف
+  const lowEndDevices = [
+    /Android.*Mobile Safari\/(?:5|6|7)/, // دستگاه‌های اندروید با مرورگر قدیمی
+    /iPhone.*OS [1-9]_[0-9]/,            // دستگاه‌های آیفون با iOS قدیمی
+    /Windows Phone/,                     // گوشی‌های ویندوز فون
+    /Nokia/,                             // دستگاه‌های قدیمی نوکیا
+    /BlackBerry/,                        // دستگاه‌های بلک‌بری
+  ];
+
+  // بررسی پشتیبانی WebGL
+  const isWebGLAvailable = () => {
+    try {
+      const canvas = document.createElement("canvas");
+      return !!(window.WebGLRenderingContext && canvas.getContext("webgl"));
+    } catch (e) {
+      return false;
+    }
+  };
+
+  // بررسی User Agent
+  const isLowEndUA = lowEndDevices.some((regex) => regex.test(userAgent));
+
+  // دستگاه‌هایی که WebGL را پشتیبانی نمی‌کنند، اغلب ضعیف هستند
+  return isLowEndUA || !isWebGLAvailable();
+}