@slidev/client 0.50.0 → 0.51.0-beta.2

package/internals/Settings.vue

@@ -1,40 +1,114 @@
 <script setup lang="ts">
-import type { SelectionItem } from './types'
 import { useWakeLock } from '@vueuse/core'
-import { slideScale, wakeLockEnabled } from '../state'
-import SelectList from './SelectList.vue'
-
-const scaleItems: SelectionItem<number>[] = [
-  {
-    display: 'Fit',
-    value: 0,
-  },
-  {
-    display: '1:1',
-    value: 1,
-  },
-]
+import { useNav } from '../composables/useNav'
+import { hideCursorIdle, slideScale, viewerCssFilter, viewerCssFilterDefaults, wakeLockEnabled } from '../state'
+import FormCheckbox from './FormCheckbox.vue'
+import FormItem from './FormItem.vue'
+import FormSlider from './FormSlider.vue'
+import SegmentControl from './SegmentControl.vue'
 
+const { isPresenter } = useNav()
 const { isSupported } = useWakeLock()
-
-const wakeLockItems: SelectionItem<boolean>[] = [
-  {
-    display: 'Enabled',
-    value: true,
-  },
-  {
-    display: 'Disabled',
-    value: false,
-  },
-]
 </script>
 
 <template>
-  <div class="text-sm select-none mb-2">
-    <SelectList v-model="slideScale" title="Scale" :items="scaleItems" />
-    <SelectList
+  <div text-sm select-none flex="~ col gap-1" min-w-30 px4>
+    <FormItem
+      title="Invert"
+      :dot="viewerCssFilter.invert !== viewerCssFilterDefaults.invert"
+      @reset="viewerCssFilter.invert = viewerCssFilterDefaults.invert"
+    >
+      <FormCheckbox v-model="viewerCssFilter.invert" />
+    </FormItem>
+    <FormItem
+      title="Brightness"
+      :dot="viewerCssFilter.brightness !== viewerCssFilterDefaults.brightness"
+      @reset="viewerCssFilter.brightness = viewerCssFilterDefaults.brightness"
+    >
+      <FormSlider
+        v-model="viewerCssFilter.brightness"
+        :max="1.5"
+        :min="0.5"
+        :step="0.02"
+        :default="viewerCssFilterDefaults.brightness"
+      />
+    </FormItem>
+    <FormItem
+      title="Contrast"
+      :dot="viewerCssFilter.contrast !== viewerCssFilterDefaults.contrast"
+      @reset="viewerCssFilter.contrast = viewerCssFilterDefaults.contrast"
+    >
+      <FormSlider
+        v-model="viewerCssFilter.contrast"
+        :max="1.5"
+        :min="0.5"
+        :step="0.02"
+        :default="viewerCssFilterDefaults.contrast"
+      />
+    </FormItem>
+    <FormItem
+      title="Saturation"
+      :dot="viewerCssFilter.saturate !== viewerCssFilterDefaults.saturate"
+      @reset="viewerCssFilter.saturate = viewerCssFilterDefaults.saturate"
+    >
+      <FormSlider
+        v-model="viewerCssFilter.saturate"
+        :max="1.5"
+        :min="0.5"
+        :step="0.02"
+        :default="viewerCssFilterDefaults.saturate"
+      />
+    </FormItem>
+    <FormItem
+      title="Sepia"
+      :dot="viewerCssFilter.sepia !== viewerCssFilterDefaults.sepia"
+      @reset="viewerCssFilter.sepia = viewerCssFilterDefaults.sepia"
+    >
+      <FormSlider
+        v-model="viewerCssFilter.sepia"
+        :max="2"
+        :min="-2"
+        :step="0.02"
+        :default="viewerCssFilterDefaults.sepia"
+      />
+    </FormItem>
+    <FormItem
+      title="Hue Rotate"
+      :dot="viewerCssFilter.hueRotate !== viewerCssFilterDefaults.hueRotate"
+      @reset="viewerCssFilter.hueRotate = viewerCssFilterDefaults.hueRotate"
+    >
+      <FormSlider
+        v-model="viewerCssFilter.hueRotate"
+        :max="180"
+        :min="-180"
+        :step="0.1"
+        :default="viewerCssFilterDefaults.hueRotate"
+      />
+    </FormItem>
+    <div class="h-1px opacity-5 bg-current w-full my2" />
+    <FormItem
+      v-if="!isPresenter"
+      title="Slide Scale"
+    >
+      <SegmentControl
+        v-model="slideScale"
+        :options="[
+          { label: 'Fit', value: 0 },
+          { label: '1:1', value: 1 },
+        ]"
+      />
+    </FormItem>
+    <FormItem
       v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported"
