@slidev/client 0.38.8 → 0.40.0

package/builtin/Tweet.vue

@@ -58,7 +58,7 @@ else {
 
 <template>
   <Transform :scale="scale || 1">
-    <div ref="tweet" class="tweet">
+    <div ref="tweet" class="tweet slidev-tweet">
       <div v-if="!loaded || tweetNotFound" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
         <div class="m-auto animate-pulse text-4xl">
           <carbon:logo-twitter />
@@ -68,3 +68,10 @@ else {
     </div>
   </Transform>
 </template>
+
+<style>
+.slidev-tweet iframe {
+  border-radius: 12px;
+  overflow: hidden;
+}
+</style>

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/iframes/monaco/index.ts

@@ -101,8 +101,8 @@ async function start() {
 
   update = () => {
     monaco.editor.setTheme(props.dark
-      ? theme.dark || 'vitesse-dark'
-      : theme.light || 'vitesse-light',
+      ? (theme.dark || 'vitesse-dark')
+      : (theme.light || 'vitesse-light'),
     )
     styleObject.innerHTML = `:root { ${props.style} }`
 

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,8 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, shallowRef, watch } from 'vue'
-import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes } from '../logic/nav'
+import { computed, shallowRef, watch } from 'vue'
+import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes, transition } from '../logic/nav'
 import { getSlideClass } from '../utils'
-import { configs } from '../env'
 import SlideWrapper from './SlideWrapper'
 // @ts-expect-error virtual module
 import GlobalTop from '/@slidev/global-components/top'
@@ -24,17 +23,7 @@ const DrawingLayer = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
   import('./DrawingLayer.vue').then(v => DrawingLayer.value = v.default)
 
-const routes = computed(() => rawRoutes.filter(r => r.meta?.__preloaded || r === currentRoute.value))
-
-const isLeaving = ref(false)
-function onBeforeLeave() {
-  if (configs.pageTransition?.crossfade === false)
-    isLeaving.value = true
-}
-function onAfterLeave() {
-  if (configs.pageTransition?.crossfade === false)
-    isLeaving.value = false
-}
+const loadedRoutes = computed(() => rawRoutes.filter(r => r.meta?.__preloaded || r === currentRoute.value))
 </script>
 
 <template>
@@ -42,18 +31,11 @@ function onAfterLeave() {
   <GlobalBottom />
 
   <!-- Slides -->
-  <template
-    v-for="route of routes"
-    :key="route.path"
-  >
-    <Transition
-      v-bind="configs.pageTransition"
-      @before-leave="onBeforeLeave()"
-      @after-leave="onAfterLeave()"
-    >
+  <TransitionGroup v-bind="transition">
+    <template v-for="route of loadedRoutes" :key="route.path">
       <SlideWrapper
         :is="route?.component as any"
-        v-show="route === currentRoute && !isLeaving"
+        v-show="route === currentRoute"
         :clicks="route === currentRoute ? clicks : 0"
         :clicks-elements="route.meta?.__clicksElements || []"
         :clicks-disabled="false"
@@ -61,8 +43,8 @@ function onAfterLeave() {
         :route="route"
         :context="context"
       />
-    </Transition>
-  </template>
+    </template>
+  </TransitionGroup>
 
   <!-- Global Top -->
   <GlobalTop />

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

@@ -1,6 +1,6 @@
-import type { Ref } from 'vue'
+import type { Ref, TransitionGroupProps } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import type { TocItem } from '@slidev/types'
 import { SwipeDirection, isString, timestamp, usePointerSwipe } from '@vueuse/core'
 import { rawRoutes, router } from '../routes'
@@ -18,6 +18,7 @@ nextTick(() => {
     routeForceRefresh.value += 1
   })
 })
+export const navDirection = ref(0)
 
 export const route = computed(() => router.currentRoute.value)
 
@@ -25,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))
@@ -40,6 +42,7 @@ export const currentSlideId = computed(() => currentRoute.value?.meta?.slide?.id
 export const currentLayout = computed(() => currentRoute.value?.meta?.layout || (currentPage.value === 1 ? 'cover' : 'default'))
 
 export const nextRoute = computed(() => rawRoutes.find(i => i.path === `${Math.min(rawRoutes.length, currentPage.value + 1)}`))
+export const prevRoute = computed(() => rawRoutes.find(i => i.path === `${Math.max(1, currentPage.value - 1)}`))
 
 export const clicksElements = computed<HTMLElement[]>(() => {
   // eslint-disable-next-line no-unused-expressions
@@ -75,6 +78,12 @@ export const rawTree = computed(() => rawRoutes
 export const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentRoute.value))
 export const tree = computed(() => filterTree(treeWithActiveStatuses.value))
 
+export const transition = computed(() => getCurrentTransition(navDirection.value, currentRoute.value, prevRoute.value))
+
+watch(currentRoute, (next, prev) => {
+  navDirection.value = Number(next?.path) - Number(prev?.path)
+})
+
 export function next() {
   if (clicksTotal.value <= clicks.value)
     nextSlide()
@@ -220,3 +229,50 @@ export function filterTree(tree: TocItem[], level = 1): TocItem[] {
       children: filterTree(item.children, level + 1),
     }))
 }
