ffmpeg-explorer/src/Filter.svelte

128 lines
3.0 KiB
Svelte
Raw Normal View History

2023-08-18 17:23:56 -04:00
<script>
import { filters } from "./stores.js";
export let filter = {
name: "",
params: [],
description: "",
};
2023-08-20 13:54:39 -04:00
let show = false;
2023-08-18 17:23:56 -04:00
2023-08-18 18:59:16 -04:00
function remove() {
2023-08-20 13:54:39 -04:00
const index = $filters.findIndex((f) => f.id === filter.id);
2023-08-18 18:59:16 -04:00
$filters.splice(index, 1);
$filters = $filters;
2023-08-18 17:23:56 -04:00
}
2023-08-20 12:41:40 -04:00
2023-08-20 13:54:39 -04:00
function reset() {
for (let p of filter.params) {
p.value = null;
if (p.default != null) p.value = p.default;
}
filter = filter;
}
2023-08-20 12:41:40 -04:00
2023-08-20 13:54:39 -04:00
$: url = `https://ffmpeg.org/ffmpeg-filters.html#${filter.name}`;
2023-08-18 17:23:56 -04:00
</script>
<div class="filter-holder">
<div class="head">
2023-08-20 13:48:06 -04:00
<div class="name"><h3>{filter.name}</h3></div>
2023-08-20 13:54:39 -04:00
<div>
{#if filter.params && filter.params.length > 0}
<button on:click={() => (show = !show)}>{show ? "Hide" : "Show"} Options</button>
{/if}
<button on:click={remove}>X</button>
</div>
2023-08-18 17:23:56 -04:00
</div>
2023-08-20 12:41:40 -04:00
<div class="description">
2023-08-20 13:54:39 -04:00
{filter.description}
<a style="color: #666" href={url} target="_blank">Full documentation.</a>
</div>
2023-08-18 17:23:56 -04:00
2023-08-19 17:31:55 -04:00
{#if filter.params && filter.params.length > 0 && show}
2023-08-18 18:59:16 -04:00
<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"}
2023-08-20 13:54:39 -04:00
<input
step={p.type == "int" ? 1 : 0.01}
type="range"
min={p.min}
max={p.max}
bind:value={p.value}
/>
2023-08-18 18:59:16 -04:00
<input bind:value={p.value} />
{:else}
<input bind:value={p.value} />
{/if}
</span>
2023-08-18 17:23:56 -04:00
</div>
2023-08-18 18:59:16 -04:00
<div class="p-description">{p.desc}</div>
</div>
{/each}
2023-08-20 13:54:39 -04:00
<div class="param-holder">
<button on:click={reset}>Reset to Defaults</button>
</div>
2023-08-18 18:59:16 -04:00
</div>
2023-08-18 17:23:56 -04:00
{/if}
</div>
<style>
2023-08-20 13:54:39 -04:00
h3 {
font-weight: normal;
margin: 0;
padding: 0;
font-size: 18px;
}
2023-08-18 17:23:56 -04:00
.filter-holder {
background-color: #fff;
padding: 10px;
2023-08-20 13:54:39 -04:00
border: 1px solid #999;
/* box-shadow: 5px 5px 0px #000; */
2023-08-18 17:23:56 -04:00
}
.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;
}
.param-holder {
border-top: 1px solid #999;
padding: 10px 0px;
}
2023-08-18 18:59:16 -04:00
.param-holder:last-child {
padding-bottom: 0;
}
2023-08-18 17:23:56 -04:00
.p-description {
2023-08-18 18:59:16 -04:00
opacity: 0.8;
2023-08-18 17:23:56 -04:00
font-size: 0.9em;
}
</style>