@slidev/client 0.49.9 → 0.49.11

package/builtin/ShikiMagicMove.vue

@@ -2,8 +2,9 @@
 import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
 import type { KeyedTokensInfo } from 'shiki-magic-move/types'
 import type { PropType } from 'vue'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import lz from 'lz-string'
+import { sleep } from '@antfu/utils'
 import { useSlideContext } from '../context'
 import { makeId, updateCodeHighlightRange } from '../logic/utils'
 import { useNav } from '../composables/useNav'
@@ -72,9 +73,12 @@ onMounted(() => {
         }
         currentClickSum += current.length || 1
       }
-      stepIndex.value = step
 
-      setTimeout(() => {
+      nextTick(async () => {
+        stepIndex.value = step
+
+        await sleep(0)
+
         const pre = container.value?.querySelector('.shiki') as HTMLElement
         if (!pre)
           return

package/composables/useDrawings.ts

@@ -2,7 +2,7 @@ import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
 import type { Brush, Options as DrauuOptions, DrawingMode } from 'drauu'
 import { createDrauu } from 'drauu'
 import { createSharedComposable, toReactive, useLocalStorage } from '@vueuse/core'
-import { drawingState, onPatch, patch } from '../state/drawings'
+import { drawingState, onPatchDrawingState, patchDrawingState } from '../state/drawings'
 import { configs } from '../env'
 import { isInputting } from '../state'
 import { useNav } from './useNav'
@@ -67,7 +67,7 @@ export const useDrawings = createSharedComposable(() => {
   function clearDrauu() {
     drauu.clear()
     if (syncUp.value)
-      patch(currentSlideNo.value, '')
+      patchDrawingState(currentSlideNo.value, '')
   }
 
   function updateState() {
@@ -93,11 +93,11 @@ export const useDrawings = createSharedComposable(() => {
       const dump = drauu.dump()
       const key = currentSlideNo.value
       if ((drawingState[key] || '') !== dump && syncUp.value)
-        patch(key, drauu.dump())
+        patchDrawingState(key, drauu.dump())
     }
   })
 
-  onPatch((state) => {
+  onPatchDrawingState((state) => {
     disableDump = true
     if (state[currentSlideNo.value] != null)
       drauu.load(state[currentSlideNo.value] || '')

package/composables/useWakeLock.ts

@@ -0,0 +1,13 @@
+import { useWakeLock as useVueUseWakeLock } from '@vueuse/core'
+import { watchEffect } from 'vue'
+import { wakeLockEnabled } from '../state'
+
+export function useWakeLock() {
+  const { request, release } = useVueUseWakeLock()
+
+  watchEffect((onCleanup) => {
+    if (wakeLockEnabled.value)
+      request('screen')
+    onCleanup(release)
+  })
+}

package/constants.ts

@@ -80,4 +80,5 @@ export const HEADMATTER_FIELDS = [
   'htmlAttrs',
   'mdc',
   'contextMenu',
+  'wakeLock',
 ]

package/internals/ClicksSlider.vue

@@ -4,9 +4,13 @@ import { clamp, range } from '@antfu/utils'
 import { computed } from 'vue'
 import { CLICKS_MAX } from '../constants'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   clicksContext: ClicksContext
-}>()
+  readonly?: boolean
+  active?: boolean
+}>(), {
+  active: true,
+})
 
 const total = computed(() => props.clicksContext.total)
 const start = computed(() => clamp(0, props.clicksContext.clicksStart, total.value))
@@ -24,6 +28,8 @@ const current = computed({
 const clicksRange = computed(() => range(start.value, total.value + 1))
 
 function onMousedown() {
+  if (props.readonly)
+    return
   if (current.value < 0 || current.value > total.value)
     current.value = 0
 }
@@ -38,7 +44,7 @@ function onMousedown() {
     <div class="flex gap-0.5 items-center min-w-16 font-mono mr1">
       <carbon:cursor-1 text-sm op50 />
       <div flex-auto />
-      <template v-if="current >= 0 && current !== CLICKS_MAX">
+      <template v-if="current >= 0 && current !== CLICKS_MAX && active">
         <span text-primary>{{ current }}</span>
         <span op25>/</span>
       </template>
@@ -46,7 +52,6 @@ function onMousedown() {
     </div>
     <div
       relative flex-auto h5 font-mono flex="~"
-      @dblclick="current = clicksContext.total"
     >
       <div
         v-for="i of clicksRange" :key="i"
@@ -71,8 +76,10 @@ function onMousedown() {
       </div>
       <input
         v-model="current"
-        class="range" absolute inset-0
-        type="range" :min="start" :max="total" :step="1" z-10 op0
+        class="range"
+        type="range" :min="start" :max="total" :step="1"
+        absolute inset-0 z-10 op0
+        :class="readonly ? 'pointer-events-none' : ''"
         :style="{ '--thumb-width': `${1 / (length + 1) * 100}%` }"
         @mousedown="onMousedown"
         @focus="event => (event.currentTarget as HTMLElement)?.blur()"

package/internals/NoteDisplay.vue

@@ -3,14 +3,20 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import type { ClicksContext } from '@slidev/types'
 import { CLICKS_MAX } from '../constants'
 
-const props = defineProps<{
-  class?: string | string[]
-  noteHtml?: string
-  note?: string
-  placeholder?: string
-  clicksContext?: ClicksContext
-  autoScroll?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    class?: string | string[]
+    noteHtml?: string
+    note?: string
+    highlight?: boolean
+    placeholder?: string
+    clicksContext?: ClicksContext
+    autoScroll?: boolean
+  }>(),
+  {
+    highlight: true,
+  },
+)
 
 const emit = defineEmits<{
   (type: 'markerDblclick', e: MouseEvent, clicks: number): void
@@ -30,7 +36,7 @@ function highlightNote() {
   const markers = Array.from(noteDisplay.value.querySelectorAll(`.${CLASS_MARKER}`)) as HTMLElement[]
 
   const current = +(props.clicksContext?.current ?? CLICKS_MAX)
-  const disabled = current < 0 || current >= CLICKS_MAX
+  const disabled = current < 0 || current >= CLICKS_MAX || !props.highlight
 
   const nodeToIgnores = new Set<Element>()
   function ignoreParent(node: Element) {
@@ -114,7 +120,7 @@ function highlightNote() {
 }
 
 watch(
-  () => [props.noteHtml, props.clicksContext?.current],
+  () => [props.noteHtml, props.clicksContext?.current, props.highlight],
   () => {
     nextTick(() => {
       highlightNote()

package/internals/NoteEditable.vue

@@ -26,6 +26,9 @@ const props = defineProps({
   clicksContext: {
     type: Object as PropType<ClicksContext>,
   },
+  highlight: {
+    default: true,
+  },
   autoHeight: {
     default: false,
   },
@@ -112,6 +115,7 @@ watch(
     :note-html="info?.noteHTML"
     :clicks-context="clicksContext"
     :auto-scroll="!autoHeight"
+    :highlight="props.highlight"
     @marker-click="(e, clicks) => emit('markerClick', e, clicks)"
     @marker-dblclick="(e, clicks) => emit('markerDblclick', e, clicks)"
   />

package/internals/SelectList.vue

@@ -5,7 +5,7 @@ import type { SelectionItem } from './types'
 
 const props = defineProps({
   modelValue: {
-    type: [Object, String, Number] as PropType<any>,
+    type: [Object, String, Number, Boolean] as PropType<any>,
   },
   title: {
     type: String,
@@ -43,7 +43,7 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 
 <style lang="postcss" scoped>
 .select-list {
-  @apply py-2;
+  @apply my-2;
 }
 
 .item {
@@ -55,6 +55,6 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 }
 
 .title {
-  @apply text-xs uppercase opacity-50 tracking-widest px-7 py-1;
+  @apply text-xs uppercase opacity-50 tracking-widest px-7 py-1 select-none text-nowrap;
 }
 </style>

package/internals/Settings.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { slideScale } from '../state'
+import { useWakeLock } from '@vueuse/core'
+import { slideScale, wakeLockEnabled } from '../state'
 import SelectList from './SelectList.vue'
 import type { SelectionItem } from './types'
 
-const items: SelectionItem<number>[] = [
+const scaleItems: SelectionItem<number>[] = [
   {
     display: 'Fit',
     value: 0,
@@ -13,10 +14,24 @@ const items: SelectionItem<number>[] = [
     value: 1,
   },
 ]
+
+const { isSupported } = useWakeLock()
+
+const wakeLockItems: SelectionItem<boolean>[] = [
+  {
+    display: 'Enabled',
+    value: true,
+  },
+  {
+    display: 'Disabled',
+    value: false,
+  },
+]
 </script>
 
 <template>
   <div class="text-sm select-none">
-    <SelectList v-model="slideScale" title="Scale" :items="items" />
+    <SelectList v-model="slideScale" title="Scale" :items="scaleItems" />
+    <SelectList v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported" v-model="wakeLockEnabled" title="Wake lock" :items="wakeLockItems" />
   </div>
 </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.9",
+  "version": "0.49.11",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -59,8 +59,8 @@
     "vue": "^3.4.27",
     "vue-router": "^4.3.2",
     "yaml": "^2.4.2",
-    "@slidev/parser": "0.49.9",
-    "@slidev/types": "0.49.9"
+    "@slidev/parser": "0.49.11",
+    "@slidev/types": "0.49.11"
   },
   "devDependencies": {
     "vite": "^5.2.12"

package/pages/notes.vue

@@ -8,7 +8,9 @@ import { fullscreen } from '../state'
 
 import NoteDisplay from '../internals/NoteDisplay.vue'
 import IconButton from '../internals/IconButton.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
 import { useNav } from '../composables/useNav'
+import { createClicksContextBase } from '../composables/useClicks'
 
 useHead({ title: `Notes - ${slidesTitle}` })
 
@@ -32,6 +34,12 @@ function increaseFontSize() {
 function decreaseFontSize() {
   fontSize.value = fontSize.value - 1
 }
+
+const clicksContext = computed(() => {
+  const clicks = sharedState.lastUpdate?.type === 'viewer' ? sharedState.viewerClicks : sharedState.clicks
+  const total = sharedState.lastUpdate?.type === 'viewer' ? sharedState.viewerClicksTotal : sharedState.clicksTotal
+  return createClicksContextBase(ref(clicks), undefined, total)
+})
 </script>
 
 <template>
@@ -49,10 +57,13 @@ function decreaseFontSize() {
         :note="currentRoute?.meta.slide.note"
         :note-html="currentRoute?.meta.slide.noteHTML"
         :placeholder="`No notes for Slide ${pageNo}.`"
-        :clicks-context="currentRoute?.meta.__clicksContext"
+        :clicks-context="clicksContext"
         :auto-scroll="true"
       />
     </div>
+    <div class="flex-none border-t border-main" px3 py2>
+      <ClicksSlider :clicks-context="clicksContext" readonly />
+    </div>
     <div class="flex-none border-t border-main">
       <div class="flex gap-1 items-center px-6 py-3">
         <IconButton :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">

package/pages/overview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, shallowRef } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
 import { pathPrefix, slidesTitle } from '../env'
@@ -28,6 +28,7 @@ const wordCounts = computed(() => slides.value.map(route => wordCount(route.meta
 const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
 const totalClicks = computed(() => slides.value.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
 
+const activeSlide = shallowRef<SlideRoute>()
 const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
 function getClicksContext(route: SlideRoute) {
   // We create a local clicks context to calculate the total clicks of the slide
@@ -40,8 +41,15 @@ function getSlideClicks(route: SlideRoute) {
   return route.meta?.clicks || getClicksContext(route)?.total
 }
 
+function toggleRoute(route: SlideRoute) {
+  if (activeSlide.value === route)
+    activeSlide.value = undefined
+  else
+    activeSlide.value = route
+}
+
 function wordCount(str: string) {
-  return str.match(/[\w’'-]+/g)?.length || 0
+  return str.match(/[\w`'\-]+/g)?.length || 0
 }
 
 function isElementInViewport(el: HTMLElement) {
@@ -185,9 +193,11 @@ onMounted(() => {
           </div>
           <ClicksSlider
             v-if="getSlideClicks(route)"
+            :active="activeSlide === route"
             :clicks-context="getClicksContext(route)"
             class="w-full mt-2"
-            @dblclick="getClicksContext(route).current = CLICKS_MAX"
+            @dblclick="toggleRoute(route)"
+            @click="activeSlide = route"
           />
         </div>
         <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
@@ -204,6 +214,7 @@ onMounted(() => {
           :no="route.no"
           class="max-w-250 w-250 text-lg rounded p3"
           :auto-height="true"
+          :highlight="activeSlide === route"
           :editing="edittingNote === route.no"
           :clicks-context="getClicksContext(route)"
           @dblclick="edittingNote !== route.no ? edittingNote = route.no : null"

package/pages/play.vue

@@ -10,6 +10,7 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
+import { useWakeLock } from '../composables/useWakeLock'
 import { useDrawings } from '../composables/useDrawings'
 import PresenterMouse from '../internals/PresenterMouse.vue'
 
@@ -32,6 +33,8 @@ function onClick(e: MouseEvent) {
 
 useSwipeControls(root)
 registerShortcuts()
+if (__SLIDEV_FEATURE_WAKE_LOCK__)
+  useWakeLock()
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 

package/pages/presenter.vue

@@ -24,11 +24,14 @@ import ClicksSlider from '../internals/ClicksSlider.vue'
 import ContextMenu from '../internals/ContextMenu.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import { useWakeLock } from '../composables/useWakeLock'
 
 const main = ref<HTMLDivElement>()
 
 registerShortcuts()
 useSwipeControls(main)
+if (__SLIDEV_FEATURE_WAKE_LOCK__)
+  useWakeLock()
 
 const {
   clicksContext,

package/setup/root.ts

@@ -67,10 +67,12 @@ export default function setupRoot() {
     if (isPresenter.value) {
       patch('page', +currentSlideNo.value)
       patch('clicks', clicksContext.value.current)
+      patch('clicksTotal', clicksContext.value.total)
     }
     else {
       patch('viewerPage', +currentSlideNo.value)
       patch('viewerClicks', clicksContext.value.current)
+      patch('viewerClicksTotal', clicksContext.value.total)
     }
 
     patch('lastUpdate', {

package/state/drawings.ts

@@ -3,5 +3,9 @@ import { createSyncState } from './syncState'
 
 export type DrawingsState = Record<number, string | undefined>
 
-const { init, onPatch, patch, state } = createSyncState<DrawingsState>(serverDrawingState, {}, __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
-export { init as initDrawingState, onPatch, patch, state as drawingState }
+export const {
+  init: initDrawingState,
+  onPatch: onPatchDrawingState,
+  patch: patchDrawingState,
+  state: drawingState,
+} = createSyncState<DrawingsState>(serverDrawingState, serverDrawingState, __SLIDEV_FEATURE_DRAWINGS_PERSIST__)

package/state/index.ts

@@ -25,6 +25,7 @@ export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.v
 export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })
 export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
 export const slideScale = useLocalStorage<number>('slidev-scale', 0)
+export const wakeLockEnabled = useLocalStorage('slidev-wake-lock', true)
 
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
 export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })

package/state/shared.ts

@@ -4,6 +4,8 @@ import { createSyncState } from './syncState'
 export interface SharedState {
   page: number
   clicks: number
+  clicksTotal: number
+
   cursor?: {
     x: number
     y: number
@@ -11,6 +13,7 @@ export interface SharedState {
 
   viewerPage: number
   viewerClicks: number
+  viewerClicksTotal: number
 
   lastUpdate?: {
     id: string
@@ -22,8 +25,10 @@ export interface SharedState {
 const { init, onPatch, patch, state } = createSyncState<SharedState>(serverState, {
   page: 1,
   clicks: 0,
+  clicksTotal: 0,
   viewerPage: 1,
   viewerClicks: 0,
+  viewerClicksTotal: 0,
 })
 
 export {