feat(settings): data saver

20 files changed, 61 insertions, 19 deletions

diff --git a/src/lib/Data/AniList/character.ts b/src/lib/Data/AniList/character.ts
index 082af47a..94b2a717 100644
--- a/src/lib/Data/AniList/character.ts
+++ b/src/lib/Data/AniList/character.ts
@@ -5,6 +5,7 @@ export interface Character {
 	id: number;
 	image: {
 		large: string;
+		medium: string;
 	};
 }
 
@@ -30,7 +31,7 @@ const charactersPage = async (page: number): Promise<CharactersPage> =>
 			},
 			body: JSON.stringify({
 				query: `{ Page(page: ${page}, perPage: 50) {
-				characters(isBirthday: true) { name { full } id image { large } }
+				characters(isBirthday: true) { name { full } id image { large medium } }
 				pageInfo { hasNextPage currentPage }
 			} }`
 			})
@@ -49,7 +50,8 @@ export const todaysCharacterBirthdays = async (): Promise<Character[]> => {
 				full: character['name']['full']
 			},
 			image: {
-				large: character['image']['large']
+				large: character['image']['large'],
+				medium: character['image']['medium']
 			}
 		});
 
@@ -61,7 +63,8 @@ export const todaysCharacterBirthdays = async (): Promise<Character[]> => {
 					full: character['name']['full']
 				},
 				image: {
-					large: character['image']['large']
+					large: character['image']['large'],
+					medium: character['image']['medium']
 				}
 			});
 
@@ -76,7 +79,8 @@ export const todaysCharacterBirthdays = async (): Promise<Character[]> => {
 				full: character['name']['full']
 			},
 			image: {
-				large: character['image']['large']
+				large: character['image']['large'],
+				medium: character['image']['medium']
 			}
 		});
 
diff --git a/src/lib/Data/AniList/follow.ts b/src/lib/Data/AniList/follow.ts
index 3601d510..f03193cb 100644
--- a/src/lib/Data/AniList/follow.ts
+++ b/src/lib/Data/AniList/follow.ts
@@ -7,6 +7,7 @@ export interface User {
 	isFollower: boolean;
 	avatar: {
 		large: string;
+		medium: string;
 	};
 }
 
diff --git a/src/lib/Data/AniList/forum.ts b/src/lib/Data/AniList/forum.ts
index 5a1bfc25..b7b838cd 100644
--- a/src/lib/Data/AniList/forum.ts
+++ b/src/lib/Data/AniList/forum.ts
@@ -8,6 +8,7 @@ export interface Thread {
 	mediaCategories: {
 		coverImage: {
 			extraLarge: string;
+			medium: string;
 		};
 	}[];
 }
@@ -34,7 +35,7 @@ const threadPage = async (page: number, userId: number): Promise<ThreadPage> =>
 			},
 			body: JSON.stringify({
 				query: `{ Page(perPage: 50, page: ${page}) {
-  threads(userId: ${userId}) { id title createdAt mediaCategories { coverImage { extraLarge } } }
+  threads(userId: ${userId}) { id title createdAt mediaCategories { coverImage { extraLarge medium } } }
   pageInfo { hasNextPage }
 } }`
 			})
