From 9b81c366d8f3e687ff4548296d4986ed2c46ecaa Mon Sep 17 00:00:00 2001
From: clfreville2 <clement.freville2@etu.uca.fr>
Date: Fri, 16 Feb 2024 23:27:28 +0100
Subject: [PATCH] Use the first image directly

---
 src/components/ImageCollection.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageCollection.vue b/src/components/ImageCollection.vue
index c6c2513..ff6b6c6 100644
--- a/src/components/ImageCollection.vue
+++ b/src/components/ImageCollection.vue
@@ -5,7 +5,7 @@ import { downloadBlob } from '../download.ts';
 import IconPlus from '~icons/octicon/feed-plus-16';
 import IconPlay from '~icons/octicon/play-16';
 
-defineEmits<{
+const emit = defineEmits<{
   selected: [image: HTMLImageElement]
 }>()
 
@@ -16,7 +16,12 @@ function onFileChange(event: Event): void {
   const reader = new FileReader();
   reader.onload = function(event) {
     const image = new Image();
-    image.onload = () => images.value.push(image);
+    image.onload = () => {
+      if (!images.value.length) {
+        emit('selected', image);
+      }
+      images.value.push(image);
+    }
     image.src = event.target!.result as string;
   }
   reader.readAsDataURL(files[0]);
@@ -32,7 +37,11 @@ function onAnimateClick(): void {
   const gif = new FixedGIF({
     workerScript: new URL('gif.js/dist/gif.worker.js', import.meta.url).toString(),
   });
-  images.value.forEach((img) => gif.addFrame(img, { delay: 200 }));
+  const delay = prompt('Delay between frames in milliseconds', '500');
+  if (!delay || isNaN(parseInt(delay))) {
+    return;
+  }
+  images.value.forEach((img) => gif.addFrame(img, { delay: parseInt(delay!) }));
   gif.on('finished', (blob: Blob) => {
     downloadBlob(blob, 'animation.gif')
   });