From 7dd38a4461e415029c4d2d6af42d91d79c69db85 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 17 Apr 2024 19:56:22 -0700
Subject: feat(list): blur nsfw media covers setting

---
 src/lib/Data/AniList/media.ts              |  3 ++-
 src/lib/List/Anime/CleanAnimeList.svelte   | 10 +++++++++-
 src/lib/List/Manga/CleanMangaList.svelte   | 10 +++++++++-
 src/lib/List/covers.css                    | 18 ++++++++++++++++++
 src/lib/Settings/Categories/Display.svelte |  1 +
 5 files changed, 39 insertions(+), 3 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/Data/AniList/media.ts b/src/lib/Data/AniList/media.ts
index aea72f8e..17b428cd 100644
--- a/src/lib/Data/AniList/media.ts
+++ b/src/lib/Data/AniList/media.ts
@@ -74,6 +74,7 @@ export interface Media {
 	}[];
 	genres: string[];
 	season: 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL';
+	isAdult: boolean;
 }
 
 export const flattenLists = (
@@ -126,7 +127,7 @@ const collectionQueryTemplate = (type: Type, userId: number, includeCompleted: b
 		lists {
 			name entries {
 				media {
-					id idMal status type episodes chapters format duration synonyms genres season
+					id idMal status type episodes chapters format duration synonyms genres season isAdult
 					tags { name rank }
 					title { romaji english native }
 					nextAiringEpisode { episode airingAt }
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index eda46d28..5f2281cf 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -100,7 +100,15 @@
 							href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
 							target="_blank"
 						>
-							<img class="cover" src={anime.coverImage.extraLarge} alt="Cover" />
+							<span class="cover-container">
+								<img
+									class={`cover${
+										anime.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
+									}`}
+									src={anime.coverImage.extraLarge}
+									alt="Cover"
+								/>
+							</span>
 						</a>
 
 						<div class="cover-title">
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 9ac3f8c6..c465ff0a 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -119,7 +119,15 @@
 							href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)}
 							target="_blank"
 						>
-							<img class="cover" src={manga.coverImage.extraLarge} alt="Cover" />
+							<span class="cover-container">
+								<img
+									class={`cover${
+										manga.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
+									}`}
+									src={manga.coverImage.extraLarge}
+									alt="Cover"
+								/>
+							</span>
 						</a>
 
 						<div class="cover-title">
diff --git a/src/lib/List/covers.css b/src/lib/List/covers.css
index 2ecdcf02..319d5782 100644
--- a/src/lib/List/covers.css
+++ b/src/lib/List/covers.css
@@ -46,3 +46,21 @@
 	white-space: nowrap;
 	float: right;
 }
+
+.adult {
+	filter: blur(10px) grayscale(50%) brightness(0.5);
+	transition: filter 0.3s ease;
+}
+
+.adult:hover {
+	filter: blur(0) !important;
+	transition: filter 0.3s ease;
+}
+
+.cover-container {
+	overflow: hidden;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 8px;
+}
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index cd69dd36..7751514d 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -260,6 +260,7 @@
 	text="Display schedule in list mode (legacy behaviour)"
 />
 <SettingCheckboxToggle setting="displaySocialButton" text="Show social tab shortcut for media" />
+<SettingCheckboxToggle setting="displayBlurAdultContent" text="Blur NSFW media covers" />
 <select bind:value={$settings.displayTitleFormat}>
 	<option value="english">
 		{$locale().settings.display.categories.media.fields.mediaTitleFormat.options.english}
-- 
cgit v1.2.3