Remove rc-slider

6 files changed, 81 insertions, 93 deletions

diff --git a/astro.config.mjs b/astro.config.mjs
index a7143db..2674216 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -19,5 +19,9 @@ export default defineConfig({
 
   adapter: cloudflare({
     imageService: "compile"
-  })
+  }),
+
+  devToolbar: {
+    enabled: false
+  }
 });
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8e508a5..48a15aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,20 +11,19 @@
         "@astrojs/cloudflare": "^12.6.9",
         "@astrojs/react": "^4.3.1",
         "@tailwindcss/vite": "^4.1.13",
+        "@types/luxon": "^3.7.1",
+        "@types/mapbox-gl": "^3.4.1",
         "@types/react": "^19.1.13",
         "@types/react-dom": "^19.1.9",
         "astro": "^5.13.10",
         "axios": "^1.12.2",
         "luxon": "^3.7.2",
         "mapbox-gl": "^3.15.0",
-        "rc-slider": "^11.1.9",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "tailwindcss": "^4.1.13"
       },
       "devDependencies": {
-        "@types/luxon": "^3.7.1",
-        "@types/mapbox-gl": "^3.4.1",
         "wrangler": "^4.39.0"
       }
     },
@@ -1423,15 +1422,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/runtime": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
-      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -3393,7 +3383,6 @@
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.7.1.tgz",
       "integrity": "sha512-H3iskjFIAn5SlJU7OuxUmTEpebK6TKB8rxZShDslBMZJ5u9S//KM1sbdAisiSrqwLQncVjnpi2OK2J51h+4lsg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/mapbox__point-geometry": {
@@ -3406,7 +3395,6 @@
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.4.1.tgz",
       "integrity": "sha512-NsGKKtgW93B+UaLPti6B7NwlxYlES5DpV5Gzj9F75rK5ALKsqSk15CiEHbOnTr09RGbr6ZYiCdI+59NNNcAImg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/geojson": "*"
@@ -4043,12 +4031,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
-      "license": "MIT"
-    },
     "node_modules/cli-boxes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
@@ -7255,38 +7237,6 @@
       "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==",
       "license": "MIT"
     },
-    "node_modules/rc-slider": {
-      "version": "11.1.9",
-      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-11.1.9.tgz",
-      "integrity": "sha512-h8IknhzSh3FEM9u8ivkskh+Ef4Yo4JRIY2nj7MrH6GQmrwV6mcpJf5/4KgH5JaVI1H3E52yCdpOlVyGZIeph5A==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "^2.2.5",
-        "rc-util": "^5.36.0"
-      },
-      "engines": {
-        "node": ">=8.x"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
-    "node_modules/rc-util": {
-      "version": "5.44.4",
-      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.44.4.tgz",
-      "integrity": "sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "react-is": "^18.2.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
     "node_modules/react": {
       "version": "19.1.1",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
@@ -7308,12 +7258,6 @@
         "react": "^19.1.1"
       }
     },
-    "node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "license": "MIT"
-    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
diff --git a/package.json b/package.json
index 8e16464..1131a43 100644
--- a/package.json
+++ b/package.json
@@ -12,20 +12,19 @@
     "@astrojs/cloudflare": "^12.6.9",
     "@astrojs/react": "^4.3.1",
     "@tailwindcss/vite": "^4.1.13",
+    "@types/luxon": "^3.7.1",
+    "@types/mapbox-gl": "^3.4.1",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "astro": "^5.13.10",
     "axios": "^1.12.2",
     "luxon": "^3.7.2",
     "mapbox-gl": "^3.15.0",
-    "rc-slider": "^11.1.9",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "tailwindcss": "^4.1.13"
   },
   "devDependencies": {
-    "@types/luxon": "^3.7.1",
-    "@types/mapbox-gl": "^3.4.1",
     "wrangler": "^4.39.0"
   }
 }
diff --git a/src/components/Geshem.tsx b/src/components/Geshem.tsx
index acd2bc6..982d841 100644
--- a/src/components/Geshem.tsx
+++ b/src/components/Geshem.tsx
@@ -23,7 +23,7 @@ export function Geshem({ date }: GeshemProps) {
     const fetchImages = async () =>
       fetch(`${IMAGES_BASE_URL}/imgs.json`)
         .then(res => res.json())
-        .then(imgs => imgs["280"])
+        .then(imgs => (imgs as any)["280"])
         .then(setImages);
 
     const buildPlayback = async () => {
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index 2ee3fa1..bb1b84f 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -1,43 +1,84 @@
-import React from "react";
-import RcSlider from 'rc-slider';
+import React, { useCallback, useRef, useState } from "react";
 import { PLAYBACK_SLOTS } from "../config";
-import "rc-slider/assets/index.css";
 
-interface GeshemSliderProps {
+interface SliderProps {
   playback?: string;
   slider: number;
   setSlider: React.Dispatch<React.SetStateAction<number>>;
 }
 
-export function Slider({ playback, slider, setSlider }: GeshemSliderProps) {
-  const handleStyle = {
-    height: 40,
-    width: 40,
-    border: 0,
-    marginTop: -10,
-    boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)"
-  };
+export function Slider({ playback, slider, setSlider }: SliderProps) {
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
 
-  const railStyle = {
-    height: 20,
-    backgroundColor: "#3498db"
-  };
+  const max = playback ? PLAYBACK_SLOTS : 9;
 
-  const trackStyle = {
-    display: "none"
-  };
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    setIsDragging(true);
+    updateSliderValue(e);
+  }, []);
+
+  const updateSliderValue = useCallback((e: MouseEvent | React.MouseEvent) => {
+    if (!sliderRef.current) return;
+
+    const rect = sliderRef.current.getBoundingClientRect();
+    const percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const value = Math.round(percentage * max);
+    setSlider(value);
+  }, [max, setSlider]);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (isDragging) {
+      updateSliderValue(e);
+    }
+  }, [isDragging, updateSliderValue]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  const percentage = (slider / max) * 100;
 
   return (
-    <div id="slider">
-      <RcSlider
-        min={0}
-        max={playback ? PLAYBACK_SLOTS : 9}
-        defaultValue={slider}
-        handleStyle={handleStyle}
-        railStyle={railStyle}
-        trackStyle={trackStyle}
-        onChange={(val) => setSlider(val as number)}
-      />
+    <div id="slider" style={{ padding: '10px 0' }}>
+      <div
+        ref={sliderRef}
+        style={{
+          position: 'relative',
+          height: '20px',
+          backgroundColor: '#3498db',
+          borderRadius: '10px',
+          cursor: 'pointer'
+        }}
+        onMouseDown={handleMouseDown}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: '-10px',
+            left: `calc(${percentage}% - 20px)`,
+            width: '40px',
+            height: '40px',
+            backgroundColor: '#fff',
+            borderRadius: '50%',
+            boxShadow: '.5px .5px 2px 1px rgba(0,0,0,.32)',
+            cursor: isDragging ? 'grabbing' : 'grab',
+            zIndex: 1
+          }}
+        />
+      </div>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/config.ts b/src/config.ts
index 6d838be..615e6d4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,6 +1,6 @@
 const hostname = typeof window !== 'undefined' && window.location && window.location.hostname;
 
-const PRODUCTION = hostname ? hostname.includes("geshem") : false;
+const PRODUCTION = true;
 
 export const IMAGES_BASE_URL = PRODUCTION ? "https://imgs.geshem.space" : "";