aboutsummaryrefslogtreecommitdiff
path: root/src/lib/List
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/List')
-rw-r--r--src/lib/List/Anime/AnimeListTemplate.svelte43
-rw-r--r--src/lib/List/Anime/CleanAnimeList.svelte129
-rw-r--r--src/lib/List/Anime/CompletedAnimeList.svelte14
-rw-r--r--src/lib/List/Anime/DueAnimeList.svelte10
-rw-r--r--src/lib/List/Anime/DueIndexColumn.svelte8
-rw-r--r--src/lib/List/Anime/PlaceholderList.svelte8
-rw-r--r--src/lib/List/Anime/UpcomingAnimeList.svelte18
-rw-r--r--src/lib/List/CleanGrid.svelte12
-rw-r--r--src/lib/List/CleanList.svelte26
-rw-r--r--src/lib/List/ListTitle.svelte29
-rw-r--r--src/lib/List/Manga/CleanMangaList.svelte143
-rw-r--r--src/lib/List/Manga/MangaListTemplate.svelte43
-rw-r--r--src/lib/List/MediaTitleDisplay.svelte17
13 files changed, 311 insertions, 189 deletions
diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index 08583d7c..8b105df5 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -14,26 +14,41 @@
import subsPlease from '$stores/subsPlease';
import identity from '$stores/identity';
- export let endTime: number;
- export let cleanMedia: (
+ interface Props {
+ endTime: number;
+ cleanMedia: (
media: Media[],
displayUnresolved: boolean,
subsPlease: SubsPlease | null,
plannedOnly?: boolean
) => Media[];
- export let animeLists: Promise<Media[]>;
- export let user: AniListAuthorisation;
- export let title: any;
- export let completed = false;
- export let plannedOnly = false;
- export let upcoming = false;
- export let notYetReleased = false;
- export let dummy = false;
+ animeLists: Promise<Media[]>;
+ user: AniListAuthorisation;
+ title: any;
+ completed?: boolean;
+ plannedOnly?: boolean;
+ upcoming?: boolean;
+ notYetReleased?: boolean;
+ dummy?: boolean;
+ }
- let lastUpdatedMedia = -1;
- let previousAnimeList: Media[];
- let pendingUpdate: number | null = null;
- let lastListSize = 8;
+ let {
+ endTime,
+ cleanMedia,
+ animeLists = $bindable(),
+ user,
+ title,
+ completed = false,
+ plannedOnly = false,
+ upcoming = false,
+ notYetReleased = false,
+ dummy = false
+ }: Props = $props();
+
+ let lastUpdatedMedia = $state(-1);
+ let previousAnimeList: Media[] = $state();
+ let pendingUpdate: number | null = $state(null);
+ let lastListSize = $state(8);
onMount(() => {
if (browser) {
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 0220a366..b088964e 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -16,18 +16,35 @@
import CleanGrid from '$lib/List/CleanGrid.svelte';
import CleanList from '../CleanList.svelte';
- export let media: Media[];
- export let title: any;
- export let animeLists: Promise<Media[]>;
- export let user: AniListAuthorisation;
- export let endTime: number;
- export let lastUpdatedMedia: number;
- export let completed = false;
- export let previousAnimeList: Media[];
- export let pendingUpdate: number | null;
- export let upcoming = false;
- export let notYetReleased = false;
- export let dummy = false;
+ interface Props {
+ media: Media[];
+ title: any;
+ animeLists: Promise<Media[]>;
+ user: AniListAuthorisation;
+ endTime: number;
+ lastUpdatedMedia: number;
+ completed?: boolean;
+ previousAnimeList: Media[];
+ pendingUpdate: number | null;
+ upcoming?: boolean;
+ notYetReleased?: boolean;
+ dummy?: boolean;
+ }
+
+ let {
+ media = $bindable(),
+ title,
+ animeLists = $bindable(),
+ user,
+ endTime,
+ lastUpdatedMedia = $bindable(),
+ completed = false,
+ previousAnimeList = $bindable(),
+ pendingUpdate = $bindable(),
+ upcoming = false,
+ notYetReleased = false,
+ dummy = false
+ }: Props = $props();
let keyCacher: NodeJS.Timeout;
let totalEpisodeDueCount = media
@@ -109,60 +126,64 @@
/>
{#if media.length === 0}
- No anime to display. <button on:click={() => (animeLists = cleanCache(user, $identity))}>
+ No anime to display. <button onclick={() => (animeLists = cleanCache(user, $identity))}>
Force refresh
</button>
{/if}
{#if $settings.displayCoverModeAnime}
<CleanGrid {media} {dummy} type="anime" {upcoming} {notYetReleased}>
- <div slot="title" let:title={anime} let:progress>
- {#if !upcoming && !notYetReleased}
- {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
- <button
- class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
- style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
- on:click={() => increment(anime, progress)}>+</button
- >
- {#if !completed || dummy}
- [{anime.nextAiringEpisode?.episode === -1
- ? '?'
- : (anime.nextAiringEpisode?.episode || 1) - 1}]
- <br />
- <AiringTime originalAnime={anime} />
+ {#snippet title({ title: anime, progress })}
+ <div >
+ {#if !upcoming && !notYetReleased}
+ {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+ <button
+ class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
+ style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
+ onclick={() => increment(anime, progress)}>+</button
+ >
+ {#if !completed || dummy}
+ [{anime.nextAiringEpisode?.episode === -1
+ ? '?'
+ : (anime.nextAiringEpisode?.episode || 1) - 1}]
+ <br />
+ <AiringTime originalAnime={anime} />
+ {/if}
+ {:else}
+ <AiringTime originalAnime={anime} upcoming={true} />
{/if}
- {:else}
- <AiringTime originalAnime={anime} upcoming={true} />
- {/if}
- </div>
+ </div>
+ {/snippet}
</CleanGrid>
{:else}
<CleanList {media} type="anime" {upcoming} {notYetReleased} {lastUpdatedMedia}>
- <span slot="information" let:title={anime} let:progress>
- {#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
- <span class="opaque">|</span>
- {/if}
- {#if !upcoming || notYetReleased}
- <!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
- {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
- <button
- class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
- style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
- on:click={() => increment(anime, progress)}>+</button
- >
- {#if !completed}
- [{anime.nextAiringEpisode?.episode === -1
- ? '?'
- : (anime.nextAiringEpisode?.episode || 1) - 1}]
+ {#snippet information({ title: anime, progress })}
+ <span >
+ {#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
+ <span class="opaque">|</span>
+ {/if}
+ {#if !upcoming || notYetReleased}
+ <!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
+ {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+ <button
+ class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
+ style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
+ onclick={() => increment(anime, progress)}>+</button
+ >
+ {#if !completed}
+ [{anime.nextAiringEpisode?.episode === -1
+ ? '?'
+ : (anime.nextAiringEpisode?.episode || 1) - 1}]
+ <span class:countdown={$settings.displayCountdownRightAligned}>
+ <AiringTime originalAnime={anime} />
+ </span>
+ {/if}
+ {:else}
<span class:countdown={$settings.displayCountdownRightAligned}>
- <AiringTime originalAnime={anime} />
+ <AiringTime originalAnime={anime} upcoming={true} />
</span>
{/if}
- {:else}
- <span class:countdown={$settings.displayCountdownRightAligned}>
- <AiringTime originalAnime={anime} upcoming={true} />
- </span>
- {/if}
- </span>
+ </span>
+ {/snippet}
</CleanList>
{/if}
diff --git a/src/lib/List/Anime/CompletedAnimeList.svelte b/src/lib/List/Anime/CompletedAnimeList.svelte
index 76ec7207..a8cb6fd1 100644
--- a/src/lib/List/Anime/CompletedAnimeList.svelte
+++ b/src/lib/List/Anime/CompletedAnimeList.svelte
@@ -11,18 +11,22 @@
import identity from '$stores/identity';
import sampleAnime from '$lib/Data/Static/SampleMedia/anime.json';
- export let user: AniListAuthorisation = {
+ interface Props {
+ user?: AniListAuthorisation;
+ dummy?: boolean;
+ }
+
+ let { user = {
accessToken: '',
refreshToken: '',
expiresIn: 0,
tokenType: ''
- };
- export let dummy = false;
+ }, dummy = false }: Props = $props();
const { addNotification } = getNotificationsContext();
- let animeLists: Promise<Media[]>;
+ let animeLists: Promise<Media[]> = $state();
let startTime: number;
- let endTime: number;
+ let endTime: number = $state();
onMount(async () => {
startTime = performance.now();
diff --git a/src/lib/List/Anime/DueAnimeList.svelte b/src/lib/List/Anime/DueAnimeList.svelte
index 1453baeb..bbae319a 100644
--- a/src/lib/List/Anime/DueAnimeList.svelte
+++ b/src/lib/List/Anime/DueAnimeList.svelte
@@ -12,12 +12,16 @@
import locale from '$stores/locale';
import identity from '$stores/identity';
- export let user: AniListAuthorisation;
+ interface Props {
+ user: AniListAuthorisation;
+ }
+
+ let { user }: Props = $props();
const { addNotification } = getNotificationsContext();
- let animeLists: Promise<Media[]>;
+ let animeLists: Promise<Media[]> = $state();
let startTime: number;
- let endTime: number;
+ let endTime: number = $state();
const keyCacher = setInterval(() => {
startTime = performance.now();
diff --git a/src/lib/List/Anime/DueIndexColumn.svelte b/src/lib/List/Anime/DueIndexColumn.svelte
index 61f2a178..0f20a2a1 100644
--- a/src/lib/List/Anime/DueIndexColumn.svelte
+++ b/src/lib/List/Anime/DueIndexColumn.svelte
@@ -6,8 +6,12 @@
import ListTitle from '../ListTitle.svelte';
import AnimeList from '$lib/List/Anime/DueAnimeList.svelte';
- export let userIdentity: { id: number };
- export let user: AniListAuthorisation;
+ interface Props {
+ userIdentity: { id: number };
+ user: AniListAuthorisation;
+ }
+
+ let { userIdentity, user }: Props = $props();
</script>
<details open={!$settings.displayAnimeCollapsed} class="list list-due">
diff --git a/src/lib/List/Anime/PlaceholderList.svelte b/src/lib/List/Anime/PlaceholderList.svelte
index 1f701d79..2c9baab5 100644
--- a/src/lib/List/Anime/PlaceholderList.svelte
+++ b/src/lib/List/Anime/PlaceholderList.svelte
@@ -4,8 +4,12 @@
import ListTitle from '../ListTitle.svelte';
import type { Title } from '../mediaTitle';
- export let title: Title;
- export let count = 8;
+ interface Props {
+ title: Title;
+ count?: number;
+ }
+
+ let { title, count = 8 }: Props = $props();
</script>
<ListTitle {title} />
diff --git a/src/lib/List/Anime/UpcomingAnimeList.svelte b/src/lib/List/Anime/UpcomingAnimeList.svelte
index 7b01af86..4957cd45 100644
--- a/src/lib/List/Anime/UpcomingAnimeList.svelte
+++ b/src/lib/List/Anime/UpcomingAnimeList.svelte
@@ -1,4 +1,6 @@
<script lang="ts">
+ import { run } from 'svelte/legacy';
+
import { mediaListCollection, Type, type Media } from '$lib/Data/AniList/media';
import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
import { onMount } from 'svelte';
@@ -13,12 +15,16 @@
import { injectAiringTime } from '$lib/Media/Anime/Airing/Subtitled/match';
import revalidateAnime from '$stores/revalidateAnime';
- export let user: AniListAuthorisation;
+ interface Props {
+ user: AniListAuthorisation;
+ }
+
+ let { user }: Props = $props();
const { addNotification } = getNotificationsContext();
- let animeLists: Promise<Media[]>;
+ let animeLists: Promise<Media[]> = $state();
let startTime: number;
- let endTime: number;
+ let endTime: number = $state();
onMount(async () => {
startTime = performance.now();
@@ -74,7 +80,7 @@
return upcomingAnime;
};
- $: {
+ run(() => {
if ($revalidateAnime) {
$revalidateAnime = false;
$lastPruneTimes.anime = -1;
@@ -83,7 +89,7 @@
notificationType: 'Upcoming Episodes'
});
}
- }
+ });
</script>
<AnimeList
@@ -96,7 +102,7 @@
/>
{#if $settings.displayPlannedAnime}
- <p />
+ <p></p>
<AnimeList
{endTime}
diff --git a/src/lib/List/CleanGrid.svelte b/src/lib/List/CleanGrid.svelte
index ec93a685..774303aa 100644
--- a/src/lib/List/CleanGrid.svelte
+++ b/src/lib/List/CleanGrid.svelte
@@ -7,11 +7,13 @@
import { mediaTitle } from './mediaTitle';
import './covers.css';
- export let media: Media[];
- export let dummy = false;
- export let type: 'anime' | 'manga';
- export let upcoming = false;
- export let notYetReleased = false;
+ let {
+ media = [] as Media[],
+ dummy = false,
+ type = 'anime' as 'anime' | 'manga',
+ upcoming = false,
+ notYetReleased = false
+ } = $props();
let uniqueID = new Date().getTime();
</script>
diff --git a/src/lib/List/CleanList.svelte b/src/lib/List/CleanList.svelte
index 47811932..46946973 100644
--- a/src/lib/List/CleanList.svelte
+++ b/src/lib/List/CleanList.svelte
@@ -5,11 +5,23 @@
import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
import settings from '$stores/settings';
- export let media: Media[];
- export let type: 'anime' | 'manga';
- export let upcoming = false;
- export let notYetReleased = false;
- export let lastUpdatedMedia: number;
+ interface Props {
+ media: Media[];
+ type: 'anime' | 'manga';
+ upcoming?: boolean;
+ notYetReleased?: boolean;
+ lastUpdatedMedia: number;
+ information?: import('svelte').Snippet<[any]>;
+ }
+
+ let {
+ media,
+ type,
+ upcoming = false,
+ notYetReleased = false,
+ lastUpdatedMedia,
+ information
+ }: Props = $props();
</script>
<ul>
@@ -32,7 +44,7 @@
href={$settings.displayCopyMediaTitleNotLink
? '#'
: outboundLink(title, type, $settings.displayOutboundLinksTo)}
- on:click={(e) => {
+ onclick={(e) => {
if ($settings.displayCopyMediaTitleNotLink) {
e.preventDefault();
@@ -54,7 +66,7 @@
[<a href={`https://anilist.co/${type}/${title.id}/social`} target="_blank">S</a>]
{/if}
- <slot name="information" {progress} {title} />
+ {@render information?.({ progress, title, })}
</span>
</li>
{/if}
diff --git a/src/lib/List/ListTitle.svelte b/src/lib/List/ListTitle.svelte
index 21013b52..cccc5731 100644
--- a/src/lib/List/ListTitle.svelte
+++ b/src/lib/List/ListTitle.svelte
@@ -2,15 +2,28 @@
import tooltip from '$lib/Tooltip/tooltip';
import type { Title } from './mediaTitle';
- export let time: number | undefined = undefined;
- export let count = -1337;
- export let title: Title = {
+ interface Props {
+ time?: number | undefined;
+ count?: any;
+ title?: Title;
+ progress?: undefined | number;
+ hideTime?: boolean;
+ hideCount?: boolean;
+ children?: import('svelte').Snippet;
+ }
+
+ let {
+ time = undefined,
+ count = -1337,
+ title = {
title: 'Media List',
hint: 'This is a media list.'
- };
- export let progress: undefined | number = undefined;
- export let hideTime = false;
- export let hideCount = false;
+ },
+ progress = undefined,
+ hideTime = false,
+ hideCount = false,
+ children
+ }: Props = $props();
</script>
<summary>
@@ -23,7 +36,7 @@
{#if !hideTime}
<small class="opaque">{time ? time.toFixed(3) : '...'}s</small>
{/if}
- <slot />
+ {@render children?.()}
{#if progress !== undefined}
<button class="badge unclickable-button button-badge badge-info">
{progress.toFixed(0)}%
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} &#8594; {volumes}
- </span>
- {/if}
- {/await}
- {/if}
- </div>
+ {#if volumes !== null && (volumeProgress || 0) < volumes}
+ <span style="color: lightcoral;">
+ Vol. {volumeProgress} &#8594; {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} &#8594; {volumes}
- </span>
- {/if}
- {/await}
- {/if}
- </span>
+ {#if volumes !== null && (volumeProgress || 0) < volumes}
+ <span style="color: lightcoral;">
+ Vol. {volumeProgress} &#8594; {volumes}
+ </span>
+ {/if}
+ {/await}
+ {/if}
+ </span>
+ {/snippet}
</CleanList>
{/if}
diff --git a/src/lib/List/Manga/MangaListTemplate.svelte b/src/lib/List/Manga/MangaListTemplate.svelte
index 1303419f..107ff47d 100644
--- a/src/lib/List/Manga/MangaListTemplate.svelte
+++ b/src/lib/List/Manga/MangaListTemplate.svelte
@@ -21,28 +21,37 @@
import { browser } from '$app/environment';
import identity from '$stores/identity';
- export let user: AniListAuthorisation = {
+ interface Props {
+ user?: AniListAuthorisation;
+ displayUnresolved: boolean;
+ due: boolean;
+ dummy?: any;
+ }
+
+ let {
+ user = {
accessToken: '',
refreshToken: '',
expiresIn: 0,
tokenType: ''
- };
- export let displayUnresolved: boolean;
- export let due: boolean;
- export let dummy = $settings.debugDummyLists || false;
+ },
+ displayUnresolved,
+ due,
+ dummy = $settings.debugDummyLists || false
+ }: Props = $props();
const { addNotification } = getNotificationsContext();
const authorised = authorisedJson.includes($identity.id);
- let mangaLists: Promise<Media[]>;
+ let mangaLists: Promise<Media[]> = $state();
let startTime: number;
- let endTime: number;
- let lastUpdatedMedia = -1;
- let previousMangaList: Media[];
- let pendingUpdate: number | null = null;
- let progress = 0;
- let rateLimited = false;
- let forceFlag = false;
- let lastListSize = 5;
+ let endTime: number = $state();
+ let lastUpdatedMedia = $state(-1);
+ let previousMangaList: Media[] = $state();
+ let pendingUpdate: number | null = $state(null);
+ let progress = $state(0);
+ let rateLimited = $state(false);
+ let forceFlag = $state(false);
+ let lastListSize = $state(5);
const keyCacher = setInterval(() => {
startTime = performance.now();
@@ -270,7 +279,7 @@
<button
data-umami-event="Force Refresh Manga"
title="Force a full refresh"
- on:click={() => {
+ onclick={() => {
cleanCache();
forceFlag = true;
@@ -317,7 +326,7 @@
<button
data-umami-event="Force Refresh Manga"
title="Force a full refresh"
- on:click={() => {
+ onclick={() => {
cleanCache();
forceFlag = true;
@@ -349,7 +358,7 @@
<button
data-umami-event="Force Refresh Manga"
title="Force a full refresh"
- on:click={() => {
+ onclick={() => {
cleanCache();
forceFlag = true;
diff --git a/src/lib/List/MediaTitleDisplay.svelte b/src/lib/List/MediaTitleDisplay.svelte
index 6a886704..0fd7cf17 100644
--- a/src/lib/List/MediaTitleDisplay.svelte
+++ b/src/lib/List/MediaTitleDisplay.svelte
@@ -6,10 +6,19 @@
import LZString from 'lz-string';
import * as wanakana from 'wanakana';
- export let title: MediaTitle;
- export let abbreviate = false;
- export let abbreviateTo = 20;
- export let tooltip = false;
+ interface Props {
+ title: MediaTitle;
+ abbreviate?: boolean;
+ abbreviateTo?: number;
+ tooltip?: boolean;
+ }
+
+ let {
+ title,
+ abbreviate = false,
+ abbreviateTo = 20,
+ tooltip = false
+ }: Props = $props();
const compressToBase64 = (string: string) => LZString.compressToBase64(string);
</script>
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 05:41:10 +0000