+
+const transitionResolveMap: Record<string, string | undefined> = {
+  'slide-left': 'slide-left | slide-right',
+  'slide-right': 'slide-right | slide-left',
+  'slide-up': 'slide-up | slide-down',
+  'slide-down': 'slide-down | slide-up',
+}
+
+export function resolveTransition(transition?: string | TransitionGroupProps, isBackward = false): TransitionGroupProps | undefined {
+  if (!transition)
+    return undefined
+  if (typeof transition === 'string') {
+    transition = {
+      name: transition,
+    }
+  }
+
+  if (!transition.name)
+    return undefined
+
+  let name = transition.name.includes('|')
+    ? transition.name
+    : (transitionResolveMap[transition.name] || transition.name)
+
+  if (name.includes('|')) {
+    const [forward, backward] = name.split('|').map(i => i.trim())
+    name = isBackward ? backward : forward
+  }
+
+  if (!name)
+    return undefined
+
+  return {
+    ...transition,
+    name,
+  }
+}
+
+export function getCurrentTransition(direction: number, currentRoute?: RouteRecordRaw, prevRoute?: RouteRecordRaw) {
+  let transition = direction > 0
+    ? prevRoute?.meta?.transition
+    : currentRoute?.meta?.transition
+  if (!transition)
+    transition = configs.transition
+
+  return resolveTransition(transition, direction < 0)
+}

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',
@@ -107,7 +107,7 @@ export function useRecording() {
         return
 
       streamCamera.value = await navigator.mediaDevices.getUserMedia({
-        video: currentCamera.value === 'none' || recordCamera.value !== true
+        video: (currentCamera.value === 'none' || recordCamera.value !== true)
           ? false
           : {
               deviceId: currentCamera.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.38.8",
+  "version": "0.40.0",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,11 +16,11 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.2",
-    "@unocss/reset": "^0.48.4",
-    "@vueuse/core": "^9.11.1",
-    "@vueuse/head": "^1.0.23",
-    "@vueuse/math": "^9.11.1",
-    "@vueuse/motion": "^2.0.0-beta.26",
+    "@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",
     "drauu": "^0.3.2",
@@ -34,16 +34,16 @@
     "prettier": "^2.8.3",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.1",
-    "unocss": "^0.48.4",
+    "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.38.8",
-    "@slidev/types": "0.38.8"
+    "@slidev/parser": "0.40.0",
+    "@slidev/types": "0.40.0"
   },
   "devDependencies": {
-    "vite": "^4.0.4"
+    "vite": "^4.1.1"
   }
 }

package/routes.ts

@@ -1,9 +1,11 @@
-import type { RouteRecordRaw } from 'vue-router'
+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
 import _rawRoutes from '/@slidev/routes'
+// @ts-expect-error missing types
 import _configs from '/@slidev/configs'
 
 export const rawRoutes = _rawRoutes as RouteRecordRaw[]
@@ -23,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',
@@ -63,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 | 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,
+}

package/styles/index.css

@@ -51,3 +51,7 @@ html {
   vertical-align: sub;
   line-height: 1em;
 }
+
+.slidev-page {
+  @apply absolute top-0 left-0 right-0 w-full relative;
+}

package/styles/layouts-base.css

@@ -1,3 +1,7 @@
+#slide-content > div {
+  @apply h-full w-full absolute;
+}
+
 .slidev-layout {
   @apply px-14 py-10 text-[1.1rem] h-full;
 
@@ -116,4 +120,4 @@
   li {
     @apply mr-1.1em pr-0.2em ml-0 pl-0;
   }
-}
+}

package/styles/transitions.css

@@ -0,0 +1,56 @@
+/* Sliding */
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active,
+.slide-up-enter-active,
+.slide-up-leave-active,
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all var(--slidev-transition-duration) ease;
+}
+
+.slide-left-enter-from,
+.slide-right-leave-to {
+  transform: translateX(100%);
+}
+
+.slide-left-leave-to,
+.slide-right-enter-from {
+  transform: translateX(-100%);
+}
+
+.slide-up-enter-from,
+.slide-down-leave-to {
+  transform: translateY(100%);
+}
+
+.slide-up-leave-to,
+.slide-down-enter-from {
+  transform: translateY(-100%);
+}
+
+/* Fading */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity var(--slidev-transition-duration) ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-out-leave-active {
+  transition: opacity calc(var(--slidev-transition-duration) * 0.6) ease-out;
+}
+
+.fade-out-enter-active {
+  transition: opacity calc(var(--slidev-transition-duration) * 0.8) ease-in;
+  transition-delay: calc(var(--slidev-transition-duration) * 0.6);
+}
+
+.fade-out-enter-from,
+.fade-out-leave-to {
+  opacity: 0;
+}

package/styles/vars.css

@@ -7,6 +7,8 @@
   --slidev-code-radius: 4px;
   --slidev-code-margin: 4px 0;
 
+  --slidev-transition-duration: 0.5s;
+
   --slidev-slide-container-background: black;
   --slidev-controls-foreground: white;
 }

package/utils.ts

@@ -1,8 +1,11 @@
 import type { RouteRecordRaw } from 'vue-router'
 
-export function getSlideClass(route?: RouteRecordRaw) {
+export function getSlideClass(route?: RouteRecordRaw, extra = '') {
+  const classes = ['slidev-page', extra]
+
   const no = route?.meta?.slide?.no
   if (no != null)
-    return `slidev-page-${no}`
-  return ''
+    classes.push(`slidev-page-${no}`)
+
+  return classes.filter(Boolean).join(' ')
 }