From 4d710514f5d7931bfd0673c6d44c5a1d725a5cd3 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Sun, 21 Jul 2024 15:35:43 +0200
Subject: frontend/reader: Preload the next set of images

---
 frontend/src/lib/reader/PageView.svelte | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

(limited to 'frontend')

diff --git a/frontend/src/lib/reader/PageView.svelte b/frontend/src/lib/reader/PageView.svelte
index cc4d10e..59136b4 100644
--- a/frontend/src/lib/reader/PageView.svelte
+++ b/frontend/src/lib/reader/PageView.svelte
@@ -2,6 +2,7 @@
 	import { Direction, Layout, type PageFragment } from '$gql/graphql';
 	import { getReaderContext, partition, type Chunk } from '$lib/Reader';
 	import { binds } from '$lib/Shortcuts';
+	import { src } from '$lib/Utils';
 	import ReaderPage from './ReaderPage.svelte';
 
 	const reader = getReaderContext();
@@ -21,6 +22,22 @@
 		$reader.page = chunks[to].index;
 	}
 
+	function pagesAround(around: number) {
+		const peek = (at: number) => {
+			if (at < 0 || at >= chunks.length) return [];
+
+			const pages = [chunks[at].main];
+
+			if (chunks[at].secondary) {
+				pages.push(chunks[at].secondary);
+			}
+
+			return pages;
+		};
+
+		return [...peek(lookup[around] + 1), ...peek(lookup[around] - 1)];
+	}
+
 	const next = () => gotoChunk(lookup[$reader.page] + 1);
 	const prev = () => gotoChunk(lookup[$reader.page] - 1);
 
@@ -65,3 +82,8 @@
 	<ReaderPage page={secondary} on:click={next} --justify="flex-end" />
 	<ReaderPage page={main} on:click={prev} --justify="flex-start" />
 {/if}
+<div class="invisible absolute">
+	{#each pagesAround($reader.page) as page}
+		<img src={src(page.image, 'full')} alt="" />
+	{/each}
+</div>
-- 
cgit v1.2.3-2-gb3c3