feat(schedule): cover mode

4 files changed, 104 insertions, 20 deletions

diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index 69b26aec..553204ce 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -101,6 +101,10 @@
 	text="Show media cover when hovering on supported media titles"
 />
 <SettingCheckboxToggle
+	setting="displayScheduleListMode"
+	text="Display schedule in list mode (legacy behaviour)"
+/>
+<SettingCheckboxToggle
 	setting="displayCoverMode"
 	text="Show anime lists with media covers instead of text"
 	lineBreak={false}
diff --git a/src/lib/Tools/Schedule/CoverBypass.svelte b/src/lib/Tools/Schedule/CoverBypass.svelte
index 0467c68e..235979c1 100644
--- a/src/lib/Tools/Schedule/CoverBypass.svelte
+++ b/src/lib/Tools/Schedule/CoverBypass.svelte
@@ -15,6 +15,7 @@
 
 	export let media: Media | null;
 	export let entry: SubsPleaseEpisode;
+	export let cover = true;
 
 	let hoverCoverState: HoverCoverResponse = {};
 
@@ -60,4 +61,6 @@
 	{/if}
 </a>
 
-<HoverCover options={hoverCoverState} width={300} />
+{#if cover}
+	<HoverCover options={hoverCoverState} width={300} />
+{/if}
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;
diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte
index 1e919abf..5dda97cc 100644
--- a/src/lib/Tools/Schedule/Tool.svelte
+++ b/src/lib/Tools/Schedule/Tool.svelte
@@ -12,6 +12,7 @@
 	import Loading from '$lib/Utility/Loading.svelte';
 	import './container.css';
 	import Days from './Days.svelte';
+	import settings from '$stores/settings';
 
 	let subsPleasePromise: Promise<SubsPlease>;
 	let scheduledMediaPromise: Promise<Partial<Media[]>>;
@@ -67,7 +68,11 @@
 			{#if scheduledMedia}
 				{@const columnCount = Math.ceil(Object.keys(subsPlease.schedule).length / 2)}
 
-				<div class="list-container" id="schedule" style={`column-count: ${columnCount}`}>
+				<div
+					class="list-container"
+					id="schedule"
+					style={`column-count: ${columnCount / ($settings.displayScheduleListMode ? 1 : 2)}`}
+				>
 					<Days {subsPlease} {scheduledMedia} />
 				</div>
 			{:else}