diff options
Diffstat (limited to 'src/lib/List/Manga/CleanMangaList.svelte')
| -rw-r--r-- | src/lib/List/Manga/CleanMangaList.svelte | 143 |
1 files changed, 81 insertions, 62 deletions
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte index dfaa187c..ec1a3d83 100644 --- a/src/lib/List/Manga/CleanMangaList.svelte +++ b/src/lib/List/Manga/CleanMangaList.svelte @@ -14,22 +14,37 @@ import CleanGrid from '../CleanGrid.svelte'; import CleanList from '../CleanList.svelte'; - export let media: Media[]; - export let cleanCache: () => void; - export let endTime: number; - export let lastUpdatedMedia: number; - export let updateMedia: ( + interface Props { + media: Media[]; + cleanCache: () => void; + endTime: number; + lastUpdatedMedia: number; + updateMedia: ( id: number, progress: number | undefined, media: Media[] ) => Promise<void>; - export let pendingUpdate: number | null; - export let due: boolean; - export let rateLimited: boolean; - export let authorised: boolean; - export let dummy = false; + pendingUpdate: number | null; + due: boolean; + rateLimited: boolean; + authorised: boolean; + dummy?: boolean; + } - let serviceStatusResponse: Promise<Response>; + let { + media, + cleanCache, + endTime, + lastUpdatedMedia, + updateMedia, + pendingUpdate, + due, + rateLimited, + authorised, + dummy = false + }: Props = $props(); + + let serviceStatusResponse: Promise<Response> = $state(); onMount(() => { serviceStatusResponse = fetch(proxy('https://api.mangadex.org/ping')); @@ -58,7 +73,7 @@ <button class="small-button" title="Force a full refresh" - on:click={cleanCache} + onclick={cleanCache} data-umami-event="Force Refresh Manga">Refresh</button > {/if} @@ -90,18 +105,18 @@ {#if media.length === 0 && !rateLimited} {#if rateLimited} - <p /> + <p></p> {/if} <p> - No manga to display. <button on:click={cleanCache} data-umami-event="Force Refresh No Manga" + No manga to display. <button onclick={cleanCache} data-umami-event="Force Refresh No Manga" >Force refresh</button > </p> <span> Don't read manga? <button - on:click={() => ($settings.disableManga = true)} + onclick={() => ($settings.disableManga = true)} data-umami-event="Disable No Manga">Hide the manga panel</button > You can re-enable it later in the <a href={root('/settings')}>Settings</a>. @@ -110,57 +125,61 @@ {#if $settings.displayCoverModeManga || dummy} <CleanGrid {media} {dummy} type="manga"> - <div slot="title" let:title={manga} let:progress> - {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due} - <span class="opaque">/{manga.chapters || '?'}</span> - {/if} - <button - class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`} - style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''} - on:click={() => increment(manga)} - > - + - </button> - {#if due || Math.floor(manga.episodes) < manga.chapters} - [{manga.episodes || '?'}] - {#await volumeCount(manga) then volumes} - {@const volumeProgress = manga.mediaListEntry?.progressVolumes} + {#snippet title({ title: manga, progress })} + <div > + {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due} + <span class="opaque">/{manga.chapters || '?'}</span> + {/if} + <button + class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`} + style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''} + onclick={() => increment(manga)} + > + + + </button> + {#if due || Math.floor(manga.episodes) < manga.chapters} + [{manga.episodes || '?'}] + {#await volumeCount(manga) then volumes} + {@const volumeProgress = manga.mediaListEntry?.progressVolumes} - {#if volumes !== null && (volumeProgress || 0) < volumes} - <span style="color: lightcoral;"> - Vol. {volumeProgress} → {volumes} - </span> - {/if} - {/await} - {/if} - </div> + {#if volumes !== null && (volumeProgress || 0) < volumes} + <span style="color: lightcoral;"> + Vol. {volumeProgress} → {volumes} + </span> + {/if} + {/await} + {/if} + </div> + {/snippet} </CleanGrid> {:else} <CleanList {media} type="manga" {lastUpdatedMedia}> - <span slot="information" let:title={manga} let:progress> - <span class="opaque">|</span> - {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due} - <span class="opaque">/{manga.chapters || '?'}</span> - {/if} - <button - class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`} - style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''} - on:click={() => increment(manga)} - > - + - </button> - {#if due || Math.floor(manga.episodes) < manga.chapters} - [{manga.episodes || '?'}] - {#await volumeCount(manga) then volumes} - {@const volumeProgress = manga.mediaListEntry?.progressVolumes} + {#snippet information({ title: manga, progress })} + <span > + <span class="opaque">|</span> + {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due} + <span class="opaque">/{manga.chapters || '?'}</span> + {/if} + <button + class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`} + style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''} + onclick={() => increment(manga)} + > + + + </button> + {#if due || Math.floor(manga.episodes) < manga.chapters} + [{manga.episodes || '?'}] + {#await volumeCount(manga) then volumes} + {@const volumeProgress = manga.mediaListEntry?.progressVolumes} - {#if volumes !== null && (volumeProgress || 0) < volumes} - <span style="color: lightcoral;"> - Vol. {volumeProgress} → {volumes} - </span> - {/if} - {/await} - {/if} - </span> + {#if volumes !== null && (volumeProgress || 0) < volumes} + <span style="color: lightcoral;"> + Vol. {volumeProgress} → {volumes} + </span> + {/if} + {/await} + {/if} + </span> + {/snippet} </CleanList> {/if} |