From 3a6a3e562cb0869931ea3f93e1e0c99c296d78c0 Mon Sep 17 00:00:00 2001 From: btahir89 Date: Sat, 16 Nov 2024 23:39:32 -0800 Subject: [PATCH] try adding touch controls --- components/PlaybackControls.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/components/PlaybackControls.tsx b/components/PlaybackControls.tsx index 974c19f..4e75d6d 100644 --- a/components/PlaybackControls.tsx +++ b/components/PlaybackControls.tsx @@ -70,7 +70,21 @@ const PlaybackControls: React.FC = ({ step={0.01} value={volume} onChange={(e) => setVolume(parseFloat(e.target.value))} - className="w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)]" + onTouchStart={(e) => { + // Prevent default touch behavior + e.stopPropagation() + }} + onTouchMove={(e) => { + // Get the touch position relative to the input + const touch = e.touches[0] + const input = e.target as HTMLInputElement + const rect = input.getBoundingClientRect() + const pos = (touch.clientX - rect.left) / rect.width + // Clamp the value between 0 and 1 + const newVolume = Math.max(0, Math.min(1, pos)) + setVolume(newVolume) + }} + className="w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)] touch-none" />