From 2462850e2ea360f9a52debb51a98e096ab5ec4b0 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Wed, 17 Jun 2026 22:23:01 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20xoay=20m=C3=A0n=20h=C3=ACnh=20theo=20h?=
 =?UTF-8?q?=C6=B0=E1=BB=9Bng=20ng=C6=B0=E1=BB=9Di=20nh=C3=ACn=20trong=20m?=
 =?UTF-8?q?=C3=A0n=20h=C3=ACnh=20b=E1=BA=A3n=20=C4=91=E1=BB=93=20v?=
 =?UTF-8?q?=E1=BA=ABn=20c=C3=B2n=20xoay=20tr=C3=B2n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/TourDetailPage.tsx | 23 +++++------------------
 1 file changed, 5 insertions(+), 18 deletions(-)

diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index 490c86f..8600979 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/frontend/src/pages/TourDetailPage.tsx
@@ -172,9 +172,9 @@ const MapRotationHandler = ({ rotation }: { rotation: number }) => {
   const map = useMap();
   useEffect(() => {
     const container = map.getContainer();
-    // Tăng scale lên 1.8 để đảm bảo bao phủ toàn bộ màn hình điện thoại (vốn có tỉ lệ dài) khi xoay ở mọi góc độ
-    container.style.transform = `rotate(${rotation}deg) scale(${rotation === 0 ? 1 : 1.8})`;
-    container.style.transition = 'transform 0.3s ease-out';
+    // Tăng scale lên 2.5 để bao phủ hoàn toàn các màn hình siêu dài (như 21:9)
+    container.style.transform = `rotate(${rotation}deg) scale(${rotation === 0 ? 1 : 2.5})`;
+    container.style.transition = 'transform 0.1s linear';
   }, [rotation, map]);
   return null;
 };
@@ -384,7 +384,6 @@ export const TourDetailPage = ({
 
   // State mới cho hướng thiết bị (la bàn)
   const [deviceOrientationHeading, setDeviceOrientationHeading] = useState<number | null>(null);
-  const rotationUpdateTimer = useRef<NodeJS.Timeout | null>(null);
 
   // Theo dõi hướng thiết bị (la bàn)
   useEffect(() => {
@@ -408,10 +407,6 @@ export const TourDetailPage = ({
 
   // Logic kết hợp để xác định hướng xoay bản đồ
   useEffect(() => {
-    if (rotationUpdateTimer.current) {
-      clearTimeout(rotationUpdateTimer.current);
-    }
-
     if (!isHeadingMode) {
       setMapRotation(0); // Đặt lại hướng Bắc nếu chế độ xoay tắt
       return;
@@ -427,17 +422,9 @@ export const TourDetailPage = ({
     }
 
     if (newRotation !== null) {
-      // Debounce cập nhật xoay để làm mượt chuyển động
-      rotationUpdateTimer.current = setTimeout(() => {
-        setMapRotation(newRotation!);
-      }, 100); // Trì hoãn 100ms
+      // Cập nhật ngay lập tức để tăng độ nhạy, CSS transition sẽ lo phần mượt mà
+      setMapRotation(newRotation);
     }
-
-    return () => {
-      if (rotationUpdateTimer.current) {
-        clearTimeout(rotationUpdateTimer.current);
-      }
-    };
   }, [isHeadingMode, gpsHeading, userSpeed, deviceOrientationHeading]);
 
   const [isStartPointAction, setIsStartPointAction] = useState(false);