sundog
/
ffmpeg-explorer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

format filter

This commit is contained in:
Sam Lavigne 2023-08-20 13:54:39 -04:00
parent d6d6e1e896
commit d445b891c8
1 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/Filter.svelte
View File

@ -7,40 +7,40 @@
description: "", description: "",
}; };
let show = false; let show = false;
function remove() { function remove() {
const index = $filters.findIndex((f) => f.id === filter.id); const index = $filters.findIndex((f) => f.id === filter.id);
$filters.splice(index, 1); $filters.splice(index, 1);
$filters = $filters; $filters = $filters;
} }
function reset() { function reset() {
for (let p of filter.params) { for (let p of filter.params) {
p.value = null; p.value = null;
if (p.default != null) p.value = p.default; if (p.default != null) p.value = p.default;
} }
filter = filter; filter = filter;
} }
$: url = `https://ffmpeg.org/ffmpeg-filters.html#${filter.name}`; $: url = `https://ffmpeg.org/ffmpeg-filters.html#${filter.name}`;
</script> </script>
<div class="filter-holder"> <div class="filter-holder">
<div class="head"> <div class="head">
<div class="name"><h3>{filter.name}</h3></div> <div class="name"><h3>{filter.name}</h3></div>
<div> <div>
{#if filter.params && filter.params.length > 0} {#if filter.params && filter.params.length > 0}
<button on:click={() => show = !show}>{show ? "Hide" : "Show"} Options</button> <button on:click={() => (show = !show)}>{show ? "Hide" : "Show"} Options</button>
{/if} {/if}
<button on:click={remove}>X</button> <button on:click={remove}>X</button>
</div> </div>
</div> </div>
<div class="description"> <div class="description">
{filter.description} {filter.description}
<a style="color: #666" href="{url}" target="_blank">Full documentation.</a> <a style="color: #666" href={url} target="_blank">Full documentation.</a>
</div> </div>
{#if filter.params && filter.params.length > 0 && show} {#if filter.params && filter.params.length > 0 && show}
<div class="options"> <div class="options">
@ -59,7 +59,13 @@
{/each} {/each}
</select> </select>
{:else if p.type == "float" || p.type == "double" || p.type == "long" || p.type == "int"} {: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
step={p.type == "int" ? 1 : 0.01}
type="range"
min={p.min}
max={p.max}
bind:value={p.value}
/>
<input bind:value={p.value} /> <input bind:value={p.value} />
{:else} {:else}
<input bind:value={p.value} /> <input bind:value={p.value} />
@ -69,25 +75,25 @@
<div class="p-description">{p.desc}</div> <div class="p-description">{p.desc}</div>
</div> </div>
{/each} {/each}
<div class="param-holder"> <div class="param-holder">
<button on:click={reset}>Reset to Defaults</button> <button on:click={reset}>Reset to Defaults</button>
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
<style> <style>
h3 { h3 {
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 18px; font-size: 18px;
} }
.filter-holder { .filter-holder {
background-color: #fff; background-color: #fff;
padding: 10px; padding: 10px;
border: 1px solid #999; border: 1px solid #999;
/* box-shadow: 5px 5px 0px #000; */ /* box-shadow: 5px 5px 0px #000; */
} }
.filter-holder, .filter-holder,
input, input,