ffmpeg-explorer/src/FilterPicker.svelte

<script>
  import uFuzzy from "@leeoniya/ufuzzy";
	import { v4 as uuidv4 } from 'uuid';
  import FILTERS from "./filters.json";
  import { filters } from "./stores.js";

	export let select = "video";
	$: selectedFilters = selectFilters(select);
  $: allfilters = [...selectedFilters];
  let q = "";

  const uf = new uFuzzy();

	function selectFilters(sel) {
		if (sel == "video") {
			return FILTERS.filter(f => f.type[0] === "V")
		} else if (sel == "audio") {
			return FILTERS.filter(f => f.type[0] === "A")
		} else {
			return [...FILTERS];
		}
	}

	function reset() {
		q = "";
	}

  function add(f) {
    const newFilter = { ...f, filterId: f.id, id: uuidv4()  };
		if (f.params) {
			newFilter.params = f.params.map((p) => {
				p.value = null;
				if (p.default != null) p.value = p.default;
				return p;
			});
		}
    $filters = [...$filters, newFilter];
    console.log(newFilter);
  }

  function update() {
    let newFilters = [];
    const [idxs, info, order] = uf.search(
      selectedFilters.map((m) => m.name + " " + m.description),
      q
    );
    if (idxs) {
      for (let i of idxs) {
        newFilters.push(selectedFilters[i]);
      }
      allfilters = newFilters;
    } else {
      allfilters = [...selectedFilters];
    }
  }
</script>

<div class="holder">
  <div class="search">
    <input placeholder="Search Filters" on:keyup={update} bind:value={q} type="text" />
		<select on:change={reset} bind:value={select}>
			<option value="video">Video Filters</option>
			<option value="audio">Audio Filters</option>
		</select>
  </div>
  <div class="all-filters">
    {#each allfilters as f}
      <div class="filter" on:click={() => add(f)}>
        <div class="name">{f.name} <span class="type">{f.type.replace("->", "⇒")}</span></div>
        <div class="desc">{f.description}</div>
      </div>
    {/each}
  </div>
</div>

<style>
  .holder {
    display: flex;
    flex-direction: column;
		height: 100%;
		padding: 10px;
		border: 1px solid var(--b1);
  }
	.search {
		display: flex;
		justify-items: stretch;
	}
	input {
		flex: 1;
		margin-right: 10px;
	}
	.type {
		color: #999;
		font-size: 0.8em;
	}

  .filter {
    border-bottom: 1px solid var(--b1);
    padding: 10px 0px;
    cursor: pointer;
  }
  .all-filters {
    flex: 1;
    overflow: scroll;
  }
  .desc {
    font-size: 0.9em;
  }
</style>