Skip to content

Commit e3b9c38

Browse files
opheliagameopheliagame
committed
close to final view changes
1 parent 2378021 commit e3b9c38

9 files changed

+125
-27
lines changed

‎frontend/index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<link rel="icon" href="/favicon.ico">
5+
<!-- TODO make icon -->
6+
<!-- <link rel="icon" href="/favicon.ico"> -->
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Vite App</title>
8+
<title>Supercut with Pad.ma</title>
89
</head>
910
<body>
1011
<div id="app"></div>

‎frontend/src/assets/index.css

+30-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,36 @@
11
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
24

5+
.green-underline {
6+
@apply underline underline-offset-2 decoration-green-300 decoration-2;
7+
}
38

9+
.header-text {
10+
@apply text-sm text-gray-500 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-400;
11+
}
412

13+
.header-button {
14+
@apply rounded-full px-2 py-0.5 text-sm border border-green-300 bg-white dark:bg-transparent text-green-300;
15+
}
516

17+
/* for yellow color on selection in dark mode
18+
@layer components {
19+
.inputDarkModeOverride {
20+
&:-webkit-autofill {
21+
box-shadow: 0 0 0 30px #1c1c1d inset;
22+
}
623
7-
@tailwind components;
8-
@tailwind utilities;
24+
&:-webkit-autofill:hover {
25+
box-shadow: 0 0 0 30px #1c1c1d inset;
26+
}
27+
28+
&:-webkit-autofill:focus {
29+
box-shadow: 0 0 0 30px #1c1c1d inset;
30+
}
31+
32+
&:-webkit-autofill:active {
33+
box-shadow: 0 0 0 30px #1c1c1d inset;
34+
}
35+
}
36+
} */

‎frontend/src/components/AboutSection.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
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.
88
</p>
99
<p>
10-
<a href="https://opheliagame.github.io/projects/freeFall-draft" target="_blank">
10+
<a class="green-underline" href="https://opheliagame.github.io/projects/freeFall-draft" target="_blank">
1111
Here is some semi serious writing on this project
1212

1313
</a>

‎frontend/src/components/AppHeader.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44

55
<template>
6-
<div class="w-full px-6 lg:px-12 py-4 bg-gray-100 flex flex-col gap-y-2">
6+
<div class="w-full px-6 lg:px-12 py-4 bg-gray-100 dark:bg-slate-800 flex flex-col gap-y-2">
77
<div>
88
<h1 class="text-green-400 font-bold">Supercut with Pad.ma</h1>
99
</div>

‎frontend/src/components/LoadingDots.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script setup>
2+
import { ref, watchEffect } from 'vue';
3+
4+
const props = defineProps({
5+
character: {
6+
type: String
7+
}
8+
})
9+
const len = ref(0)
10+
11+
watchEffect(() => {
12+
if(len.value == 3) {
13+
setTimeout(() => {
14+
len.value = 0
15+
}, 500)
16+
}
17+
else if (len.value >= 0) {
18+
setTimeout(() => {
19+
len.value = len.value + 1
20+
}, 500)
21+
}
22+
23+
})
24+
25+
</script>
26+
27+
<template>
28+
<span class="header-text">
29+
<span v-for="l in len">{{ character ?? '.' }}</span>
30+
</span>
31+
32+
33+
</template>

