close to final view changes

opheliagame · May 17, 2024 · e3b9c38 · e3b9c38
1 parent 2378021
commit e3b9c38
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 27 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <!-- TODO make icon -->
+    <!-- <link rel="icon" href="/favicon.ico"> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Supercut with Pad.ma</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/frontend/src/assets/index.css b/frontend/src/assets/index.css
@@ -1,8 +1,36 @@
 @tailwind base;
+@tailwind components;
+@tailwind utilities;
 
+.green-underline {
+  @apply underline underline-offset-2 decoration-green-300 decoration-2;
+}
 
+.header-text {
+  @apply text-sm text-gray-500 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-400;
+}
 
+.header-button {
+  @apply rounded-full px-2 py-0.5 text-sm border border-green-300 bg-white dark:bg-transparent text-green-300;
+}
 
+/* for yellow color on selection in dark mode
+@layer components {
+  .inputDarkModeOverride {
+    &:-webkit-autofill {
+      box-shadow: 0 0 0 30px #1c1c1d inset;
+    }
 
-@tailwind components;
-@tailwind utilities;
+    &:-webkit-autofill:hover {
+      box-shadow: 0 0 0 30px #1c1c1d inset;
+    }
+
+    &:-webkit-autofill:focus {
+      box-shadow: 0 0 0 30px #1c1c1d inset;
+    }
+
+    &:-webkit-autofill:active {
+      box-shadow: 0 0 0 30px #1c1c1d inset;
+    }
+  }
+} */
diff --git a/frontend/src/components/AboutSection.vue b/frontend/src/components/AboutSection.vue
@@ -7,7 +7,7 @@
       Would it be interesting to define something by the stories that people tell about it, by the context it lives in, by the company it keeps.
     </p>
     <p>
-      <a href="https://opheliagame.github.io/projects/freeFall-draft" target="_blank">
+      <a class="green-underline" href="https://opheliagame.github.io/projects/freeFall-draft" target="_blank">
         Here is some semi serious writing on this project
 
       </a>

diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
@@ -3,7 +3,7 @@
 
 
 <template>
-  <div class="w-full px-6 lg:px-12 py-4 bg-gray-100 flex flex-col gap-y-2">
+  <div class="w-full px-6 lg:px-12 py-4 bg-gray-100 dark:bg-slate-800 flex flex-col gap-y-2">
     <div>
       <h1 class="text-green-400 font-bold">Supercut with Pad.ma</h1>
     </div>

