ffmpeg-explorer/src/FilterPicker.svelte

106 lines
2.4 KiB
Svelte
Raw Normal View History

2023-08-18 18:59:16 -04:00
<script>
import uFuzzy from "@leeoniya/ufuzzy";
import FILTERS from "./filters.json";
2023-08-22 21:57:53 -04:00
import { addNode } from "./stores.js";
2023-08-18 18:59:16 -04:00
2023-08-21 11:55:11 -04:00
export let select = "video";
$: selectedFilters = selectFilters(select);
2023-08-19 17:31:55 -04:00
$: allfilters = [...selectedFilters];
2023-08-18 18:59:16 -04:00
let q = "";
const uf = new uFuzzy();
2023-08-21 11:55:11 -04:00
function selectFilters(sel) {
if (sel == "video") {
// return FILTERS.filter((f) => f.type.startsWith("V") || f.type.endsWith("V"));
2023-08-27 11:47:41 -04:00
return FILTERS.filter((f) => f.type[0] === "V" || f.type === "N->V");
2023-08-21 11:55:11 -04:00
} else if (sel == "audio") {
// return FILTERS.filter((f) => f.type.startsWith("A") || f.type.endsWith("A"));
2023-08-21 11:55:11 -04:00
return FILTERS.filter((f) => f.type[0] === "A" || f.type === "N->A");
} else {
return [...FILTERS];
}
}
2023-08-19 17:31:55 -04:00
2023-08-21 11:55:11 -04:00
function reset() {
q = "";
}
2023-08-19 17:31:55 -04:00
2023-08-18 18:59:16 -04:00
function add(f) {
2023-08-22 21:57:53 -04:00
addNode(f, "filter");
2023-08-18 18:59:16 -04:00
}
function update() {
let newFilters = [];
const [idxs, info, order] = uf.search(
2023-08-19 17:31:55 -04:00
selectedFilters.map((m) => m.name + " " + m.description),
2023-08-18 18:59:16 -04:00
q
);
if (idxs) {
for (let i of idxs) {
2023-08-19 17:31:55 -04:00
newFilters.push(selectedFilters[i]);
2023-08-18 18:59:16 -04:00
}
allfilters = newFilters;
} else {
2023-08-19 17:31:55 -04:00
allfilters = [...selectedFilters];
2023-08-18 18:59:16 -04:00
}
}
</script>
<div class="holder">
<div class="search">
2023-08-24 23:17:49 -04:00
<input placeholder="Search Filters" on:keyup={update} bind:value={q} type="text" /><button on:click={() => {reset(); update();}}>X</button>
2023-08-21 11:55:11 -04:00
<select on:change={reset} bind:value={select}>
<option value="video">Video Filters</option>
<option value="audio">Audio Filters</option>
</select>
2023-08-18 18:59:16 -04:00
</div>
<div class="all-filters">
{#each allfilters as f}
<div class="filter" on:click={() => add(f)}>
2023-08-19 17:31:55 -04:00
<div class="name">{f.name} <span class="type">{f.type.replace("->", "⇒")}</span></div>
2023-08-18 18:59:16 -04:00
<div class="desc">{f.description}</div>
</div>
{/each}
</div>
</div>
<style>
.holder {
display: flex;
flex-direction: column;
2023-08-21 11:55:11 -04:00
height: 100%;
padding: 10px;
border: 1px solid var(--b1);
}
.search {
display: flex;
2023-08-24 23:17:49 -04:00
justify-content: stretch;
2023-08-21 11:55:11 -04:00
}
input {
2023-08-24 23:17:49 -04:00
width: 100%;
2023-08-21 11:55:11 -04:00
flex: 1;
}
2023-08-24 23:17:49 -04:00
button {
margin-left: 1px;
margin-right: 10px;
}
2023-08-21 11:55:11 -04:00
.type {
color: #999;
font-size: 0.8em;
2023-08-18 18:59:16 -04:00
}
.filter {
2023-08-20 14:08:08 -04:00
border-bottom: 1px solid var(--b1);
2023-08-18 18:59:16 -04:00
padding: 10px 0px;
cursor: pointer;
}
.all-filters {
flex: 1;
overflow: scroll;
}
.desc {
font-size: 0.9em;
}
</style>