fix: Refs nested on the replay object aren't unwrapping when passed as props.

vigilcare-dashboard/src/views/PatientDetail.vue

@@ -21,7 +21,23 @@ import Skeleton from '@/components/ui/Skeleton.vue'
 const route = useRoute()
 const alertStore = useAlertStore()
 const { alerts } = storeToRefs(alertStore)
-const replay = useReplayControls()
+const {
+  isPaused,
+  speed,
+  progress,
+  formattedTime,
+  currentMs,
+  scenarioEndMs,
+  scenarioStartMs,
+  pause,
+  resume,
+  setSpeed,
+  jumpToTimestamp,
+  isAtOrBefore,
+  setScenarioBounds,
+  syncToEnd,
+  stopPlayback,
+} = useReplayControls()
 
 const encounter = ref(null)
 const loading = ref(true)
@@ -39,11 +55,11 @@ const openAlerts = computed(() =>
 )
 
 const replayObservations = computed(() =>
-  observations.value.filter(o => replay.isAtOrBefore(o.recordedAt)),
+  observations.value.filter(o => isAtOrBefore(o.recordedAt)),
 )
 
 const replayNews2History = computed(() =>
-  news2History.value.filter(h => replay.isAtOrBefore(h.calculatedAt)),
+  news2History.value.filter(h => isAtOrBefore(h.calculatedAt)),
 )
 
 function collectScenarioTimes() {
@@ -58,10 +74,10 @@ function syncReplayBounds() {
   const times = collectScenarioTimes()
   if (!times.length) return
 
-  const atEnd = replay.currentMs.value >= replay.scenarioEndMs.value - 1_000
-  replay.setScenarioBounds(Math.min(...times), Math.max(...times))
-  if (atEnd || replay.scenarioEndMs.value === replay.scenarioStartMs.value) {
-    replay.syncToEnd()
+  const atEnd = currentMs.value >= scenarioEndMs.value - 1_000
+  setScenarioBounds(Math.min(...times), Math.max(...times))
+  if (atEnd || scenarioEndMs.value === scenarioStartMs.value) {
+    syncToEnd()
   }
 }
 
@@ -94,7 +110,7 @@ async function loadAll() {
 
 function onSelectAlert(alert) {
   selectedAlert.value = alert
-  replay.jumpToTimestamp(alert.triggeredAt)
+  jumpToTimestamp(alert.triggeredAt)
 }
 
 function jumpToNextAlert() {
@@ -106,7 +122,7 @@ function jumpToNextAlert() {
   const alert = sorted[nextAlertIndex % sorted.length]
   selectedAlert.value = alert
   nextAlertIndex++
-  replay.jumpToTimestamp(alert.triggeredAt)
+  jumpToTimestamp(alert.triggeredAt)
 
   document.getElementById(`alert-row-${alert.id}`)?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
   document.getElementById('clinical-review')?.scrollIntoView({ behavior: 'smooth', block: 'start' })
@@ -117,7 +133,7 @@ usePolling(loadAll, 5_000)
 watch(() => route.params.encounterId, () => {
   selectedAlert.value = null
   nextAlertIndex = 0
-  replay.pause()
+  pause()
   loadAll()
 })
 
@@ -130,7 +146,7 @@ watch(openAlerts, (list) => {
 
 watch([observations, news2History, alerts], syncReplayBounds, { deep: true })
 
-onBeforeUnmount(() => replay.stopPlayback())
+onBeforeUnmount(() => stopPlayback())
 </script>
 
 <template>
@@ -171,13 +187,13 @@ onBeforeUnmount(() => replay.stopPlayback())
       <News2History v-if="replayNews2History.length" :history="replayNews2History" />
       <ReplayControls
         :alerts="openAlerts"
-        :is-paused="replay.isPaused"
-        :progress="replay.progress"
-        :formatted-time="replay.formattedTime"
-        :speed="replay.speed"
-        @pause="replay.pause()"
-        @resume="replay.resume()"
-        @set-speed="replay.setSpeed"
+        :is-paused="isPaused"
+        :progress="progress"
+        :formatted-time="formattedTime"
+        :speed="speed"
+        @pause="pause()"
+        @resume="resume()"
+        @set-speed="setSpeed"
         @jump-to-alert="jumpToNextAlert"
       />
     </div>