path: root/src/lib/List/Anime/CleanAnimeList.svelte

<script lang="ts">
import Spacer from "$lib/Layout/Spacer.svelte";

import settings from "$stores/settings";
import type { Media } from "$lib/Data/AniList/media";
import { cleanCache, incrementMediaProgress } from "$lib/Media/Anime/cache";
import { totalEpisodes } from "$lib/Media/Anime/episodes";
import type { AniListAuthorisation } from "$lib/Data/AniList/identity";
import ListTitle from "../ListTitle.svelte";
import { onDestroy, onMount } from "svelte";
import AiringTime from "$lib/Media/Anime/Airing/AiringTime.svelte";
import { browser } from "$app/environment";
import identity from "$stores/identity";
import "../covers.css";
import revalidateAnime from "$stores/revalidateAnime";
import CleanGrid from "$lib/List/CleanGrid.svelte";
import CleanList from "../CleanList.svelte";
import stateBin from "$stores/stateBin";
import localforage from "localforage";
import MediaRoulette from "../MediaRoulette.svelte";
import type { Title } from "../mediaTitle";

export let media: Media[];
export let title: Title;
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;
export let disableFilter = false;
export let limit: number | undefined = undefined;

let showRoulette = false;
let airingRefreshTimeout: ReturnType<typeof setTimeout> | undefined;
let scheduledAiringAt: number | null = null;
let totalEpisodeDueCount = media
	.map((anime) => {
		if ($settings.displayTotalEpisodes && !$settings.displayTotalDueEpisodes)
			return 1;

		if (
			$settings.displayTotalDueEpisodes &&
			completed &&
			!$settings.displayTotalEpisodes
		)
			return 1;

		if ($settings.displayTotalEpisodes && anime.status === "FINISHED")
			return anime.episodes - (anime.mediaListEntry?.progress || 0);

		if (anime.status === "NOT_YET_RELEASED") return 1;

		return (
			(anime.nextAiringEpisode?.episode || 1) -
			(anime.mediaListEntry?.progress || 0) -
			(upcoming || notYetReleased ? 0 : 1)
		);
	})
	.reduce((a, b) => a + b, 0);
let lists: string[] = [];
let filterKind = upcoming
	? "Upcoming"
	: notYetReleased
		? "NotYetReleased"
		: completed
			? "Completed"
			: "Due";
const filterKey = `${filterKind}AnimeListFilter`;
let selectedList = "All";

$: {
	const persistedList = disableFilter
		? "All"
		: ($stateBin[filterKey] as string) || "All";

	if (persistedList !== selectedList) selectedList = persistedList;
}

$: lists = Array.from(
	new Set(
		media
			.flatMap((m) => Object.entries(m.mediaListEntry?.customLists ?? {}))
			.filter(([_key, value]) => value)
			.map(([key]) => key),
	),
);

$: filteredMedia =
	selectedList === "All" || !$settings.displayMediaListFilter
		? media
		: media.filter((m) => m.mediaListEntry?.customLists?.[selectedList]);

const updateSelectedList = (event: Event) => {
	const nextSelectedList = (event.currentTarget as HTMLSelectElement).value;

	selectedList = nextSelectedList;

	if (!disableFilter && $stateBin[filterKey] !== nextSelectedList)
		$stateBin[filterKey] = nextSelectedList;
};

const clearAiringRefreshTimeout = () => {
	if (airingRefreshTimeout) clearTimeout(airingRefreshTimeout);

	airingRefreshTimeout = undefined;
	scheduledAiringAt = null;
};

