feat(media): outbound links option

5 files changed, 62 insertions, 12 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 9eded7a0..e082f00a 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -7,6 +7,7 @@
 	import type { AniListAuthorisation, UserIdentity } from '$lib/AniList/identity';
 	import ListTitle from '../ListTitle.svelte';
 	import MediaTitle from '../MediaTitleDisplay.svelte';
+	import { outboundLink } from '$lib/Media/media';
 
 	export let media: Media[];
 	export let title: string;
@@ -38,14 +39,7 @@
 
 		{#if title.includes('Upcoming Episodes') || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
 			<li>
-				<a
-					href={$settings.linkToLiveChart
-						? `https://www.livechart.me/search?q=${
-								anime.title.native || anime.title.english || anime.title.romaji
-						  }`
-						: `https://anilist.co/anime/${anime.id}`}
-					target="_blank"
-				>
+				<a href={outboundLink(anime, 'anime', $settings.outboundLinksTo)} target="_blank">
 					<span
 						style={lastUpdatedMedia === anime.id && anime.episodes !== progress
 							? 'color: lightcoral'
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index acea532a..8f36f244 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Media } from '$lib/AniList/media';
 	import { volumeCount } from '$lib/Media/manga';
+	import { outboundLink } from '$lib/Media/media';
 	import settings from '../../../stores/settings';
 	import ListTitle from '../ListTitle.svelte';
 	import MediaTitle from '../MediaTitleDisplay.svelte';
@@ -34,7 +35,7 @@
 
 		{#if progress !== manga.episodes}
 			<li>
-				<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
+				<a href={outboundLink(manga, 'manga', $settings.outboundLinksTo)} target="_blank">
 					<span
 						style={lastUpdatedMedia === manga.id && manga.chapters !== progress
 							? 'color: lightcoral'
diff --git a/src/lib/Media/media.ts b/src/lib/Media/media.ts
new file mode 100644
index 00000000..a98d5d07
--- /dev/null
+++ b/src/lib/Media/media.ts
@@ -0,0 +1,42 @@
+import type { Media } from '$lib/AniList/media';
+
+export const outboundLink = (
+	media: Media,
+	type: 'anime' | 'manga',
+	setting: 'anilist' | 'livechartme' | 'animeschedule' | 'myanimelist'
+) => {
+	if (type === 'manga') {
+		switch (setting) {
+			case 'livechartme':
+			case 'animeschedule':
+				return `https://anilist.co/${type}/${media.id}`;
+			case 'myanimelist':
+				return `https://myanimelist.net/search/all?q=${
+					media.title.native || media.title.english || media.title.romaji
+				}`;
+			default:
+				return `https://anilist.co/${type}/${media.id}`;
+		}
+	} else {
+		switch (setting) {
+			case 'anilist':
+				return `https://anilist.co/${type}/${media.id}`;
+			case 'livechartme':
+				return `https://www.livechart.me/search?q=${(
+					media.title.native ||
+					media.title.english ||
+					media.title.romaji
+				).replace(/ /g, '+')}`;
+			case 'animeschedule':
+				return `https://animeschedule.net/shows?q=${(
+					media.title.native ||
+					media.title.english ||
+					media.title.romaji
+				).replace(/ /g, '+')}`;
+			case 'myanimelist':
+				return `https://myanimelist.net/search/all?q=${
+					media.title.native || media.title.english || media.title.romaji
+				}`;
+		}
+	}
+};
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index e91e6005..7d557140 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -50,7 +50,6 @@
 	<details open>
 		<summary>Display</summary>
 
-		<SettingCheckboxToggle setting="linkToLiveChart" text="Link anime to LiveChart.me" />
 		<SettingCheckboxToggle
 			setting="displayPausedMedia"
 			text="Show paused media"
@@ -118,6 +117,20 @@
 		>
 			<SettingHint lineBreak>Let her remind you. It's for your own benefit.</SettingHint>
 		</SettingCheckboxToggle>
+
+		<p />
+
+		<select bind:value={$settings.outboundLinksTo}>
+			<option value="anilist">AniList</option>
+			<option value="livechartme">LiveChart.me</option>
+			<option value="animeschedule">AnimeSchedule</option>
+			<option value="myanimelist">MyAnimeList</option>
+		</select>
+		Outbound Links
+		<SettingHint lineBreak>
+			This option is in full respect to anime outbound links. If LiveChart.me or AnimeSchedule is
+			chosen, manga links will default to AniList.
+		</SettingHint>
 	</details>
 
 	<p />
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 800c824a..aefbd4ac 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -10,7 +10,7 @@ export interface Settings {
 	displayUnresolved: boolean;
 	roundDownChapters: boolean;
 	sortByDifference: boolean;
-	linkToLiveChart: boolean;
+	outboundLinksTo: 'anilist' | 'livechartme' | 'animeschedule' | 'myanimelist';
 	displayPausedMedia: boolean;
 	limitListHeight: boolean;
 	displaySocialButton: boolean;
@@ -26,7 +26,7 @@ export interface Settings {
 
 const defaultSettings: Settings = {
 	// Display
-	linkToLiveChart: false,
+	outboundLinksTo: 'anilist',
 	displayPausedMedia: true,
 	displayPlannedAnime: true,
 	limitListHeight: false,