@slidev/client 52.5.0 → 52.6.0

package/composables/useTimer.ts

@@ -1,55 +1,85 @@
+import { parseTimeString } from '@slidev/parser/utils'
 import { useInterval } from '@vueuse/core'
 import { computed, toRef } from 'vue'
+import { configs } from '../env'
 import { sharedState } from '../state/shared'
 
 export function useTimer() {
+  const mode = computed(() => configs.timer || 'stopwatch')
+  const duration = computed(() => parseTimeString(configs.duration).seconds)
   const interval = useInterval(100, { controls: true })
 
-  const state = toRef(sharedState, 'timerStatus')
-  const timer = computed(() => {
-    if (sharedState.timerStatus === 'stopped' && sharedState.timerStartedAt === 0)
-      return { h: '', m: '-', s: '--', ms: '-' }
+  const state = toRef(sharedState, 'timer')
+  const status = computed(() => state.value?.status)
+  const passedMs = computed(() => {
     // eslint-disable-next-line ts/no-unused-expressions
     interval.counter.value
-    const passed = (Date.now() - sharedState.timerStartedAt)
-    let h = Math.floor(passed / 1000 / 60 / 60).toString()
+    if (state.value.status === 'stopped' || !state.value.startedAt)
+      return 0
+    return Date.now() - state.value.startedAt
+  })
+  const passed = computed(() => passedMs.value / 1000)
+  const percentage = computed(() => passed.value / duration.value * 100)
+
+  const timer = computed(() => {
+    if (mode.value === 'stopwatch') {
+      if (state.value.status === 'stopped' || !state.value.startedAt)
+        return { h: '', m: '-', s: '--', ms: '-' }
+    }
+
+    const total = mode.value === 'countdown'
+      ? duration.value * 1000 - passedMs.value
+      : passedMs.value
+
+    let h = Math.floor(total / 1000 / 60 / 60).toString()
     if (h === '0')
       h = ''
-    let min = Math.floor(passed / 1000 / 60).toString()
+    let min = Math.floor(total / 1000 / 60 % 60).toString()
     if (h)
       min = min.padStart(2, '0')
-    const sec = Math.floor(passed / 1000 % 60).toString().padStart(2, '0')
-    const ms = Math.floor(passed % 1000 / 100).toString()
-    return { h, m: min, s: sec, ms }
+    const sec = Math.floor(total / 1000 % 60).toString().padStart(2, '0')
+    const ms = Math.floor(total % 1000 / 100).toString()
+
+    return {
+      h,
+      m: min,
+      s: sec,
+      ms,
+    }
   })
 
   function reset() {
     interval.pause()
-    sharedState.timerStatus = 'stopped'
-    sharedState.timerStartedAt = 0
-    sharedState.timerPausedAt = 0
+    state.value = {
+      status: 'stopped',
+      slides: {},
+      startedAt: 0,
+      pausedAt: 0,
+    }
   }
 
   function resume() {
-    if (sharedState.timerStatus === 'stopped') {
-      sharedState.timerStatus = 'running'
-      sharedState.timerStartedAt = Date.now()
+    if (!state.value)
+      return
+    if (state.value?.status === 'stopped') {
+      state.value.status = 'running'
+      state.value.startedAt = Date.now()
     }
-    else if (sharedState.timerStatus === 'paused') {
-      sharedState.timerStatus = 'running'
-      sharedState.timerStartedAt = Date.now() - (sharedState.timerPausedAt - sharedState.timerStartedAt)
+    else if (state.value.status === 'paused') {
+      state.value.status = 'running'
+      state.value.startedAt = Date.now() - (state.value.pausedAt - state.value.startedAt)
     }
     interval.resume()
   }
 
   function pause() {
-    sharedState.timerStatus = 'paused'
-    sharedState.timerPausedAt = Date.now()
+    state.value.status = 'paused'
+    state.value.pausedAt = Date.now()
     interval.pause()
   }
 
   function toggle() {
-    if (sharedState.timerStatus === 'running') {
+    if (state.value.status === 'running') {
       pause()
     }
     else {
@@ -59,10 +89,15 @@ export function useTimer() {
 
   return {
     state,
+    status,
     timer,
     reset,
     toggle,
     resume,
     pause,
+    passed,
+    percentage,
+    duration,
+    mode,
   }
 }

package/internals/TimerBar.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// import { parseTimesplits } from '@slidev/parser/utils'
+import { computed, reactive } from 'vue'
+// import { useNav } from '../composables/useNav'
+import { useTimer } from '../composables/useTimer'
+
+// const { slides } = useNav()
+
+const timer = reactive(useTimer())
+// TODO: timesplit
+// const slidesWithTimesplits = computed(() => slides.value.filter(i => i.meta.slide?.frontmatter.timesplit))
+
+// const _timesplits = computed(() => {
+//   const parsed = parseTimesplits(
+//     slidesWithTimesplits.value
+//       .map(i => ({ no: i.no, timesplit: i.meta.slide?.frontmatter.timesplit as string })),
+//   )
+//   return parsed
+// })
+
+// TODO: maybe make it configurable, or somehow more smart
+const color = computed(() => {
+  if (timer.status === 'stopped')
+    return 'op50'
+  if (timer.status === 'paused')
+    return 'bg-blue'
+
+  if (timer.percentage > 80)
+    return 'bg-yellow'
+  else if (timer.percentage > 100)
+    return 'bg-red'
+  else
+    return 'bg-green'
+})
+</script>
+
+<template>
+  <div
+    class="border-b mt-px border-main relative flex h-4px"
+  >
+    <div
+      v-if="timer.status !== 'stopped'"
+      class="h-4px"
+      :class="color"
+      :style="{ width: `${timer.percentage}%` }"
+    />
+    <!-- {{ timesplits }} -->
+  </div>
+</template>

package/internals/TimerInlined.vue

@@ -1,19 +1,37 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useTimer } from '../composables/useTimer'
 
-const { state, timer, reset, toggle } = useTimer()
+const { status, percentage, mode, timer, reset, toggle } = useTimer()
+
+const color = computed(() => {
+  if (status.value === 'stopped')
+    return 'op50'
+  if (status.value === 'paused')
+    return 'text-blue6 dark:text-blue3'
+
+  if (percentage.value > 80)
+    return 'text-yellow6 dark:text-yellow3'
+  else if (percentage.value > 100)
+    return 'text-red6 dark:text-red3'
+  else
+    return 'text-green6 dark:text-green3'
+})
 </script>
 
 <template>
   <div
     class="group flex items-center justify-center pl-4 select-none"
-    :class="{ running: 'text-green6 dark:text-green3', paused: 'text-orange6 dark:text-orange3', stopped: 'op50' }[state]"
+    :class="color"
   >
     <div class="w-22px cursor-pointer">
-      <div class="i-carbon:time group-hover:hidden text-xl" />
+      <div
+        class="group-hover:hidden text-2xl"
+        :class="mode === 'countdown' ? 'i-carbon:timer' : 'i-carbon:time'"
+      />
       <div class="group-not-hover:hidden flex flex-col items-center">
         <div class="relative op-80 hover:op-100" @click="toggle">
-          <div v-if="state === 'running'" class="i-carbon:pause text-lg" />
+          <div v-if="status === 'running'" class="i-carbon:pause text-lg" />
           <div v-else class="i-carbon:play" />
         </div>
         <div class="op-80 hover:op-100" @click="reset">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.5.0",
+  "version": "52.6.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -39,8 +39,8 @@
     "@typescript/ata": "^0.9.8",
     "@unhead/vue": "^2.0.19",
     "@unocss/reset": "^66.5.4",
-    "@vueuse/core": "^13.9.0",
-    "@vueuse/math": "^13.9.0",
+    "@vueuse/core": "^14.0.0",
+    "@vueuse/math": "^14.0.0",
     "@vueuse/motion": "^3.0.3",
     "drauu": "^0.4.3",
     "file-saver": "^2.0.5",
@@ -61,10 +61,10 @@
     "vue": "^3.5.22",
     "vue-router": "^4.6.3",
     "yaml": "^2.8.1",
-    "@slidev/parser": "52.5.0",
-    "@slidev/types": "52.5.0"
+    "@slidev/parser": "52.6.0",
+    "@slidev/types": "52.6.0"
   },
   "devDependencies": {
-    "vite": "^7.1.10"
+    "vite": "^7.1.12"
   }
 }

package/pages/notes.vue

@@ -10,6 +10,7 @@ import CurrentProgressBar from '../internals/CurrentProgressBar.vue'
 import IconButton from '../internals/IconButton.vue'
 import Modal from '../internals/Modal.vue'
 import NoteDisplay from '../internals/NoteDisplay.vue'
+import TimerBar from '../internals/TimerBar.vue'
 import { fullscreen } from '../state'
 import { sharedState } from '../state/shared'
 
@@ -61,6 +62,7 @@ const clicksContext = computed(() => {
   </Modal>
   <div class="h-full flex flex-col">
     <CurrentProgressBar :clicks-context="clicksContext" :current="pageNo" />
+    <TimerBar />
     <div
       ref="scroller"
       class="px-5 py-3 flex-auto h-full overflow-auto"

package/pages/presenter.vue

@@ -23,6 +23,7 @@ import SegmentControl from '../internals/SegmentControl.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
+import TimerBar from '../internals/TimerBar.vue'
 import TimerInlined from '../internals/TimerInlined.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { registerShortcuts } from '../logic/shortcuts'
@@ -117,6 +118,7 @@ onMounted(() => {
   <div class="bg-main h-full slidev-presenter grid grid-rows-[max-content_1fr] of-hidden">
     <div>
       <CurrentProgressBar />
+      <TimerBar />
     </div>
     <div class="grid-container" :class="`layout${presenterLayout}`">
       <div ref="main" class="relative grid-section main flex flex-col">

package/state/shared.ts

@@ -6,9 +6,16 @@ export interface SharedState {
   page: number
   clicks: number
   clicksTotal: number
-  timerStatus: 'stopped' | 'running' | 'paused'
-  timerStartedAt: number
-  timerPausedAt: number
+
+  timer: {
+    status: 'stopped' | 'running' | 'paused'
+    slides: Record<number, {
+      start?: number
+      end?: number
+    }>
+    startedAt: number
+    pausedAt: number
+  }
 
   cursor?: {
     x: number
@@ -26,9 +33,12 @@ const { init, onPatch, onUpdate, patch, state } = createSyncState<SharedState>(s
   page: 1,
   clicks: 0,
   clicksTotal: 0,
-  timerStatus: 'stopped',
-  timerStartedAt: 0,
-  timerPausedAt: 0,
+  timer: {
+    status: 'stopped',
+    slides: {},
+    startedAt: 0,
+    pausedAt: 0,
+  },
 })
 
 export {

package/internals/TimesplitBar.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { parseTimesplits } from '@slidev/parser/utils'
-import { computed } from 'vue'
-import { useNav } from '../composables/useNav'
-// import { useTimer } from '../composables/useTimer'
-
-const { slides } = useNav()
-
-// const timer = useTimer()
-const slidesWithTimesplits = computed(() => slides.value.filter(i => i.meta.slide?.frontmatter.timesplit))
-
-const timesplits = computed(() => {
-  const parsed = parseTimesplits(
-    slidesWithTimesplits.value
-      .map(i => ({ no: i.no, timesplit: i.meta.slide?.frontmatter.timesplit as string })),
-  )
-  return parsed
-})
-</script>
-
-<template>
-  <div v-if="false" class="border-b border-main relative flex">
-    {{ timesplits }}
-  </div>
-</template>