aboutsummaryrefslogtreecommitdiff
path: root/src/lib/List/MediaTitleDisplay.svelte
blob: 51c6cd1320d6f1f1096ef4e50fdcb49dcac121d4 (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>