@slidev/client 0.50.0 → 0.51.0-beta.2

package/builtin/VSwitch.ts

@@ -3,9 +3,9 @@ import { recomputeAllPoppers } from 'floating-vue'
 import { defineComponent, h, onMounted, onUnmounted, ref, TransitionGroup, watchEffect } from 'vue'
 import { CLASS_VCLICK_CURRENT, CLASS_VCLICK_DISPLAY_NONE, CLASS_VCLICK_PRIOR, CLASS_VCLICK_TARGET, CLICKS_MAX } from '../constants'
 import { useSlideContext } from '../context'
-import { skipTransition } from '../logic/hmr'
 import { resolveTransition } from '../logic/transition'
 import { makeId } from '../logic/utils'
+import { hmrSkipTransition } from '../state'
 
 export default defineComponent({
   props: {
@@ -77,7 +77,7 @@ export default defineComponent({
 
     function onAfterLeave() {
       // Refer to SlidesShow.vue
-      skipTransition.value = true
+      hmrSkipTransition.value = true
       recomputeAllPoppers()
     }
     const transitionProps = transition && {
@@ -107,7 +107,7 @@ export default defineComponent({
         }, slot?.()))
       }
       return transitionProps
-        ? h(TransitionGroup, skipTransition.value ? {} : transitionProps, () => children)
+        ? h(TransitionGroup, hmrSkipTransition.value ? {} : transitionProps, () => children)
         : h(tag, children)
     }
   },

package/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,
   )

package/composables/useHideCursorIdle.ts

@@ -0,0 +1,35 @@
+import type { Ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { computed } from 'vue'
+import { hideCursorIdle } from '../state'
+
+const TIMEOUT = 2000
+
+export function useHideCursorIdle(
+  enabled: Ref<boolean>,
+) {
+  const shouldHide = computed(() => enabled.value && hideCursorIdle.value)
+
+  function hide() {
+    document.body.style.cursor = 'none'
+  }
+  function show() {
+    document.body.style.cursor = ''
+  }
+
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  useEventListener(
+    document.body,
+    ['pointermove', 'pointerdown'],
+    () => {
+      show()
+      if (!shouldHide.value)
+        return
+      if (timer)
+        clearTimeout(timer)
+      timer = setTimeout(hide, TIMEOUT)
+    },
+    { passive: true },
+  )
+}

package/composables/useNav.ts

@@ -9,10 +9,10 @@ import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { CLICKS_MAX } from '../constants'
 import { configs } from '../env'
-import { skipTransition } from '../logic/hmr'
 import { useRouteQuery } from '../logic/route'
 import { getSlide, getSlidePath } from '../logic/slides'
 import { getCurrentTransition } from '../logic/transition'
+import { hmrSkipTransition } from '../state'
 import { createClicksContextBase } from './useClicks'
 import { useTocTree } from './useTocTree'
 
@@ -184,7 +184,7 @@ export function useNavBase(
   }
 
   async function go(no: number | string, clicks: number = 0, force = false) {
-    skipTransition.value = false
+    hmrSkipTransition.value = false
     const pageChanged = currentSlideNo.value !== no
     const clicksChanged = clicks !== queryClicks.value
     const meta = getSlide(no)?.meta
@@ -304,7 +304,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
       return v
     },
     set(v) {
-      skipTransition.value = false
+      hmrSkipTransition.value = false
       queryClicksRaw.value = v.toString()
     },
   })

package/composables/useTimer.ts