diff --git a/src/lib/Data/AniList/media.ts b/src/lib/Data/AniList/media.ts
index 18f2de07..703a55be 100644
--- a/src/lib/Data/AniList/media.ts
+++ b/src/lib/Data/AniList/media.ts
@@ -80,6 +80,7 @@ export interface Media {
 	};
 	coverImage: {
 		extraLarge: string;
+		medium: string;
 	};
 	tags: {
 		name: string;
@@ -151,7 +152,7 @@ const collectionQueryTemplate = (type: Type, userId: number, options: Collection
 					}
 					startDate { year }
 					endDate { year }
-					coverImage { extraLarge }
+					coverImage { extraLarge medium }
 					${
 						options.includeRelations
 							? `
@@ -163,7 +164,7 @@ const collectionQueryTemplate = (type: Type, userId: number, options: Collection
 								title { english romaji }
 								mediaListEntry { status progress }
 								startDate { year }
-								coverImage { extraLarge }
+								coverImage { extraLarge medium }
 							}
 						}
 					}
diff --git a/src/lib/Data/AniList/prequels.ts b/src/lib/Data/AniList/prequels.ts
index 0872dc7c..f995d727 100644
--- a/src/lib/Data/AniList/prequels.ts
+++ b/src/lib/Data/AniList/prequels.ts
@@ -17,6 +17,7 @@ export interface MediaPrequel {
 	};
 	coverImage: {
 		extraLarge: string;
+		medium: string;
 	};
 }
 
@@ -31,6 +32,7 @@ export interface PrequelRelationNode {
 	};
 	coverImage: {
 		extraLarge: string;
+		medium: string;
 	};
 	startDate: {
 		year: number;
@@ -64,6 +66,7 @@ interface PrequelsPage {
 				};
 				coverImage: {
 					extraLarge: string;
+					medium: string;
 				};
 			}[];
 			pageInfo: {
@@ -98,7 +101,7 @@ const prequelsPage = async (
         english
         romaji
       }
-			coverImage { extraLarge }
+			coverImage { extraLarge medium }
       id
 			nextAiringEpisode { episode airingAt }
 			startDate { year month day }
@@ -115,7 +118,7 @@ const prequelsPage = async (
               status
               progress
             }
-						coverImage { extraLarge }
+						coverImage { extraLarge medium }
           }
         }
       }
diff --git a/src/lib/Data/AniList/schedule.ts b/src/lib/Data/AniList/schedule.ts
index 0db130ec..0477e4d8 100644
--- a/src/lib/Data/AniList/schedule.ts
+++ b/src/lib/Data/AniList/schedule.ts
@@ -15,6 +15,7 @@ interface SchedulePage {
 				};
 				coverImage: {
 					extraLarge: string;
+					medium: string;
 				};
 			}[];
 			pageInfo: {
@@ -46,7 +47,7 @@ const schedulePage = async (
       id idMal episodes synonyms
       title { english romaji native }
 			nextAiringEpisode { episode airingAt }
-      coverImage { extraLarge }
+      coverImage { extraLarge medium }
     }
   }
 }`
diff --git a/src/lib/Data/AniList/user.ts b/src/lib/Data/AniList/user.ts
index d2f06354..40097c13 100644
--- a/src/lib/Data/AniList/user.ts
+++ b/src/lib/Data/AniList/user.ts
@@ -17,6 +17,7 @@ export interface User {
 	};
 	avatar: {
 		large: string;
+		medium: string;
 	};
 	bannerImage: string;
 }
@@ -55,7 +56,7 @@ export const user = async (username: string, id = false): Promise<User> =>
 				},
 				body: JSON.stringify({
 					query: `{ User(${id ? `id: ${username}` : `name: "${username}"`}) {
-						name id bannerImage avatar { large } statistics {
+						name id bannerImage avatar { large medium } statistics {
 							anime {
 								count meanScore minutesWatched episodesWatched
 							}
diff --git a/src/lib/List/CleanGrid.svelte b/src/lib/List/CleanGrid.svelte
index bf5022f4..18ee51f6 100644
--- a/src/lib/List/CleanGrid.svelte
+++ b/src/lib/List/CleanGrid.svelte
@@ -46,7 +46,9 @@
 						>
 							<span class="cover-container">
 								<ParallaxImage
-									source={title.coverImage.extraLarge}
+									source={$settings.displayDataSaver
+										? title.coverImage.medium
+										: title.coverImage.extraLarge}
 									alternativeText="Cover"
 									limit={12.5}
 									classList={`cover${
diff --git a/src/lib/List/CleanList.svelte b/src/lib/List/CleanList.svelte
index e78f51ab..d07f45f1 100644
--- a/src/lib/List/CleanList.svelte
+++ b/src/lib/List/CleanList.svelte
@@ -21,7 +21,9 @@
 				<span class="content">
 					<LinkedTooltip
 						id={`${type}-${title.id}`}
-						content={`<img src="${title.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+						content={`<img src="${
+							$settings.displayDataSaver ? title.coverImage.medium : title.coverImage.extraLarge
+						}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
 						pin={`${type}-${title.id}`}
 						pinPosition={type === 'anime' ? 'right' : 'left'}
 						disable={!$settings.displayHoverCover}
diff --git a/src/lib/Locale/english.ts b/src/lib/Locale/english.ts
index 68b3ad6c..15a1203a 100644
--- a/src/lib/Locale/english.ts
+++ b/src/lib/Locale/english.ts
@@ -81,6 +81,7 @@ const English: Locale = {
 						interfaceLanguage: 'Interface language'
 					}
 				},
+				dataSaver: 'Data Saver',
 				collapsePanelsByDefault: 'Collapse panels by default',
 				hidePanels: 'Hide panels',
 				includeAdditionalMedia: 'Include additional media',
diff --git a/src/lib/Locale/japanese.ts b/src/lib/Locale/japanese.ts
index ee823381..4355a5b7 100644
--- a/src/lib/Locale/japanese.ts
+++ b/src/lib/Locale/japanese.ts
@@ -82,6 +82,7 @@ const Japanese: Locale = {
 						interfaceLanguage: 'インターフェース言語'
 					}
 				},
+				dataSaver: 'データセーバー',
 				collapsePanelsByDefault: 'メディアパネルをデフォルトで折りたたむ',
 				hidePanels: 'メディアパネルを隠す',
 				includeAdditionalMedia: '追加メディアを含む',
diff --git a/src/lib/Locale/layout.ts b/src/lib/Locale/layout.ts
index 59aec787..2052010b 100644
--- a/src/lib/Locale/layout.ts
+++ b/src/lib/Locale/layout.ts
@@ -83,6 +83,7 @@ export interface Locale {
 						interfaceLanguage: LocaleValue;
 					};
 				};
