From 80261ad6272597e346dc8773a4a5be0acd8063dc Mon Sep 17 00:00:00 2001
From: Izan <66965250+SrIzan10@users.noreply.github.com>
Date: Tue, 13 Jan 2026 22:23:53 +0100
Subject: [PATCH] fix: more tactile stuff

---
 app/pages/index.vue             | 32 ++++++++++++++++++++++++++++++--
 app/pages/sign-in/[...slug].vue |  2 +-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index c983c5d..334c373 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -63,14 +63,19 @@
         autoplay
         playsinline
         :controls="false"
-        class="w-full h-full object-contain bg-black"
+        class="w-full h-full object-contain bg-black cursor-pointer"
         @loadeddata="isConnected = true"
+        @click="showControls"
+        @touchstart="showControls"
       />
 
       <!-- Connected Controls Overlay -->
       <div
         v-if="isConnected"
-        class="absolute top-0 left-0 right-0 p-4 flex justify-between items-start opacity-0 hover:opacity-100 transition-opacity bg-gradient-to-b from-black/50 to-transparent"
+        class="absolute top-0 left-0 right-0 p-4 flex justify-between items-start transition-opacity bg-gradient-to-b from-black/50 to-transparent"
+        :class="[controlsVisible ? 'opacity-100' : 'opacity-0 hover:opacity-100']"
+        @click="resetControlsTimeout"
+        @touchstart="showControls"
       >
         <Button
           variant="destructive"
@@ -104,6 +109,8 @@ import { useWebSocketUrl } from "~/composables/useWebSocketUrl";
 import { LogOut, Maximize } from "lucide-vue-next";
 
 const isConnected = ref(false);
+const controlsVisible = ref(false);
+let controlsHideTimeout: ReturnType<typeof setTimeout> | null = null;
 const viewerStore = useViewerStore();
 const { code: codeRef } = storeToRefs(viewerStore);
 const wsUrl = useWebSocketUrl();
@@ -256,6 +263,12 @@ watch(codeRef, (newCode) => {
 });
 
 function cleanupViewing() {
+  // Clear controls hide timeout
+  if (controlsHideTimeout) {
+    clearTimeout(controlsHideTimeout);
+  }
+  controlsVisible.value = false;
+
   // Close peer connection
   if (viewerStore.peerConnection) {
     viewerStore.peerConnection.close();
@@ -297,6 +310,21 @@ function handleReset() {
   viewerStore.setConnectionStatus("waiting for a code");
 }
 
+function showControls() {
+  controlsVisible.value = true;
+  resetControlsTimeout();
+}
+
+function resetControlsTimeout() {
+  if (controlsHideTimeout) {
+    clearTimeout(controlsHideTimeout);
+  }
+  
+  controlsHideTimeout = setTimeout(() => {
+    controlsVisible.value = false;
+  }, 3000);
+}
+
 // Cleanup on component unmount
 onBeforeUnmount(() => {
   cleanupViewing();
diff --git a/app/pages/sign-in/[...slug].vue b/app/pages/sign-in/[...slug].vue
index ee848ec..a035474 100644
--- a/app/pages/sign-in/[...slug].vue
+++ b/app/pages/sign-in/[...slug].vue
@@ -1,5 +1,5 @@
 <template>
   <div class="flex h-full w-full items-center justify-center">
-    <SignIn routing ="path" path="/sign-in" />
+    <SignIn routing="path" path="/sign-in" />
   </div>
 </template>