@@ -13,7 +13,7 @@ export function useTimer() {
 
   return {
     timer,
-    isTimerAvctive: isActive,
+    isTimerActive: isActive,
     resetTimer: reset,
     toggleTimer: () => (isActive.value ? pause() : resume()),
   }

package/composables/useWakeLock.ts

@@ -5,10 +5,14 @@ import { wakeLockEnabled } from '../state'
 export function useWakeLock() {
   const { request, release } = useVueUseWakeLock()
 
-  watch(wakeLockEnabled, (enabled) => {
-    if (enabled)
-      request('screen')
-    else
-      release()
-  }, { immediate: true })
+  watch(
+    wakeLockEnabled,
+    (enabled) => {
+      if (enabled)
+        request('screen')
+      else
+        release()
+    },
+    { immediate: true },
+  )
 }

package/constants.ts

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

package/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>

package/internals/{DevicesList.vue → DevicesSelectors.vue}

@@ -43,13 +43,23 @@ ensureDevicesListPermissions()
 </script>
 
 <template>
-  <div class="text-sm">
-    <SelectList v-model="currentCamera" title="Camera" :items="camerasItems" />
-    <SelectList v-model="currentMic" title="Microphone" :items="microphonesItems" />
+  <div text-sm flex="~ col gap-2">
+    <SelectList
+      v-model="currentCamera"
+      title="Camera"
+      :items="camerasItems"
+    />
+    <div class="h-1px opacity-10 bg-current w-full" />
+    <SelectList
+      v-model="currentMic"
+      title="Microphone"
+      :items="microphonesItems"
+    />
+    <div class="h-1px opacity-10 bg-current w-full" />
     <SelectList
       v-if="mimeTypeItems.length"
       v-model="mimeType"
-      title="mimeType"
+      title="Video Format"
       :items="mimeTypeItems"
     />
   </div>

package/internals/FormItem.vue

@@ -6,6 +6,7 @@ defineProps<{
   nested?: boolean | number
   div?: boolean
   description?: string
+  dot?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -19,17 +20,19 @@ function reset() {
 
 <template>
   <component :is="div ? 'div' : 'label'" flex="~ row gap-2 items-center" select-none>
-    <div w-30 h-10 flex="~ gap-1 items-center">
+    <div w-30 h-8 flex="~ gap-1 items-center">
       <div
         v-if="nested" i-ri-corner-down-right-line op40
         :style="typeof nested === 'number' ? { marginLeft: `${nested * 0.5 + 0.5}rem` } : { marginLeft: '0.25rem' }"
       />
-      <div v-if="!description" op75 @dblclick="reset">
+      <div v-if="!description" op75 relative @dblclick="reset">
         {{ title }}
+        <div v-if="dot" w-1.5 h-1.5 bg-primary rounded absolute top-0 right--2 />
       </div>
       <Tooltip v-else distance="10">
-        <div op75 text-right @dblclick="reset">
+        <div op75 text-right relative @dblclick="reset">
           {{ title }}
+          <div v-if="dot" w-1.5 h-1.5 bg-primary rounded absolute top-0 right--2 />
         </div>
         <template #popper>
           <div text-sm min-w-90 v-html="description" />

package/internals/FormSlider.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = defineProps<{
+  max: number
+  min: number
+  step: number
+  unit?: string
+  default?: number
+}>()
+
+const value = defineModel<number>('modelValue', {
+  type: Number,
+})
+</script>
+
+<template>
+  <div relative h-22px w-60 flex-auto @dblclick="props.default !== undefined ? value = props.default : null">
+    <input
+      v-model.number="value" type="range" class="slider"
+      v-bind="props"
+      absolute bottom-0 left-0 right-0 top-0 z-10 w-full align-top
+    >
+    <span
+      v-if="props.default != null"
+      border="r main" absolute bottom-0 top-0 h-full w-1px op75
+      :style="{
+        left: `${(props.default - min) / (max - min) * 100}%`,
+      }"
+    />
+  </div>
+  <div relative h-22px>
+    <input v-model.number="value" type="number" v-bind="props" border="~ base rounded" m0 w-20 bg-gray:5 pl2 align-top text-sm>
+    <span v-if="props.unit" pointer-events-none absolute right-1 top-0.5 text-xs op25>{{ props.unit }}</span>
+  </div>
+</template>
+
+<style>
+.slider {
+  appearance: none;
+  height: 22px;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+  --uno: border border-main rounded of-hidden bg-gray/5;
+}
+
+.slider:hover {
+  opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 5px;
+  height: 22px;
+  background: var(--slidev-theme-primary);
+  cursor: pointer;
+  z-index: 10;
+}
+
+.slider::-moz-range-thumb {
+  width: 5px;
+  height: 22px;
+  background: var(--slidev-theme-primary);
+  cursor: pointer;
+  z-index: 10;
+}
+</style>

package/internals/MenuButton.vue

@@ -30,8 +30,8 @@ onClickOutside(el, () => {
     <KeepAlive>
       <div
         v-if="value"
-        class="rounded-md bg-main text-main shadow-xl absolute bottom-10 left-0 z-menu"
-        dark:border="~ main"
+        class="bg-main text-main shadow-xl absolute bottom-10 left-0 z-menu py2"
+        border="~ main rounded-md"
       >
         <slot name="menu" />
       </div>

package/internals/NavControls.vue

@@ -5,11 +5,12 @@ import { useDrawings } from '../composables/useDrawings'
 import { useNav } from '../composables/useNav'
 import { configs } from '../env'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
+import { activeElement, breakpoints, fullscreen, hasViewerCssFilter, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
 import { downloadPDF } from '../utils'
 import IconButton from './IconButton.vue'
 import MenuButton from './MenuButton.vue'
 import Settings from './Settings.vue'
+import SyncControls from './SyncControls.vue'
 
 import VerticalDivider from './VerticalDivider.vue'
 
@@ -48,7 +49,7 @@ function onMouseLeave() {
 
 const barStyle = computed(() => props.persist
   ? 'text-$slidev-controls-foreground bg-transparent'
-  : 'rounded-md bg-main shadow-xl dark:border dark:border-main')
+  : 'rounded-md bg-main shadow-xl border border-main')
 
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)
@@ -130,19 +131,15 @@ if (__SLIDEV_FEATURE_RECORD__)
         >
           <div class="i-carbon:text-annotation-toggle" />
         </IconButton>
-
-        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial flex items-center" @click="togglePresenterLayout">
-          <div class="i-carbon:template" />
-          {{ presenterLayout }}
-        </IconButton>
       </template>
+
       <template v-if="!__DEV__">
         <IconButton v-if="configs.download" title="Download as PDF" @click="downloadPDF">
           <div class="i-carbon:download" />
         </IconButton>
       </template>
 
-      <template v-if="__SLIDEV_FEATURE_BROWSER_EXPORTER__">
+      <template v-if="__SLIDEV_FEATURE_BROWSER_EXPORTER__ && !isEmbedded && !isPresenter">
         <IconButton title="Browser Exporter" to="/export">
           <div class="i-carbon:document-pdf" />
         </IconButton>
@@ -156,11 +153,21 @@ if (__SLIDEV_FEATURE_RECORD__)
         <div class="i-carbon:information" />
       </IconButton>
 
-      <template v-if="!isPresenter && !isEmbedded">
+      <template v-if="!isEmbedded">
+        <VerticalDivider />
+
+        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial flex items-center" @click="togglePresenterLayout">
+          <div class="i-carbon:template" />
+          {{ presenterLayout }}
+        </IconButton>
+
+        <SyncControls v-if="__SLIDEV_FEATURE_PRESENTER__" />
+
         <MenuButton>
           <template #button>
             <IconButton title="More Options">
               <div class="i-carbon:settings-adjust" />
+              <div v-if="hasViewerCssFilter" w-2 h-2 bg-primary rounded-full absolute top-0.5 right-0.5 />
             </IconButton>
           </template>
           <template #menu>

package/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>

package/internals/RecordingControls.vue

@@ -3,7 +3,7 @@ import { useLocalStorage } from '@vueuse/core'
 import { onMounted, watch } from 'vue'
 import { recorder } from '../logic/recording'
 import { currentCamera, showRecordingDialog } from '../state'
-import DevicesList from './DevicesList.vue'
+import DevicesSelectors from './DevicesSelectors.vue'
 import IconButton from './IconButton.vue'
 import MenuButton from './MenuButton.vue'
 
@@ -59,7 +59,7 @@ onMounted(() => {
       </IconButton>
     </template>
     <template #menu>
-      <DevicesList />
+      <DevicesSelectors />
     </template>
   </MenuButton>
 </template>

package/internals/RecordingDialog.vue

@@ -2,7 +2,7 @@
 import { useVModel } from '@vueuse/core'
 import { nextTick } from 'vue'
 import { getFilename, mimeType, recordCamera, recorder, recordingName } from '../logic/recording'
-import DevicesList from './DevicesList.vue'
+import DevicesSelectors from './DevicesSelectors.vue'
 import Modal from './Modal.vue'
 
 const props = defineProps({
@@ -72,14 +72,14 @@ async function start() {
           </div>
         </div>
       </div>
-      <DevicesList />
+      <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>

package/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>

package/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:4 p1 m--1>
+    <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>

package/internals/SelectList.vue

@@ -44,19 +44,11 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 </template>
 
 <style lang="postcss" scoped>
-.select-list {
-  @apply my-2;
-}
-
 .item {
   @apply flex rounded whitespace-nowrap py-1 gap-1 px-2 cursor-default hover:bg-gray-400 hover:bg-opacity-10;
-
-  svg {
-    @apply mr-1 -ml-2 my-auto;
-  }
 }
 
 .title {
-  @apply text-xs uppercase opacity-50 tracking-widest px-7 py-1 select-none text-nowrap;
+  @apply text-sm op75 px3 py1 select-none text-nowrap font-bold;
 }
 </style>