fix

src/components/ScreenPage.vue

@@ -32,6 +32,7 @@ const bindSuccess = ref(false)
 const timerNow = ref(Date.now())
 const timerRemainingAtSync = ref(0)
 const timerSyncedAt = ref(Date.now())
+const timerStateAtSync = ref<string>()
 const introAudioElement = ref<HTMLAudioElement>()
 const conclusionVideoElement = ref<HTMLVideoElement>()
 let appliedCommandVersion = 0
@@ -55,11 +56,11 @@ const gameOptions = computed(() =>
 const screenMode = computed(() => state.value?.mode || 'SCREEN_MODE_COVER')
 const timerRemainingSeconds = computed(() => {
   if (state.value?.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(state.value?.introAudio))
@@ -74,8 +75,14 @@ function saveSession() {
 }
 
 function syncTimer(value: ScreenState | undefined) {
-  timerRemainingAtSync.value = Math.max(0, Math.floor(value?.timerRemainingSeconds || 0))
+  const remaining = Math.max(0, Number(value?.timerRemainingSeconds || 0))
+  if (value?.timerState === 'SCREEN_TIMER_STATE_RUNNING' && timerStateAtSync.value === value.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 = value?.timerState
 }
 
 function readSession() {

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 },
 )