feat: presenter mode controls

Author: antfu

packages/client/internals/Presenter.vue

@@ -28,9 +28,9 @@ const controls = useNavigateControls()
       </SlideContainer>
     </div>
     <div class="grid-section next flex flex-col p-4 bg-gray-400 bg-opacity-10">
-      <SlideContainer class="h-full w-full">
+      <!-- <SlideContainer class="h-full w-full">
         <component :is="controls.nextRoute.value?.component" />
-      </SlideContainer>
+      </SlideContainer> -->
     </div>
     <div class="grid-section note"></div>
     <div class="grid-section bottom"></div>

packages/client/internals/SlidesOverview.vue

@@ -10,12 +10,17 @@ const props = defineProps<{ modelValue: boolean }>()
 
 const value = useVModel(props, 'modelValue', emit)
 
-const { routes } = useNavigateControls()
+const { go: _go, routes } = useNavigateControls()
 
 function close() {
   value.value = false
 }
 
+function go(page: number) {
+  _go(page)
+  close()
+}
+
 const sm = breakpoints.smaller('sm')
 const md = breakpoints.smaller('md')
 
@@ -45,10 +50,9 @@ const cardWidth = computed(() => {
         :key="route.path"
         class="relative"
       >
-        <RouterLink
-          :to="route.path"
+        <div
           class="inline-block border border-gray-400 rounded border-opacity-50 overflow-hidden bg-main hover:(border-primary)"
-          @click="close"
+          @click="go(+route.path)"
         >
           <SlideContainer
             v-click-disabled
@@ -57,7 +61,7 @@ const cardWidth = computed(() => {
           >
             <component :is="route.component" />
           </SlideContainer>
-        </RouterLink>
+        </div>
         <div
           class="absolute top-0 opacity-50"
           :style="`left: ${cardWidth + 5}px`"

packages/client/logic/controls.ts

@@ -1,9 +1,11 @@
-import { computed, App, InjectionKey, inject, ref, ComputedRef, Ref } from 'vue'
+import { computed, App, InjectionKey, inject, ref, ComputedRef, Ref, watch } from 'vue'
 import { and, Fn, not, whenever } from '@vueuse/core'
 import { Router, RouteRecordRaw } from 'vue-router'
 import { clickCurrent, clickElements } from '../logic'
 import { isInputing, magicKeys } from '../state'
 import { rawRoutes } from '../routes'
+// @ts-expect-error
+import serverState from '/@server-ref/state'
 
 declare module 'vue-router' {
   interface RouteMeta {
@@ -31,6 +33,7 @@ export interface NavigateControls {
   paused: Ref<boolean>
   hasNext: ComputedRef<boolean>
   hasPrev: ComputedRef<boolean>
+  go(page: number): void
   install(app: App): void
 }
 
@@ -51,14 +54,34 @@ export function createNavigateControls(router: Router) {
   const hasPrev = computed(() => currentPage.value > 0)
   const nextRoute = computed(() => routes.find(i => i.path === `${Math.min(routes.length - 1, currentPage.value + 1)}`))
 
+  router.isReady().then(() => {
+    watch(serverState,
+      () => {
+        if (+serverState.value.page !== +currentPage.value)
+          router.replace(getPath(serverState.value.page))
+        clickCurrent.value = serverState.value.tab || 0
+      },
+      { deep: true },
+    )
+  })
+
+  function updateState() {
+    if (isPresenter.value) {
+      serverState.value.page = +currentPage.value
+      serverState.value.tab = clickCurrent.value
+    }
+  }
+
+  watch(clickCurrent, updateState)
+
   function next() {
     if (clickElements.value.length <= clickCurrent.value)
       nextSlide()
     else
       clickCurrent.value += 1
   }
 
-  function prev() {
+  async function prev() {
     if (clickCurrent.value <= 0)
       prevSlide()
     else
@@ -69,18 +92,21 @@ export function createNavigateControls(router: Router) {
     return isPresenter.value ? `/presenter/${no}` : `/${no}`
   }
 
-  function nextSlide() {
-    clickCurrent.value = 0
-    clickElements.value = []
+  async function nextSlide() {
     const next = Math.min(routes.length - 1, currentPage.value + 1)
-    router.push(getPath(next))
+    go(next)
   }
 
-  function prevSlide() {
+  async function prevSlide() {
+    const next = Math.max(0, currentPage.value - 1)
+    go(next)
+  }
+
+  async function go(page: number) {
     clickCurrent.value = 0
     clickElements.value = []
-    const next = Math.max(0, currentPage.value - 1)
-    router.push(getPath(next))
+    await router.push(getPath(page))
+    updateState()
   }
 
   const shortcutEnabled = and(not(paused), not(isInputing))
@@ -105,6 +131,7 @@ export function createNavigateControls(router: Router) {
     routes,
     isPresenter,
     currentPage,
+    go,
     install(app: App) {
       app.provide(NavigateControlsInjection, navigateControls)
     },

packages/slidev/node/plugins/preset.ts

@@ -111,7 +111,15 @@ export function ViteSlidevPlugin(options: SlidevPluginOptions = {}): Plugin[] {
     }),
 
     VitePluginVueFactory(),
-    VitePluginServerRef(),
+    VitePluginServerRef({
+      dataMap: {
+        sync: false,
+        state: {
+          page: 0,
+          tab: 0,
+        },
+      },
+    }),
     createConfigPlugin(slidesOptions),
     createEntryPlugin(slidesOptions),
     createSlidesLoader(slidesOptions),