@slidev/client 0.39.0 → 0.40.0

package/constants.ts

@@ -19,3 +19,8 @@ export const CLASS_VCLICK_GONE = 'slidev-vclick-gone'
 export const CLASS_VCLICK_HIDDEN_EXP = 'slidev-vclick-hidden-explicitly'
 export const CLASS_VCLICK_CURRENT = 'slidev-vclick-current'
 export const CLASS_VCLICK_PRIOR = 'slidev-vclick-prior'
+
+export const TRUST_ORIGINS = [
+  'localhost',
+  '127.0.0.1',
+]

package/internals/Draggable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useDraggable, useStorage } from '@vueuse/core'
+import { useDraggable, useLocalStorage } from '@vueuse/core'
 
 const props = defineProps<{
   storageKey?: string
@@ -10,7 +10,7 @@ const props = defineProps<{
 const el = ref<HTMLElement | null>(null)
 const initial = props.initial ?? { x: 0, y: 0 }
 const point = props.storageKey
-  ? useStorage(props.storageKey, initial)
+  ? useLocalStorage(props.storageKey, initial)
   : ref(initial)
 const { style } = useDraggable(el, { initialValue: point })
 </script>

package/internals/{NoteViewer.vue → NoteDisplay.vue}

@@ -3,6 +3,7 @@ const props = defineProps<{
   class?: string
   noteHtml?: string
   note?: string
+  placeholder?: string
 }>()
 
 defineEmits(['click'])
@@ -17,10 +18,19 @@ defineEmits(['click'])
     v-html="noteHtml"
   />
   <div
-    v-else
+    v-else-if="note"
     class="prose overflow-auto outline-none"
     :class="props.class"
     @click="$emit('click')"
-    v-text="note"
-  />
+  >
+    <p v-text="note" />
+  </div>
+  <div
+    v-else
+    class="prose overflow-auto outline-none opacity-50 italic"
+    :class="props.class"
+    @click="$emit('click')"
+  >
+    <p v-text="props.placeholder || 'No notes.'" />
+  </div>
 </template>

package/internals/NoteEditor.vue

@@ -3,7 +3,7 @@ import { ignorableWatch, onClickOutside } from '@vueuse/core'
 import { nextTick, ref, watch } from 'vue'
 import { currentSlideId } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
-import NoteViewer from './NoteViewer.vue'
+import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps({
   class: {
@@ -60,11 +60,11 @@ onClickOutside(input, () => {
 </script>
 
 <template>
-  <NoteViewer
+  <NoteDisplay
     v-if="!editing && note"
     :class="props.class"
     :note="note"
-    :note-html="info?.notesHTML"
+    :note-html="info?.noteHTML"
     @click="switchNoteEdit"
   />
   <textarea

package/internals/NoteStatic.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { currentRoute } from '../logic/nav'
-import NoteViewer from './NoteViewer.vue'
+import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps<{
   class?: string
 }>()
 
 const note = computed(() => currentRoute.value?.meta?.slide?.note)
-const noteHtml = computed(() => currentRoute.value?.meta?.slide?.notesHTML)
+const noteHtml = computed(() => currentRoute.value?.meta?.slide?.noteHTML)
 </script>
 
 <template>
-  <NoteViewer
+  <NoteDisplay
     :class="props.class"
     :note="note"
     :note-html="noteHtml"

package/internals/NotesView.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { useHead } from '@vueuse/head'
+import { computed } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import { configs } from '../env'
+import { sharedState } from '../state/shared'
+import { fullscreen } from '../state'
+import { total } from '../logic/nav'
+import { rawRoutes } from '../routes'
+import NoteDisplay from './NoteDisplay.vue'
+
+const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
+useHead({
+  title: `Notes - ${slideTitle}`,
+})
+
+const { isFullscreen, toggle: toggleFullscreen } = fullscreen
+
+const fontSize = useLocalStorage('slidev-notes-font-size', 18)
+const pageNo = computed(() => sharedState.lastUpdate?.type === 'viewer' ? sharedState.viewerPage : sharedState.page)
+const currentRoute = computed(() => rawRoutes.find(i => i.path === `${pageNo.value}`))
+const nextRoute = computed(() => rawRoutes.find(i => i.path === `${pageNo.value + 1}`))
+
+function increaseFontSize() {
+  fontSize.value = fontSize.value + 1
+}
+
+function decreaseFontSize() {
+  fontSize.value = fontSize.value - 1
+}
+</script>
+
+<template>
+  <div
+    class="fixed top-0 left-0 h-2px bg-teal-500 transition-all duration-500"
+    :style="{ width: `${(pageNo - 1) / total * 100}%` }"
+  />
+  <div class="h-full flex flex-col">
+    <div
+      class="px-5 flex-auto h-full overflow-auto"
+      :style="{ fontSize: `${fontSize}px` }"
+    >
+      <NoteDisplay
+        :note="currentRoute?.meta?.slide?.note"
+        :note-html="currentRoute?.meta?.slide?.noteHTML"
+        :placeholder="`No notes for Slide ${pageNo}.`"
+      />
+    </div>
+    <div v-if="nextRoute" class="px-5 py-2 max-h-60 overflow-auto border-t border-gray-400 border-opacity-20">
+      <NoteDisplay
+        class="opacity-50"
+        :note="nextRoute?.meta?.slide?.note"
+        :note-html="nextRoute?.meta?.slide?.noteHTML"
+        placeholder="No notes for next slide."
+      />
+    </div>
+    <div class="flex-none border-t border-gray-400 border-opacity-20">
+      <div class="flex gap-1 items-center px-6 py-3">
+        <button class="icon-btn" @click="toggleFullscreen">
+          <carbon:minimize v-if="isFullscreen" />
+          <carbon:maximize v-else />
+        </button>
+        <button class="icon-btn" @click="increaseFontSize">
+          <carbon:zoom-in />
+        </button>
+        <button class="icon-btn" @click="decreaseFontSize">
+          <carbon:zoom-out />
+        </button>
+        <div class="flex-auto" />
+        <div class="p2 text-center">
+          {{ pageNo }} / {{ total }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/internals/Presenter.vue

@@ -118,7 +118,7 @@ onMounted(() => {
           class="h-full w-full"
         >
           <SlideWrapper
-            :is="nextSlide.route?.component"
+            :is="nextSlide.route?.component as any"
             v-model:clicks-elements="nextTabElements"
             :clicks="nextSlide.clicks"
             :clicks-disabled="false"

package/internals/PresenterPrint.vue

@@ -4,7 +4,7 @@ import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@vueuse/head'
 import { configs, themeVars } from '../env'
 import { rawRoutes, total } from '../logic/nav'
-import NoteViewer from './NoteViewer.vue'
+import NoteDisplay from './NoteDisplay.vue'
 
 useStyleTag(`
 @page {
@@ -29,7 +29,7 @@ useHead({ title: `Notes - ${configs.title}` })
 const slidesWithNote = computed(() => rawRoutes
   .slice(0, -1)
   .map(route => route.meta?.slide)
-  .filter(slide => slide !== undefined && slide.notesHTML !== ''))
+  .filter(slide => slide !== undefined && slide.noteHTML !== ''))
 </script>
 
 <template>
@@ -55,7 +55,7 @@ const slidesWithNote = computed(() => rawRoutes
               <div class="flex-auto" />
             </div>
           </h2>
-          <NoteViewer :note-html="slide!.notesHTML" class="max-w-full" />
+          <NoteDisplay :note-html="slide!.noteHTML" class="max-w-full" />
         </div>
         <hr v-if="index < slidesWithNote.length - 1" class="border-gray-400/50 mb-8">
       </div>

package/internals/SlidesShow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TransitionGroup, computed, shallowRef, watch } from 'vue'
+import { computed, shallowRef, watch } from 'vue'
 import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes, transition } from '../logic/nav'
 import { getSlideClass } from '../utils'
 import SlideWrapper from './SlideWrapper'

package/internals/WebCamera.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useDraggable, useEventListener, useStorage } from '@vueuse/core'
+import { useDraggable, useEventListener, useLocalStorage } from '@vueuse/core'
 import { computed, onMounted, ref, watchEffect } from 'vue'
 import { currentCamera } from '../state'
 import { recorder } from '../logic/recording'
 
-const size = useStorage('slidev-webcam-size', Math.round(Math.min(window.innerHeight, (window.innerWidth) / 8)))
-const position = useStorage('slidev-webcam-pos', {
+const size = useLocalStorage('slidev-webcam-size', Math.round(Math.min(window.innerHeight, (window.innerWidth) / 8)))
+const position = useLocalStorage('slidev-webcam-pos', {
   x: window.innerWidth - size.value - 30,
   y: window.innerHeight - size.value - 30,
 }, undefined, { deep: true })

package/logic/dark.ts

@@ -1,9 +1,9 @@
-import { isClient, usePreferredDark, useStorage, useToggle } from '@vueuse/core'
+import { isClient, useLocalStorage, usePreferredDark, useToggle } from '@vueuse/core'
 import { computed, watch } from 'vue'
 import { configs } from '../env'
 
 const preferredDark = usePreferredDark()
-const store = useStorage('slidev-color-schema', 'auto')
+const store = useLocalStorage('slidev-color-schema', 'auto')
 
 export const isColorSchemaConfigured = computed(() => configs.colorSchema !== 'auto')
 export const isDark = computed<boolean>({

package/logic/drawings.ts

@@ -1,7 +1,7 @@
 import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
 import type { Brush, Options as DrauuOptions, DrawingMode } from 'drauu'
 import { createDrauu } from 'drauu'
-import { toReactive, useStorage } from '@vueuse/core'
+import { toReactive, useLocalStorage } from '@vueuse/core'
 import { drawingState, onPatch, patch } from '../state/drawings'
 import { configs } from '../env'
 import { currentPage, isPresenter } from './nav'
@@ -16,14 +16,14 @@ export const brushColors = [
   '#000000',
 ]
 
-export const drawingEnabled = useStorage('slidev-drawing-enabled', false)
-export const drawingPinned = useStorage('slidev-drawing-pinned', false)
+export const drawingEnabled = useLocalStorage('slidev-drawing-enabled', false)
+export const drawingPinned = useLocalStorage('slidev-drawing-pinned', false)
 export const canUndo = ref(false)
 export const canRedo = ref(false)
 export const canClear = ref(false)
 export const isDrawing = ref(false)
 
-export const brush = toReactive(useStorage<Brush>('slidev-drawing-brush', {
+export const brush = toReactive(useLocalStorage<Brush>('slidev-drawing-brush', {
   color: brushColors[0],
   size: 4,
   mode: 'stylus',

package/logic/nav.ts

@@ -26,6 +26,7 @@ export const isPrintMode = computed(() => route.value.query.print !== undefined)
 export const isPrintWithClicks = computed(() => route.value.query.print === 'clicks')
 export const isEmbedded = computed(() => route.value.query.embedded !== undefined)
 export const isPresenter = computed(() => route.value.path.startsWith('/presenter'))
+export const isNotesViewer = computed(() => route.value.path.startsWith('/notes'))
 export const isClicksDisabled = computed(() => isPrintMode.value && !isPrintWithClicks.value)
 export const presenterPassword = computed(() => route.value.query.password)
 export const showPresenter = computed(() => !isPresenter.value && (!configs.remote || presenterPassword.value === configs.remote))

package/logic/recording.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { nextTick, ref, shallowRef, watch } from 'vue'
-import { useDevicesList, useEventListener, useStorage } from '@vueuse/core'
+import { useDevicesList, useEventListener, useLocalStorage } from '@vueuse/core'
 import { isTruthy } from '@antfu/utils'
 import type RecorderType from 'recordrtc'
 import type { Options as RecorderOptions } from 'recordrtc'
@@ -11,7 +11,7 @@ type MimeType = Defined<RecorderOptions['mimeType']>
 
 export const recordingName = ref('')
 export const recordCamera = ref(true)
-export const mimeType = useStorage<MimeType>('slidev-record-mimetype', 'video/webm')
+export const mimeType = useLocalStorage<MimeType>('slidev-record-mimetype', 'video/webm')
 
 export const mimeExtMap: Record<string, string> = {
   'video/webm': 'webm',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,10 +16,10 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.2",
-    "@unocss/reset": "^0.49.1",
-    "@vueuse/core": "^9.11.1",
-    "@vueuse/head": "^1.0.23",
-    "@vueuse/math": "^9.11.1",
+    "@unocss/reset": "^0.49.4",
+    "@vueuse/core": "^9.12.0",
+    "@vueuse/head": "^1.0.24",
+    "@vueuse/math": "^9.12.0",
     "@vueuse/motion": "^2.0.0-beta.27",
     "codemirror": "^5.65.5",
     "defu": "^6.1.2",
@@ -34,16 +34,16 @@
     "prettier": "^2.8.3",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.1",
-    "unocss": "^0.49.1",
+    "unocss": "^0.49.4",
     "vite-plugin-windicss": "^1.8.10",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.39.0",
-    "@slidev/types": "0.39.0"
+    "@slidev/parser": "0.40.0",
+    "@slidev/types": "0.40.0"
   },
   "devDependencies": {
-    "vite": "^4.0.4"
+    "vite": "^4.1.1"
   }
 }

package/routes.ts

@@ -1,6 +1,6 @@
-import type { RouteRecordRaw } from 'vue-router'
-import type { SlideTransition } from '@slidev/types'
+import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import type { TransitionGroupProps } from 'vue'
 import Play from './internals/Play.vue'
 import Print from './internals/Print.vue'
 // @ts-expect-error missing types
@@ -25,24 +25,31 @@ export const routes: RouteRecordRaw[] = [
 ]
 
 if (__SLIDEV_FEATURE_PRESENTER__) {
+  function passwordGuard(to: RouteLocationNormalized) {
+    if (!_configs.remote || _configs.remote === to.query.password)
+      return true
+    if (_configs.remote && to.query.password === undefined) {
+      // eslint-disable-next-line no-alert
+      const password = prompt('Enter password')
+      if (_configs.remote === password)
+        return true
+    }
+    if (to.params.no)
+      return { path: `/${to.params.no}` }
+    return { path: '' }
+  }
   routes.push({ path: '/presenter/print', component: () => import('./internals/PresenterPrint.vue') })
+  routes.push({
+    name: 'notes',
+    path: '/notes',
+    component: () => import('./internals/NotesView.vue'),
+    beforeEnter: passwordGuard,
+  })
   routes.push({
     name: 'presenter',
     path: '/presenter/:no',
     component: () => import('./internals/Presenter.vue'),
-    beforeEnter: (to) => {
-      if (!_configs.remote || _configs.remote === to.query.password)
-        return true
-      if (_configs.remote && to.query.password === undefined) {
-        // eslint-disable-next-line no-alert
-        const password = prompt('Enter password')
-        if (_configs.remote === password)
-          return true
-      }
-      if (to.params.no)
-        return { path: `/${to.params.no}` }
-      return { path: '' }
-    },
+    beforeEnter: passwordGuard,
   })
   routes.push({
     path: '/presenter',
@@ -65,14 +72,14 @@ declare module 'vue-router' {
       start: number
       end: number
       note?: string
-      notesHTML?: string
+      noteHTML?: string
       id: number
       no: number
       filepath: string
       title?: string
       level?: number
     }
-    transition?: string | SlideTransition
+    transition?: string | TransitionGroupProps | undefined
     // private fields
     __clicksElements: HTMLElement[]
     __preloaded?: boolean

package/setup/main.ts

@@ -17,7 +17,7 @@ export default function setupMain(context: AppContext) {
   context.app.use(StarportPlugin({ keepAlive: true }))
 
   // @ts-expect-error inject in runtime
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // eslint-disable-next-line unused-imports/no-unused-vars
   const injection_arg = context
 
   /* __injections__ */

package/setup/monaco.ts

@@ -49,7 +49,7 @@ const setup = createSingletonPromise(async () => {
   ])
 
   // @ts-expect-error injected in runtime
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // eslint-disable-next-line unused-imports/no-unused-vars
   const injection_arg = monaco
   // eslint-disable-next-line prefer-const
   let injection_return: MonacoSetupReturn = {}

package/setup/root.ts

@@ -1,15 +1,17 @@
 /* __imports__ */
 import { watch } from 'vue'
 import { useHead, useHtmlAttrs } from '@vueuse/head'
+import { nanoid } from 'nanoid'
 import { configs } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
 import { initDrawingState } from '../state/drawings'
-import { clicks, currentPage, getPath, isPresenter } from '../logic/nav'
+import { clicks, currentPage, getPath, isNotesViewer, isPresenter } from '../logic/nav'
 import { router } from '../routes'
+import { TRUST_ORIGINS } from '../constants'
 
 export default function setupRoot() {
   // @ts-expect-error injected in runtime
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   const injection_arg = undefined
 
   /* __injections__ */
@@ -20,17 +22,38 @@ export default function setupRoot() {
   initSharedState(`${title} - shared`)
   initDrawingState(`${title} - drawings`)
 
+  const id = `${location.origin}_${nanoid()}`
+
   // update shared state
   function updateSharedState() {
+    if (isNotesViewer.value)
+      return
+
+    // we allow Presenter mode, or Viewer mode from trusted origins to update the shared state
+    if (!isPresenter.value && !TRUST_ORIGINS.includes(location.host.split(':')[0]))
+      return
+
     if (isPresenter.value) {
       patch('page', +currentPage.value)
       patch('clicks', clicks.value)
     }
+    else {
+      patch('viewerPage', +currentPage.value)
+      patch('viewerClicks', clicks.value)
+    }
+    patch('lastUpdate', {
+      id,
+      type: isPresenter.value ? 'presenter' : 'viewer',
+      time: new Date().getTime(),
+    })
   }
   router.afterEach(updateSharedState)
   watch(clicks, updateSharedState)
 
   onPatch((state) => {
+    const routePath = router.currentRoute.value.path
+    if (!routePath.match(/^\/(\d+|presenter)\/?/))
+      return
     if (+state.page !== +currentPage.value || clicks.value !== state.clicks) {
       router.replace({
         path: getPath(state.page),

package/setup/shortcuts.ts

@@ -11,7 +11,7 @@ export default function setupShortcuts() {
   const { escape, space, shift, left, right, up, down, enter, d, g, o } = magicKeys
 
   // @ts-expect-error injected in runtime
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // eslint-disable-next-line unused-imports/no-unused-vars
   const injection_arg: NavOperations = {
     next,
     prev,

package/state/index.ts

@@ -1,4 +1,4 @@
-import { breakpointsTailwind, isClient, useActiveElement, useBreakpoints, useFullscreen, useMagicKeys, useStorage, useToggle, useWindowSize } from '@vueuse/core'
+import { breakpointsTailwind, isClient, useActiveElement, useBreakpoints, useFullscreen, useLocalStorage, useMagicKeys, useToggle, useWindowSize } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { slideAspect } from '../env'
 
@@ -20,13 +20,13 @@ export const activeElement = useActiveElement()
 export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || '') || activeElement.value?.classList.contains('CodeMirror-code'))
 export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.value?.tagName || ''))
 
-export const currentCamera = useStorage<string>('slidev-camera', 'default')
-export const currentMic = useStorage<string>('slidev-mic', 'default')
-export const slideScale = useStorage<number>('slidev-scale', 0)
+export const currentCamera = useLocalStorage<string>('slidev-camera', 'default')
+export const currentMic = useLocalStorage<string>('slidev-mic', 'default')
+export const slideScale = useLocalStorage<number>('slidev-scale', 0)
 
-export const showOverview = useStorage('slidev-show-overview', false)
-export const showPresenterCursor = useStorage('slidev-presenter-cursor', true)
-export const showEditor = useStorage('slidev-show-editor', false)
-export const editorWidth = useStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 100)
+export const showOverview = useLocalStorage('slidev-show-overview', false)
+export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true)
+export const showEditor = useLocalStorage('slidev-show-editor', false)
+export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 100)
 
 export const toggleOverview = useToggle(showOverview)

package/state/shared.ts

@@ -8,10 +8,27 @@ export interface SharedState {
     x: number
     y: number
   }
+
+  viewerPage: number
+  viewerClicks: number
+
+  lastUpdate?: {
+    id: string
+    type: 'presenter' | 'viewer'
+    time: number
+  }
 }
 
 const { init, onPatch, patch, state } = createSyncState<SharedState>(serverState, {
   page: 1,
   clicks: 0,
+  viewerPage: 1,
+  viewerClicks: 0,
 })
-export { init as initSharedState, onPatch, patch, state as sharedState }
+
+export {
+  init as initSharedState,
+  onPatch,
+  patch,
+  state as sharedState,
+}