Feat: Show slidelist hover on smaller breakpoints, add loop query param (#5706)

packages/frontend-2/components/presentation/PageWrapper.vue

@@ -19,10 +19,11 @@
       <PresentationSlideIndicator
         v-if="!isViewerLoading"
         :show-slide-list="!isLeftSidebarOpen"
+        :is-info-sidebar-open="isInfoSidebarOpen"
         class="absolute top-1/2 z-20"
         :class="[
           isInfoSidebarOpen
-            ? 'translate-y-[calc(-50%+25px-6rem)] lg:translate-y-[-50%]'
+            ? 'translate-y-[calc(-50%-5.5rem)] lg:translate-y-[calc(-50%-25px)]'
             : 'translate-y-[-50%]',
           isLeftSidebarOpen ? 'lg:left-60 hidden md:block' : 'left-0'
         ]"
@@ -106,7 +107,7 @@ const viewerState = shallowRef<InjectableViewerState>()
 
 const mixpanel = useMixpanel()
 const breakpoints = useBreakpoints(TailwindBreakpoints)
-const isMobile = breakpoints.smaller('sm')
+const isLgOrLarger = breakpoints.greaterOrEqual('lg')
 const isXlOrLarger = breakpoints.greaterOrEqual('xl')
 const { $intercom } = useNuxtApp()
 
@@ -154,7 +155,7 @@ onMounted(() => {
   })
 
   isLeftSidebarOpen.value = isXlOrLarger.value
-  isInfoSidebarOpen.value = !isMobile.value
+  isInfoSidebarOpen.value = isLgOrLarger.value
 })
 
 watch(

packages/frontend-2/components/presentation/SlideIndicator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-5 absolute group">
+  <div class="p-3 lg:p-5 absolute group">
     <ul class="flex flex-col space-y-2">
       <li v-for="slide in visibleSlides" :key="slide.id">
         <div
@@ -11,9 +11,12 @@
 
     <div
       v-if="showSlideList"
-      class="hidden lg:block absolute top-[calc(50%+25px)] -translate-y-1/2 w-56 overflow-hidden bg-foundation border border-outline-3 rounded-2xl p-2 pr-0 shadow-md transition-all duration-300 ease-out opacity-0 invisible group-hover:opacity-100 group-hover:visible -translate-x-5 group-hover:translate-x-0"
+      class="hidden touch:hidden sm:block absolute top-1/2 lg:top-[calc(50%+25px)] -translate-y-1/2 w-56 overflow-hidden bg-foundation border border-outline-3 rounded-2xl p-2 pr-0 shadow-md transition-all duration-300 ease-out opacity-0 invisible group-hover:opacity-100 group-hover:visible -translate-x-5 group-hover:translate-x-0"
     >
-      <div class="simple-scrollbar overflow-y-auto max-h-[75vh] pr-2">
+      <div
+        class="simple-scrollbar overflow-y-auto lg:max-h-[75vh] pr-2"
+        :class="[isInfoSidebarOpen ? 'max-h-[calc(100vh-20.625rem)]' : 'max-h-[75vh]']"
+      >
         <PresentationSlideList class="w-full" hide-title />
       </div>
     </div>
@@ -30,5 +33,6 @@ const {
 
 defineProps<{
   showSlideList?: boolean
+  isInfoSidebarOpen?: boolean
 }>()
 </script>

packages/frontend-2/components/presentation/controls/Controls.vue

@@ -35,21 +35,47 @@ defineProps<{
   hideUi?: boolean
 }>()
 
+const route = useRoute()
 const {
   ui: { slideIdx: currentVisibleIndex, slideCount },
   viewer: { hasViewChanged }
 } = useInjectedPresentationState()
 const { resetView } = useResetViewUtils()
 
-const disablePrevious = computed(() => currentVisibleIndex.value === 0)
-const disableNext = computed(() =>
-  slideCount.value ? currentVisibleIndex.value === slideCount.value - 1 : false
-)
+const isLoopEnabled = computed(() => route.query.loop === 'true')
+
+const disablePrevious = computed(() => {
+  if (isLoopEnabled.value) return false
+  return currentVisibleIndex.value === 0
+})
+
+const disableNext = computed(() => {
+  if (isLoopEnabled.value) return false
+  return slideCount.value ? currentVisibleIndex.value === slideCount.value - 1 : false
+})
+
 const onPrevious = () => {
-  currentVisibleIndex.value = clamp(currentVisibleIndex.value - 1, 0, slideCount.value)
+  if (isLoopEnabled.value && currentVisibleIndex.value === 0) {
+    currentVisibleIndex.value = slideCount.value - 1
+  } else {
+    currentVisibleIndex.value = clamp(
+      currentVisibleIndex.value - 1,
+      0,
+      slideCount.value
+    )
+  }
 }
+
 const onNext = () => {
-  currentVisibleIndex.value = clamp(currentVisibleIndex.value + 1, 0, slideCount.value)
+  if (isLoopEnabled.value && currentVisibleIndex.value === slideCount.value - 1) {
+    currentVisibleIndex.value = 0
+  } else {
+    currentVisibleIndex.value = clamp(
+      currentVisibleIndex.value + 1,
+      0,
+      slideCount.value
+    )
+  }
 }
 
 // Prevent viewer from moving when using arrow keys