From 2f5c73b4f639d18ea298da8d42f660e3fd15958a Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 28 Sep 2023 16:40:52 -0700
Subject: feat(wrapped): title abbreviation

---
 src/lib/Tools/Wrapped.svelte | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 93d68521..4f2f5bed 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -21,6 +21,8 @@
 	let episodes = 0;
 	let animeList: Media[] | undefined = undefined;
 	let mangaList: Media[] | undefined = undefined;
+	let abbreviateTitles = true;
+	let maxAbbreviateLength = 40;
 
 	onMount(async () => {
 		if (user !== undefined) {
@@ -119,6 +121,18 @@
 			element.classList.remove('light-theme');
 		}
 	};
+
+	const abbreviate = (string: string, maxLength = 40, enabled = true) => {
+		if (!enabled) {
+			return string;
+		}
+
+		if (string.length <= maxLength) {
+			return string;
+		}
+
+		return string.slice(0, maxLength - 3) + '...';
+	};
 </script>
 
 {#if currentUserIdentity.id !== -1}
@@ -202,7 +216,11 @@
 								{#each animeList?.slice(0, 5) as anime}
 									<li>
 										<a href={`https://anilist.co/anime/${anime.id}`} target="_blank">
-											{anime.title.english || anime.title.romaji || anime.title.native}
+											{abbreviate(
+												anime.title.english || anime.title.romaji || anime.title.native,
+												maxAbbreviateLength,
+												abbreviateTitles
+											)}
 										</a>
 									</li>
 								{/each}
@@ -229,7 +247,11 @@
 								{#each mangaList?.slice(0, 5) as manga}
 									<li>
 										<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
-											{manga.title.english || manga.title.romaji || manga.title.native}
+											{abbreviate(
+												manga.title.english || manga.title.romaji || manga.title.native,
+												maxAbbreviateLength,
+												abbreviateTitles
+											)}
 										</a>
 									</li>
 								{/each}
@@ -251,6 +273,12 @@
 			<li>
 				<a href={'#'} on:click={() => screenshot()}>Download light themed image</a>
 			</li>
+			<li>
+				<a href={'#'} on:click={() => (abbreviateTitles = !abbreviateTitles)}>
+					{abbreviateTitles ? 'Display full titles' : 'Abbreviate titles'}
+				</a>
+				<input type="number" bind:value={maxAbbreviateLength} />
+			</li>
 		</ul>
 	{:catch}
 		<Error />
-- 
cgit v1.2.3