ffmpeg-explorer/src/Filter.svelte

<script>
  import { filters } from "./stores.js";

  export let filter = {
    name: "",
    params: [],
    description: "",
  };

	let show = false;

  function remove() {
		const index = $filters.findIndex((f) => f.id === filter.id);
    $filters.splice(index, 1);
    $filters = $filters;
  }

	function reset() {
		for (let p of filter.params) {
			p.value = null;
			if (p.default != null) p.value = p.default;
		}
		filter = filter;
	}

	$: url = `https://ffmpeg.org/ffmpeg-filters.html#${filter.name}`;
</script>

<div class="filter-holder">
  <div class="head">
    <div class="name"><h3>{filter.name}</h3></div>
		<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>
  </div>

  <div class="description">
		{filter.description}
		<a style="color: #666" href="{url}" target="_blank">Full documentation.</a>
	</div>

  {#if filter.params && filter.params.length > 0 && show}
    <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"}
                <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} />
              {:else}
                <input bind:value={p.value} />
              {/if}
            </span>
          </div>
          <div class="p-description">{p.desc}</div>
        </div>
      {/each}
			<div class="param-holder">
				<button on:click={reset}>Reset to Defaults</button>
			</div>
    </div>
  {/if}
</div>

<style>
	h3 {
	font-weight: normal;
	margin: 0;
	padding: 0;
	font-size: 18px;
	}
  .filter-holder {
    background-color: #fff;
    padding: 10px;
		border: 1px solid #999;
		/* box-shadow: 5px 5px 0px #000; */
  }
  .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;
  }
  .param-holder:last-child {
    padding-bottom: 0;
  }
  .p-description {
    opacity: 0.8;
    font-size: 0.9em;
  }
</style>