diff --git a/frontend/src/components/LoadingDots.vue b/frontend/src/components/LoadingDots.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { ref, watchEffect } from 'vue';
+
+const props = defineProps({
+  character: { 
+    type: String
+  }
+})
+const len = ref(0)
+
+watchEffect(() => {
+  if(len.value == 3) {
+    setTimeout(() => {
+      len.value = 0
+    }, 500)
+  }
+  else if (len.value >= 0) {
+    setTimeout(() => {
+      len.value = len.value + 1
+    }, 500)
+  }
+
+})
+
+</script>
+
+<template>
+  <span class="header-text">
+    <span v-for="l in len">{{ character ?? '.' }}</span>
+  </span>
+
+
+</template>
diff --git a/frontend/src/components/MainSection.vue b/frontend/src/components/MainSection.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref, watchEffect } from 'vue';
+import LoadingDots from './LoadingDots.vue';
 
 
 const props = defineProps({
@@ -20,18 +21,21 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 md:gap-8 px-6 lg:px-12 py-4 overflow-hidden">
+  <div class="h-full flex flex-col gap-4 md:gap-8 px-6 lg:px-12 py-4 overflow-hidden">
     <div>
-      <video :src="props.supercutBlobUrl" controls></video>
-
+      <video v-if="props.supercutBlobUrl" :src="props.supercutBlobUrl" controls></video>
+      <div v-else>
+        Cutting you a supercut
+        <LoadingDots character="✂" />
+      </div>
     </div>
 
     <div class="flex flex-col gap-2 md:gap-4">
       <div class="flex flex-row gap-2 items-center">
         <div class="w-4 h-4 rounded-full bg-green-400"></div>
         <h2 class="text-sm uppercase">Transcript</h2>
       </div>
-      <div class="overflow-y-scroll">
+      <div class="md:overflow-y-auto">
         <div v-for="transcript in transcripts">
           <p>{{ transcript }}</p>
           <!-- <p>Int. Aliya's bedroom - night. Aliya is on her bed, with the laptop on her lap, in a Skype call with her mother.

diff --git a/frontend/src/components/SearchForm.vue b/frontend/src/components/SearchForm.vue
@@ -1,14 +1,26 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, watchEffect } from 'vue';
 import { find, get, createSupercut } from '../api'
+import LoadingDots from './LoadingDots.vue'
 
 const emit = defineEmits(['send-supercut', 'send-videos', 'send-transcripts'])
 
+const searchForm = ref(null)
 const query = ref('')
 const range = ref(2)
 const cutLength = ref(10)
+const error = ref(false)
+
+const onClick = async (e) => {
+  e.preventDefault()
+  // searchForm.value.reset()
+  error.value = false
+  emit('send-videos', [])
+  emit('send-transcripts', [])
+  emit('send-supercut', null)
+
+  if(query.value.trim().length == 1) return
 
-const onClick = async () => {
   console.log("search form: on click method called")
   console.log(query.value, range.value, cutLength.value)
 
@@ -19,6 +31,7 @@ const onClick = async () => {
   clips = clips.flat(1)
   console.log(clips)
 
+  if(clips.length == 0) error.value = true
   emit('send-videos', clips)
 
   let transcripts = clips.map(c => c.transcript)
@@ -31,6 +44,11 @@ const onClick = async () => {
 
   emit('send-supercut', supercut)
 
+  // reset form params
+  // query.value = ''
+  // range.value = 2
+  // cutLength.value = 10
+
   // const videoListData = await getVideoList(query, range, cutLength)
   // const videoItems = videoListData.map(async (item) => {
   //   const videoSrc = await getVideo(item.id, query, cutLength)
@@ -46,42 +64,57 @@ const onClick = async () => {
 
 }
 
+watchEffect(() => {
+  error.value = false
+})
+
 </script>
 
 <template>
-  <div class="w-full flex md:flex-row flex-col gap-2">
+  <form @submit="onClick" ref="searchForm" class="w-full flex md:flex-row flex-col gap-2 header-text dark:inputDarkModeOverride">
     <div class="flex md:block justify-between gap-2">
       <input type="text" name="query" id="input-query" v-model="query" placeholder="What are you thinking about"
-        class="rounded-full px-2 py-1 flex-1 lg:min-w-96">
+        class="dark:text-slate-400 dark:inputDarkModeOverride rounded-full px-2 py-1 flex-1 lg:min-w-96">
 
       <!-- <button class="md:hidden">></button> -->
 
       <div class="md:hidden">
-        <button class="rounded-full px-2 py-0.5 text-sm border border-1 border-green-300 bg-white text-green-300"
+        <button class="header-button"
           @click="onClick">search</button>
       </div>
     </div>
 
-    <div class="flex flex-row gap-2 text-sm text-gray-500 px-1">
+    <div class="flex flex-row gap-2 px-1">
       <div>
         <label class="pe-2" for="range">Number of videos</label>
         <input type="number" name="range" id="input-range" v-model="range" aria-placeholder="Number of videos"
-          class="rounded-full px-2 py-1 max-w-16">
+          class="dark:text-slate-400 rounded-full px-2 py-1 max-w-16">
       </div>
 
 
       <div>
         <label class="pe-2" for="cut-length">Duration of cut</label>
         <input type="number" name="cut-length" id="input-cut-length" v-model="cutLength" aria-placeholder="Duration of videos"
-          class="rounded-full px-2 py-1 max-w-16">
+          class="dark:text-slate-400 rounded-full px-2 py-1 max-w-16">
       </div>
     </div>
 
     <div class="hidden md:block">
-      <button class="rounded-full px-2 py-0.5 text-sm border border-1 border-green-300 bg-white text-green-300"
+      <button class="header-button"
         @click="onClick">search</button>
     </div>
 
+  </form>
+
+  <div v-if="query" class="header-text">
+    <p>You are looking for videos containing some 
+    <span class="green-underline">{{ query }}</span>, that are not more than 
+    <span class="green-underline">{{ cutLength }}</span> seconds long, and not more than 
+    <span class="green-underline">{{ range }}</span> when put together.<LoadingDots />
+    </p>
+  </div>
 
+  <div v-if="query && error" class="py-2 header-text">
+    <p>We came up empty. Please try again.</p>
   </div>
 </template>
diff --git a/frontend/src/components/SideSection.vue b/frontend/src/components/SideSection.vue
@@ -28,13 +28,14 @@ watchEffect(() => {
 
 
 <template>
-  <div>
+  <div class="h-full">
     <div class="flex flex-row gap-2 items-center px-6 md:py-2">
       <div class="w-4 h-4 rounded-full bg-green-400"></div>
       <h2 class="text-sm uppercase">Playlist</h2>
     </div>
 
-    <div v-for="clip in clips" class="overflow-y-scroll grid grid-cols-[1fr_2fr] gap-x-4 px-6 py-4">
+    <div class="h-full md:overflow-y-auto">
+      <div v-for="clip in clips" class="grid lg:grid-cols-[1fr_2fr] gap-x-4 px-6 py-4">
       <video :src="clip.url" controls></video>
 
       <div class="flex flex-col gap-2 justify-between">
@@ -48,6 +49,8 @@ watchEffect(() => {
         </div>
       </div>
     </div>
+    </div>
+
 
   </div>
 

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
@@ -73,16 +73,12 @@ const handleSendTranscripts = (value) => {
 
 <template>
 
-  <div class="flex flex-col w-full h-full overflow-hidden">
+  <div class="flex flex-col w-full md:h-screen">
     <AppHeader>
       <SearchForm @send-supercut="handleSendSupercut" @send-videos="handleSendVideos" @send-transcripts="handleSendTranscripts" />
     </AppHeader>
 
-    <div v-if="error" class="px-6 md:px-12 py-2 bg-red-50 text-sm">
-      <p>We could not find anything with these search parameters. Please try again.</p>
-    </div>
-
-    <div v-if="clips.length > 0" class="w-full h-full grid md:grid-cols-2 divide-x overflow-hidden">
+    <div v-if="clips.length > 0" class="w-full h-full grid md:grid-cols-[2fr_1fr] lg:grid-cols-2 divide-x">
       <MainSection v-bind:supercut-blob-url="supercutBlobUrl" v-bind:transcripts="transcripts" />
 
       <SideSection v-bind:clips="clips" />