From 56eec8912c91968c54f03bec5520e6df5b202a29 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Fri, 27 Dec 2024 01:58:17 +0800
Subject: [PATCH] feat(presenter): use screen capture mirroring, resolve #1987

---
 .vscode/settings.json                         |  3 +-
 packages/client/composables/useClicks.ts      |  2 +-
 packages/client/composables/useTimer.ts       |  2 +-
 packages/client/internals/Badge.vue           | 48 ++++++++++++++
 packages/client/internals/FocusIndicator.vue  |  9 ---
 packages/client/internals/RecordingDialog.vue | 14 +----
 .../client/internals/ScreenCaptureMirror.vue  | 45 ++++++++++++++
 packages/client/internals/SegmentControl.vue  | 29 +++++++++
 packages/client/internals/SyncControls.vue    |  4 +-
 packages/client/logic/color.ts                | 62 +++++++++++++++++++
 packages/client/pages/export.vue              | 20 +++---
 packages/client/pages/presenter.vue           | 57 +++++++++++------
 packages/client/styles/index.css              | 14 +++--
 13 files changed, 245 insertions(+), 64 deletions(-)
 create mode 100644 packages/client/internals/Badge.vue
 delete mode 100644 packages/client/internals/FocusIndicator.vue
 create mode 100644 packages/client/internals/ScreenCaptureMirror.vue
 create mode 100644 packages/client/internals/SegmentControl.vue
 create mode 100644 packages/client/logic/color.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 79309d59d9..7ab9ad261c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -50,5 +50,6 @@
   "slidev.include": [
     "**/slides.md",
     "packages/vscode/syntax/slidev.example.md"
-  ]
+  ],
+  "vue.server.hybridMode": "typeScriptPluginOnly"
 }