+				dataSaver: LocaleValue;
 				collapsePanelsByDefault: LocaleValue;
 				hidePanels: LocaleValue;
 				includeAdditionalMedia: LocaleValue;
diff --git a/src/lib/Media/Cover/HoverCover.svelte b/src/lib/Media/Cover/HoverCover.svelte
index 873d6be1..eecbabe5 100644
--- a/src/lib/Media/Cover/HoverCover.svelte
+++ b/src/lib/Media/Cover/HoverCover.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import settings from '$stores/settings';
 	import type { HoverCoverResponse } from './hoverCover';
 
 	export let options: HoverCoverResponse;
@@ -9,7 +10,9 @@
 	<img
 		class="hover-image show card card-small"
 		src={options.media
-			? options.media.coverImage.extraLarge
+			? $settings.displayDataSaver
+				? options.media.coverImage.medium
+				: options.media.coverImage.extraLarge
 			: `https://subsplease.org${options.item?.image_url}`}
 		alt="Media Cover"
 		loading="lazy"
diff --git a/src/lib/Schedule/CoverBypass.svelte b/src/lib/Schedule/CoverBypass.svelte
index 11df399b..1b7cce17 100644
--- a/src/lib/Schedule/CoverBypass.svelte
+++ b/src/lib/Schedule/CoverBypass.svelte
@@ -30,7 +30,9 @@
 				titleSelect(media) || entry.title
 		  )}
 	target="_blank"
-	title={`<img src="${media?.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+	title={`<img src="${
+		$settings.displayDataSaver ? media?.coverImage.medium : media?.coverImage.extraLarge
+	}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
 	use:tooltip
 	data-tooltip-disable={media && cover ? false : true}
 >
