feat: fullscreen slides (#95)

stanistan · Jul 20, 2023 · 814b0a4 · 814b0a4
1 parent 35cfab8
commit 814b0a4
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 52 deletions.
diff --git a/frontend/components/ErrorBlock.vue b/frontend/components/ErrorBlock.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="mx-auto max-w-3xl py-10">
+    <div class="bg-orange-100 px-2 pb-2">
+      <div class="text-xs text-center underline py-4">
+        <slot name="title" />
+      </div>
+      <div class="bg-white p-4 text-center border border-orange-200 rounded">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/components/Review/PageChrome.vue b/frontend/components/Review/PageChrome.vue
@@ -1,40 +1,50 @@
 <template>
   <div>
     <TopBar>
-      {{ $route.params.org }}/{{ $route.params.repo }}#{{ $route.params.pull }} 
+      {{ $route.params.org }}/{{ $route.params.repo }}#{{ $route.params.pull }}
       <div v-if="data" class="inline-block bg-slate-50 shadow-inner text-black px-2 py-1 rounded-sm text-xs">
-        <ReviewLink :params="data.params" to="cards" /> | <ReviewLink :params="data.params" to="slides" />
+        <ReviewLink
+          :params="data.params" to="cards"
+          :current="name"
+        /> | <ReviewLink
+          :params="data.params" to="slides"
+          :current="name"
+        />
       </div>
+      <template v-if="name=='slides'" #right>
+        <button class="text-xs px-2 text-violet-300 hover:text-pink-300" @click="requestFullscreen">
+          :play:
+        </button>
+      </template>
     </TopBar>
     <div class="relative" :class="height">
-      <div v-if="pending">
-        <div class="flex flex-col items-stretch">
-          <div class="animate-pulse mx-auto text-center text-4xl pt-10 font-bold ">
-            <GradientText>Loading...</GradientText>
-          </div>
+      <div v-if="pending" class="flex flex-col items-stretch">
+        <div class="animate-pulse mx-auto text-center text-4xl pt-10 font-bold ">
+          <GradientText>Loading...</GradientText>
         </div>
       </div>
-      <div v-else-if="error">
-        <div class="mx-auto max-w-3xl py-10">
-          <div class="bg-orange-100 px-2 pb-2">
-            <div class="text-xs text-center underline py-4">
-              {{ error }}
-            </div>
-            <div class="bg-white p-4 text-center border border-orange-200 rounded">
-              <code>{{ error.data }}</code>
-            </div>
-          </div>
-        </div>
+      <ErrorBlock v-else-if="error">
+        <template #title>
+          {{ error }}
+        </template>
+        <code>{{ error.data }}</code>
+      </ErrorBlock>
+      <div
+        v-else ref="content"
+        class="h-full"
+      >
+        <slot :data="data" name="default" />
       </div>
-      <slot v-else :data="data" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 defineProps({
-  height: { type: String, default: "" }
+  height: { type: String, default: "" },
+  name: { type: String },
 });
+
 const route = useRoute();
 const { pending, data, error } = await useFetch('/api/review', {
   lazy: true,
@@ -43,4 +53,9 @@ const { pending, data, error } = await useFetch('/api/review', {
   initialCache: false,
   transform: v => JSON.parse(v),
 });
+
+const content = ref('content');
+const requestFullscreen = () => {
+  content.value.requestFullscreen();
+};
 </script>
diff --git a/frontend/components/ReviewLink.vue b/frontend/components/ReviewLink.vue
@@ -1,18 +1,27 @@
 <template>
-  <NuxtLink class="underline hover:no-underline" :href="href">
+  <NuxtLink
+    class="hover:no-underline" :class="active"
+    :href="href"
+  >
     {{ to }}
   </NuxtLink>
 </template>
 
 <script setup type="ts">
 const props = defineProps({
   params: { type: Object, required: true },
-  to: { type: String, required: true }
+  to: { type: String, required: true },
+  current: { type: String, default: "" }
 });
 
 const href = computed(() => {
   const { params, to } = props;
   const permalink = `/${params.owner}/${params.repo}/pull/${params.number}/review-${params.review}`;
   return to === 'cards' ? permalink : `${permalink}/slides`;
 });
+
+const active = computed(() => {
+  const { current, to } = props;
+  return current == to ? "font-bold no-underline" : "underline";
+});
 </script>
diff --git a/frontend/components/SlideShow.vue b/frontend/components/SlideShow.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="flex flex-col h-full" @keyup.left="left">
+  <div class="bg-white flex flex-col h-full">
     <div class="flex-grow" />
     <div class="flex-0 max-w-[2200px] mx-auto">
       <div v-if="current==0">
-        <div class="text-6xl font-extrabold text-center"> 
+        <div class="text-6xl font-extrabold text-center">
           <span>(#{{ model.pr.number }})</span>&nbsp;
           <GradientText>{{ model.pr.title }}</GradientText>
         </div>
         <div class="mx-auto mt-8">
-          <Review-MetadataList :model="model" />
+          <ReviewMetadataList :model="model" />
         </div>
       </div>
 
       <div v-if="current===1">
-        <ComponentCard> 
+        <ComponentCard>
           <template #title>
             <div class="text-xl font-extrabold">
               <span>(#{{ model.pr.number }})</span>&nbsp;
@@ -48,18 +48,19 @@ const props = defineProps({
   model: { type: Object, required: true }
 });
 
-function onKeyUp(e) {
+const current = ref(0);
+const onKeyUp = (e: Event) => {
+
   if (e.defaultPrevented) {
     return;
   }
-
   e.preventDefault();
 
   const totalSlides = props.model.comments.length + 3;
-  let next = current.value;
 
+  let next = current.value;
   switch (e.key) {
-    case "ArrowLeft": 
+    case "ArrowLeft":
       next = (next - 1) % totalSlides;
       break;
     case "ArrowRight":
@@ -68,13 +69,12 @@ function onKeyUp(e) {
       break;
   }
 
-
   if (next < 0) {
-    next = totalSlides - 1; 
+    next = totalSlides - 1;
   }
 
   current.value = next;
-}
+};
 
 onMounted(() => {
   window.addEventListener('keyup', onKeyUp);
@@ -83,7 +83,4 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('keyup', onKeyUp);
 });
-
-const current = ref(0);
-
 </script>
diff --git a/frontend/components/SmallButton.vue b/frontend/components/SmallButton.vue
@@ -0,0 +1,5 @@
+<template>
+  <button class="text-xs py-1 px-2 hover:bg-gray-50 hover:underline">
+    <slot />
+  </button>
+</template>
diff --git a/frontend/components/TopBar.vue b/frontend/components/TopBar.vue
@@ -11,6 +11,9 @@
         <slot />
       </div>
       <div class="flex-grow" />
+      <div class="flex-none pr-3">
+        <slot name="right" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/frontend/error.vue b/frontend/error.vue
@@ -1,17 +1,13 @@
 <template>
   <NuxtLayout>
-    <div class="mx-auto max-w-3xl py-10">
-      <div class="bg-orange-100 px-2 pb-2">
-        <div class="text-xs text-center underline py-4">
-          {{ error }}
-        </div>
-        <div class="bg-white p-4 text-center border border-orange-200 rounded">
-          <button class="underline hover:no-underline" @click="handleError">
-            go home
-          </button>
-        </div>
-      </div>
-    </div>
+    <ErrorBlock>
+      <template #title>
+        {{ error }}
+      </template>
+      <button class="underline hover:no-underline" @click="handleError">
+        go home
+      </button>
+    </ErrorBlock>
   </NuxtLayout>
 </template>
 

diff --git a/frontend/pages/[org]/[repo]/pull/[pull]/review-[review]/index.vue b/frontend/pages/[org]/[repo]/pull/[pull]/review-[review]/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <Review-PageChrome v-slot="data">
+  <ReviewPageChrome v-slot="data" name="cards">
     <div class="mx-auto max-w-screen-2xl">
       <ReviewPageContent :model="data.data" />
     </div>
-  </Review-PageChrome>
+  </ReviewPageChrome>
 </template>
diff --git a/frontend/pages/[org]/[repo]/pull/[pull]/review-[review]/slides.vue b/frontend/pages/[org]/[repo]/pull/[pull]/review-[review]/slides.vue
@@ -1,5 +1,8 @@
 <template>
-  <Review-PageChrome v-slot="data" height="h-[95vh]">  
+  <ReviewPageChrome
+    v-slot="data" height="h-[95vh]"
+    name="slides"
+  >
     <SlideShow :model="data.data" />
-  </Review-PageChrome>
+  </ReviewPageChrome>
 </template>