@slidev/client 52.4.0 → 52.5.0

package/composables/useTimer.ts

@@ -1,20 +1,68 @@
 import { useInterval } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, toRef } from 'vue'
+import { sharedState } from '../state/shared'
 
 export function useTimer() {
-  const { counter, isActive, reset, pause, resume } = useInterval(1000, { controls: true })
+  const interval = useInterval(100, { controls: true })
 
+  const state = toRef(sharedState, 'timerStatus')
   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 (sharedState.timerStatus === 'stopped' && sharedState.timerStartedAt === 0)
+      return { h: '', m: '-', s: '--', ms: '-' }
+    // 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 (h === '0')
+      h = ''
+    let min = Math.floor(passed / 1000 / 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 }
   })
 
+  function reset() {
+    interval.pause()
+    sharedState.timerStatus = 'stopped'
+    sharedState.timerStartedAt = 0
+    sharedState.timerPausedAt = 0
+  }
+
+  function resume() {
+    if (sharedState.timerStatus === 'stopped') {
+      sharedState.timerStatus = 'running'
+      sharedState.timerStartedAt = Date.now()
+    }
+    else if (sharedState.timerStatus === 'paused') {
+      sharedState.timerStatus = 'running'
+      sharedState.timerStartedAt = Date.now() - (sharedState.timerPausedAt - sharedState.timerStartedAt)
+    }
+    interval.resume()
+  }
+
+  function pause() {
+    sharedState.timerStatus = 'paused'
+    sharedState.timerPausedAt = Date.now()
+    interval.pause()
+  }
+
+  function toggle() {
+    if (sharedState.timerStatus === 'running') {
+      pause()
+    }
+    else {
+      resume()
+    }
+  }
+
   return {
+    state,
     timer,
-    isTimerActive: isActive,
-    resetTimer: reset,
-    toggleTimer: () => (isActive.value ? pause() : resume()),
+    reset,
+    toggle,
+    resume,
+    pause,
   }
 }

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/TimerInlined.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useTimer } from '../composables/useTimer'
+
+const { state, timer, reset, toggle } = useTimer()
+</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]"
+  >
+    <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="toggle">
+          <div v-if="state === '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/internals/TimesplitBar.vue

@@ -0,0 +1,25 @@
+<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>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.4.0",
+  "version": "52.5.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -61,8 +61,8 @@
     "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.5.0",
+    "@slidev/types": "52.5.0"
   },
   "devDependencies": {
     "vite": "^7.1.10"

package/pages/notes.vue

@@ -6,6 +6,7 @@ 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'
@@ -58,14 +59,11 @@ 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" />
     <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 +96,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,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 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 +45,6 @@ const {
   nextRoute,
   slides,
   getPrimaryClicks,
-  total,
 } = useNav()
 const { isDrawing } = useDrawings()
 
@@ -52,8 +52,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 +114,10 @@ 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 />
+    </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 +211,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 +227,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 +282,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

@@ -6,6 +6,9 @@ export interface SharedState {
   page: number
   clicks: number
   clicksTotal: number
+  timerStatus: 'stopped' | 'running' | 'paused'
+  timerStartedAt: number
+  timerPausedAt: number
 
   cursor?: {
     x: number
@@ -23,6 +26,9 @@ const { init, onPatch, onUpdate, patch, state } = createSyncState<SharedState>(s
   page: 1,
   clicks: 0,
   clicksTotal: 0,
+  timerStatus: 'stopped',
+  timerStartedAt: 0,
+  timerPausedAt: 0,
 })
 
 export {