const scheduleAiringRefresh = () => {
	if (!browser) return;

	if (dummy || media.length === 0) {
		clearAiringRefreshTimeout();

		return;
	}

	const nextAiringAt = media.reduce<number | null>((closest, currentMedia) => {
		if (
			currentMedia.status !== "RELEASING" &&
			currentMedia.status !== "NOT_YET_RELEASED"
		)
			return closest;

		const airingAt = currentMedia.nextAiringEpisode?.airingAt;

		if (!airingAt) return closest;
		if (closest === null) return airingAt;

		return airingAt < closest ? airingAt : closest;
	}, null);

	if (!nextAiringAt) {
		clearAiringRefreshTimeout();

		return;
	}

	if (airingRefreshTimeout && scheduledAiringAt === nextAiringAt) return;

	clearAiringRefreshTimeout();
	scheduledAiringAt = nextAiringAt;
	airingRefreshTimeout = setTimeout(
		() => {
			const now = Date.now() / 1000;

			if (
				media.some(
					(m) =>
						m.nextAiringEpisode?.airingAt && m.nextAiringEpisode.airingAt < now,
				)
			)
				animeLists = cleanCache(user, $identity);

			scheduleAiringRefresh();
		},
		Math.max(1000, nextAiringAt * 1000 - Date.now() + 250),
	);
};

onMount(async () => {
	if (dummy) return;

	scheduleAiringRefresh();

	if (browser)
		await localforage.setItem(
			`last${
				notYetReleased
					? "NotYetReleased"
					: upcoming
						? "Upcoming"
						: completed
							? "Completed"
							: ""
			}AnimeListLength`,
			media.length.toString(),
		);
});

$: if (browser && !dummy) {
	media;

	scheduleAiringRefresh();
}

onDestroy(() => clearAiringRefreshTimeout());

const increment = (anime: Media, progress: number) => {
	if (!dummy && pendingUpdate !== anime.id) {
		$revalidateAnime = true;
		lastUpdatedMedia = anime.id;
		pendingUpdate = anime.id;

		incrementMediaProgress(
			anime.id,
			anime.mediaListEntry?.progress,
			user,
			() => {
				const mediaListEntry = media.find(
					(m) => m.id === anime.id,
				)?.mediaListEntry;

				if (mediaListEntry) mediaListEntry.progress = progress + 1;

				previousAnimeList = media;
				animeLists = cleanCache(user, $identity);
				pendingUpdate = null;
			},
		);
	}
};
</script>

<ListTitle
  time={endTime / 1000}
  count={$settings.displayTotalDueEpisodes || $settings.displayTotalEpisodes
    ? totalEpisodeDueCount
    : filteredMedia.length}
  {title}
  hideTime={dummy}
  hideCount={dummy}
>
  {#if $settings.displayMediaRoulette && !upcoming && !notYetReleased && filteredMedia.length > 0}
    <button
      class="small-button"
      onclick={() => (showRoulette = true)}
      title="Pick a random anime to watch"
    >
      Roulette
    </button>
  {/if}
</ListTitle>

{#if media.length === 0}
  No anime to display. <button onclick={() => (animeLists = cleanCache(user, $identity))}>
    Force refresh
  </button>
{:else if $settings.displayMediaListFilter && !disableFilter}
  <select value={selectedList} onchange={updateSelectedList}>
    <option value="All">All</option>

    {#each lists as list}
      <option value={list}>{list}</option>
    {/each}
  </select>

  <Spacer />
{/if}

{#if $settings.displayCoverModeAnime}
  <CleanGrid
    media={filteredMedia}
    {dummy}
    type="anime"
    {upcoming}
    {notYetReleased}
    reverseSort={$settings.displayReverseSort}
    {limit}
  >
    <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;' : ''}
          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}
    </div>
  </CleanGrid>
{:else}
  <CleanList
    media={filteredMedia}
    type="anime"
    {upcoming}
    {notYetReleased}
    {lastUpdatedMedia}
    reverseSort={$settings.displayReverseSort}
  >
    <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;' : ''}
          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} upcoming={true} />
        </span>
      {/if}
    </span>
  </CleanList>
{/if}

{#if showRoulette && !upcoming && !notYetReleased}
  <MediaRoulette media={filteredMedia} type="anime" onClose={() => (showRoulette = false)} />
{/if}