‎frontend/src/components/MainSection.vue

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup>
22
import { ref, watchEffect } from 'vue';
3+
import LoadingDots from './LoadingDots.vue';
34
45
56
const props = defineProps({
@@ -20,18 +21,21 @@ watchEffect(() => {
2021
</script>
2122

2223
<template>
23-
<div class="flex flex-col gap-4 md:gap-8 px-6 lg:px-12 py-4 overflow-hidden">
24+
<div class="h-full flex flex-col gap-4 md:gap-8 px-6 lg:px-12 py-4 overflow-hidden">
2425
<div>
25-
<video :src="props.supercutBlobUrl" controls></video>
26-
26+
<video v-if="props.supercutBlobUrl" :src="props.supercutBlobUrl" controls></video>
27+
<div v-else>
28+
Cutting you a supercut
29+
<LoadingDots character="✂" />
30+
</div>
2731
</div>
2832

2933
<div class="flex flex-col gap-2 md:gap-4">
3034
<div class="flex flex-row gap-2 items-center">
3135
<div class="w-4 h-4 rounded-full bg-green-400"></div>
3236
<h2 class="text-sm uppercase">Transcript</h2>
3337
</div>
34-
<div class="overflow-y-scroll">
38+
<div class="md:overflow-y-auto">
3539
<div v-for="transcript in transcripts">
3640
<p>{{ transcript }}</p>
3741
<!-- <p>Int. Aliya's bedroom - night. Aliya is on her bed, with the laptop on her lap, in a Skype call with her mother.

‎frontend/src/components/SearchForm.vue

+42-9
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
<script setup>
2-
import { ref } from 'vue';
2+
import { ref, watchEffect } from 'vue';
33
import { find, get, createSupercut } from '../api'
4+
import LoadingDots from './LoadingDots.vue'
45
56
const emit = defineEmits(['send-supercut', 'send-videos', 'send-transcripts'])
67
8+
const searchForm = ref(null)
79
const query = ref('')
810
const range = ref(2)
911
const cutLength = ref(10)
12+
const error = ref(false)
13+
14+
const onClick = async (e) => {
15+
e.preventDefault()
16+
// searchForm.value.reset()
17+
error.value = false
18+
emit('send-videos', [])
19+
emit('send-transcripts', [])
20+
emit('send-supercut', null)
21+
22+
if(query.value.trim().length == 1) return
1023
11-
const onClick = async () => {
1224
console.log("search form: on click method called")
1325
console.log(query.value, range.value, cutLength.value)
1426
@@ -19,6 +31,7 @@ const onClick = async () => {
1931
clips = clips.flat(1)
2032
console.log(clips)
2133
34+
if(clips.length == 0) error.value = true
2235
emit('send-videos', clips)
2336
2437
let transcripts = clips.map(c => c.transcript)
@@ -31,6 +44,11 @@ const onClick = async () => {
3144
3245
emit('send-supercut', supercut)
3346
47+
// reset form params
48+
// query.value = ''
49+
// range.value = 2
50+
// cutLength.value = 10
51+
3452
// const videoListData = await getVideoList(query, range, cutLength)
3553
// const videoItems = videoListData.map(async (item) => {
3654
// const videoSrc = await getVideo(item.id, query, cutLength)
@@ -46,42 +64,57 @@ const onClick = async () => {
4664
4765
}
4866
67+
watchEffect(() => {
68+
error.value = false
69+
})
70+
4971
</script>
5072

5173
<template>
52-
<div class="w-full flex md:flex-row flex-col gap-2">
74+
<form @submit="onClick" ref="searchForm" class="w-full flex md:flex-row flex-col gap-2 header-text dark:inputDarkModeOverride">
5375
<div class="flex md:block justify-between gap-2">
5476
<input type="text" name="query" id="input-query" v-model="query" placeholder="What are you thinking about"
55-
class="rounded-full px-2 py-1 flex-1 lg:min-w-96">
77+
class="dark:text-slate-400 dark:inputDarkModeOverride rounded-full px-2 py-1 flex-1 lg:min-w-96">
5678

5779
<!-- <button class="md:hidden">></button> -->
5880

5981
<div class="md:hidden">
60-
<button class="rounded-full px-2 py-0.5 text-sm border border-1 border-green-300 bg-white text-green-300"
82+
<button class="header-button"
6183
@click="onClick">search</button>
6284
</div>
6385
</div>
6486

65-
<div class="flex flex-row gap-2 text-sm text-gray-500 px-1">
87+
<div class="flex flex-row gap-2 px-1">
6688
<div>
6789
<label class="pe-2" for="range">Number of videos</label>
6890
<input type="number" name="range" id="input-range" v-model="range" aria-placeholder="Number of videos"
69-
class="rounded-full px-2 py-1 max-w-16">
91+
class="dark:text-slate-400 rounded-full px-2 py-1 max-w-16">
7092
</div>
7193

7294

7395
<div>
7496
<label class="pe-2" for="cut-length">Duration of cut</label>
7597
<input type="number" name="cut-length" id="input-cut-length" v-model="cutLength" aria-placeholder="Duration of videos"
76-
class="rounded-full px-2 py-1 max-w-16">
98+
class="dark:text-slate-400 rounded-full px-2 py-1 max-w-16">
7799
</div>
78100
</div>
79101

80102
<div class="hidden md:block">
81-
<button class="rounded-full px-2 py-0.5 text-sm border border-1 border-green-300 bg-white text-green-300"
103+
<button class="header-button"
82104
@click="onClick">search</button>
83105
</div>
84106

107+
</form>
108+
109+
<div v-if="query" class="header-text">
110+
<p>You are looking for videos containing some
111+
<span class="green-underline">{{ query }}</span>, that are not more than
112+
<span class="green-underline">{{ cutLength }}</span> seconds long, and not more than
113+
<span class="green-underline">{{ range }}</span> when put together.<LoadingDots />
114+
</p>
115+
</div>
85116

117+
<div v-if="query && error" class="py-2 header-text">
118+
<p>We came up empty. Please try again.</p>
86119
</div>
87120
</template>

‎frontend/src/components/SideSection.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,14 @@ watchEffect(() => {
2828

2929

3030
<template>
31-
<div>
31+
<div class="h-full">
3232
<div class="flex flex-row gap-2 items-center px-6 md:py-2">
3333
<div class="w-4 h-4 rounded-full bg-green-400"></div>
3434
<h2 class="text-sm uppercase">Playlist</h2>
3535
</div>
3636

37-
<div v-for="clip in clips" class="overflow-y-scroll grid grid-cols-[1fr_2fr] gap-x-4 px-6 py-4">
37+
<div class="h-full md:overflow-y-auto">
38+
<div v-for="clip in clips" class="grid lg:grid-cols-[1fr_2fr] gap-x-4 px-6 py-4">
3839
<video :src="clip.url" controls></video>
3940

4041
<div class="flex flex-col gap-2 justify-between">
@@ -48,6 +49,8 @@ watchEffect(() => {
4849
</div>
4950
</div>
5051
</div>
52+
</div>
53+
5154

5255
</div>
5356

‎frontend/src/views/HomeView.vue

+2-6
Original file line numberDiff line numberDiff line change
@@ -73,16 +73,12 @@ const handleSendTranscripts = (value) => {
7373

7474
<template>
7575

76-
<div class="flex flex-col w-full h-full overflow-hidden">
76+
<div class="flex flex-col w-full md:h-screen">
7777
<AppHeader>
7878
<SearchForm @send-supercut="handleSendSupercut" @send-videos="handleSendVideos" @send-transcripts="handleSendTranscripts" />
7979
</AppHeader>
8080

81-
<div v-if="error" class="px-6 md:px-12 py-2 bg-red-50 text-sm">
82-
<p>We could not find anything with these search parameters. Please try again.</p>
83-
</div>
84-
85-
<div v-if="clips.length > 0" class="w-full h-full grid md:grid-cols-2 divide-x overflow-hidden">
81+
<div v-if="clips.length > 0" class="w-full h-full grid md:grid-cols-[2fr_1fr] lg:grid-cols-2 divide-x">
8682
<MainSection v-bind:supercut-blob-url="supercutBlobUrl" v-bind:transcripts="transcripts" />
8783

8884
<SideSection v-bind:clips="clips" />

0 commit comments

Comments
 (0)