@slidev/client 52.4.0 → 52.6.0

package/composables/useTimer.ts

@@ -1,20 +1,103 @@
+import { parseTimeString } from '@slidev/parser/utils'
 import { useInterval } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, toRef } from 'vue'
+import { configs } from '../env'
+import { sharedState } from '../state/shared'
 
 export function useTimer() {
-  const { counter, isActive, reset, pause, resume } = useInterval(1000, { controls: true })
+  const mode = computed(() => configs.timer || 'stopwatch')
+  const duration = computed(() => parseTimeString(configs.duration).seconds)
+  const interval = useInterval(100, { controls: true })
+
+  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
+    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(() => {
-    const passed = counter.value
-    const sec = Math.floor(passed % 60).toString().padStart(2, '0')
-    const min = Math.floor(passed / 60).toString().padStart(2, '0')
-    return `${min}:${sec}`
+    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(total / 1000 / 60 % 60).toString()
+    if (h)
+      min = min.padStart(2, '0')
+    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()
+    state.value = {
+      status: 'stopped',
+      slides: {},
+      startedAt: 0,
+      pausedAt: 0,
+    }
+  }
+
+  function resume() {
+    if (!state.value)
+      return
+    if (state.value?.status === 'stopped') {
+      state.value.status = 'running'
+      state.value.startedAt = Date.now()
+    }
+    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() {
+    state.value.status = 'paused'
+    state.value.pausedAt = Date.now()
+    interval.pause()
+  }
+
+  function toggle() {
+    if (state.value.status === 'running') {
+      pause()
+    }
+    else {
+      resume()
+    }
+  }
+
   return {
+    state,
+    status,
     timer,
-    isTimerActive: isActive,
-    resetTimer: reset,
-    toggleTimer: () => (isActive.value ? pause() : resume()),
+    reset,
+    toggle,
+    resume,
+    pause,
+    passed,
+    percentage,
+    duration,
+    mode,
   }
 }

package/internals/CurrentProgressBar.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ClicksContext } from '@slidev/types'
+import { computed } from 'vue'
+import { useNav } from '../composables/useNav'
+
+const props = defineProps<{
+  clicksContext?: ClicksContext
+  current?: number
+}>()
+
+const nav = useNav()
+const clicksContext = computed(() => props.clicksContext ?? nav.clicksContext.value)
+const current = computed(() => props.current ?? nav.currentSlideNo.value)
+const { total } = nav
+</script>
+
+<template>
+  <div class="relative flex gap-px">
+    <div
+      v-for="i of total - 1"
+      :key="i" class="border-x border-b border-main h-4px transition-all"
+      :style="{ width: `${(1 / (total - 1) * 100)}%` }"
+      :class="i < current ? 'bg-primary border-primary' : ''"
+    >
+      <Transition name="fade">
+        <div
+          v-if="i === current"
+          class="h-full bg-primary op75 transition-all"
+          :style="{ width: `${clicksContext.total === 0 ? 0 : clicksContext.current / (clicksContext.total + 1) * 100}%` }"
+        />
+      </Transition>
+    </div>
+  </div>
+</template>

package/internals/NavControls.vue

@@ -178,11 +178,9 @@ if (__SLIDEV_FEATURE_RECORD__)
 
       <VerticalDivider v-if="!isEmbedded" />
 
-      <div class="h-40px flex" p="l-1 t-0.5 r-2" text="sm leading-2">
-        <div class="my-auto">
-          {{ currentSlideNo }}
-          <span class="opacity-50">/ {{ total }}</span>
-        </div>
+      <div class="px2 my-auto">
+        <span class="text-lg">{{ currentSlideNo }}</span>
+        <span class="opacity-50 text-sm"> / {{ total }}</span>
       </div>
 
       <CustomNavControls />

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTimer } from '../composables/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="color"
+  >
+    <div class="w-22px cursor-pointer">
+      <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="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">
+          <div class="i-carbon:renew" />
+        </div>
+      </div>
+    </div>
+    <div class="text-3xl px-3 my-auto font-mono">
+      <template v-if="timer.h">
+        <span>{{ timer.h }}</span>
+        <span op50>:</span>
+      </template>
+      <span>{{ timer.m }}</span>
+      <span op50>:</span>
+      <span>{{ timer.s }}</span>
+      <span class="text-base op50">.{{ timer.ms }}</span>
+    </div>
+  </div>
+</template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.4.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.4.0",
-    "@slidev/types": "52.4.0"
+    "@slidev/parser": "52.6.0",
+    "@slidev/types": "52.6.0"
   },
   "devDependencies": {
-    "vite": "^7.1.10"
+    "vite": "^7.1.12"
   }
 }

package/pages/notes.vue

@@ -6,9 +6,11 @@ import { createClicksContextBase } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
 import { slidesTitle } from '../env'
 import ClicksSlider from '../internals/ClicksSlider.vue'