-      v-model="wakeLockEnabled" title="Wake lock" :items="wakeLockItems"
-    />
+      title="Wake Lock"
+    >
+      <FormCheckbox v-model="wakeLockEnabled" />
+    </FormItem>
+    <FormItem
+      v-if="!isPresenter"
+      title="Hide Idle Cursor"
+    >
+      <FormCheckbox v-model="hideCursorIdle" />
+    </FormItem>
   </div>
 </template>

package/internals/SlideContainer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useNav } from '../composables/useNav'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
 import { slideAspect, slideHeight, slideWidth } from '../env'
+import { isDark } from '../logic/dark'
 import { snapshotManager } from '../logic/snapshot'
 import { slideScale } from '../state'
 
@@ -26,6 +27,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  contentStyle: {
+    type: Object,
+    default: () => ({}),
+  },
 })
 
 const { isPrintMode } = useNav()
@@ -44,6 +49,7 @@ const scale = computed(() => {
 })
 
 const contentStyle = computed(() => ({
+  ...props.contentStyle,
   'height': `${slideHeight.value}px`,
   'width': `${slideWidth.value}px`,
   'transform': `translate(-50%, -50%) scale(${scale.value})`,
@@ -65,32 +71,41 @@ provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
 
 const snapshot = computed(() => {
-  if (!props.useSnapshot || props.no == null)
+  if (props.no == null || !props.useSnapshot)
     return undefined
-  return snapshotManager.getSnapshot(props.no)
-})
-
-onMounted(() => {
-  if (container.value && props.useSnapshot && props.no != null) {
-    snapshotManager.captureSnapshot(props.no, container.value)
-  }
+  return snapshotManager.getSnapshot(props.no, isDark.value)
 })
 </script>
 
 <template>
-  <div v-if="!snapshot" :id="isMain ? 'slide-container' : undefined" ref="container" class="slidev-slide-container" :style="containerStyle">
-    <div :id="isMain ? 'slide-content' : undefined" ref="slideElement" class="slidev-slide-content" :style="contentStyle">
+  <div
+    v-if="!snapshot"
+    :id="isMain ? 'slide-container' : undefined"
+    ref="container"
+    class="slidev-slide-container"
+    :style="containerStyle"
+  >
+    <div
+      :id="isMain ? 'slide-content' : undefined"
+      ref="slideElement"
+      class="slidev-slide-content"
+      :style="contentStyle"
+    >
       <slot />
     </div>
     <slot name="controls" />
   </div>
-  <!-- Image preview -->
-  <img
-    v-else
-    :src="snapshot"
-    class="w-full object-cover"
-    :style="containerStyle"
-  >
+  <!-- Image Snapshot -->
+  <div v-else class="slidev-slide-container w-full h-full relative">
+    <img
+      :src="snapshot"
+      class="w-full h-full object-cover"
+      :style="containerStyle"
+    >
+    <div absolute bottom-1 right-1 p0.5 text-cyan:75 bg-cyan:10 rounded title="Snapshot">
+      <div class="i-carbon-camera" />
+    </div>
+  </div>
 </template>
 
 <style scoped lang="postcss">

package/internals/SlidesShow.vue

@@ -7,8 +7,7 @@ import { createFixedClicks } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
 import { useViewTransition } from '../composables/useViewTransition'
 import { CLICKS_MAX } from '../constants'
-import { skipTransition } from '../logic/hmr'
-import { activeDragElement } from '../state'
+import { activeDragElement, disableTransition, hmrSkipTransition } from '../state'
 import DragControl from './DragControl.vue'
 import SlideWrapper from './SlideWrapper.vue'
 
@@ -64,7 +63,7 @@ const loadedRoutes = computed(() => isPrintMode.value
 function onAfterLeave() {
   // After transition, we disable it so HMR won't trigger it again
   // We will turn it back on `nav.go` so the normal navigation would still work
-  skipTransition.value = true
+  hmrSkipTransition.value = true
   // recompute poppers after transition
   recomputeAllPoppers()
 }
@@ -76,8 +75,8 @@ function onAfterLeave() {
 
   <!-- Slides -->
   <component
-    :is="hasViewTransition && !isPrintMode ? 'div' : TransitionGroup"
-    v-bind="skipTransition || isPrintMode ? {} : currentTransition"
+    :is="(hasViewTransition && !isPrintMode && !hmrSkipTransition && !disableTransition) ? 'div' : TransitionGroup"
+    v-bind="(hmrSkipTransition || disableTransition || isPrintMode) ? {} : currentTransition"
     id="slideshow"
     tag="div"
     :class="{

package/internals/SyncControls.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useNav } from '../composables/useNav'
+import { syncDirections } from '../state'
+import IconButton from './IconButton.vue'
+import MenuButton from './MenuButton.vue'
+import SelectList from './SelectList.vue'
+
+const { isPresenter } = useNav()
+
+const shouldReceive = computed({
+  get: () => isPresenter.value
+    ? syncDirections.value.presenterReceive
+    : syncDirections.value.viewerReceive,
+  set(v) {
+    if (isPresenter.value) {
+      syncDirections.value.presenterReceive = v
+    }
+    else {
+      syncDirections.value.viewerReceive = v
+    }
+  },
+})
+
+const shouldSend = computed({
+  get: () => isPresenter.value
+    ? syncDirections.value.presenterSend
+    : syncDirections.value.viewerSend,
+  set(v) {
+    if (isPresenter.value) {
+      syncDirections.value.presenterSend = v
+    }
+    else {
+      syncDirections.value.viewerSend = v
+    }
+  },
+})
+
+const state = computed({
+  get: () => {
+    if (shouldReceive.value && shouldSend.value) {
+      return 'bidirectional'
+    }
+    if (shouldReceive.value && !shouldSend.value) {
+      return 'receive-only'
+    }
+    if (!shouldReceive.value && shouldSend.value) {
+      return 'send-only'
+    }
+    return 'off'
+  },
+  set(v) {
+    switch (v) {
+      case 'bidirectional':
+        shouldReceive.value = true
+        shouldSend.value = true
+        break
+      case 'receive-only':
+        shouldReceive.value = true
+        shouldSend.value = false
+        break
+      case 'send-only':
+        shouldReceive.value = false
+        shouldSend.value = true
+        break
+      case 'off':
+        shouldReceive.value = false
+        shouldSend.value = false
+        break
+    }
+  },
+})
+</script>
+
+<template>
+  <MenuButton>
+    <template #button>
+      <IconButton title="Change sync settings">
+        <div class="i-ph:arrow-up-bold mx--1.2 scale-x-80" :class="shouldSend ? 'text-green6 dark:text-green' : 'op30'" />
+        <div class="i-ph:arrow-down-bold mx--1.2 scale-x-80" :class="shouldReceive ? 'text-green6 dark:text-green' : 'op30'" />
+      </IconButton>
+    </template>
+    <template #menu>
+      <div text-sm flex="~ col gap-2">
+        <div px3 ws-nowrap>
+          <span op75>Slides navigation syncing for </span>
+          <span font-bold text-primary>{{ isPresenter ? 'presenter' : 'viewer' }}</span>
+        </div>
+        <div class="h-1px opacity-10 bg-current w-full" />
+        <SelectList
+          v-model="state"
+          title="Sync Mode"
+          :items="[
+            { value: 'bidirectional', display: 'Bidirectional Sync' },
+            { value: 'receive-only', display: 'Receive Only' },
+            { value: 'send-only', display: 'Send Only' },
+            { value: 'off', display: 'Disable' },
+          ]"
+        />
+      </div>
+    </template>
+  </MenuButton>
+</template>

package/logic/color.ts

@@ -0,0 +1,64 @@
+import { isDark } from './dark'
+
+/**
+ * Predefined color map for matching the branding
+ *
+ * Accpet a 6-digit hex color string or a hue number
+ * Hue numbers are preferred because they will adapt better contrast in light/dark mode
+ *
+ * Hue numbers reference:
+ * - 0: red
+ * - 30: orange
+ * - 60: yellow
+ * - 120: green
+ * - 180: cyan
+ * - 240: blue
+ * - 270: purple
+ */
+const predefinedColorMap = {
+  error: 0,
+  client: 60,
+  Light: 60,
+  Dark: 240,
+} as Record<string, number>
+
+export function getHashColorFromString(
+  name: string,
+  opacity: number | string = 1,
+) {
+  if (predefinedColorMap[name])
+    return getHsla(predefinedColorMap[name], opacity)
+
+  let hash = 0
+  for (let i = 0; i < name.length; i++)
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  const hue = hash % 360
+  return getHsla(hue, opacity)
+}
+
+export function getHsla(
+  hue: number,
+  opacity: number | string = 1,
+) {
+  const saturation = hue === -1
+    ? 0
+    : isDark.value ? 50 : 100
+  const lightness = isDark.value ? 60 : 20
+  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
+}
+
+export function getPluginColor(name: string, opacity = 1): string {
+  if (predefinedColorMap[name]) {
+    const color = predefinedColorMap[name]
+    if (typeof color === 'number') {
+      return getHsla(color, opacity)
+    }
+    else {
+      if (opacity === 1)
+        return color
+      const opacityHex = Math.floor(opacity * 255).toString(16).padStart(2, '0')
+      return color + opacityHex
+    }
+  }
+  return getHashColorFromString(name, opacity)
+}

package/logic/snapshot.ts

@@ -1,11 +1,24 @@
+import type { SlidevContextNavFull } from '../composables/useNav'
+import type { ScreenshotSession } from './screenshot'
+import { sleep } from '@antfu/utils'
+import { slideHeight, slideWidth } from '../env'
+import { captureDelay, disableTransition } from '../state'
 import { snapshotState } from '../state/snapshot'
+import { isDark } from './dark'
+import { startScreenshotSession } from './screenshot'
 import { getSlide } from './slides'
 
+const chromeVersion = window.navigator.userAgent.match(/Chrome\/(\d+)/)?.[1]
+export const isScreenshotSupported = chromeVersion ? Number(chromeVersion) >= 94 : false
+
+const initialWait = 100
+
 export class SlideSnapshotManager {
-  private _capturePromises = new Map<number, Promise<void>>()
+  private _screenshotSession: ScreenshotSession | null = null
 
-  getSnapshot(slideNo: number) {
-    const data = snapshotState.state[slideNo]
+  getSnapshot(slideNo: number, isDark: boolean) {
+    const id = slideNo + (isDark ? '-dark' : '-light')
+    const data = snapshotState.state[id]
     if (!data) {
       return
     }
@@ -18,67 +31,75 @@ export class SlideSnapshotManager {
     }
   }
 
-  async captureSnapshot(slideNo: number, el: HTMLElement, delay = 1000) {
+  private async saveSnapshot(slideNo: number, dataUrl: string, isDark: boolean) {
     if (!__DEV__)
-      return
-    if (this.getSnapshot(slideNo)) {
-      return
-    }
-    if (this._capturePromises.has(slideNo)) {
-      await this._capturePromises.get(slideNo)
-    }
-    const promise = this._captureSnapshot(slideNo, el, delay)
-      .finally(() => {
-        this._capturePromises.delete(slideNo)
-      })
-    this._capturePromises.set(slideNo, promise)
-    await promise
-  }
-
-  private async _captureSnapshot(slideNo: number, el: HTMLElement, delay: number) {
-    if (!__DEV__)
-      return
+      return false
     const slide = getSlide(slideNo)
     if (!slide)
-      return
+      return false
 
+    const id = slideNo + (isDark ? '-dark' : '-light')
     const revision = slide.meta.slide.revision
+    snapshotState.patch(id, {
+      revision,
+      image: dataUrl,
+    })
+  }
 
-    // Retry until the slide is loaded
-    let retries = 100
-    while (retries-- > 0) {
-      if (!el.querySelector('.slidev-slide-loading'))
-        break
-      await new Promise(r => setTimeout(r, 100))
-    }
+  async startCapturing(nav: SlidevContextNavFull) {
+    if (!__DEV__)
+      return false
 
-    // Artificial delay for the content to be loaded
-    await new Promise(r => setTimeout(r, delay))
+    // TODO: show a dialog to confirm
+
+    if (this._screenshotSession) {
+      this._screenshotSession.dispose()
+      this._screenshotSession = null
+    }
 
-    // Capture the snapshot
-    const toImage = await import('html-to-image')
     try {
-      const dataUrl = await toImage.toPng(el, {
-        width: el.offsetWidth,
-        height: el.offsetHeight,
-        skipFonts: true,
-        cacheBust: true,
-        pixelRatio: 1.5,
-      })
-      if (revision !== slide.meta.slide.revision) {
-        // eslint-disable-next-line no-console
-        console.info('[Slidev] Slide', slideNo, 'changed, discarding the snapshot')
-        return
+      this._screenshotSession = await startScreenshotSession(
+        slideWidth.value,
+        slideHeight.value,
+      )
+
+      disableTransition.value = true
+      nav.go(1, 0, true)
+
+      await sleep(initialWait + captureDelay.value)
+      while (true) {
+        if (!this._screenshotSession) {
+          break
+        }
+        this.saveSnapshot(
+          nav.currentSlideNo.value,
+          this._screenshotSession.screenshot(document.getElementById('slide-content')!),
+          isDark.value,
+        )
+        if (nav.hasNext.value) {
+          await sleep(captureDelay.value)
+          nav.nextSlide(true)
+          await sleep(captureDelay.value)
+        }
+        else {
+          break
+        }
       }
-      snapshotState.patch(slideNo, {
-        revision,
-        image: dataUrl,
-      })
-      // eslint-disable-next-line no-console
-      console.info('[Slidev] Snapshot captured for slide', slideNo)
+
+      // TODO: show a message when done
+
+      return true
     }
     catch (e) {
-      console.error('[Slidev] Failed to capture snapshot for slide', slideNo, e)
+      console.error(e)
+      return false
+    }
+    finally {
+      disableTransition.value = false
+      if (this._screenshotSession) {
+        this._screenshotSession.dispose()
+        this._screenshotSession = null
+      }
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.50.0",
+  "version": "0.51.0-beta.2",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -32,21 +32,20 @@
     "@iconify-json/carbon": "^1.2.5",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.2",
-    "@shikijs/monaco": "^1.24.2",
-    "@shikijs/vitepress-twoslash": "^1.24.2",
+    "@shikijs/monaco": "^1.24.4",
+    "@shikijs/vitepress-twoslash": "^1.24.4",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.7",
     "@unhead/vue": "^1.11.14",
-    "@unocss/reset": "^0.65.1",
-    "@vueuse/core": "^12.0.0",
-    "@vueuse/math": "^12.0.0",
+    "@unocss/reset": "^0.65.3",
+    "@vueuse/core": "^12.2.0",
+    "@vueuse/math": "^12.2.0",
     "@vueuse/motion": "^2.2.6",
     "drauu": "^0.4.2",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "html-to-image": "^1.11.11",
-    "katex": "^0.16.17",
+    "katex": "^0.16.18",
     "lz-string": "^1.5.0",
     "mermaid": "^11.4.1",
     "monaco-editor": "0.51.0",
@@ -54,17 +53,17 @@
     "pptxgenjs": "^3.12.0",
     "prettier": "^3.4.2",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.24.2",
+    "shiki": "^1.24.4",
     "shiki-magic-move": "^0.5.2",
     "typescript": "5.6.3",
-    "unocss": "^0.65.1",
+    "unocss": "^0.65.3",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "yaml": "^2.6.1",
-    "@slidev/parser": "0.50.0",
-    "@slidev/types": "0.50.0"
+    "@slidev/parser": "0.51.0-beta.2",
+    "@slidev/types": "0.51.0-beta.2"
   },
   "devDependencies": {
-    "vite": "^6.0.3"
+    "vite": "^6.0.6"
   }
 }