path: root/src/lib/List/Manga/CleanMangaList.svelte

<script context="module" lang="ts">
import proxy from "$lib/Utility/proxy";

let mangadexServiceStatusResponse: Promise<Response> | undefined;

const getMangadexServiceStatus = () => {
	if (!mangadexServiceStatusResponse)
		mangadexServiceStatusResponse = fetch(
			proxy("https://api.mangadex.org/ping"),
		);

	return mangadexServiceStatusResponse;
};
</script>

<script lang="ts">
import Spacer from "$lib/Layout/Spacer.svelte";
import type { Media } from "$lib/Data/AniList/media";
import RateLimitedError from "$lib/Error/RateLimited.svelte";
import { volumeCount } from "$lib/Media/Manga/volumes";
import settings from "$stores/settings";
import ListTitle from "../ListTitle.svelte";
import { onMount } from "svelte";
import root from "$lib/Utility/root";
import { executiveCopy, executiveTitle } from "$lib/Utility/executiveMode";
import locale from "$stores/locale";
import Skeleton from "$lib/Loading/Skeleton.svelte";
import { browser } from "$app/environment";
import "../covers.css";
import CleanGrid from "../CleanGrid.svelte";
import CleanList from "../CleanList.svelte";
import aprilFools from "$stores/aprilFools";
import stateBin from "$stores/stateBin";
import localforage from "localforage";
import MediaRoulette from "../MediaRoulette.svelte";

export let media: Media[];
export let cleanCache: () => void;
export let endTime: number;
export let lastUpdatedMedia: number;
export let 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;
export let disableFilter = false;
export let limit: number | undefined = undefined;

let showRoulette = false;
let serviceStatusResponse: Promise<Response>;
let totalEpisodeDueCount = media
	.map((manga) => {
		if ($settings.displayTotalEpisodes && !$settings.displayTotalDueEpisodes)
			return 1;

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

		return (manga.episodes || 1) - (manga.mediaListEntry?.progress || 0);
	})
	.reduce((a, b) => a + b, 0);
let lists: string[] = [];
const filterKind = due ? "due" : "completed";
const filterKey = `${filterKind}MangaListFilter`;
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;
};

onMount(async () => {
	if (rateLimited) serviceStatusResponse = getMangadexServiceStatus();

	if (browser)
		await localforage.setItem(
			`last${due ? "" : "Completed"}MangaListLength`,
			media.length.toString(),
		);
});

$: if (rateLimited && !serviceStatusResponse)
	serviceStatusResponse = getMangadexServiceStatus();

const increment = (manga: Media) => {
	if (!(pendingUpdate === manga.id || dummy))
		updateMedia(manga.id, manga.mediaListEntry?.progress, media);
};
</script>

{#if authorised}
  <ListTitle
    count={$settings.displayTotalDueEpisodes || $settings.displayTotalEpisodes
      ? totalEpisodeDueCount
      : filteredMedia.length}
    time={endTime / 1000}
    title={executiveTitle(
      $aprilFools,
      due
        ? $locale().lists.due.mangaAndLightNovels
        : $locale().lists.completed.mangaAndLightNovels,
    )}
    hideTime={dummy}
    hideCount={dummy}
  >
    {#if !dummy}
      <button
        class="small-button"
        title={executiveCopy($aprilFools, "Force refresh")}
        onclick={cleanCache}
        data-umami-event="Force Refresh Manga"
        >{executiveCopy($aprilFools, "Refresh")}</button
      >
      {#if $settings.displayMediaRoulette && filteredMedia.length > 0}
        <button
          class="small-button"
          onclick={() => (showRoulette = true)}
          title={executiveCopy($aprilFools, "Pick a random manga to read")}
        >
          {executiveCopy($aprilFools, "Roulette")}
        </button>
      {/if}
    {/if}
  </ListTitle>
{/if}

{#if rateLimited}
  {#await serviceStatusResponse}
    <Skeleton card={false} count={1} height="0.9rem" list />
  {:then status}
    {#if status}
      {#if status.status === 503}
        <a href="https://due.moe">due.moe</a>'s manga data source is currently down for maintenance.
        Please check back later.
      {:else if status.status !== 200}
        <a href="https://due.moe">due.moe</a>'s manga data source is currently unavailable. Please
        check back later.
      {:else}
        <RateLimitedError />
      {/if}
    {:else}
      <Skeleton card={false} count={1} height="0.9rem" list />
    {/if}
  {:catch}
    <a href="https://due.moe">due.moe</a>'s manga data source is currently unreachable. Please check
    back later.
  {/await}
{/if}

{#if media.length === 0 && !rateLimited}
  {#if rateLimited}
    <Spacer />
  {/if}

  <p>
    {$aprilFools ? "No deliverables to display." : "No manga to display."}
    <button onclick={cleanCache} data-umami-event="Force Refresh No Manga"
      >{executiveCopy($aprilFools, "Force refresh")}</button
    >
  </p>

  <span>
    Don't read manga? <button
      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>.
  </span>
{: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.displayCoverModeManga || dummy}
  <CleanGrid media={filteredMedia} {dummy} type="manga" {limit}>
    <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;' : ''}
        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>
  </CleanGrid>
{:else}
  <CleanList media={filteredMedia} 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;' : ''}
        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>
  </CleanList>
{/if}

{#if showRoulette}
  <MediaRoulette media={filteredMedia} type="manga" onClose={() => (showRoulette = false)} />
{/if}