John O'Keefe
0642163844
Regenerated bindings with wails3 generate bindings (1 service, 29 methods, 25 models) into frontend/bindings/AniTrack as TypeScript; output verified byte-deterministic across regens, so it is committed like wailsjs was.
- 10 Svelte files: wailsjs/go/main/App imports -> import {App} from bindings/AniTrack with App.* call prefixes. No logic or markup changes.
- WebsiteLink.svelte: BrowserOpenURL -> Browser.OpenURL from @wailsio/runtime.
- AvatarMenu.svelte: runtime.Quit -> Application.Quit from @wailsio/runtime.
- package.json: add @wailsio/runtime pinned to 3.0.0-beta.20 (exact, matching the Go framework); lockfile updated, all deps still max in-range, majors deferred.
- Production vite build passes with the new bindings.
201 lines
8.1 KiB
Svelte
201 lines
8.1 KiB
Svelte
<script lang="ts">
|
|
|
|
import {App} from "../../bindings/AniTrack";
|
|
import type {AniSearchList} from "../anilist/types/AniListTypes";
|
|
import {push} from "svelte-spa-router";
|
|
|
|
let aniSearch = ""
|
|
let aniListSearch: AniSearchList | null = null
|
|
let dropdownOpen = false
|
|
let isSearching = false
|
|
let showSlowNotice = false
|
|
let searchError: string | null = null
|
|
let hasSearched = false
|
|
let searchRequestId = 0
|
|
|
|
const SLOW_NOTICE_MS = 8000
|
|
const SEARCH_TIMEOUT_MS = 30000
|
|
|
|
function openDropdown(): void {
|
|
dropdownOpen = true
|
|
}
|
|
|
|
function closeDropdown(): void {
|
|
dropdownOpen = false
|
|
}
|
|
|
|
function displayTitle(media: { title?: { english?: string | null; romaji?: string | null; native?: string | null } }): string {
|
|
const english = media?.title?.english
|
|
if (english !== undefined && english !== null && english !== "") {
|
|
return english
|
|
}
|
|
const romaji = media?.title?.romaji
|
|
if (romaji !== undefined && romaji !== null && romaji !== "") {
|
|
return romaji
|
|
}
|
|
return media?.title?.native ?? "Unknown title"
|
|
}
|
|
|
|
function resultCount(): number {
|
|
const media = aniListSearch?.data?.Page?.media
|
|
return Array.isArray(media) ? media.length : 0
|
|
}
|
|
|
|
async function runAniListSearch(): Promise<void> {
|
|
const term = aniSearch.trim()
|
|
openDropdown()
|
|
if (term.length === 0) {
|
|
searchRequestId += 1
|
|
aniListSearch = null
|
|
searchError = null
|
|
hasSearched = false
|
|
isSearching = false
|
|
showSlowNotice = false
|
|
return
|
|
}
|
|
if (isSearching) {
|
|
return
|
|
}
|
|
if (typeof navigator !== "undefined" && !navigator.onLine) {
|
|
aniListSearch = null
|
|
hasSearched = true
|
|
searchError = "You appear to be offline. Check your connection and try again."
|
|
return
|
|
}
|
|
isSearching = true
|
|
showSlowNotice = false
|
|
searchError = null
|
|
hasSearched = true
|
|
const myRequest = searchRequestId + 1
|
|
searchRequestId = myRequest
|
|
let slowTimer: ReturnType<typeof setTimeout> | null = null
|
|
let timeoutTimer: ReturnType<typeof setTimeout> | null = null
|
|
try {
|
|
slowTimer = setTimeout(() => {
|
|
if (searchRequestId === myRequest && isSearching) {
|
|
showSlowNotice = true
|
|
}
|
|
}, SLOW_NOTICE_MS)
|
|
const timeout = new Promise<never>((_, reject) => {
|
|
timeoutTimer = setTimeout(() => {
|
|
reject(new Error("AniList is taking too long to respond. Please try again."))
|
|
}, SEARCH_TIMEOUT_MS)
|
|
})
|
|
const result = await Promise.race([App.AniListSearch(term), timeout])
|
|
if (searchRequestId !== myRequest) {
|
|
return
|
|
}
|
|
aniListSearch = result as AniSearchList
|
|
if (!Array.isArray(aniListSearch?.data?.Page?.media)) {
|
|
aniListSearch = null
|
|
}
|
|
} catch (e) {
|
|
if (searchRequestId !== myRequest) {
|
|
return
|
|
}
|
|
aniListSearch = null
|
|
searchError = e instanceof Error ? e.message : String(e)
|
|
} finally {
|
|
if (slowTimer !== null) {
|
|
clearTimeout(slowTimer)
|
|
}
|
|
if (timeoutTimer !== null) {
|
|
clearTimeout(timeoutTimer)
|
|
}
|
|
if (searchRequestId === myRequest) {
|
|
isSearching = false
|
|
showSlowNotice = false
|
|
}
|
|
}
|
|
}
|
|
|
|
function goToAnime(id: number): void {
|
|
closeDropdown()
|
|
push(`#/anime/${id}`)
|
|
}
|
|
|
|
function handleWindowClick(e: MouseEvent): void {
|
|
if (!dropdownOpen) {
|
|
return
|
|
}
|
|
const container = document.querySelector("#searchDropdown")
|
|
if (container && e.target instanceof Node && !container.contains(e.target)) {
|
|
closeDropdown()
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<svelte:window on:click={handleWindowClick} />
|
|
|
|
<div id="searchDropdown" class="relative w-64 md:w-48">
|
|
<div class="flex">
|
|
<label for="anime-search" class="mb-2 text-sm font-medium sr-only text-white">Find
|
|
Anime</label>
|
|
<div class="relative w-full">
|
|
<input type="search" id="anime-search" bind:value={aniSearch}
|
|
class="rounded-s-lg block p-2.5 w-full z-20 text-sm rounded-e-lg bg-gray-700 border-s-gray-700 border-gray-600 placeholder-gray-400 text-white focus:border-blue-500"
|
|
placeholder="Search for Anime"
|
|
on:keypress={(e) => {
|
|
if (e.key === "Enter") {
|
|
runAniListSearch()
|
|
}
|
|
}}
|
|
on:keydown={(e) => {
|
|
if (e.key === "Escape") {
|
|
closeDropdown()
|
|
}
|
|
}}
|
|
required/>
|
|
<button id="aniListSearchButton"
|
|
class="absolute top-0 end-0 h-full p-2.5 text-sm font-medium rounded-e-lg border focus:ring-4 focus:outline-none bg-blue-600 hover:bg-blue-700 focus:ring-blue-800 disabled:opacity-50"
|
|
disabled={isSearching}
|
|
on:click={() => {
|
|
runAniListSearch()
|
|
}}>
|
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 20 20">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
|
|
</svg>
|
|
<span class="sr-only">Search</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="aniListSearchDropdown" class:hidden={!dropdownOpen} class="z-10 absolute left-0 bg-white rounded-lg shadow w-60 2xl:w-80 dark:bg-gray-700">
|
|
{#if isSearching}
|
|
<div class="m-4 text-gray-700 dark:text-gray-200">{showSlowNotice ? "AniList is slow today, still trying..." : "Searching AniList..."}</div>
|
|
{:else if searchError}
|
|
<div class="m-4">
|
|
<p class="text-red-600 dark:text-red-400 font-medium">Search failed</p>
|
|
<p class="mt-1 text-sm text-gray-700 dark:text-gray-200">{searchError}</p>
|
|
<button class="mt-3 text-sm font-medium text-blue-600 hover:underline dark:text-blue-400"
|
|
on:click={() => runAniListSearch()}>
|
|
Retry search
|
|
</button>
|
|
</div>
|
|
{:else if !hasSearched && aniSearch.trim().length === 0}
|
|
<div class="m-4 text-gray-700 dark:text-gray-200">Please enter a search term...</div>
|
|
{:else if resultCount() > 0 && aniListSearch}
|
|
<ul class="h-56 w-full py-2 overflow-y-auto text-gray-700 dark:text-gray-200"
|
|
aria-labelledby="aniListSearchButton">
|
|
{#each aniListSearch.data.Page.media as media (media.id)}
|
|
<li class="w-full">
|
|
<div class="flex w-full items-start p-1 hover:bg-gray-600 hover:text-white rounded-lg">
|
|
<button on:click={() => goToAnime(media.id)}
|
|
>
|
|
<img class="rounded-bl-lg rounded-tl-lg max-w-24 max-h-24" src={media?.coverImage?.large}
|
|
alt="{displayTitle(media)} Cover">
|
|
</button>
|
|
<button class="rounded-bl-lg rounded-tl-lg w-full h-24" on:click={() => goToAnime(media.id)} >{displayTitle(media)}</button>
|
|
</div>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{:else if hasSearched}
|
|
<div class="m-4 text-gray-700 dark:text-gray-200">No results found for "{aniSearch.trim()}". Try a different title.</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|