From de44e2d6319338f58345878dd053410caa26b1f4 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 27 Dec 2024 22:12:55 +0800
Subject: [PATCH] feat: use screen capture for slides snapshot (#1988)

Co-authored-by: _Kerman <kermanx@qq.com>
---
 packages/client/constants.ts                 |   1 -
 packages/client/internals/QuickOverview.vue  |  28 ++++-
 packages/client/internals/SlideContainer.vue |  31 +++--
 packages/client/internals/SlidesShow.vue     |   6 +-
 packages/client/logic/hmr.ts                 |   1 +
 packages/client/logic/snapshot.ts            | 126 +++++++++++--------
 packages/client/package.json                 |   1 -
 packages/client/pages/export.vue             |  14 +--
 packages/client/state/snapshot.ts            |   2 +-
 packages/client/state/storage.ts             |   1 +
 packages/parser/src/config.ts                |   1 -
 packages/slidev/node/vite/extendConfig.ts    |   1 -
 packages/types/src/frontmatter.ts            |   7 --
 packages/vscode/schema/headmatter.json       |   6 -
 pnpm-lock.yaml                               |  11 --
 pnpm-workspace.yaml                          |   1 -
 16 files changed, 125 insertions(+), 113 deletions(-)

diff --git a/packages/client/constants.ts b/packages/client/constants.ts
index e21ba35cc2..045e773e2a 100644
--- a/packages/client/constants.ts
+++ b/packages/client/constants.ts
@@ -83,5 +83,4 @@ export const HEADMATTER_FIELDS = [
   'mdc',
   'contextMenu',
   'wakeLock',
-  'overviewSnapshots',
 ]
diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 8b570a5694..bf41edbce3 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -4,15 +4,18 @@ import { computed, ref, watchEffect } from 'vue'
 import { createFixedClicks } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
 import { CLICKS_MAX } from '../constants'
-import { configs, pathPrefix } from '../env'
+import { pathPrefix } from '../env'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
+import { isScreenshotSupported } from '../logic/screenshot'
+import { snapshotManager } from '../logic/snapshot'
 import { breakpoints, showOverview, windowSize } from '../state'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper.vue'
 
-const { currentSlideNo, go: goSlide, slides } = useNav()
+const nav = useNav()
+const { currentSlideNo, go: goSlide, slides } = nav
 
 function close() {
   showOverview.value = false
@@ -48,6 +51,12 @@ const rowCount = computed(() => {
 
 const keyboardBuffer = ref<string>('')
 
+async function captureSlidesOverview() {
+  showOverview.value = false
+  await snapshotManager.startCapturing(nav)
+  showOverview.value = true
+}
+
 useEventListener('keypress', (e) => {
   if (!showOverview.value) {
     keyboardBuffer.value = ''
@@ -129,7 +138,7 @@ watchEffect(() => {
             <SlideContainer
               :key="route.no"
               :no="route.no"
-              :use-snapshot="configs.overviewSnapshots"
+              :use-snapshot="true"
               :width="cardWidth"
               class="pointer-events-none"
             >
@@ -157,7 +166,10 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <div v-if="showOverview" class="fixed top-4 right-4 z-modal text-gray-400 flex flex-col items-center gap-2">
+  <div
+    v-show="showOverview"
+    class="fixed top-4 right-4 z-modal text-gray-400 flex flex-col items-center gap-2"
+  >
     <IconButton title="Close" class="text-2xl" @click="close">
       <div class="i-carbon:close" />
     </IconButton>
@@ -172,5 +184,13 @@ watchEffect(() => {
     >
       <div class="i-carbon:list-boxes" />
     </IconButton>
+    <IconButton
+      v-if="__DEV__ && isScreenshotSupported"
+      title="Capture slides as images"
+      class="text-2xl"
+      @click="captureSlidesOverview"
+    >
+      <div class="i-carbon:drop-photo" />
+    </IconButton>
   </div>
 </template>
diff --git a/packages/client/internals/SlideContainer.vue b/packages/client/internals/SlideContainer.vue
index 637f936d46..a1b5375db9 100644
--- a/packages/client/internals/SlideContainer.vue
+++ b/packages/client/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'
 
@@ -65,15 +66,9 @@ 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>
 
@@ -84,13 +79,17 @@ onMounted(() => {
     </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">
diff --git a/packages/client/internals/SlidesShow.vue b/packages/client/internals/SlidesShow.vue
index 6883945fb2..341f89ce24 100644
--- a/packages/client/internals/SlidesShow.vue
+++ b/packages/client/internals/SlidesShow.vue
@@ -7,7 +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 { disableTransition, skipTransition } from '../logic/hmr'
 import { activeDragElement } from '../state'
 import DragControl from './DragControl.vue'
 import SlideWrapper from './SlideWrapper.vue'
@@ -76,8 +76,8 @@ function onAfterLeave() {
 
   <!-- Slides -->
   <component
-    :is="hasViewTransition && !isPrintMode ? 'div' : TransitionGroup"
-    v-bind="skipTransition || isPrintMode ? {} : currentTransition"
+    :is="(hasViewTransition && !isPrintMode && !skipTransition && !disableTransition) ? 'div' : TransitionGroup"
+    v-bind="(skipTransition || disableTransition || isPrintMode) ? {} : currentTransition"
     id="slideshow"
     tag="div"
     :class="{
diff --git a/packages/client/logic/hmr.ts b/packages/client/logic/hmr.ts
index 8eda023feb..11ede0458d 100644
--- a/packages/client/logic/hmr.ts
+++ b/packages/client/logic/hmr.ts
@@ -1,3 +1,4 @@
 import { ref } from 'vue'
 
 export const skipTransition = ref(false)
+export const disableTransition = ref(false)
diff --git a/packages/client/logic/snapshot.ts b/packages/client/logic/snapshot.ts
index 97026be15e..240f36dacf 100644
--- a/packages/client/logic/snapshot.ts
+++ b/packages/client/logic/snapshot.ts
@@ -1,11 +1,25 @@
+import type { SlidevContextNavFull } from '../composables/useNav'
+import type { ScreenshotSession } from './screenshot'
+import { sleep } from '@antfu/utils'
+import { slideHeight, slideWidth } from '../env'
+import { captureDelay } from '../state'
 import { snapshotState } from '../state/snapshot'
+import { isDark } from './dark'
+import { disableTransition } from './hmr'
+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 +32,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
+      }
     }
   }
 }
diff --git a/packages/client/package.json b/packages/client/package.json
index d527c3214a..cf50b97886 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -47,7 +47,6 @@
     "file-saver": "catalog:",
     "floating-vue": "catalog:",
     "fuse.js": "catalog:",
-    "html-to-image": "catalog:",
     "katex": "catalog:",
     "lz-string": "catalog:",
     "mermaid": "catalog:",
diff --git a/packages/client/pages/export.vue b/packages/client/pages/export.vue
index 7b9fdf25e2..5618b2bb8e 100644
--- a/packages/client/pages/export.vue
+++ b/packages/client/pages/export.vue
@@ -3,8 +3,7 @@ import type { ScreenshotSession } from '../logic/screenshot'
 import { sleep } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser/utils'
 import { useHead } from '@unhead/vue'
-import { provideLocal, useElementSize, useLocalStorage, useStyleTag, watchDebounced } from '@vueuse/core'
-
+import { provideLocal, useElementSize, useStyleTag, watchDebounced } from '@vueuse/core'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useDarkMode } from '../composables/useDarkMode'
@@ -17,7 +16,7 @@ import FormCheckbox from '../internals/FormCheckbox.vue'
 import FormItem from '../internals/FormItem.vue'
 import PrintSlide from '../internals/PrintSlide.vue'
 import { isScreenshotSupported, startScreenshotSession } from '../logic/screenshot'
-import { skipExportPdfTip } from '../state'
+import { captureDelay, skipExportPdfTip } from '../state'
 import Play from './play.vue'
 
 const { slides, isPrintWithClicks, hasNext, go, next, currentSlideNo, clicks, printRange } = useNav()
@@ -29,7 +28,6 @@ const scale = computed(() => containerWidth.value / slideWidth.value)
 const contentMarginBottom = computed(() => `${contentHeight.value * (scale.value - 1)}px`)
 const rangesRaw = ref('')
 const initialWait = ref(1000)
-const delay = useLocalStorage('slidev-export-capture-delay', 400, { listenToStorageChanges: false })
 type ScreenshotResult = { slideIndex: number, clickIndex: number, dataUrl: string }[]
 const screenshotSession = ref<ScreenshotSession | null>(null)
 const capturedImages = ref<ScreenshotResult | null>(null)
@@ -70,7 +68,7 @@ async function capturePngs() {
 
     go(1, 0, true)
 
-    await sleep(initialWait.value + delay.value)
+    await sleep(initialWait.value + captureDelay.value)
     while (true) {
       if (!screenshotSession.value) {
         break
@@ -81,9 +79,9 @@ async function capturePngs() {
         dataUrl: screenshotSession.value.screenshot(document.getElementById('slide-content')!),
       })
       if (hasNext.value) {
-        await sleep(delay.value)
+        await sleep(captureDelay.value)
         next()
-        await sleep(delay.value)
+        await sleep(captureDelay.value)
       }
       else {
         break
@@ -273,7 +271,7 @@ if (import.meta.hot) {
                 Pre-capture Slides as Images
               </button>
               <FormItem title="Delay" description="Delay between capturing each slide in milliseconds.<br>Increase this value if slides are captured incompletely. <br>(Not related to PDF export)">
-                <input v-model="delay" type="number" step="50" min="50">
+                <input v-model="captureDelay" type="number" step="50" min="50">
               </FormItem>
             </div>
           </div>
diff --git a/packages/client/state/snapshot.ts b/packages/client/state/snapshot.ts
index dea856d1f5..75a0455004 100644
--- a/packages/client/state/snapshot.ts
+++ b/packages/client/state/snapshot.ts
@@ -1,7 +1,7 @@
 import serverSnapshotState from 'server-reactive:snapshots?diff'
 import { createSyncState } from './syncState'
 
-export type SnapshotState = Record<number, {
+export type SnapshotState = Record<string, {
   revision: string
   image: string
 }>
diff --git a/packages/client/state/storage.ts b/packages/client/state/storage.ts
index 3d283b49d2..bd35026c49 100644
--- a/packages/client/state/storage.ts
+++ b/packages/client/state/storage.ts
@@ -27,6 +27,7 @@ export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { lis
 export const slideScale = useLocalStorage<number>('slidev-scale', 0)
 export const wakeLockEnabled = useLocalStorage('slidev-wake-lock', true)
 export const skipExportPdfTip = useLocalStorage('slidev-skip-export-pdf-tip', false)
+export const captureDelay = useLocalStorage('slidev-export-capture-delay', 400, { listenToStorageChanges: false })
 
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
 export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
diff --git a/packages/parser/src/config.ts b/packages/parser/src/config.ts
index dcc0f13c87..3e16e63784 100644
--- a/packages/parser/src/config.ts
+++ b/packages/parser/src/config.ts
@@ -41,7 +41,6 @@ export function getDefaultConfig(): SlidevConfig {
     transition: null,
     editor: true,
     contextMenu: null,
-    overviewSnapshots: false,
     wakeLock: true,
     remote: false,
     mdc: false,
diff --git a/packages/slidev/node/vite/extendConfig.ts b/packages/slidev/node/vite/extendConfig.ts
index 8b9440574c..90ddd8fa7b 100644
--- a/packages/slidev/node/vite/extendConfig.ts
+++ b/packages/slidev/node/vite/extendConfig.ts
@@ -15,7 +15,6 @@ const INCLUDE_GLOBAL = [
   'recordrtc',
   'typescript',
   'yaml',
-  'html-to-image',
 ]
 
 const INCLUDE_LOCAL = INCLUDE_GLOBAL.map(i => `@slidev/cli > @slidev/client > ${i}`)
diff --git a/packages/types/src/frontmatter.ts b/packages/types/src/frontmatter.ts
index a9ae54f123..8f25242c49 100644
--- a/packages/types/src/frontmatter.ts
+++ b/packages/types/src/frontmatter.ts
@@ -221,13 +221,6 @@ export interface HeadmatterConfig extends TransitionOptions {
    * @default ''
    */
   exportFilename?: string | null
-  /**
-   * Use image snapshot for quick overview
-   *
-   * @experimental
-   * @default false
-   */
-  overviewSnapshots?: boolean
   /**
    * Enable Monaco
    *
diff --git a/packages/vscode/schema/headmatter.json b/packages/vscode/schema/headmatter.json
index ea664d20f4..75f9bc6227 100644
--- a/packages/vscode/schema/headmatter.json
+++ b/packages/vscode/schema/headmatter.json
@@ -431,12 +431,6 @@
           "markdownDescription": "Force the filename used when exporting the presentation.\nThe extension, e.g. .pdf, gets automatically added.",
           "default": ""
         },
-        "overviewSnapshots": {
-          "type": "boolean",
-          "description": "Use image snapshot for quick overview",
-          "markdownDescription": "Use image snapshot for quick overview",
-          "default": false
-        },
         "monaco": {
           "anyOf": [
             {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 043fe284a1..347bb34e45 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -204,9 +204,6 @@ catalogs:
     gray-matter:
       specifier: ^4.0.3
       version: 4.0.3
-    html-to-image:
-      specifier: ^1.11.11
-      version: 1.11.11
     htmlparser2:
       specifier: ^10.0.0
       version: 10.0.0
@@ -777,9 +774,6 @@ importers:
       fuse.js:
         specifier: 'catalog:'
         version: 7.0.0
-      html-to-image:
-        specifier: 'catalog:'
-        version: 1.11.11
       katex:
         specifier: 'catalog:'
         version: 0.16.18
@@ -4559,9 +4553,6 @@ packages:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
 
-  html-to-image@1.11.11:
-    resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
-
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
@@ -10941,8 +10932,6 @@ snapshots:
 
   html-tags@3.3.1: {}
 
-  html-to-image@1.11.11: {}
-
   html-void-elements@3.0.0: {}
 
   htmlparser2@10.0.0:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index b3226376eb..2e0907421d 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -70,7 +70,6 @@ catalog:
   get-port-please: ^3.1.2
   global-directory: ^4.0.1
   gray-matter: ^4.0.3
-  html-to-image: ^1.11.11
   htmlparser2: ^10.0.0
   is-installed-globally: ^1.0.0
   jiti: ^2.4.2