diff --git a/packages/client/composables/useClicks.ts b/packages/client/composables/useClicks.ts
index 3636ec64ad..2e36b20a26 100644
--- a/packages/client/composables/useClicks.ts
+++ b/packages/client/composables/useClicks.ts
@@ -165,7 +165,7 @@ export function createFixedClicks(
 ): ClicksContext {
   const clicksStart = route?.meta.slide?.frontmatter.clicksStart ?? 0
   return createClicksContextBase(
-    computed(() => Math.max(toValue(currentInit), clicksStart)),
+    ref(Math.max(toValue(currentInit), clicksStart)),
     clicksStart,
     route?.meta?.clicks,
   )
diff --git a/packages/client/composables/useTimer.ts b/packages/client/composables/useTimer.ts
index 1d04c89ad5..18f6645964 100644
--- a/packages/client/composables/useTimer.ts
+++ b/packages/client/composables/useTimer.ts
@@ -13,7 +13,7 @@ export function useTimer() {
 
   return {
     timer,
-    isTimerAvctive: isActive,
+    isTimerActive: isActive,
     resetTimer: reset,
     toggleTimer: () => (isActive.value ? pause() : resume()),
   }
diff --git a/packages/client/internals/Badge.vue b/packages/client/internals/Badge.vue
new file mode 100644
index 0000000000..f2de54bc2e
--- /dev/null
+++ b/packages/client/internals/Badge.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  getHashColorFromString,
+  getHsla,
+} from '../logic/color'
+
+const props = withDefaults(
+  defineProps<{
+    text?: string
+    color?: boolean | number
+    as?: string
+    size?: string
+  }>(),
+  {
+    color: true,
+  },
+)
+
+const style = computed(() => {
+  if (!props.text || props.color === false)
+    return {}
+  return {
+    color: typeof props.color === 'number'
+      ? getHsla(props.color)
+      : getHashColorFromString(props.text),
+    background: typeof props.color === 'number'
+      ? getHsla(props.color, 0.1)
+      : getHashColorFromString(props.text, 0.1),
+  }
+})
+
+const sizeClasses = computed(() => {
+  switch (props.size || 'sm') {
+    case 'sm':
+      return 'px-1.5 text-11px leading-1.6em'
+  }
+  return ''
+})
+</script>
+
+<template>
+  <component :is="as || 'span'" ws-nowrap rounded :class="sizeClasses" :style>
+    <slot>
+      <span v-text="props.text" />
+    </slot>
+  </component>
+</template>
diff --git a/packages/client/internals/FocusIndicator.vue b/packages/client/internals/FocusIndicator.vue
deleted file mode 100644
index 527002260c..0000000000
--- a/packages/client/internals/FocusIndicator.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { useWindowFocus } from '@vueuse/core'
-
-const inFocus = useWindowFocus()
-</script>
-
-<template>
-  <div class="slidev-focus-indicator" :class="{ 'slidev-focus-indicator-active': inFocus }" />
-</template>
diff --git a/packages/client/internals/RecordingDialog.vue b/packages/client/internals/RecordingDialog.vue
index c8b8da1518..7c0671b88c 100644
--- a/packages/client/internals/RecordingDialog.vue
+++ b/packages/client/internals/RecordingDialog.vue
@@ -75,11 +75,11 @@ async function start() {
       <DevicesSelectors />
     </div>
     <div class="flex my-1">
-      <button class="cancel" @click="close">
+      <button class="slidev-form-button" @click="close">
         Cancel
       </button>
       <div class="flex-auto" />
-      <button @click="start">
+      <button class="slidev-form-button primary" @click="start">
         Start
       </button>
     </div>
@@ -111,15 +111,5 @@ async function start() {
   input[type='text'] {
     @apply border border-main rounded px-2 py-1;
   }
-
-  button {
-    @apply bg-orange-400 text-white px-4 py-1 rounded border-b-2 border-orange-600;
-    @apply hover:(bg-orange-500 border-orange-700);
-  }
-
-  button.cancel {
-    @apply bg-gray-400 bg-opacity-50 text-white px-4 py-1 rounded border-b-2 border-main;
-    @apply hover:(bg-opacity-75 border-opacity-75);
-  }
 }
 </style>
diff --git a/packages/client/internals/ScreenCaptureMirror.vue b/packages/client/internals/ScreenCaptureMirror.vue
new file mode 100644
index 0000000000..f80836cbc7
--- /dev/null
+++ b/packages/client/internals/ScreenCaptureMirror.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { shallowRef, useTemplateRef } from 'vue'
+
+const video = useTemplateRef('video')
+const stream = shallowRef<MediaStream | null>(null)
+const started = shallowRef(false)
+
+async function startCapture() {
+  stream.value = await navigator.mediaDevices.getDisplayMedia({
+    video: {
+      // @ts-expect-error missing types
+      cursor: 'always',
+    },
+    audio: false,
+    selfBrowserSurface: 'include',
+    preferCurrentTab: false,
+  })
+  video.value!.srcObject = stream.value
+  video.value!.play()
+  started.value = true
+  stream.value.addEventListener('inactive', () => {
+    video.value!.srcObject = null
+    started.value = false
+  })
+  stream.value.addEventListener('ended', () => {
+    video.value!.srcObject = null
+    started.value = false
+  })
+}
+</script>
+
+<template>
+  <div h-full w-full>
+    <video v-show="started" ref="video" class="w-full h-full object-contain" />
+    <div v-if="!started" w-full h-full flex="~ col gap-4 items-center justify-center">
+      <div op50>
+        Use screen capturing to mirror your main screen back to presenter view.<br>
+        Click the button below and <b>select your other monitor or window</b>.
+      </div>
+      <button class="slidev-form-button" @click="startCapture">
+        Start Screen Mirroring
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/packages/client/internals/SegmentControl.vue b/packages/client/internals/SegmentControl.vue
new file mode 100644
index 0000000000..3690e71a9d
--- /dev/null
+++ b/packages/client/internals/SegmentControl.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Badge from './Badge.vue'
+
+defineProps<{
+  options: { label: string, value: any }[]
+  modelValue: any
+}>()
+
+defineEmits<{
+  (event: 'update:modelValue', newValue: any): void
+}>()
+</script>
+
+<template>
+  <div flex="~ gap-1 items-center" rounded bg-gray:2 p1>
+    <Badge
+      v-for="option in options"
+      :key="option.value"
+      class="px-2 py-1 text-xs font-mono"
+      :class="option.value === modelValue ? '' : 'op50'"
+      :color="option.value === modelValue"
+      :aria-pressed="option.value === modelValue"
+      size="none"
+      :text="option.label"
+      as="button"
+      @click="$emit('update:modelValue', option.value)"
+    />
+  </div>
+</template>
diff --git a/packages/client/internals/SyncControls.vue b/packages/client/internals/SyncControls.vue
index 87181adf1c..c552f4d031 100644
--- a/packages/client/internals/SyncControls.vue
+++ b/packages/client/internals/SyncControls.vue
@@ -47,9 +47,9 @@ const shouldSend = computed({
     </template>
     <template #menu>
       <div text-sm flex="~ col gap-2">
-        <div px4 pt3 ws-nowrap>
+        <div px4 pt3 pb1 ws-nowrap>
           <span op75>Slides navigation syncing for </span>
-          <span font-bold text-primary>{{ isPresenter.value ? 'presenter' : 'viewer' }}</span>
+          <span font-bold text-primary>{{ isPresenter ? 'presenter' : 'viewer' }}</span>
         </div>
         <SelectList
           v-model="shouldSend"
diff --git a/packages/client/logic/color.ts b/packages/client/logic/color.ts
new file mode 100644
index 0000000000..9c57e1b4a0
--- /dev/null
+++ b/packages/client/logic/color.ts
@@ -0,0 +1,62 @@
+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,
+} 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)
+}
diff --git a/packages/client/pages/export.vue b/packages/client/pages/export.vue
index e6462e336b..7b9fdf25e2 100644
--- a/packages/client/pages/export.vue
+++ b/packages/client/pages/export.vue
@@ -238,8 +238,8 @@ if (import.meta.hot) {
       <div class="min-w-fit" flex="~ col gap-3">
         <div border="~ main rounded-lg" p3 flex="~ col gap-2">
           <h2>Export as Vector File</h2>
-          <div class="flex flex-col gap-2 items-start min-w-max">
-            <button @click="pdf">
+          <div class="flex flex-col gap-2 min-w-max">
+            <button class="slidev-form-button" @click="pdf">
               PDF
             </button>
           </div>
@@ -253,22 +253,22 @@ if (import.meta.hot) {
             If you encounter issues, please use a modern Chromium-based browser,
             or export via the CLI.
           </div>
-          <div class="flex flex-col gap-2 items-start min-w-max">
-            <button @click="pptx">
+          <div class="flex flex-col gap-2 min-w-max">
+            <button class="slidev-form-button" @click="pptx">
               PPTX
             </button>
-            <button @click="pngsGz">
+            <button class="slidev-form-button" @click="pngsGz">
               PNGs.gz
             </button>
           </div>
           <div w-full h-1px border="t main" my2 />
           <div class="relative flex flex-col gap-2 flex-nowrap">
-            <div class="flex flex-col gap-2 items-start min-w-max">
-              <button v-if="capturedImages" class="flex justify-center items-center gap-2" @click="capturedImages = null">
+            <div class="flex flex-col gap-2 min-w-max">
+              <button v-if="capturedImages" class="slidev-form-button flex justify-center items-center gap-2" @click="capturedImages = null">
                 <span class="i-carbon:trash-can inline-block text-xl" />
                 Clear Captured Images
               </button>
-              <button v-else class="flex justify-center items-center gap-2" @click="capturePngs">
+              <button v-else class="slidev-form-button flex justify-center items-center gap-2" @click="capturePngs">
                 <div class="i-carbon:camera-action inline-block text-xl" />
                 Pre-capture Slides as Images
               </button>
@@ -325,10 +325,6 @@ if (import.meta.hot) {
   }
 }
 
-button {
-  --uno: 'w-full rounded bg-gray:10 px-4 py-2 hover:bg-gray/20';
-}
-
 label {
   --uno: text-xl flex gap-2 items-center select-none;
 
diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
index d5eadc8adc..f9fbe8403b 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { useMouse, useWindowFocus } from '@vueuse/core'
+import { useLocalStorage, useMouse, useWindowFocus } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { createFixedClicks } from '../composables/useClicks'
 import { useDrawings } from '../composables/useDrawings'
@@ -12,13 +12,14 @@ import { slidesTitle } from '../env'
 import ClicksSlider from '../internals/ClicksSlider.vue'
 import ContextMenu from '../internals/ContextMenu.vue'
 import DrawingControls from '../internals/DrawingControls.vue'
-import FocusIndicator from '../internals/FocusIndicator.vue'
 import Goto from '../internals/Goto.vue'
 import IconButton from '../internals/IconButton.vue'
 import NavControls from '../internals/NavControls.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
 import NoteStatic from '../internals/NoteStatic.vue'
 import QuickOverview from '../internals/QuickOverview.vue'
+import ScreenCaptureMirror from '../internals/ScreenCaptureMirror.vue'
+import SegmentControl from '../internals/SegmentControl.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
@@ -27,6 +28,7 @@ import { registerShortcuts } from '../logic/shortcuts'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
 import { sharedState } from '../state/shared'
 
+const inFocus = useWindowFocus()
 const main = ref<HTMLDivElement>()
 
 registerShortcuts()
@@ -50,7 +52,7 @@ useHead({ title: `Presenter - ${slidesTitle}` })
 
 const notesEditing = ref(false)
 
-const { timer, isTimerAvctive, resetTimer, toggleTimer } = useTimer()
+const { timer, isTimerActive, resetTimer, toggleTimer } = useTimer()
 
 const clicksCtxMap = computed(() => slides.value.map(route => createFixedClicks(route)))
 const nextFrame = computed(() => {
@@ -75,6 +77,7 @@ watch(
   { immediate: true },
 )
 
+const mainSlideMode = useLocalStorage<'slides' | 'mirror'>('slidev-presenter-main-slide-mode', 'slides')
 const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
@@ -87,7 +90,7 @@ onMounted(() => {
 
   watch(
     () => {
-      if (!focus.value || isDrawing.value || !showPresenterCursor.value)
+      if (!focus.value || isDrawing.value || !showPresenterCursor.value || !slidesContainer)
         return undefined
 
       const rect = slidesContainer.getBoundingClientRect()
@@ -107,25 +110,39 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bg-main h-full slidev-presenter">
+  <div class="bg-main h-full slidev-presenter" pt-2px>
     <div class="grid-container" :class="`layout${presenterLayout}`">
       <div ref="main" class="relative grid-section main flex flex-col">
-        <SlideContainer
-          key="main"
-          class="p-2 lg:p-4 flex-auto"
-          is-main
-          @contextmenu="onContextMenu"
-        >
-          <SlidesShow render-context="presenter" />
-        </SlideContainer>
+        <div flex="~ gap-4 items-center" border="b main" p1>
+          <span op50 px2>Current</span>
+          <div flex-auto />
+          <SegmentControl
+            v-model="mainSlideMode"
+            :options="[
+              { label: 'Slides', value: 'slides' },
+              { label: 'Screen Mirror', value: 'mirror' },
+            ]"
+          />
+        </div>
+        <template v-if="mainSlideMode === 'mirror'">
+          <ScreenCaptureMirror />
+        </template>
+        <template v-else>
+          <SlideContainer
+            key="main"
+            class="p-2 lg:p-4 flex-auto"
+            is-main
+            @contextmenu="onContextMenu"
+          >
+            <SlidesShow render-context="presenter" />
+          </SlideContainer>
+        </template>
+
         <ClicksSlider
           :key="currentSlideRoute?.no"
           :clicks-context="getPrimaryClicks(currentSlideRoute)"
           class="w-full pb2 px4 flex-none"
         />
-        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
-          Current
-        </div>
       </div>
       <div class="relative grid-section next flex flex-col p-2 lg:p-4">
         <SlideContainer v-if="nextFrame && nextFrameClicksCtx" key="next">
@@ -166,7 +183,8 @@ onMounted(() => {
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
           :clicks-context="clicksContext"
         />
-        <div class="border-t border-main py-1 px-2 text-sm">
+        <div border-t border-main />
+        <div class="py-1 px-2 text-sm transition" :class="inFocus ? '' : 'op25'">
           <IconButton title="Increase font size" @click="increasePresenterFontSize">
             <div class="i-carbon:zoom-in" />
           </IconButton>
@@ -183,14 +201,14 @@ onMounted(() => {
         </div>
       </div>
       <div class="grid-section bottom flex">
-        <NavControls :persist="true" />
+        <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="isTimerAvctive" class="i-carbon:pause text-lg" />
+                <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">
@@ -215,7 +233,6 @@ onMounted(() => {
   <Goto />
   <QuickOverview />
   <ContextMenu />
-  <FocusIndicator />
 </template>
 
 <style scoped>
diff --git a/packages/client/styles/index.css b/packages/client/styles/index.css
index d2591e4c4a..de9dbda93d 100644
--- a/packages/client/styles/index.css
+++ b/packages/client/styles/index.css
@@ -121,13 +121,15 @@ html {
   transform: translateY(0.1em);
 }
 
-/* Focus Indicator */
-.slidev-focus-indicator {
-  --uno: fixed inset-0 pointer-events-none z-focus-indicator op0;
-}
 
-.slidev-focus-indicator-active {
-  --uno: op100 border-2 border-cyan;
+.slidev-form-button {
+  --uno: text-white px-4 py-1 rounded border-b-2;
+  --uno: bg-gray-400:50 border-gray8:50;
+  --uno: 'hover:(bg-gray-400:75 border-gray8:75)';
+}
+.slidev-form-button.primary {
+  --uno: bg-teal-600 border-teal-800;
+  --uno: 'hover:(bg-teal-500 border-teal-700)';
 }
 
 /* Transform the position back for Rough Notation (v-mark) */