This commit is contained in:
Sam Lavigne 2023-08-29 11:36:57 -04:00
parent ea63286dbe
commit 3e1785f974
3 changed files with 59 additions and 13 deletions

View File

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

View File

@ -1,13 +1,25 @@
<script lang="ts"> <script lang="ts">
import { Handle, Position } from "@xyflow/svelte"; 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; export let id;
function remove() { function remove() {
removeNode(id); 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> </script>
<div class="node {data.nodeType}"> <div class="node {data.nodeType}">
@ -20,8 +32,15 @@
<div class="body"> <div class="body">
{#if data.nodeType == "input"} {#if data.nodeType == "input"}
<select bind:value={data.name}> <select bind:value={data.name}>
<option value="punch.mp4">punch.mp4</option> {#each INPUTNAMES as inp}
<option value="shoe.mp4">shoe.mp4</option> <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> </select>
{:else} {:else}
{data.name} {data.name}

View File

@ -6,8 +6,18 @@ export const edges = writable([]);
export const auto = writable(true); export const auto = writable(true);
export const selectedFilter = writable(); export const selectedFilter = writable();
addNode({ name: "punch.mp4" }, "input"); export const INPUTNAMES = [
addNode({ name: "out.mp4" }, "output"); {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) { export function makeFilterArgs(f) {
let fCommand = f.name; 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); 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) => { nodes.subscribe(($nodes) => {
const isAuto = get(auto); const isAuto = get(auto);
if (!isAuto) return; if (!isAuto) return;