+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'
 
@@ -58,14 +60,12 @@ const clicksContext = computed(() => {
       </button>
     </div>
   </Modal>
-  <div
-    class="fixed top-0 left-0 h-3px bg-primary transition-all duration-500"
-    :style="{ width: `${(pageNo - 1) / (total - 1) * 100 + 1}%` }"
-  />
-  <div class="h-full pt-2 flex flex-col">
+  <div class="h-full flex flex-col">
+    <CurrentProgressBar :clicks-context="clicksContext" :current="pageNo" />
+    <TimerBar />
     <div
       ref="scroller"
-      class="px-5 flex-auto h-full overflow-auto"
+      class="px-5 py-3 flex-auto h-full overflow-auto"
       :style="{ fontSize: `${fontSize}px` }"
     >
       <NoteDisplay
@@ -98,8 +98,9 @@ const clicksContext = computed(() => {
           <div class="i-carbon:help" />
         </IconButton>
         <div class="flex-auto" />
-        <div class="p2 text-center">
-          {{ pageNo }} / {{ total }}
+        <div class="px2 my-auto">
+          <span class="text-lg">{{ pageNo }}</span>
+          <span class="opacity-50 text-sm"> / {{ total }}</span>
         </div>
       </div>
     </div>

package/pages/presenter.vue

@@ -6,11 +6,11 @@ import { createClicksContextBase } from '../composables/useClicks'
 import { useDrawings } from '../composables/useDrawings'
 import { useNav } from '../composables/useNav'
 import { useSwipeControls } from '../composables/useSwipeControls'
-import { useTimer } from '../composables/useTimer'
 import { useWakeLock } from '../composables/useWakeLock'
 import { slidesTitle } from '../env'
 import ClicksSlider from '../internals/ClicksSlider.vue'
 import ContextMenu from '../internals/ContextMenu.vue'
+import CurrentProgressBar from '../internals/CurrentProgressBar.vue'
 import DrawingControls from '../internals/DrawingControls.vue'
 import Goto from '../internals/Goto.vue'
 import IconButton from '../internals/IconButton.vue'
@@ -23,6 +23,8 @@ 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'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
@@ -44,7 +46,6 @@ const {
   nextRoute,
   slides,
   getPrimaryClicks,
-  total,
 } = useNav()
 const { isDrawing } = useDrawings()
 
@@ -52,8 +53,6 @@ useHead({ title: `Presenter - ${slidesTitle}` })
 
 const notesEditing = ref(false)
 
-const { timer, isTimerActive, resetTimer, toggleTimer } = useTimer()
-
 const clicksCtxMap = computed(() => slides.value.map((route) => {
   const clicks = ref(0)
   return {
@@ -116,7 +115,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bg-main h-full slidev-presenter" pt-2px>
+  <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">
         <div flex="~ gap-4 items-center" border="b main" p1>
@@ -210,32 +213,10 @@ onMounted(() => {
       <div class="grid-section bottom flex">
         <NavControls :persist="true" class="transition" :class="inFocus ? '' : 'op25'" />
         <div flex-auto />
-        <div class="group flex items-center justify-center pl-4 select-none">
-          <div class="w-22px cursor-pointer">
-            <div class="i-carbon:time group-hover:hidden text-xl" />
-            <div class="group-not-hover:hidden flex flex-col items-center">
-              <div class="relative op-80 hover:op-100" @click="toggleTimer">
-                <div v-if="isTimerActive" class="i-carbon:pause text-lg" />
-                <div v-else class="i-carbon:play" />
-              </div>
-              <div class="op-80 hover:op-100" @click="resetTimer">
-                <div class="i-carbon:renew" />
-              </div>
-            </div>
-          </div>
-          <div class="text-2xl px-3 my-auto font-mono">
-            {{ timer }}
-          </div>
-        </div>
+        <TimerInlined />
       </div>
       <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
     </div>
-    <div class="progress-bar">
-      <div
-        class="progress h-3px bg-primary transition-all"
-        :style="{ width: `${(currentSlideNo - 1) / (total - 1) * 100 + 1}%` }"
-      />
-    </div>
   </div>
   <Goto />
   <QuickOverview />
@@ -248,9 +229,7 @@ onMounted(() => {
 }
 
 .grid-container {
-  --uno: bg-gray/20;
-  height: 100%;
-  width: 100%;
+  --uno: bg-gray/20 flex-1 of-hidden;
   display: grid;
   gap: 1px 1px;
 }
@@ -305,14 +284,9 @@ onMounted(() => {
   }
 }
 
-.progress-bar {
-  --uno: fixed left-0 right-0 top-0;
-}
-
 .grid-section {
   --uno: bg-main;
 }
-
 .grid-section.top {
   grid-area: top;
 }

package/state/shared.ts

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