131 lines
2.9 KiB
Svelte
131 lines
2.9 KiB
Svelte
<script>
|
|
import { removeNode } from "./stores.js";
|
|
|
|
export let filter = {
|
|
name: "",
|
|
params: [],
|
|
description: "",
|
|
};
|
|
|
|
let show = true;
|
|
|
|
function reset() {
|
|
for (let p of filter.params) {
|
|
p.value = null;
|
|
if (p.default != null) p.value = p.default;
|
|
}
|
|
filter = filter;
|
|
}
|
|
|
|
$: url = `https://ffmpeg.org/ffmpeg-filters.html#${filter.name}`;
|
|
</script>
|
|
|
|
<div class="filter-holder">
|
|
<div class="head">
|
|
<div class="name"><h3>{filter.name}</h3></div>
|
|
</div>
|
|
|
|
<div class="description">
|
|
{filter.description}
|
|
<a href={url} target="_blank">Full documentation.</a>
|
|
</div>
|
|
|
|
{#if filter.params && filter.params.length > 0 && show}
|
|
<div class="options">
|
|
{#each filter.params as p}
|
|
<div class="param-holder">
|
|
<div class="param">
|
|
<span class="p-name">{p.name}</span>
|
|
<span class="p-value">
|
|
{#if p.options && p.options.length > 0}
|
|
<select bind:value={p.value}>
|
|
{#each p.options as o}
|
|
<option value={o.value}
|
|
>{o.value}
|
|
{#if o.desc}({o.desc}){/if}
|
|
</option>
|
|
{/each}
|
|
</select>
|
|
{:else if p.type == "float" || p.type == "double" || p.type == "long" || p.type == "int"}
|
|
<input
|
|
step={p.type == "int" ? 1 : 0.01}
|
|
type="range"
|
|
min={p.min}
|
|
max={p.max}
|
|
bind:value={p.value}
|
|
/>
|
|
<input bind:value={p.value} />
|
|
{:else}
|
|
<input bind:value={p.value} />
|
|
{/if}
|
|
</span>
|
|
</div>
|
|
<div class="p-description">{p.desc}</div>
|
|
</div>
|
|
{/each}
|
|
<div class="param-holder">
|
|
<button on:click={reset}>Reset to Defaults</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
h3 {
|
|
font-weight: normal;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 18px;
|
|
}
|
|
.filter-holder {
|
|
background-color: #fff;
|
|
padding: 10px;
|
|
/* border: 1px solid #999; */
|
|
border: 1px solid var(--b1);
|
|
/* box-shadow: 5px 5px 0px #000; */
|
|
overflow-y: scroll;
|
|
flex: 1;
|
|
}
|
|
.filter-holder,
|
|
input,
|
|
select {
|
|
font-size: 14px;
|
|
font-family: "Times New Roman", Times, serif;
|
|
}
|
|
.description {
|
|
margin: 10px 0px;
|
|
}
|
|
.head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.param {
|
|
margin-bottom: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.param-holder {
|
|
border-top: 1px solid var(--b1);
|
|
padding: 10px 0px;
|
|
}
|
|
.param-holder:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
.p-value {
|
|
display: flex;
|
|
justify-content: stretch;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
}
|
|
input[type="range"] {
|
|
margin-right: 5px;
|
|
}
|
|
.p-description {
|
|
opacity: 0.8;
|
|
font-size: 0.9em;
|
|
}
|
|
</style>
|