aboutsummaryrefslogtreecommitdiff
path: root/src/lib/List/MediaTitleDisplay.svelte
blob: 6a8867043b4cb4f38542a1773de225f31edbbf46 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script lang="ts">
  import type { MediaTitle } from '$lib/Data/AniList/media';
  import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
  import { abbreviate as abbreviated } from '$lib/Utility/string';
  import settings from '$stores/settings';
  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;

  const compressToBase64 = (string: string) => LZString.compressToBase64(string);
</script>

<span id={`title-display-${compressToBase64(title.native)}`}>
  {#if $settings.displayTitleFormat === 'native'}
    {#if $settings.displayFurigana}
      {@const kana = abbreviate
        ? abbreviated(wanakana.toKana(title.native), abbreviateTo)
        : wanakana.toKana(title.native)}
      {@const native = abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}

      <LinkedTooltip
        content={title.english || title.romaji || title.native}
        disable={tooltip}
        pin={`title-display-${compressToBase64(title.native)}`}
        relative
        ignoreAnchorStyling
      >
        {#if kana === native}
          {native}
        {:else}
          <ruby>
            {native}
            <rt>
              {kana}
            </rt>
          </ruby>
        {/if}
      </LinkedTooltip>
    {:else}
      <LinkedTooltip
        content={title.english || title.romaji || title.native}
        disable={tooltip}
        pin={`title-display-${compressToBase64(title.native)}`}
        relative
        ignoreAnchorStyling
      >
        {abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
      </LinkedTooltip>
    {/if}
  {:else if $settings.displayTitleFormat === 'romaji'}
    <LinkedTooltip
      content={title.english || title.romaji || title.native}
      disable={tooltip}
      pin={`title-display-${compressToBase64(title.native)}`}
      relative
      ignoreAnchorStyling
    >
      {abbreviate ? abbreviated(title.romaji, abbreviateTo) : title.romaji}
    </LinkedTooltip>
  {:else}
    <LinkedTooltip
      content={title.romaji || title.native}
      disable={tooltip}
      pin={`title-display-${compressToBase64(title.native)}`}
      relative
      ignoreAnchorStyling
    >
      {abbreviate
        ? abbreviated(title.english || title.romaji || title.native, abbreviateTo)
        : title.english || title.romaji || title.native}
    </LinkedTooltip>
  {/if}
</span>