diff --git a/src/lib/Schedule/Days.svelte b/src/lib/Schedule/Days.svelte
index 03f240e6..59f64e4a 100644
--- a/src/lib/Schedule/Days.svelte
+++ b/src/lib/Schedule/Days.svelte
@@ -104,7 +104,9 @@
 								<div class="cover-card-image">
 									<ParallaxImage
 										source={media
-											? media.coverImage.extraLarge
+											? $settings.displayDataSaver
+												? media.coverImage.medium
+												: media.coverImage.extraLarge
 											: `https://subsplease.org${entry.image_url}`}
 										limit={12.5}
 										alternativeText="Cover"
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index 64677ab9..ceb8638e 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -191,6 +191,10 @@
 	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({
diff --git a/src/lib/Tools/Likes.svelte b/src/lib/Tools/Likes.svelte
index d4f62cb9..fbbc30af 100644
--- a/src/lib/Tools/Likes.svelte
+++ b/src/lib/Tools/Likes.svelte
@@ -4,6 +4,7 @@
 	import RateLimited from '$lib/Error/RateLimited.svelte';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import tooltip from '$lib/Tooltip/tooltip';
+	import settings from '$stores/settings';
 	import InputTemplate from './InputTemplate.svelte';
 
 	let submission = '';
@@ -35,7 +36,9 @@
 							<a
 								href={`https://anilist.co/user/${like.name}`}
 								target="_blank"
-								title={`<img src="${like.avatar?.large}" style="width: 150px; object-fit: cover; border-radius: 8px;" />`}
+								title={`<img src="${
+									$settings.displayDataSaver ? like.avatar?.medium : like.avatar?.large
+								}" style="width: 150px; object-fit: cover; border-radius: 8px;" />`}
 								use:tooltip
 							>
 								{like.name}
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
index d9637efe..28db4466 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy.svelte
@@ -62,7 +62,11 @@
 				{#each currentPrequels.sort((a, b) => new Date(a.startDate.year, a.startDate.month - 1, a.startDate.day).getTime() - new Date(b.startDate.year, b.startDate.month - 1, b.startDate.day).getTime()) as prequel}
 					<li id={`${prequel.id}`}>
 						<LinkedTooltip
-							content={`<img src="${prequel.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+							content={`<img src="${
+								$settings.displayDataSaver
+									? prequel.coverImage.medium
+									: prequel.coverImage.extraLarge
+							}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
 							pin={`${prequel.id}`}
 							pinPosition="top"
 							disable={!$settings.displayHoverCover}
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 3ef64699..a6da53b3 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import settings from '$stores/settings';
 	import ParallaxImage from '../../../lib/Image/ParallaxImage.svelte';
 	import { typeSchedule, type ParseResult } from '$lib/Hololive/hololive';
 	import { user, type User } from '$lib/Data/AniList/user';
@@ -200,7 +201,9 @@
 						<LinkedTooltip content={`${userData.name}`} id="avatar" pin="avatar" relative>
 							<a href={`https://anilist.co/user/${userData.name}`} target="_blank">
 								<ParallaxImage
-									source={userData.avatar.large}
+									source={$settings.displayDataSaver
+										? userData.avatar.medium
+										: userData.avatar.large}
 									alternativeText=""
 									style="border-radius: 8px; width: 6.5em;"
 								/>
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 3b9f7f1a..f19dbf36 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -63,6 +63,7 @@ export interface Settings {
 	displayTotalDueEpisodes: boolean;
 	displayAniListNotifications: boolean;
 	displayFiltersIncludeCompleted: boolean;
+	displayDataSaver: boolean;
 }
 
 const defaultSettings: Settings = {
@@ -103,6 +104,7 @@ const defaultSettings: Settings = {
 	displayTotalDueEpisodes: false,
 	displayAniListNotifications: false,
 	displayFiltersIncludeCompleted: false,
+	displayDataSaver: false,
 
 	// Calculation
 	calculateChaptersRoundedDown: true,