gifs!

src/App.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte";
-  import { selectedFilter, nodes, inputs, previewCommand } from "./stores.js";
+  import { selectedFilter, nodes, inputs, outputs, previewCommand } from "./stores.js";
   import Filter from "./Filter.svelte";
   import FilterPicker from "./FilterPicker.svelte";
   import Graph from "./Graph.svelte";
@@ -32,6 +32,9 @@
     renderProgress = 0;
     videoValue = null;
     rendering = true;
+
+    const outname = $outputs[0].name;
+
     try {
       if (log.trim() != "") log += "\n\n";
       for (let vid of $inputs) {
@@ -43,10 +46,12 @@
         .replace("ffmpeg", "")
         .split(" ")
         .filter((i) => i.trim() != "");
+      if (outname.endsWith("mp4")) {
         clist.splice(clist.length - 1, 0, "-pix_fmt");
         clist.splice(clist.length - 1, 0, "yuv420p");
+      }
       await ffmpeg.exec(clist, TIMEOUT);
-      const data = await ffmpeg.readFile("out.mp4");
+      const data = await ffmpeg.readFile(outname);
       rendering = false;
       videoValue = URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" }));
     } catch (e) {
@@ -151,7 +156,11 @@
           <span>Rendering...{(renderProgress * 100).toFixed(2)}%</span>
         </div>
       {/if}
+      {#if $outputs[0].name.endsWith("gif") && videoValue && !videoValue.endsWith("mp4")}
+        <img src={videoValue} />
+      {:else}
         <video bind:this={vidPlayerRef} controls src={videoValue} />
+      {/if}
     </div>
     <div style="text-align: right;padding-top:5px;">
       <button on:click={render} disabled={!ffmpegLoaded || rendering}>
@@ -230,13 +239,17 @@
     justify-content: stretch;
   }
 
-  .preview video {
+  .preview video,
+  .preview img {
     width: 100%;
     background-color: #000;
-    /* object-fit: contain; */
     flex: 1;
   }
 
+  .preview img {
+    object-fit: contain;
+  }
+
   .vid-holder {
     flex: 1;
     display: flex;

src/Node.svelte

@@ -1,13 +1,25 @@
 <script lang="ts">
   import { Handle, Position } from "@xyflow/svelte";
-  import { removeNode } from "./stores.js";
+  import { removeNode, nodes, INPUTNAMES, OUTPUTNAMES } from "./stores.js";
 
-  export let data = { nodeType: "", name: "", inputs: [], outputs: [] };
+  export let data = { ext: "", nodeType: "", name: "", inputs: [], outputs: [] };
   export let id;
 
   function remove() {
     removeNode(id);
   }
+
+  function changeFile() {
+    const newFile = OUTPUTNAMES.find((n) => n.name === data.name);
+    data.inputs = [...newFile.inputs];
+    data.outputs = [...newFile.outputs];
+    data.ext = newFile.ext;
+    data = data;
+
+		// hack to deselect node and apply changes on chrome
+		$nodes.find(n => n.id === id).selected = false;
+		$nodes = $nodes
+  }
 </script>
 
 <div class="node {data.nodeType}">
@@ -20,8 +32,15 @@
   <div class="body">
     {#if data.nodeType == "input"}
       <select bind:value={data.name}>
-        <option value="punch.mp4">punch.mp4</option>
-        <option value="shoe.mp4">shoe.mp4</option>
+        {#each INPUTNAMES as inp}
+          <option value={inp.name}>{inp.name}</option>
+        {/each}
+      </select>
+    {:else if data.nodeType == "output"}
+      <select bind:value={data.name} on:change={changeFile}>
+        {#each OUTPUTNAMES as out}
+          <option value={out.name}>{out.name}</option>
+        {/each}
       </select>
     {:else}
       {data.name}

src/stores.js

@@ -6,8 +6,18 @@ export const edges = writable([]);
 export const auto = writable(true);
 export const selectedFilter = writable();
 
-addNode({ name: "punch.mp4" }, "input");
-addNode({ name: "out.mp4" }, "output");
+export const INPUTNAMES = [
+	{name: "punch.mp4", ext: "mp4", outputs: ["v", "a"], inputs: []},
+	{name: "shoe.mp4", ext: "mp4", outputs: ["v", "a"], inputs: []}
+];
+
+export const OUTPUTNAMES = [
+	{name: "out.mp4", ext: "mp4", inputs: ["v", "a"], outputs: []},
+	{name: "out.gif", ext: "gif", inputs: ["v"], outputs: []}
+];
+
+addNode({...INPUTNAMES[0]}, "input");
+addNode({...OUTPUTNAMES[0]}, "output");
 
 export function makeFilterArgs(f) {
 	let fCommand = f.name;
@@ -166,6 +176,10 @@ export const inputs = derived(nodes, ($nodes) => {
 	return $nodes.filter((n) => n.nodeType === "input").map((n) => n.data);
 });
 
+export const outputs = derived(nodes, ($nodes) => {
+	return $nodes.filter((n) => n.nodeType === "output").map((n) => n.data);
+});
+
 nodes.subscribe(($nodes) => {
 	const isAuto = get(auto);
 	if (!isAuto) return;