diff --git a/src/lib/components/functional/FormatDropdown.svelte b/src/lib/components/functional/FormatDropdown.svelte
index da14d79..38bad18 100644
--- a/src/lib/components/functional/FormatDropdown.svelte
+++ b/src/lib/components/functional/FormatDropdown.svelte
@@ -62,35 +62,79 @@
categories[cat].canConvertTo?.includes(currentCategory || ""),
);
});
+
+ const shouldInclude = (format: string, category: string): boolean => {
+ // if converting from audio to video, dont show gifs
+ if (categories["audio"]?.formats.includes(from ?? "") && format === ".gif") {
+ return false;
+ }
+
+ return true;
+ };
+
const filteredData = $derived.by(() => {
+ const normalize = (str: string) => str.replace(/^\./, "").toLowerCase();
+
+ // if no query, return formats for current category
if (!searchQuery) {
return {
categories: availableCategories,
formats: currentCategory
- ? categories[currentCategory].formats
+ ? categories[currentCategory].formats.filter((format) =>
+ shouldInclude(format, currentCategory!),
+ )
: [],
};
}
+ const searchLower = normalize(searchQuery);
- // filter categories that have matching formats
+ // find all categories that have formats matching the search query
const matchingCategories = availableCategories.filter((cat) =>
- categories[cat].formats.some((format) =>
- format.toLowerCase().includes(searchQuery.toLowerCase()),
+ categories[cat].formats.some(
+ (format) =>
+ normalize(format).includes(searchLower) &&
+ shouldInclude(format, cat),
),
);
+ if (matchingCategories.length === 0) {
+ return {
+ categories: availableCategories,
+ formats: [],
+ };
+ }
- // only show formats from the current category that match the search
- const filteredFormats =
- currentCategory && categories[currentCategory]
- ? categories[currentCategory].formats.filter((format) =>
- format
- .toLowerCase()
- .includes(searchQuery.toLowerCase()),
- )
- : [];
+ // if current category has no matches, switch to first category that does
+ const currentCategoryHasMatches =
+ currentCategory &&
+ matchingCategories.some((cat) => cat === currentCategory);
+ if (!currentCategoryHasMatches && matchingCategories.length > 0) {
+ const newCategory = matchingCategories[0];
+ currentCategory = newCategory;
+ }
+
+ // return formats only from the current category that match the search
+ let filteredFormats = currentCategory
+ ? categories[currentCategory].formats.filter(
+ (format) =>
+ normalize(format).includes(searchLower) &&
+ shouldInclude(format, currentCategory!),
+ )
+ : [];
+
+ // sorting exact match first, then others
+ filteredFormats = filteredFormats.sort((a, b) => {
+ const aExact = normalize(a) === searchLower;
+ const bExact = normalize(b) === searchLower;
+ if (aExact && !bExact) return -1;
+ if (!aExact && bExact) return 1;
+ return 0;
+ });
return {
- categories: matchingCategories,
+ categories:
+ matchingCategories.length > 0
+ ? matchingCategories
+ : availableCategories,
formats: filteredFormats,
};
});
@@ -98,6 +142,21 @@
const selectOption = (option: string) => {
selected = option;
open = false;
+
+ // find the category of this option if it's not in the current category
+ if (
+ currentCategory &&
+ !categories[currentCategory].formats.includes(option)
+ ) {
+ const formatCategory = Object.keys(categories).find((cat) =>
+ categories[cat].formats.includes(option),
+ );
+
+ if (formatCategory) {
+ currentCategory = formatCategory;
+ }
+ }
+
onselect?.(option);
};
@@ -107,7 +166,39 @@
};
const handleSearch = (event: Event) => {
- searchQuery = (event.target as HTMLInputElement).value;
+ const query = (event.target as HTMLInputElement).value;
+ searchQuery = query;
+
+ // find which categories have matching formats & switch
+ if (query) {
+ const queryLower = query.toLowerCase();
+ const categoriesWithMatches = availableCategories.filter((cat) =>
+ categories[cat].formats.some((format) =>
+ format.toLowerCase().includes(queryLower),
+ ),
+ );
+
+ if (categoriesWithMatches.length > 0) {
+ const currentHasMatches =
+ currentCategory &&
+ categories[currentCategory].formats.some((format) =>
+ format.toLowerCase().includes(queryLower),
+ );
+
+ if (!currentHasMatches) {
+ currentCategory = categoriesWithMatches[0];
+ }
+ }
+ }
+ };
+
+ const onEnter = (event: KeyboardEvent) => {
+ if (event.key === "Enter") {
+ event.preventDefault();
+ if (filteredData.formats.length > 0) {
+ selectOption(filteredData.formats[0]);
+ }
+ }
};
const clickDropdown = () => {
@@ -201,7 +292,6 @@
{#if open}
{}}
id="format-search"
autocomplete="off"
@@ -228,15 +319,25 @@
>
+ {#if searchQuery}
+
+ {filteredData.formats.length}
+ {filteredData.formats.length === 1
+ ? "result"
+ : "results"}
+
+ {/if}
-
{#each filteredData.categories as category}
{/each}
-
- {#each filteredData.formats as format}
-
- {/each}
+ onclick={() => selectOption(format)}
+ >
+ {format}
+
+ {/each}
+ {:else}
+
+ {searchQuery
+ ? "No formats match your search"
+ : "No formats available"}
+
+ {/if}