gifs!
This commit is contained in:
parent
ea63286dbe
commit
3e1785f974
|
@ -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() != "");
|
||||
clist.splice(clist.length - 1, 0, "-pix_fmt");
|
||||
clist.splice(clist.length - 1, 0, "yuv420p");
|
||||
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}
|
||||
<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 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;
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue