path: root/src/lib/Settings/Categories/Display.svelte

<script lang="ts">
  import Spacer from '$lib/Layout/Spacer.svelte';
  import settings from '$stores/settings';
  import SettingCheckboxToggle from '../SettingCheckboxToggle.svelte';
  import SettingHint from '../SettingHint.svelte';
  import root from '$lib/Utility/root';
  import locale from '$stores/locale';
  import { requestNotifications } from '$lib/Utility/notifications';
  import { getFingerprint } from '$lib/Utility/fingerprint';

  const onHelperChange = () => {
    const mai = document.getElementById('mai') as HTMLImageElement;

    if (!mai) return;

    mai.style.display = 'block';

    switch ($settings.displayAoButa) {
      case 'random':
      case 'mai_2':
        {
          mai.src = '/aobuta/mai.png';
        }
        break;
      case 'mai':
        {
          mai.src = '/aobuta/mai_2.webp';
        }
        break;
      case 'nodoka':
        {
          mai.src = '/aobuta/nodoka.webp';
        }
        break;
      case 'kaede':
        {
          mai.src = '/aobuta/kaede.png';
        }
        break;
      case 'rio':
        {
          mai.src = '/aobuta/rio.webp';
        }
        break;
      case 'sakuta':
        {
          mai.src = '/aobuta/sakuta.webp';
        }
        break;
      case 'shouko':
        {
          mai.src = '/aobuta/shouko.webp';
        }
        break;
      case 'tomoe':
        {
          mai.src = '/aobuta/tomoe.webp';
        }
        break;
      case 'none': {
        {
          mai.style.display = 'none';
        }
        break;
      }
    }
  };
</script>

<b>{$locale().settings.display.categories.includeAdditionalMedia}</b><br />
<SettingCheckboxToggle
  setting="displayPausedMedia"
  text={$locale().settings.media.pausedMedia}
  lineBreak={false}
/>
<SettingCheckboxToggle
  setting="displayUnresolved"
  text={$locale().settings.media.unresolvedMedia}
  lineBreak={false}
/>
<SettingCheckboxToggle
  setting="displayPlannedAnime"
  text={$locale().settings.media.plannedAnime}
  lineBreak={false}
/>
<SettingHint lineBreak>
  Media where either the next episode's release date is unknown or the chapter count could not be
  resolved is considered unresolved.
  <Spacer />
  <span>
    Additionally, you hard exclude specific media from <a href={root('/')}>due.moe</a> on AniList.
    To exclude any media from being included in <b>any</b> <a href={root('/')}>due.moe</a>
    calculation, create an anime or manga list with the tag
    <code>#DueIgnore</code> in the list's title and add the media you want to exclude to the list.
  </span>

  <br />

  <span>
    Inversely, you can selectively include media by creating an anime or manga list with the tag <code
      >#DueInclude</code
    >
    in the list's title, which will include
    <b>only</b>
    media in the list in any <a href={root('/')}>due.moe</a> calculation.
    <code>#DueInclude</code>
    will override <code>#DueIgnore</code>.
  </span>
</SettingHint>

<Spacer />

<b>{$locale().settings.display.categories.hidePanels}</b><br />
<SettingCheckboxToggle
  setting="disableUpcomingAnime"
  text={$locale().settings.media.upcomingAnime}
  lineBreak={false}
  onChange={() => {
    if ($settings.disableAnime && $settings.disableManga) $settings.disableUpcomingAnime = false;
  }}
/>
<SettingCheckboxToggle
  setting="disableAnime"
  text={$locale().settings.media.anime}
  lineBreak={false}
  onChange={() => {
    if ($settings.disableUpcomingAnime && $settings.disableManga) $settings.disableAnime = false;

    if (
      $settings.disableAnime &&
      $settings.disableManga &&
      $settings.displayFiltersIncludeCompleted
    )
      $settings.displayFiltersIncludeCompleted = false;
  }}
/>
<SettingCheckboxToggle
  setting="disableManga"
  text={$locale().settings.media.manga}
  onChange={() => {
    if ($settings.disableAnime && $settings.disableUpcomingAnime) $settings.disableManga = false;

    if (
      $settings.disableAnime &&
      $settings.disableManga &&
      $settings.displayFiltersIncludeCompleted
    )
      $settings.displayFiltersIncludeCompleted = false;
  }}
/>
<SettingCheckboxToggle
  setting="displayFiltersIncludeCompleted"
  text={$locale().settings.display.categories.filtersIncludeCompleted}
  onChange={() => {
    if (
      $settings.displayFiltersIncludeCompleted &&
      $settings.disableAnime &&
      $settings.disableManga
    )
      $settings.disableAnime = false;
  }}
