@slidev/client 0.50.0-beta.5 → 0.50.0-beta.7

package/builtin/TocList.vue

@@ -11,6 +11,7 @@ import type { TocItem } from '@slidev/types'
 import TitleRenderer from '#slidev/title-renderer'
 import { toArray } from '@antfu/utils'
 import { computed } from 'vue'
+import { useNav } from '../composables/useNav'
 
 const props = withDefaults(defineProps<{
   level: number
@@ -20,6 +21,8 @@ const props = withDefaults(defineProps<{
   listClass?: string | string[]
 }>(), { level: 1 })
 
+const { isPresenter } = useNav()
+
 const classes = computed(() => {
   return [
     ...toArray(props.listClass || []),
@@ -47,7 +50,7 @@ const styles = computed(() => {
       :key="item.path" class="slidev-toc-item"
       :class="[{ 'slidev-toc-item-active': item.active }, { 'slidev-toc-item-parent-active': item.activeParent }]"
     >
-      <Link :to="item.path">
+      <Link :to="isPresenter ? `/presenter${item.path}` : item.path">
         <TitleRenderer :no="item.no" />
       </Link>
       <TocList

package/composables/useTimer.ts

@@ -0,0 +1,20 @@
+import { useInterval } from '@vueuse/core'
+import { computed } from 'vue'
+
+export function useTimer() {
+  const { counter, isActive, reset, pause, resume } = useInterval(1000, { controls: true })
+
+  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}`
+  })
+
+  return {
+    timer,
+    isTimerAvctive: isActive,
+    resetTimer: reset,
+    toggleTimer: () => (isActive.value ? pause() : resume()),
+  }
+}

package/composables/useViewTransition.ts

@@ -17,7 +17,7 @@ export function useViewTransition() {
     const toMeta = getSlide(to.params.no as string)?.meta
     const fromNo = fromMeta?.slide?.no
     const toNo = toMeta?.slide?.no
-    const transitionType = fromNo != null && toNo != null
+    const transitionType = fromNo != null && toNo != null && fromNo !== toNo
       && ((fromNo < toNo ? fromMeta?.transition : toMeta?.transition) ?? configs.transition)
     if (transitionType !== 'view-transition') {
       isViewTransition.value = false
@@ -41,7 +41,6 @@ export function useViewTransition() {
 
     // Wait for `TransitionGroup` to become normal `div`
     setTimeout(() => {
-      // @ts-expect-error missing types
       document.startViewTransition(() => {
         changeRoute()
         return promise

package/logic/utils.ts

@@ -1,27 +1,4 @@
 import { parseRangeString } from '@slidev/parser/core'
-import { useTimestamp } from '@vueuse/core'
-import { computed, ref } from 'vue'
-
-export function useTimer() {
-  const tsStart = ref(Date.now())
-  const now = useTimestamp({
-    interval: 1000,
-  })
-  const timer = computed(() => {
-    const passed = (now.value - tsStart.value) / 1000
-    const sec = Math.floor(passed % 60).toString().padStart(2, '0')
-    const min = Math.floor(passed / 60).toString().padStart(2, '0')
-    return `${min}:${sec}`
-  })
-  function resetTimer() {
-    tsStart.value = now.value
-  }
-
-  return {
-    timer,
-    resetTimer,
-  }
-}
 
 export function makeId(length = 5) {
   const result = []

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.50.0-beta.5",
+  "version": "0.50.0-beta.7",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -29,17 +29,17 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.10",
-    "@iconify-json/carbon": "^1.2.3",
+    "@iconify-json/carbon": "^1.2.4",
     "@iconify-json/ph": "^1.2.1",
     "@iconify-json/svg-spinners": "^1.2.1",
-    "@shikijs/monaco": "^1.22.1",
-    "@shikijs/vitepress-twoslash": "^1.22.1",
+    "@shikijs/monaco": "^1.23.1",
+    "@shikijs/vitepress-twoslash": "^1.23.1",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.7",
-    "@unhead/vue": "^1.11.10",
-    "@unocss/reset": "^0.63.6",
-    "@vueuse/core": "^11.1.0",
-    "@vueuse/math": "^11.1.0",
+    "@unhead/vue": "^1.11.11",
+    "@unocss/reset": "^0.64.1",
+    "@vueuse/core": "^11.2.0",
+    "@vueuse/math": "^11.2.0",
     "@vueuse/motion": "^2.2.6",
     "drauu": "^0.4.1",
     "file-saver": "^2.0.5",
@@ -48,21 +48,21 @@
     "html-to-image": "^1.11.11",
     "katex": "^0.16.11",
     "lz-string": "^1.5.0",
-    "mermaid": "^11.3.0",
-    "monaco-editor": "^0.52.0",
+    "mermaid": "^11.4.0",
+    "monaco-editor": "0.51.0",
     "prettier": "^3.3.3",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.22.0",
+    "shiki": "^1.23.1",
     "shiki-magic-move": "^0.5.0",
     "typescript": "^5.6.3",
-    "unocss": "^0.63.4",
-    "vue": "^3.5.12",
+    "unocss": "^0.64.1",
+    "vue": "^3.5.13",
     "vue-router": "^4.4.5",
     "yaml": "^2.6.0",
-    "@slidev/parser": "0.50.0-beta.5",
-    "@slidev/types": "0.50.0-beta.5"
+    "@slidev/parser": "0.50.0-beta.7",
+    "@slidev/types": "0.50.0-beta.7"
   },
   "devDependencies": {
-    "vite": "^5.4.9"
+    "vite": "^5.4.11"
   }
 }

package/pages/presenter.vue

@@ -6,6 +6,7 @@ import { createFixedClicks } 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'
@@ -22,7 +23,6 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { registerShortcuts } from '../logic/shortcuts'
-import { useTimer } from '../logic/utils'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
 import { sharedState } from '../state/shared'
 
@@ -49,7 +49,7 @@ useHead({ title: `Presenter - ${slidesTitle}` })
 
 const notesEditing = ref(false)
 
-const { timer, resetTimer } = useTimer()
+const { timer, isTimerAvctive, resetTimer, toggleTimer } = useTimer()
 
 const clicksCtxMap = computed(() => slides.value.map(route => createFixedClicks(route)))
 const nextFrame = computed(() => {
@@ -184,16 +184,22 @@ onMounted(() => {
       <div class="grid-section bottom flex">
         <NavControls :persist="true" />
         <div flex-auto />
-        <div
-          class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
-          opacity="50 hover:100"
-          @click="resetTimer"
-        >
-          <carbon:time class="absolute" />
-          <carbon:renew class="absolute opacity-0" />
-        </div>
-        <div class="text-2xl pl-2 pr-6 my-auto tabular-nums">
-          {{ timer }}
+        <div class="group flex items-center justify-center pl-4 select-none">
+          <div class="w-22px cursor-pointer">
+            <carbon:time class="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">
+                <carbon:pause v-if="isTimerAvctive" class="text-lg" />
+                <carbon:play v-else />
+              </div>
+              <div class="op-80 hover:op-100" @click="resetTimer">
+                <carbon:renew />
+              </div>
+            </div>
+          </div>
+          <div class="text-2xl px-3 my-auto tabular-nums">
+            {{ timer }}
+          </div>
         </div>
       </div>
       <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
@@ -215,13 +221,6 @@ onMounted(() => {
   --slidev-controls-foreground: current;
 }
 
-.timer-btn:hover > :first-child {
-  opacity: 0;
-}
-.timer-btn:hover > :last-child {
-  opacity: 1;
-}
-
 .grid-container {
   --uno: bg-gray/20;
   height: 100%;