ffmpeg-explorer/src/Filter.svelte

131 lines
2.9 KiB
Svelte
Raw Normal View History

2023-08-18 17:23:56 -04:00
<script>
2023-08-25 14:03:32 -04:00
import { removeNode } from "./stores.js";
2023-08-18 17:23:56 -04:00
export let filter = {
name: "",
params: [],
description: "",
};
2023-08-24 23:17:49 -04:00
let show = true;
2023-08-18 17:23:56 -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-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}
2023-08-20 15:25:52 -04:00
<a href={url} target="_blank">Full documentation.</a>
2023-08-20 13:54:39 -04:00
</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 14:08:08 -04:00
/* border: 1px solid #999; */
2023-08-20 15:25:52 -04:00
border: 1px solid var(--b1);
2023-08-20 13:54:39 -04:00
/* box-shadow: 5px 5px 0px #000; */
2023-08-24 23:17:49 -04:00
overflow-y: scroll;
flex: 1;
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;
2023-08-20 15:25:52 -04:00
align-items: center;
2023-08-18 17:23:56 -04:00
}
2023-08-20 14:52:48 -04:00
2023-08-18 17:23:56 -04:00
.param-holder {
2023-08-20 15:25:52 -04:00
border-top: 1px solid var(--b1);
2023-08-18 17:23:56 -04:00
padding: 10px 0px;
}
2023-08-18 18:59:16 -04:00
.param-holder:last-child {
padding-bottom: 0;
}
2023-08-20 15:25:52 -04:00
.p-value {
display: flex;
2023-08-24 23:17:49 -04:00
justify-content: stretch;
2023-08-20 15:25:52 -04:00
}
2023-08-24 23:17:49 -04:00
input {
width: 100%;
}
2023-08-20 15:25:52 -04:00
input[type="range"] {
margin-right: 5px;
}
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>