/>

<Spacer />

<b>{$locale().settings.display.categories.motionAndAccessibility.title}</b><br />
<SettingCheckboxToggle
  setting="displayDisableAnimations"
  text={$locale().settings.display.categories.motionAndAccessibility.fields
    .disablePageTransitionAnimations}
/>
<SettingCheckboxToggle
  setting="displayDisableNotifications"
  text={$locale().settings.display.categories.motionAndAccessibility.fields.disableNotifications}
/>
<SettingCheckboxToggle
  setting="displayLimitListHeight"
  text={$locale().settings.display.categories.motionAndAccessibility.fields
    .limitPanelAreaToScreenHeight}
/>
<SettingCheckboxToggle
  setting="displayDataSaver"
  text={$locale().settings.display.categories.dataSaver}
/>
<select bind:value={$settings.displayLanguage} class="no-shadow">
  <option value="en">
    {$locale({
      locale: 'en'
    }).settings.languages.english}
  </option>
  <option value="ja">
    {$locale({
      locale: 'ja'
    }).settings.languages.japanese}
  </option>
</select>
{$locale().settings.display.categories.motionAndAccessibility.fields.interfaceLanguage}
{#if $settings.displayLanguage !== 'en'}
  <button class="unclickable-button button-badge badge-info">
    {$locale().settings.display.tooltips.beta}
  </button>
{/if}

<Spacer />

<SettingCheckboxToggle
  setting="displayAniListNotifications"
  text={$locale().settings.display.categories.motionAndAccessibility.fields
    .enableAniListNotifications}
  onChange={() => {
    if ($settings.displayAniListNotifications)
      requestNotifications().then(() => {
        return;
      });
    else
      fetch(`/api/notifications/unsubscribe?p=${getFingerprint()}`, {
        method: 'POST'
      }).then(() => {
        return;
      });
  }}
>
  <SettingHint lineBreak>
    Periodically check for and send recent AniList notifications as native platform notifications
    <br />
    This may be useful for users who have installed due.moe as a PWA or are using due.moe on a mobile
    device, as AniList has no official mobile app, and the AniList website does not send push notifications.
  </SettingHint>
</SettingCheckboxToggle>

<Spacer />

<b>{$locale().settings.display.categories.dateAndTime.title}</b><br />
<SettingCheckboxToggle
  setting="displayCountdownRightAligned"
  text={$locale().settings.display.categories.dateAndTime.fields.rightAlignCountdown}
/>
<SettingCheckboxToggle
  setting="display24HourTime"
  text={$locale().settings.display.categories.dateAndTime.fields.use24HourTime}
/>
<SettingCheckboxToggle
  setting="displayNativeCountdown"
  text={$locale().settings.display.categories.dateAndTime.fields.nativeEpisodeCountdown}
/>
<SettingCheckboxToggle
  setting="displayShortCountdown"
  text={$locale().settings.display.categories.dateAndTime.fields.abbreviateCountdown}
/>

<Spacer />

<SettingCheckboxToggle
  setting="displayDisableLastActivityWarning"
  text={$locale().settings.display.categories.dateAndTime.fields.disableLastActivityWarning}
>
  <SettingHint lineBreak>
    A warning will appear at the top of <a href={root('/')}>Home</a> and
    <a href={root('/completed')}>Completed</a> if you have not filled in today's activity history
    grid point yet.
    <br />
    This option is useful to those that like maintaining a consistent activity history grid.
  </SettingHint>
</SettingCheckboxToggle>

<Spacer />

<b>Show lists with media covers instead of text</b><br />
<SettingCheckboxToggle setting="displayCoverModeAnime" text="Anime" lineBreak={false} />
<SettingCheckboxToggle setting="displayCoverModeManga" text="Manga" lineBreak={false} />
<SettingCheckboxToggle
  setting="displayScheduleListMode"
  text="Subtitle Schedule"
  lineBreak={false}
  invert
/>
{#if $settings.displayCoverModeAnime || $settings.displayCoverModeManga || !$settings.displayScheduleListMode}
  <br />
  <input
    type="number"
    class="no-shadow"
    bind:value={$settings.displayCoverWidth}
    min="50"
    placeholder="116.609"
    size="3"
    onchange={() => {
      if ($settings.displayCoverWidth === null) {
        $settings.displayCoverWidth = 116.609;

        return;
      }

      $settings.displayCoverWidth < 50 && ($settings.displayCoverWidth = 50);
    }}
  />
  Cover width (px)
  <br />
{:else}
  <br />
{/if}

<Spacer />

<b>List sort & filter</b><br />
<select bind:value={$settings.displayAnimeSort}>
  <option value="time_remaining">Time Remaining Until Next Airing Episode</option>
  <option value="difference">Difference Between Progress and Next Airing Episode</option>
  <option value="start_date">Start Date</option>
  <option value="end_date">End Date</option>
</select>
Anime sort order
<br />
<SettingCheckboxToggle setting="displayReverseSort" text="Reverse anime sort order" />
<SettingCheckboxToggle setting="displayMediaListFilter" text="Enable media list filter" />
<br />
<SettingCheckboxToggle setting="displayMediaRoulette" text="Enable media roulette">
  <SettingHint lineBreak>
    Adds a roulette button to due and completed media lists to randomly pick something to watch or
    read
  </SettingHint>
</SettingCheckboxToggle>
<br />

<b>{$locale().settings.display.categories.media.title}</b><br />
<SettingCheckboxToggle
  setting="displayHoverCover"
  text="Show media cover when hovering on supported media titles"
/>
<SettingCheckboxToggle setting="displaySocialButton" text="Show social tab shortcut for media" />
<SettingCheckboxToggle setting="displayBlurAdultContent" text="Blur NSFW media covers" />
<SettingCheckboxToggle
  setting="displayCopyMediaTitleNotLink"
  text="Copy media title instead of linking"
/>
<SettingCheckboxToggle
  setting="displayTotalDueEpisodes"
  text="Display total number of due episodes instead of due media count"
  lineBreak={!$settings.displayTotalDueEpisodes}
/>

{#if $settings.displayTotalDueEpisodes}
  <SettingCheckboxToggle
    setting="displayTotalEpisodes"
    text="Apply to all media lists, not just due media lists"
  />
{/if}

<SettingCheckboxToggle
  setting="displayScheduleFilterList"
  text="Only display media on your media lists in Subtitle Schedule"
  id="schedule-filter-list"
/>
<select bind:value={$settings.displayTitleFormat}>
  <option value="english">
    {$locale().settings.display.categories.media.fields.mediaTitleFormat.options.english}
  </option>
  <option value="romaji">
    {$locale().settings.display.categories.media.fields.mediaTitleFormat.options.romaji}
  </option>
  <option value="native">
    {$locale().settings.display.categories.media.fields.mediaTitleFormat.options.native}
  </option>
</select>
{$locale().settings.display.categories.media.fields.mediaTitleFormat.title}
{#if $settings.displayTitleFormat === 'native'}
  &nbsp;
  <SettingCheckboxToggle
    setting="displayFurigana"
    text={$locale().settings.display.categories.media.fields.mediaTitleFormat.fields.showFurigana}
  />
{:else}
  <br />
{/if}

<Spacer />

<select bind:value={$settings.displayOutboundLinksTo}>
  <option value="anilist">AniList</option>
  <option value="livechartme">LiveChart.me</option>
  <option value="animeschedule">AnimeSchedule</option>
  <option value="myanimelist">MyAnimeList</option>
</select>
{$locale().settings.display.categories.media.fields.outboundLinks.title}
<SettingHint lineBreak>
  {$locale().settings.display.categories.media.fields.outboundLinks.hint}
</SettingHint><br />

<!-- <SettingCheckboxToggle setting="displayHoverNavigation" text="Use hovering navigation bar">
	<SettingHint lineBreak>
		Minimises and moves navigation bar to the top-left corner of the screen, visible only when
		hovered over.<br />Intended for use on devices with a cursor.
	</SettingHint>
</SettingCheckboxToggle> -->

<br />

<select bind:value={$settings.displayAoButa} onchange={onHelperChange}>
  <option value="mai">{$locale().settings.display.categories.helper.options.mai}</option>
  <option value="mai_2">{$locale().settings.display.categories.helper.options.mai} #2</option>
  <option value="nodoka">{$locale().settings.display.categories.helper.options.nodoka}</option>
  <option value="kaede">{$locale().settings.display.categories.helper.options.kaede}</option>
  <option value="rio">{$locale().settings.display.categories.helper.options.rio}</option>
  <option value="sakuta">{$locale().settings.display.categories.helper.options.sakuta}</option>
  <option value="shouko">{$locale().settings.display.categories.helper.options.shouko}</option>
  <option value="tomoe">{$locale().settings.display.categories.helper.options.tomoe}</option>
  <option value="random">{$locale().settings.display.categories.helper.options.random}</option>
  <option value="none">{$locale().settings.display.categories.helper.options.none}</option>
</select>
{$locale().settings.display.categories.helper.title}
<SettingHint lineBreak>{$locale().settings.display.categories.helper.hint}</SettingHint>