findmydevice 재생 배속 자동 조정

js/main.js

@@ -439,6 +439,8 @@ const deviceLang = (navigator.language || navigator.userLanguage || "en").starts
         selectedMarker: null,
         playbackTimer: null,
         playbackIndex: 0,
+        playbackSpeed: 1,
+        playbackSpeedOptions: [1],
         rangeCircles: [],
         homeCircle: null,
         homeCenter: null,
@@ -469,6 +471,10 @@ let langCode = localStorage.getItem("currentLang") || deviceLang,
     _overrideRange,
     wakeLock = null;
 
+const PLAYBACK_SPEEDS = [2, 5, 10, 20, 50, 100, 500];
+const PLAYBACK_MIN_VISIBLE_STEPS = 80;
+const PLAYBACK_TICK_MS = 160;
+
 const FALLBACK_BACK_TARGET = 'https://chaegeon.com/';
 const BACK_LINK_PATH_TITLE = {
     '/': '채건닷컴',
@@ -1397,7 +1403,7 @@ function updateMapToolLabels() {
     const t = translations[langCode] || translations.ko;
     const labelMap = {
         fit: t.mapFit,
-        play: mapState.playbackTimer ? t.mapPause : t.mapPlay,
+        play: mapState.playbackTimer ? `${t.mapPause} ${mapState.playbackSpeed}x` : t.mapPlay,
         filter: t.historyFiltered,
         naver: t.openNaverMap,
     };
@@ -1904,18 +1910,26 @@ function stopHistoryPlayback() {
     updateMapToolLabels();
 }
 
-function toggleHistoryPlayback() {
-    if (!mapState.map || !mapState.historyPoints?.length) return;
-    if (mapState.playbackTimer) {
-        stopHistoryPlayback();
-        return;
+function getPlaybackSpeedOptions(points) {
+    const count = Array.isArray(points) ? points.length : 0;
+    const speeds = PLAYBACK_SPEEDS.filter(speed => count / speed >= PLAYBACK_MIN_VISIBLE_STEPS);
+    return speeds.length ? speeds : [1];
+}
+
+function startHistoryPlayback(speed) {
+    const points = mapState.historyPoints;
+    if (!mapState.map || !points?.length) return;
+
+    stopHistoryPlayback();
+    mapState.playbackSpeed = speed;
+
+    if (mapState.playbackIndex >= points.length - 1) {
+        mapState.playbackIndex = 0;
     }
 
-    const points = mapState.historyPoints;
-    let index = 0;
     if (!mapState.playbackMarker) {
         mapState.playbackMarker = new naver.maps.Marker({
-            position: points[0].latlng,
+            position: points[mapState.playbackIndex].latlng,
             map: mapState.map,
             zIndex: 120,
             icon: {
@@ -1925,19 +1939,49 @@ function toggleHistoryPlayback() {
         });
     } else {
         mapState.playbackMarker.setMap(mapState.map);
-        mapState.playbackMarker.setPosition(points[0].latlng);
+        mapState.playbackMarker.setPosition(points[mapState.playbackIndex].latlng);
     }
 
+    let tick = 0;
     mapState.playbackTimer = setInterval(() => {
+        const index = Math.min(mapState.playbackIndex || 0, points.length - 1);
         const point = points[index];
         moveSelectedHistoryPoint(index, false);
-        if (index % 8 === 0) mapState.map.panTo(point.latlng);
-        index += 1;
-        if (index >= points.length) stopHistoryPlayback();
-    }, Math.max(120, Math.min(450, 10000 / points.length)));
+        if (tick % 8 === 0) mapState.map.panTo(point.latlng);
+
+        const nextIndex = index + speed;
+        if (nextIndex >= points.length) {
+            moveSelectedHistoryPoint(points.length - 1, false);
+            stopHistoryPlayback();
+            return;
+        }
+
+        mapState.playbackIndex = nextIndex;
+        tick += 1;
+    }, PLAYBACK_TICK_MS);
     updateMapToolLabels();
 }
 
+function toggleHistoryPlayback() {
+    if (!mapState.map || !mapState.historyPoints?.length) return;
+    const points = mapState.historyPoints;
+    const options = getPlaybackSpeedOptions(points);
+    mapState.playbackSpeedOptions = options;
+
+    if (mapState.playbackTimer) {
+        const currentIndex = options.indexOf(mapState.playbackSpeed);
+        const nextSpeed = currentIndex >= 0 ? options[currentIndex + 1] : options[0];
+        if (nextSpeed) {
+            startHistoryPlayback(nextSpeed);
+        } else {
+            stopHistoryPlayback();
+        }
+        return;
+    }
+
+    startHistoryPlayback(options[0]);
+}
+
 function clearTrackLines() {
     if (mapState.trackLine) {
         mapState.trackLine.setMap(null);