feat(anime): use sliding tooltip for list mode

1 files changed, 63 insertions, 58 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 0734c47a..8e273667 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -12,7 +12,6 @@
 	import { onDestroy, onMount } from 'svelte';
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
 	import { mediaTitle } from '../mediaTitle';
-	import tooltip from '$lib/Tooltip/tooltip';
 	import AiringTime from '$lib/Media/Anime/Airing/AiringTime.svelte';
 	import { browser } from '$app/environment';
 	import identity from '$stores/identity';
@@ -150,70 +149,76 @@
 			{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
 
 			{#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
-				<li class="entry">
-					<span class="content">
-						<a
-							href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
-							target="_blank"
-							title={`<img src="${anime.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
-							use:tooltip
-						>
-							<span
-								style={lastUpdatedMedia === anime.id && anime.episodes !== progress
-									? 'color: lightcoral'
-									: ''}
+				<Tooltip
+					content={`<img src="${anime.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+					id={`anime-${anime.id}`}
+					pin={`anime-${anime.id}`}
+				>
+					<li class="entry">
+						<span class="content">
+							<a
+								href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
+								target="_blank"
 							>
-								<MediaTitle title={anime.title} />
-							</span>
-						</a>
-						{#if $settings.displaySocialButton}
-							[<a href={`https://anilist.co/anime/${anime.id}/social`} target="_blank">S</a>]
-						{/if}
-						{#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
-							<span class="opaque">|</span>
-						{/if}
-						{#if !upcoming || notYetReleased}
-							<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
-							{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
-							<button
-								class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
-								style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
-								on:click={() => {
-									if (pendingUpdate !== anime.id) {
-										lastUpdatedMedia = anime.id;
-										pendingUpdate = anime.id;
+								<span
+									style={lastUpdatedMedia === anime.id && anime.episodes !== progress
+										? 'color: lightcoral'
+										: ''}
+								>
+									<MediaTitle title={anime.title} />
+								</span>
+							</a>
+							{#if $settings.displaySocialButton}
+								[<a href={`https://anilist.co/anime/${anime.id}/social`} target="_blank">S</a>]
+							{/if}
+							{#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
+								<span class="opaque">|</span>
+							{/if}
+							{#if !upcoming || notYetReleased}
+								<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
+								{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+								<button
+									class={`button-square button-action ${
+										pendingUpdate === anime.id ? 'opaque' : ''
+									}`}
+									style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
+									on:click={() => {
+										if (pendingUpdate !== anime.id) {
+											lastUpdatedMedia = anime.id;
+											pendingUpdate = anime.id;
 
-										incrementMediaProgress(anime.id, anime.mediaListEntry?.progress, user, () => {
-											const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
+											incrementMediaProgress(anime.id, anime.mediaListEntry?.progress, user, () => {
+												const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
 
-											if (mediaListEntry) mediaListEntry.progress = progress + 1;
+												if (mediaListEntry) mediaListEntry.progress = progress + 1;
 
-											previousAnimeList = media;
-											animeLists = cleanCache(user, $identity);
-											pendingUpdate = null;
-										});
-									}
-								}}>+</button
-							>
-							{#if !completed}
-								[{anime.nextAiringEpisode?.episode === -1
-									? '?'
-									: (anime.nextAiringEpisode?.episode || 1) -
-									  ((anime.nextAiringEpisode?.airingAt || 999) <
-									  (anime.nextAiringEpisode?.nativeAiringAt || 0)
-											? 2
-											: 1)}]
+												previousAnimeList = media;
+												animeLists = cleanCache(user, $identity);
+												pendingUpdate = null;
+											});
+										}
+									}}>+</button
+								>
+								{#if !completed}
+									[{anime.nextAiringEpisode?.episode === -1
+										? '?'
+										: (anime.nextAiringEpisode?.episode || 1) -
+										  ((anime.nextAiringEpisode?.airingAt || 999) <
+										  (anime.nextAiringEpisode?.nativeAiringAt || 0)
+												? 2
+												: 1)}]
+									<span class:countdown={$settings.displayCountdownRightAligned}>
+										<AiringTime originalAnime={anime} {subsPlease} />
+									</span>
+								{/if}
+							{:else}
 								<span class:countdown={$settings.displayCountdownRightAligned}>
-									<AiringTime originalAnime={anime} {subsPlease} />
+									<AiringTime originalAnime={anime} {subsPlease} upcoming={true} />
 								</span>
 							{/if}
-						{:else}
-							<span class:countdown={$settings.displayCountdownRightAligned}>
-								<AiringTime originalAnime={anime} {subsPlease} upcoming={true} />
-							</span>
-						{/if}
-					</span>
-				</li>
+						</span>
+					</li>
+				</Tooltip>
 			{/if}
 		{/each}
 	</ul>