From bed082c58d0f1f95bf8be45c2b2aa808ae6ea8d0 Mon Sep 17 00:00:00 2001
From: Jason <kamui.huang.js@gmail.com>
Date: Sun, 3 Mar 2024 01:54:46 +0800
Subject: [PATCH 1/3] fix:view transition not working with Presenter mode

---
 packages/client/pages/presenter.vue | 6 +++++-
 packages/client/routes.ts           | 7 ++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
index b85ad4a847..c1b9624852 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -116,7 +116,7 @@ onMounted(() => {
         <SlideContainer
           v-if="nextFrame && nextFrameClicksCtx"
           key="next"
-          class="h-full w-full"
+          class="h-full w-full slidev-view-transition-none"
         >
           <SlideWrapper
             :is="(nextFrame[0].component as any)"
@@ -198,6 +198,10 @@ onMounted(() => {
 </template>
 
 <style scoped>
+.slidev-view-transition-none:deep(*) {
+  view-transition-name: none !important;
+}
+
 .slidev-presenter {
   --slidev-controls-foreground: current;
 }
diff --git a/packages/client/routes.ts b/packages/client/routes.ts
index a0c803221d..78cca096fc 100644
--- a/packages/client/routes.ts
+++ b/packages/client/routes.ts
@@ -66,9 +66,14 @@ if (__SLIDEV_FEATURE_PRESENTER__) {
   }
   routes.push({
     name: 'presenter',
-    path: '/presenter/:no',
+    path: '/presenter',
     component: () => import('./pages/presenter.vue'),
     beforeEnter: passwordGuard,
+    children: rawRoutes.map(rawRoute => ({
+      path: rawRoute.path,
+      meta: rawRoute.meta,
+      component: () => import('./pages/presenter.vue'),
+    })),
   })
   routes.push({
     path: '/presenter',

From 60e7dab16cf12e806abddfb357d26ee6bb9e99d7 Mon Sep 17 00:00:00 2001
From: _Kerman <KermanX@qq.com>
Date: Sun, 3 Mar 2024 22:59:10 +0800
Subject: [PATCH 2/3] fix: view transition in presenter mode

---
 .../client/composables/useViewTransition.ts   | 11 ++--
 packages/client/internals/PrintSlideClick.vue |  2 +-
 packages/client/internals/QuickOverview.vue   |  2 +-
 packages/client/internals/SlideWrapper.ts     | 58 -----------------
 packages/client/internals/SlideWrapper.vue    | 64 +++++++++++++++++++
 packages/client/internals/SlidesShow.vue      |  2 +-
 packages/client/pages/overview.vue            |  2 +-
 packages/client/pages/presenter.vue           |  8 +--
 packages/client/routes.ts                     |  7 +-
 9 files changed, 78 insertions(+), 78 deletions(-)
 delete mode 100644 packages/client/internals/SlideWrapper.ts
 create mode 100644 packages/client/internals/SlideWrapper.vue

diff --git a/packages/client/composables/useViewTransition.ts b/packages/client/composables/useViewTransition.ts
index 8d0d7b4fea..bd1054508b 100644
--- a/packages/client/composables/useViewTransition.ts
+++ b/packages/client/composables/useViewTransition.ts
@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { getSlide } from '../logic/nav'
 
 export function useViewTransition() {
   const router = useRouter()
@@ -11,13 +12,15 @@ export function useViewTransition() {
   const supportViewTransition = typeof document !== 'undefined' && 'startViewTransition' in document
 
   router.beforeResolve((to, from) => {
-    const fromNo = from.meta.slide?.no
-    const toNo = to.meta.slide?.no
+    const fromMeta = getSlide(from.params.no as string)?.meta
+    const toMeta = getSlide(to.params.no as string)?.meta
+    const fromNo = fromMeta?.slide?.no
+    const toNo = toMeta?.slide?.no
     if (
       !(
         fromNo !== undefined && toNo !== undefined && (
-          (from.meta.transition === 'view-transition' && fromNo < toNo)
-          || (to.meta.transition === 'view-transition' && toNo < fromNo)
+          (fromMeta?.transition === 'view-transition' && fromNo < toNo)
+          || (toMeta?.transition === 'view-transition' && toNo < fromNo)
         )
       )
     ) {
diff --git a/packages/client/internals/PrintSlideClick.vue b/packages/client/internals/PrintSlideClick.vue
index 31bc5ea888..54cfdd96cb 100644
--- a/packages/client/internals/PrintSlideClick.vue
+++ b/packages/client/internals/PrintSlideClick.vue
@@ -5,7 +5,7 @@ import { injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
 import type { SlidevContextNav } from '../modules/context'
-import SlideWrapper from './SlideWrapper'
+import SlideWrapper from './SlideWrapper.vue'
 
 import GlobalTop from '#slidev/global-components/top'
 import GlobalBottom from '#slidev/global-components/bottom'
diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index a57abffb7b..dfcce221d3 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -8,7 +8,7 @@ import { useFixedClicks } from '../composables/useClicks'
 import { getSlideClass } from '../utils'
 import { CLICKS_MAX } from '../constants'
 import SlideContainer from './SlideContainer.vue'
-import SlideWrapper from './SlideWrapper'
+import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
 
diff --git a/packages/client/internals/SlideWrapper.ts b/packages/client/internals/SlideWrapper.ts
deleted file mode 100644
index b751f46984..0000000000
--- a/packages/client/internals/SlideWrapper.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { computed, defineAsyncComponent, defineComponent, h, ref, toRef } from 'vue'
-import type { PropType } from 'vue'
-import { provideLocal } from '@vueuse/core'
-import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
-import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
-import SlideLoading from './SlideLoading.vue'
-
-export default defineComponent({
-  name: 'SlideWrapper',
-  props: {
-    clicksContext: {
-      type: Object as PropType<ClicksContext>,
-      required: true,
-    },
-    renderContext: {
-      type: String,
-      default: 'main',
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    is: {
-      required: true,
-    },
-    route: {
-      type: Object as PropType<SlideRoute>,
-      required: true,
-    },
-  },
-  setup(props) {
-    provideLocal(injectionRoute, props.route)
-    provideLocal(injectionCurrentPage, ref(props.route.no))
-    provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
-    provideLocal(injectionActive, toRef(props, 'active'))
-    provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
-
-    const style = computed(() => {
-      const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
-      return zoom === 1
-        ? undefined
-        : {
-            width: `${100 / zoom}%`,
-            height: `${100 / zoom}%`,
-            transformOrigin: 'top left',
-            transform: `scale(${zoom})`,
-          }
-    })
-
-    const SlideComponent = defineAsyncComponent({
-      loader: (props.is as any),
-      delay: 300,
-      loadingComponent: SlideLoading,
-    })
-
-    return () => h(SlideComponent, { style: style.value })
-  },
-})
diff --git a/packages/client/internals/SlideWrapper.vue b/packages/client/internals/SlideWrapper.vue
new file mode 100644
index 0000000000..d85209e871
--- /dev/null
+++ b/packages/client/internals/SlideWrapper.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, ref, toRef } from 'vue'
+import type { PropType } from 'vue'
+import { provideLocal } from '@vueuse/core'
+import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
+import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
+import SlideLoading from './SlideLoading.vue'
+
+const props = defineProps({
+  clicksContext: {
+    type: Object as PropType<ClicksContext>,
+    required: true,
+  },
+  renderContext: {
+    type: String as PropType<RenderContext>,
+    default: 'slide',
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  is: {
+    required: true,
+  },
+  route: {
+    type: Object as PropType<SlideRoute>,
+    required: true,
+  },
+})
+
+provideLocal(injectionRoute, props.route)
+provideLocal(injectionCurrentPage, ref(props.route.no))
+provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
+provideLocal(injectionActive, toRef(props, 'active'))
+provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
+
+const style = computed(() => {
+  const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
+  return zoom === 1
+    ? undefined
+    : {
+      width: `${100 / zoom}%`,
+      height: `${100 / zoom}%`,
+      transformOrigin: 'top left',
+      transform: `scale(${zoom})`,
+    }
+})
+
+const SlideComponent = defineAsyncComponent({
+  loader: (props.is as any),
+  delay: 300,
+  loadingComponent: SlideLoading,
+})
+</script>
+
+<template>
+  <component :is="SlideComponent" :style="style" :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }" />
+</template>
+
+<style scoped>
+.disable-view-transition:deep(*) {
+  view-transition-name: none !important;
+}
+</style>
diff --git a/packages/client/internals/SlidesShow.vue b/packages/client/internals/SlidesShow.vue
index 28a8f404e1..7c31f141c8 100644
--- a/packages/client/internals/SlidesShow.vue
+++ b/packages/client/internals/SlidesShow.vue
@@ -5,7 +5,7 @@ import { getSlideClass } from '../utils'
 import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../composables/hmr'
 import { usePrimaryClicks } from '../composables/useClicks'
-import SlideWrapper from './SlideWrapper'
+import SlideWrapper from './SlideWrapper.vue'
 import PresenterMouse from './PresenterMouse.vue'
 
 import GlobalTop from '#slidev/global-components/top'
diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 34cf522ec7..83a9400313 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -8,7 +8,7 @@ import { useFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlideClass } from '../utils'
 import SlideContainer from '../internals/SlideContainer.vue'
-import SlideWrapper from '../internals/SlideWrapper'
+import SlideWrapper from '../internals/SlideWrapper.vue'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
index ff491906cb..e5af59b898 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -11,7 +11,7 @@ import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { isDrawing } from '../logic/drawings'
 import { useFixedClicks, usePrimaryClicks } from '../composables/useClicks'
-import SlideWrapper from '../internals/SlideWrapper'
+import SlideWrapper from '../internals/SlideWrapper.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
 import QuickOverview from '../internals/QuickOverview.vue'
@@ -116,7 +116,7 @@ onMounted(() => {
         <SlideContainer
           v-if="nextFrame && nextFrameClicksCtx"
           key="next"
-          class="h-full w-full slidev-view-transition-none"
+          class="h-full w-full"
         >
           <SlideWrapper
             :is="nextFrame[0].component!"
@@ -198,10 +198,6 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.slidev-view-transition-none:deep(*) {
-  view-transition-name: none !important;
-}
-
 .slidev-presenter {
   --slidev-controls-foreground: current;
 }
diff --git a/packages/client/routes.ts b/packages/client/routes.ts
index 5f1c015373..e642cf3919 100644
--- a/packages/client/routes.ts
+++ b/packages/client/routes.ts
@@ -52,14 +52,9 @@ if (__SLIDEV_FEATURE_PRESENTER__) {
   }
   routes.push({
     name: 'presenter',
-    path: '/presenter',
+    path: '/presenter/:no',
     component: () => import('./pages/presenter.vue'),
     beforeEnter: passwordGuard,
-    children: rawRoutes.map(rawRoute => ({
-      path: rawRoute.path,
-      meta: rawRoute.meta,
-      component: () => import('./pages/presenter.vue'),
-    })),
   })
   routes.push({
     path: '/presenter',

From b3812ec111f89911f672efb0128254e7e3944e0d Mon Sep 17 00:00:00 2001
From: _Kerman <KermanX@qq.com>
Date: Sun, 3 Mar 2024 23:15:01 +0800
Subject: [PATCH 3/3] fix: lint fix

---
 packages/client/internals/SlideWrapper.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/client/internals/SlideWrapper.vue b/packages/client/internals/SlideWrapper.vue
index d85209e871..a6a999ffc9 100644
--- a/packages/client/internals/SlideWrapper.vue
+++ b/packages/client/internals/SlideWrapper.vue
@@ -39,11 +39,11 @@ const style = computed(() => {
   return zoom === 1
     ? undefined
     : {
-      width: `${100 / zoom}%`,
-      height: `${100 / zoom}%`,
-      transformOrigin: 'top left',
-      transform: `scale(${zoom})`,
-    }
+        width: `${100 / zoom}%`,
+        height: `${100 / zoom}%`,
+        transformOrigin: 'top left',
+        transform: `scale(${zoom})`,
+      }
 })
 
 const SlideComponent = defineAsyncComponent({