From 3bcc3accc659dc76405c22850dd378c54b7d7fe4 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 18 Jan 2024 07:43:37 -0800
Subject: feat(schedule): cover mode

---
 src/lib/Tools/Schedule/Days.svelte | 108 ++++++++++++++++++++++++++++++-------
 1 file changed, 90 insertions(+), 18 deletions(-)

(limited to 'src/lib/Tools/Schedule/Days.svelte')

diff --git a/src/lib/Tools/Schedule/Days.svelte b/src/lib/Tools/Schedule/Days.svelte
index 9247d109..9b4ef6b2 100644
--- a/src/lib/Tools/Schedule/Days.svelte
+++ b/src/lib/Tools/Schedule/Days.svelte
@@ -3,6 +3,7 @@
 	import type { Media } from '$lib/AniList/media';
 	import { findClosestMedia } from '$lib/Media/Anime/Airing/Subtitled/match';
 	import type { SubsPlease, SubsPleaseEpisode } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
+	import { outboundLink } from '$lib/Media/links';
 	import { parseOrDefault } from '$lib/Utility/parameters';
 	import settings from '$stores/settings';
 	import CoverBypass from './CoverBypass.svelte';
@@ -72,32 +73,103 @@
 	>
 		<summary>{day}</summary>
 
-		<ol>
-			{#each Object.values(scheduleEntry) as entry}
-				{@const media = associateMedia(scheduledMedia, entry.title)}
-
-				<li class="entry">
-					<CoverBypass {media} {entry} />
-					{#if !$settings.displayCountdownRightAligned}
-						<span style="opacity: 50%;">|</span>
-					{/if}
-					<span class:countdown={$settings.displayCountdownRightAligned}>
-						{#if media && media.nextAiringEpisode}
-							<span style="opacity: 50%;">
-								{episode(media, day)}{media.episodes ? `/${media.episodes}` : ''} at
+		{#if !$settings.displayScheduleListMode}
+			<div
+				id="covers"
+				style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
+			>
+				{#each Object.values(scheduleEntry) as entry}
+					{@const media = associateMedia(scheduledMedia, entry.title)}
+
+					<div class="cover-card">
+						<a
+							href={outboundLink(
+								media ? media : null,
+								'anime',
+								$settings.displayOutboundLinksTo,
+								media === null,
+								entry.title
+							)}
+							target="_blank"
+						>
+							<img
+								class="cover"
+								src={media
+									? media.coverImage.extraLarge
+									: `https://subsplease.org${entry.image_url}`}
+								alt="Cover"
+							/>
+						</a>
+
+						<div class="cover-title">
+							<CoverBypass {media} {entry} cover={false} />
+							<span class:countdown={$settings.displayCountdownRightAligned}>
+								{#if media && media.nextAiringEpisode}
+									<span style="opacity: 50%;">
+										{episode(media, day)}{media.episodes ? `/${media.episodes}` : ''} at
+									</span>
+								{/if}
+								{entry.time}
 							</span>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<ol>
+				{#each Object.values(scheduleEntry) as entry}
+					{@const media = associateMedia(scheduledMedia, entry.title)}
+
+					<li class="entry">
+						<CoverBypass {media} {entry} />
+						{#if !$settings.displayCountdownRightAligned}
+							<span style="opacity: 50%;">|</span>
 						{/if}
-						{entry.time}
-					</span>
-				</li>
-			{/each}
-		</ol>
+						<span class:countdown={$settings.displayCountdownRightAligned}>
+							{#if media && media.nextAiringEpisode}
+								<span style="opacity: 50%;">
+									{episode(media, day)}{media.episodes ? `/${media.episodes}` : ''} at
+								</span>
+							{/if}
+							{entry.time}
+						</span>
+					</li>
+				{/each}
+			</ol>
+		{/if}
 	</details>
 
 	<p />
 {/each}
 
 <style>
+	#covers {
+		display: grid;
+		justify-content: center;
+		gap: 0.5rem;
+		row-gap: 1rem;
+		margin-top: 0.5rem;
+	}
+
+	.cover {
+		background-size: cover;
+		background-position: center;
+		border-radius: 8px;
+		width: 7.5rem;
+	}
+
+	.cover-card {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.cover-title {
+		text-align: center;
+		margin: 0.25rem;
+	}
+
 	.entry::after {
 		content: '';
 		display: table;
-- 
cgit v1.2.3

