fix

src/components/ScreenPreview.vue

@@ -17,6 +17,7 @@ const props = defineProps<{
 const timerNow = ref(Date.now())
 const timerRemainingAtSync = ref(0)
 const timerSyncedAt = ref(Date.now())
+const timerStateAtSync = ref<string>()
 let timerTick: number | null = null
 
 const screenBackground = computed(() => {
@@ -27,11 +28,11 @@ const screenBackground = computed(() => {
 })
 const timerRemainingSeconds = computed(() => {
   if (props.state.timerState !== 'SCREEN_TIMER_STATE_RUNNING') return timerRemainingAtSync.value
-  return Math.max(0, timerRemainingAtSync.value - Math.floor((timerNow.value - timerSyncedAt.value) / 1000))
+  return Math.max(0, timerRemainingAtSync.value - (timerNow.value - timerSyncedAt.value) / 1000)
 })
 const timerDisplay = computed(() => {
   const minutes = Math.floor(timerRemainingSeconds.value / 60)
-  const seconds = timerRemainingSeconds.value % 60
+  const seconds = Math.floor(timerRemainingSeconds.value % 60)
   return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
 })
 const introAudio = computed(() => applicationFileURL(props.state.introAudio))
@@ -40,8 +41,14 @@ const conclusionVideo = computed(() => applicationFileURL(props.state.conclusion
 watch(
   () => [props.state.timerRemainingSeconds, props.state.timerState, props.state.stateVersion],
   () => {
-    timerRemainingAtSync.value = Math.max(0, Math.floor(props.state.timerRemainingSeconds || 0))
+    const remaining = Math.max(0, Number(props.state.timerRemainingSeconds || 0))
+    if (props.state.timerState === 'SCREEN_TIMER_STATE_RUNNING' && timerStateAtSync.value === props.state.timerState) {
+      const localRemaining = Math.max(0, timerRemainingAtSync.value - (Date.now() - timerSyncedAt.value) / 1000)
+      if (Math.abs(remaining - localRemaining) <= 0.5) return
+    }
+    timerRemainingAtSync.value = remaining
     timerSyncedAt.value = Date.now()
+    timerStateAtSync.value = props.state.timerState
   },
   { immediate: true },
 )