added different display if result GIF not found, transitions to GIFs

zspiler · Jun 9, 2022 · 7fab342 · 7fab342
1 parent fe88a7a
commit 7fab342
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 32 deletions.
diff --git a/frontend/src/components/LoadingAnimation.svelte b/frontend/src/components/LoadingAnimation.svelte
@@ -9,6 +9,5 @@
 		colorCenter="rgba(70, 20, 141, 0.7550419997100402)"
 		colorInner="rgba(0, 211, 255, 0.7082632882254464)"
 		unit="px"
-		duration="1s"
 	/>
 </div>
diff --git a/frontend/src/pages/CaptionedGif.svelte b/frontend/src/pages/CaptionedGif.svelte
@@ -1,29 +1,64 @@
 <script>
+	import { onMount } from "svelte";
+	import { fade } from "svelte/transition";
+	import { push } from "svelte-spa-router";
+
 	import axios from "axios";
 	import LoadingAnimation from "../components/LoadingAnimation.svelte";
 
 	export let params = {};
+
+	let gifFile;
+	let loading = true;
+
+	onMount(async () => {
+		try {
+			const res = await axios.get(`API_URL/captioned/${params.filename}`);
+			gifFile = res.data;
+			loading = false;
+		} catch (error) {
+			loading = false;
+		}
+	});
 </script>
 
 <main>
 	<h1>Your Captioned GIF</h1>
 
-	<div class="gif">
-		<img src={`API_URL/captioned/${params.filename}`} loop="infinite" alt="Captioned GIF" />
-	</div>
+	{#if !loading}
+		{#if gifFile}
+			<div class="gif" in:fade>
+				<img
+					src={`API_URL/captioned/${params.filename}`}
+					loop="infinite"
+					alt="Captioned GIF"
+				/>
+			</div>
+			<br />
+			<button>Download</button>
+			<br />
+			<button on:click={() => push("/")}>Upload Another GIF</button>
+		{:else}
+			<div class="center">
+				<h3>Cannot find GIF '{params.filename}'.</h3>
+				<h4>GIFs are available for 24 hours after creation.</h4>
 
-	<button>Download</button>
-	<a href="#/">Caption another GIF</a>
+				<button on:click={() => push("/")}>Upload another GIF</button>
+			</div>
+		{/if}
+	{/if}
+
+	{#if loading}
+		<LoadingAnimation />
+	{/if}
 </main>
 
 <style>
 	main {
 		text-align: center;
 		padding: 1em;
 		max-width: 240px;
-
 		margin-left: auto;
-
 		margin: 0 auto 5% auto;
 	}
 
@@ -34,6 +69,29 @@
 		font-weight: 100;
 	}
 
+	.center {
+		margin-top: 5%;
+		margin-bottom: 5%;
+		left: 0;
+		line-height: 50px;
+		margin-top: -100px;
+		position: absolute;
+		text-align: center;
+		top: 50%;
+		width: 100%;
+	}
+	h3 {
+		color: rgb(77, 77, 77);
+		font-weight: 100;
+		font-size: 2em;
+	}
+
+	h4 {
+		color: rgb(77, 77, 77);
+		font-weight: 100;
+		font-size: 1.5em;
+	}
+
 	@media (min-width: 640px) {
 		main {
 			max-width: none;

diff --git a/frontend/src/pages/UploadGif.svelte b/frontend/src/pages/UploadGif.svelte
@@ -1,10 +1,12 @@
 <script>
+	import { toast } from "@zerodevx/svelte-toast";
+	import { fade } from "svelte/transition";
+
+	import { push } from "svelte-spa-router";
+
 	import axios from "axios";
 	import LoadingAnimation from "../components/LoadingAnimation.svelte";
 
-	import { toast } from "@zerodevx/svelte-toast";
-	import { replace } from "svelte-spa-router";
-
 	let selectedFiles = [];
 	let gif;
 	let caption = "";
@@ -61,7 +63,7 @@
 				}
 			);
 			loading = false;
-			replace(`/result/${res.data.filename}`);
+			push(`/result/${res.data.filename}`);
 		} catch (error) {
 			loading = false;
 			toast.push("Server error", { classes: ["warn"] });
@@ -72,26 +74,28 @@
 <main>
 	<h1>Caption GIFs</h1>
 
-	<input
-		type="file"
-		bind:files={selectedFiles}
-		accept=".gif"
-		on:change={(e) => onFileSelected(e)}
-	/>
-
-	{#if gif}
-		<div class="gif">
-			<img src={gif} alt="Selected GIF" />
-		</div>
-	{/if}
-
-	<p>Enter caption:</p>
-	<input bind:value={caption} />
-
-	<button on:click={submit} disabled={caption.length === 0 || selectedFiles.length === 0}
-		>Submit
-	</button>
-
+	<form on:submit|preventDefault={() => {}}>
+		<input
+			type="file"
+			bind:files={selectedFiles}
+			accept=".gif"
+			on:change={(e) => onFileSelected(e)}
+		/>
+
+		{#if gif}
+			<div class="gif" in:fade>
+				<img src={gif} alt="Selected GIF" />
+			</div>
+		{/if}
+
+		<p>Enter caption:</p>
+		<input bind:value={caption} />
+
+		<br />
+		<button on:click={submit} disabled={caption.length === 0 || selectedFiles.length === 0}
+			>Submit
+		</button>
+	</form>
 	{#if loading}
 		<LoadingAnimation />
 	{/if}