From c8da0ccb337467c12c1693c5b10e45972b846e2a Mon Sep 17 00:00:00 2001
From: kurozenzen <kurozenzen@gmail.com>
Date: Sat, 10 Feb 2024 15:27:42 +0100
Subject: [PATCH] feat: added fullscreen autoscroll

---
 .../kurosearch/button-tag/TagButton.svelte    |   2 +-
 .../kurosearch/details/Summary.svelte         |   3 +
 .../CreateSupertagDialog.svelte               |   2 +-
 .../dialog-sort-filter/NumberInput.svelte     |  38 ++++
 .../SortFilterDialog.svelte                   |  51 ++---
 .../fullscreen-post/FullscreenImage.svelte    | 177 ++++++++++++++++++
 .../fullscreen-post/FullscreenMedia.svelte    |  80 +-------
 .../fullscreen-post/FullscreenPreview.svelte  |   4 +-
 .../fullscreen-post/FullscreenProgress.svelte |  38 ++++
 .../fullscreen-post/FullscreenScroller.svelte |  74 +++++---
 .../fullscreen-post/FullscreenVideo.svelte    |  82 ++++++++
 .../kurosearch/media-image/Image.svelte       |   1 +
 .../kurosearch/media-video/Video.svelte       |   2 +-
 .../modified-tag/ModifiedTag.svelte           |   3 +-
 .../kurosearch/post/MosaicPost.svelte         |   1 -
 .../kurosearch/post/SingleColumnPost.svelte   |   7 +-
 .../components/kurosearch/post/Sources.svelte |  22 ++-
 .../kurosearch/results/Results.svelte         |   3 +-
 .../SortFilterConfig.svelte                   |  59 ++----
 .../sort-filter-config/sortfilter.ts          |  66 +++++++
 .../kurosearch/supertag/Supertag.svelte       |   2 +
 .../tag-detailed/DetailedTag.svelte           |   1 +
 .../kurosearch/tag-simple/SimpleTag.svelte    |   2 +-
 .../pure/button-icon/IconButton.svelte        |   2 +-
 .../button-scroll-up/ScrollUpButton.svelte    |   1 +
 .../pure/text-button/TextButton.svelte        |   2 +-
 .../pure/toggle-icon/ToggleIcon.svelte        |   2 +-
 .../store/autoplay-fullscreen-delay-store.ts  |   4 +
 .../autoplay-fullscreen-enabled-store.ts      |   4 +
 src/lib/store/generic/bool-store.ts           |   6 +
 src/lib/store/generic/number-store.ts         |   6 +
 src/lib/store/store-keys.ts                   |   4 +-
 src/routes/+page.svelte                       |   2 +-
 src/routes/post/+page.svelte                  |  13 +-
 src/routes/preferences/+page.svelte           |  51 +++--
 static/manifest.json                          |   1 -
 36 files changed, 596 insertions(+), 222 deletions(-)
 create mode 100644 src/lib/components/kurosearch/dialog-sort-filter/NumberInput.svelte
 create mode 100644 src/lib/components/kurosearch/fullscreen-post/FullscreenImage.svelte
 create mode 100644 src/lib/components/kurosearch/fullscreen-post/FullscreenProgress.svelte
 create mode 100644 src/lib/components/kurosearch/fullscreen-post/FullscreenVideo.svelte
 create mode 100644 src/lib/components/kurosearch/sort-filter-config/sortfilter.ts
 create mode 100644 src/lib/store/autoplay-fullscreen-delay-store.ts
 create mode 100644 src/lib/store/autoplay-fullscreen-enabled-store.ts
 create mode 100644 src/lib/store/generic/bool-store.ts
 create mode 100644 src/lib/store/generic/number-store.ts

diff --git a/src/lib/components/kurosearch/button-tag/TagButton.svelte b/src/lib/components/kurosearch/button-tag/TagButton.svelte
index aa7ced2c..88c71f2c 100644
--- a/src/lib/components/kurosearch/button-tag/TagButton.svelte
+++ b/src/lib/components/kurosearch/button-tag/TagButton.svelte
@@ -3,7 +3,7 @@
 	export let icon: string;
 </script>
 
-<button {title} on:click>
+<button type="button" {title} on:click>
 	<i class={icon} />
 </button>
 
diff --git a/src/lib/components/kurosearch/details/Summary.svelte b/src/lib/components/kurosearch/details/Summary.svelte
index f9666d12..dac58979 100644
--- a/src/lib/components/kurosearch/details/Summary.svelte
+++ b/src/lib/components/kurosearch/details/Summary.svelte
@@ -17,6 +17,7 @@
 	<Score value={post.score} />
 	<span class="divider" />
 	<button
+		type="button"
 		class="codicon codicon-link"
 		class:active={active === 'links'}
 		on:click={() => dispatch('links')}
@@ -25,6 +26,7 @@
 	</button>
 	{#if post.comment_count}
 		<button
+			type="button"
 			class="codicon codicon-comment"
 			class:active={active === 'comments'}
 			on:click={() => dispatch('comments')}
@@ -33,6 +35,7 @@
 		</button>
 	{/if}
 	<button
+		type="button"
 		class="codicon codicon-tag"
 		class:active={active === 'tags'}
 		on:click={() => dispatch('tags')}
diff --git a/src/lib/components/kurosearch/dialog-create-supertag/CreateSupertagDialog.svelte b/src/lib/components/kurosearch/dialog-create-supertag/CreateSupertagDialog.svelte
index 40e6d9bc..acb91988 100644
--- a/src/lib/components/kurosearch/dialog-create-supertag/CreateSupertagDialog.svelte
+++ b/src/lib/components/kurosearch/dialog-create-supertag/CreateSupertagDialog.svelte
@@ -19,7 +19,7 @@
 	<section>
 		<h3>Create Supertag</h3>
 
-		<button class={`codicon codicon-close`} on:click={close} />
+		<button type="button" class="codicon codicon-close" on:click={close} />
 
 		<div>
 			<label for="supertag-name"> Name </label>
diff --git a/src/lib/components/kurosearch/dialog-sort-filter/NumberInput.svelte b/src/lib/components/kurosearch/dialog-sort-filter/NumberInput.svelte
new file mode 100644
index 00000000..70e07fc3
--- /dev/null
+++ b/src/lib/components/kurosearch/dialog-sort-filter/NumberInput.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { isEnter } from '$lib/logic/keyboard-utils';
+
+	export let value: number;
+	export let min: number;
+	export let max: number;
+	export let step: number;
+
+	let internalValue: number;
+
+	const blurOnEnter = (event: KeyboardEvent) =>
+		isEnter(event) && (event.target as HTMLElement)?.blur();
+
+	$: {
+		if (internalValue === undefined) {
+			internalValue = value;
+		}
+
+		let newValue = Number(internalValue);
+		if (!isNaN(newValue)) {
+			value = newValue;
+		}
+	}
+</script>
+
+<input type="number" {min} {max} {step} bind:value={internalValue} on:keyup={blurOnEnter} />
+
+<style>
+	input[type='number'] {
+		height: var(--line-height);
+		box-sizing: border-box;
+		background-color: transparent;
+		border-radius: var(--border-radius);
+		padding-inline: var(--small-gap);
+		border: 2px solid var(--background-1);
+		width: 90px;
+	}
+</style>
diff --git a/src/lib/components/kurosearch/dialog-sort-filter/SortFilterDialog.svelte b/src/lib/components/kurosearch/dialog-sort-filter/SortFilterDialog.svelte
index fb035ef3..76cdc147 100644
--- a/src/lib/components/kurosearch/dialog-sort-filter/SortFilterDialog.svelte
+++ b/src/lib/components/kurosearch/dialog-sort-filter/SortFilterDialog.svelte
@@ -1,24 +1,9 @@
 <script context="module" lang="ts">
-	export const RATING_OPTIONS = Object.freeze({
-		all: 'All',
-		safe: 'Safe',
-		questionable: 'Questionable',
-		explicit: 'Explicit'
-	});
-	const OPTIONS_SORT_PROPERTY = Object.freeze({
-		id: 'Uploaded',
-		score: 'Score',
-		updated: 'Updated',
-		random: 'Random'
-	});
-	const OPTIONS_SORT_DIRECTION = Object.freeze({
-		desc: 'codicon codicon-arrow-down',
-		asc: 'codicon codicon-arrow-up'
-	});
-	const OPTIONS_SCORE_COMPARATOR = Object.freeze({ '>=': '≥', '<=': '≤' });
 </script>
 
 <script lang="ts">
+	import NumberInput from './NumberInput.svelte';
+
 	import RadioGroup from './RadioGroup.svelte';
 
 	import sort from '$lib/store/sort-store';
@@ -29,6 +14,12 @@
 	import Select from '$lib/components/pure/select/Select.svelte';
 	import RotatingTextSelect from '$lib/components/pure/rotating-select/RotatingTextSelect.svelte';
 	import { isEnter } from '$lib/logic/keyboard-utils';
+	import {
+		LABELS_RATING,
+		LABELS_SCORE_COMPARATOR,
+		LABELS_SORT_DIRECTION,
+		LABELS_SORT_PROPERTY
+	} from '../sort-filter-config/sortfilter';
 
 	export let dialog: HTMLDialogElement;
 
@@ -61,8 +52,8 @@
 		<div>
 			<b>Sorting</b>
 			<div class="row">
-				<RotatingIconSelect bind:value={$sort.direction} options={OPTIONS_SORT_DIRECTION} />
-				<Select bind:value={$sort.property} options={OPTIONS_SORT_PROPERTY} />
+				<RotatingIconSelect bind:value={$sort.direction} options={LABELS_SORT_DIRECTION} />
+				<Select bind:value={$sort.property} options={LABELS_SORT_PROPERTY} />
 			</div>
 		</div>
 
@@ -71,23 +62,19 @@
 			<div class="row">
 				<RotatingTextSelect
 					bind:value={$filter.scoreComparator}
-					options={OPTIONS_SCORE_COMPARATOR}
-				/>
-				<input
-					type="number"
-					min={0}
-					max={100000}
-					step={1}
-					bind:value={internalScoreValue}
-					on:keyup={blurOnEnter}
+					options={LABELS_SCORE_COMPARATOR}
 				/>
+				<NumberInput bind:value={$filter.scoreValue} min={0} max={10000} step={1} />
 			</div>
 		</div>
 
-		<b>Filtering by Rating</b>
-		<RadioGroup name="rating" options={RATING_OPTIONS} bind:value={$filter.rating} />
-		<TextButton title="Return to searching." on:click={() => dialog.close()}>Done</TextButton>
-		<TextButton title="Reset sort and filter." type="secondary" on:click={reset}>Reset</TextButton>
+		<div>
+			<b>Rating</b>
+			<RadioGroup name="rating" options={LABELS_RATING} bind:value={$filter.rating} />
+		</div>
+
+		<TextButton title="Return to searching" on:click={() => dialog.close()}>Done</TextButton>
+		<TextButton title="Reset sort and filter" type="secondary" on:click={reset}>Reset</TextButton>
 	</div>
 </Dialog>
 
diff --git a/src/lib/components/kurosearch/fullscreen-post/FullscreenImage.svelte b/src/lib/components/kurosearch/fullscreen-post/FullscreenImage.svelte
new file mode 100644
index 00000000..d1f77f64
--- /dev/null
+++ b/src/lib/components/kurosearch/fullscreen-post/FullscreenImage.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+	import FullscreenProgress from './FullscreenProgress.svelte';
+	import autoplayFullscreenDelay from '$lib/store/autoplay-fullscreen-delay-store';
+	import LoadingAnimation from '$lib/components/pure/loading-animation/LoadingAnimation.svelte';
+	import { getGifSources } from '$lib/logic/media-utils';
+	import autoplayFullscreenEnabled from '$lib/store/autoplay-fullscreen-enabled-store';
+	import highResolutionEnabled from '$lib/store/high-resolution-enabled';
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+	import { browser } from '$app/environment';
+
+	const dispatch = createEventDispatcher();
+
+	export let post: kurosearch.Post;
+	export let postId = -1;
+
+	const getSources = (type: string, file_url: string, sample_url: string, preview_url: string) => {
+		if (type === 'gif') {
+			const gifSources = getGifSources(file_url, sample_url, preview_url);
+			return [gifSources.static, gifSources.animated];
+		}
+
+		return highResolutionEnabled ? [sample_url, file_url] : [preview_url, sample_url];
+	};
+
+	$: [previewSrc, fullSrc] = getSources(
+		post.type,
+		post.file_url,
+		post.sample_url,
+		post.preview_url
+	);
+
+	let currentTime = 0;
+	let lastFrameTime = Date.now();
+	let currentFrameTime = Date.now();
+	let difference: number;
+	let paused = true;
+	let animationHandle: number;
+
+	const updateSlider = () => {
+		// frame times
+		currentFrameTime = Date.now();
+		difference = currentFrameTime - lastFrameTime;
+		lastFrameTime = currentFrameTime;
+
+		if (!paused) {
+			currentTime += difference / 1000;
+		}
+
+		if (currentTime >= $autoplayFullscreenDelay) {
+			dispatch('ended');
+			currentTime = 0;
+		}
+
+		animationHandle = requestAnimationFrame(updateSlider);
+	};
+
+	const togglePaused = () => {
+		paused = !paused;
+	};
+
+	$: {
+		if (post.id !== postId) {
+			postId = post.id;
+			currentTime = 0;
+		}
+	}
+
+	const keybinds = (event: KeyboardEvent) => {
+		if (event.code === 'Space' || event.key === 'k') {
+			event.preventDefault();
+			event.stopPropagation();
+			paused = !paused;
+		}
+	};
+
+	const observer = browser
+		? new IntersectionObserver(
+				(entries) => {
+					for (const entry of entries) {
+						if (entry.target) {
+							paused = !entry.isIntersecting;
+						}
+					}
+				},
+				{ rootMargin: '0px', threshold: 0.5 }
+		  )
+		: null;
+
+	const pauseoffscreen = (target: HTMLElement) => {
+		observer?.observe(target);
+
+		return {
+			destroy() {
+				observer?.unobserve(target);
+			}
+		};
+	};
+
+	onMount(() => {
+		if ($autoplayFullscreenEnabled) {
+			animationHandle = requestAnimationFrame(updateSlider);
+			document.addEventListener('keydown', keybinds);
+		}
+	});
+	onDestroy(() => {
+		cancelAnimationFrame(animationHandle);
+		document.removeEventListener('keydown', keybinds);
+	});
+
+	const preload = (src: string) => {
+		return new Promise((resolve) => {
+			paused = true;
+			let img = new Image();
+			img.onload = (e) => {
+				resolve(e);
+				paused = false;
+			};
+			img.src = src;
+		});
+	};
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+{#await preload(fullSrc)}
+	<img
+		src={previewSrc}
+		alt="[{post.type}] post #{post.id}"
+		title="[{post.type}] post #{post.id}"
+		on:contextmenu|preventDefault={() => {}}
+		on:click={togglePaused}
+	/>
+	<div>
+		<LoadingAnimation />
+	</div>
+{:then _}
+	<img
+		src={fullSrc}
+		alt="[{post.type}] post #{post.id}"
+		title="[{post.type}] post #{post.id}"
+		on:contextmenu|preventDefault={() => {}}
+		on:click={togglePaused}
+		use:pauseoffscreen
+	/>
+{/await}
+
+{#if $autoplayFullscreenEnabled}
+	<FullscreenProgress bind:value={currentTime} max={$autoplayFullscreenDelay} />
+{/if}
+
+<style>
+	img {
+		display: flex;
+		width: 100vw;
+		height: 100vh;
+		object-fit: contain;
+		contain: paint;
+
+		scroll-snap-align: start;
+		scroll-snap-stop: always;
+	}
+
+	div {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background-color: #0008;
+		width: 48px;
+		height: 48px;
+		border-radius: 24px;
+	}
+</style>
diff --git a/src/lib/components/kurosearch/fullscreen-post/FullscreenMedia.svelte b/src/lib/components/kurosearch/fullscreen-post/FullscreenMedia.svelte
index 65fc1c1f..b236a5e9 100644
--- a/src/lib/components/kurosearch/fullscreen-post/FullscreenMedia.svelte
+++ b/src/lib/components/kurosearch/fullscreen-post/FullscreenMedia.svelte
@@ -1,87 +1,21 @@
 <script lang="ts">
-	import { getGifSources, getVideoSources } from '$lib/logic/media-utils';
-	import { videoObserver } from '$lib/logic/video-observer';
-	import { onDestroy, onMount } from 'svelte';
+	import FullscreenVideo from './FullscreenVideo.svelte';
+	import FullscreenImage from './FullscreenImage.svelte';
 
 	export let post: kurosearch.Post;
-
-	let video: HTMLVideoElement | undefined;
-
-	const keybinds = (event: KeyboardEvent) => {
-		if (post.type === 'video' && video) {
-			if (event.key === 'ArrowLeft') {
-				event.preventDefault();
-				event.stopPropagation();
-				video.currentTime = Math.max(0, video.currentTime - 5);
-			}
-			if (event.key === 'ArrowRight') {
-				event.preventDefault();
-				event.stopPropagation();
-				video.currentTime = Math.min(video.duration, video.currentTime + 5);
-			}
-		}
-	};
-
-	onMount(() => {
-		if (video) {
-			videoObserver?.observe(video);
-		}
-		document.addEventListener('keydown', keybinds);
-	});
-	onDestroy(() => {
-		if (video) {
-			videoObserver?.unobserve(video);
-		}
-		document.removeEventListener('keydown', keybinds);
-	});
 </script>
 
 <div>
-	{#if post.type === 'image'}
-		{@const source = post.sample_url}
-		<img src={source} alt="[IMAGE] post #{post.id}" title="[IMAGE] post #{post.id}" />
-	{:else if post.type === 'video'}
-		{@const sources = getVideoSources(post.file_url, post.sample_url, post.preview_url)}
-		{@const animatedSource = sources.animated}
-		{@const staticSource = sources.static}
-		<!-- svelte-ignore a11y-media-has-caption -->
-		<video
-			src={animatedSource}
-			poster={staticSource}
-			loop={true}
-			title="[VIDEO] post #{post.id}"
-			controls
-			preload="metadata"
-			autoplay
-			bind:this={video}
-		/>
+	{#if post.type === 'video'}
+		<FullscreenVideo {post} on:ended />
 	{:else}
-		{@const sources = getGifSources(post.file_url, post.sample_url, post.preview_url)}
-		{@const animatedSource = sources.animated}
-		<img src={animatedSource} alt="[GIF] post #{post.id}" title="[GIF] post #{post.id}" />
+		<FullscreenImage {post} on:ended />
 	{/if}
-
-	<!-- <input type="range" /> -->
-
-	<!-- Video: draggable slider -->
 </div>
 
 <style>
-	img,
-	video {
-		display: flex;
-		width: 100vw;
+	div {
 		height: 100vh;
-		object-fit: contain;
-		contain: paint;
-
-		scroll-snap-align: start;
-		scroll-snap-stop: always;
-	}
-
-	input {
-		position:absolute;
-		bottom: 0;
-		width: 100%;
+		width: 100vw;
 	}
 </style>
diff --git a/src/lib/components/kurosearch/fullscreen-post/FullscreenPreview.svelte b/src/lib/components/kurosearch/fullscreen-post/FullscreenPreview.svelte
index 5eb54ade..bcf64d6f 100644
--- a/src/lib/components/kurosearch/fullscreen-post/FullscreenPreview.svelte
+++ b/src/lib/components/kurosearch/fullscreen-post/FullscreenPreview.svelte
@@ -4,10 +4,10 @@
 	export let post: kurosearch.Post;
 	export let offset: string;
 
-	$: source = isAnimated(post.sample_url) ? post.preview_url : post.sample_url;
+	$: preview = isAnimated(post.sample_url) ? post.preview_url : post.sample_url;
 </script>
 
-<img src={source} alt="post #{post.id}" style:top={offset} />
+<img src={preview} alt="post #{post.id}" style:top={offset} />
 
 <style>
 	img {
diff --git a/src/lib/components/kurosearch/fullscreen-post/FullscreenProgress.svelte b/src/lib/components/kurosearch/fullscreen-post/FullscreenProgress.svelte
new file mode 100644
index 00000000..f194ad09
--- /dev/null
+++ b/src/lib/components/kurosearch/fullscreen-post/FullscreenProgress.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	export let value: number;
+	export let max: number;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div on:click|stopPropagation|preventDefault on:scroll|stopPropagation|preventDefault>
+	<input type="range" bind:value step="0.001" {max} on:scroll|stopPropagation|preventDefault />
+</div>
+
+<style>
+	div {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		left: var(--grid-gap);
+		bottom: 0;
+		box-sizing: border-box;
+		width: calc(100vw - 3 * var(--grid-gap) - var(--line-height));
+		z-index: var(--z-media-controls);
+		height: calc(2 * var(--grid-gap) + var(--line-height));
+	}
+
+	input {
+		width: 100%;
+	}
+
+	input[type='range']::-webkit-slider-thumb,
+	input[type='range']::-ms-thumb {
+		background-color: var(--accent);
+	}
+
+	/* input[type='range']::-moz-range-thumb {
+		background-color: var(--accent);
+		border: none;
+	} */
+</style>
diff --git a/src/lib/components/kurosearch/fullscreen-post/FullscreenScroller.svelte b/src/lib/components/kurosearch/fullscreen-post/FullscreenScroller.svelte
index 638549ca..666f7a88 100644
--- a/src/lib/components/kurosearch/fullscreen-post/FullscreenScroller.svelte
+++ b/src/lib/components/kurosearch/fullscreen-post/FullscreenScroller.svelte
@@ -6,20 +6,44 @@
 	import FullscreenMedia from './FullscreenMedia.svelte';
 	import FullscreenPreview from './FullscreenPreview.svelte';
 	import fullscreenHintDone from '$lib/store/fullscreen-hint-done-store';
+	import autoplayFullscreenEnabled from '$lib/store/autoplay-fullscreen-enabled-store';
+	import IconButton from '$lib/components/pure/button-icon/IconButton.svelte';
+
+	const dispatch = createEventDispatcher();
 
 	export let index: number;
 
 	let container: HTMLDivElement;
 	let current: HTMLDivElement;
 
-	let postCurrent = $results.posts[index];
-	let postPrevious = index > 0 ? $results.posts[index - 1] : undefined;
-	let postNext = index < $results.posts.length - 1 ? $results.posts[index + 1] : undefined;
-	let offsetCurrent = `${index * 100}vh`;
-	let offsetPrevious = `${(index - 1) * 100}vh`;
-	let offsetNext = `${(index + 1) * 100}vh`;
+	$: postCurrent = $results.posts[index];
+	$: postPrevious = index > 0 ? $results.posts[index - 1] : undefined;
+	$: postNext = index < $results.posts.length - 1 ? $results.posts[index + 1] : undefined;
+	$: offsetCurrent = `${index * 100}vh`;
+	$: offsetPrevious = `${(index - 1) * 100}vh`;
+	$: offsetNext = `${(index + 1) * 100}vh`;
+
+	const scrollToPrevious = () => {
+		container.scrollTo({
+			left: 0,
+			top: container.clientHeight * (index - 1),
+			behavior: 'smooth'
+		});
+	};
 
-	const dispatch = createEventDispatcher();
+	const scrollToNext = () => {
+		container.scrollTo({
+			left: 0,
+			top: container.clientHeight * (index + 1),
+			behavior: 'smooth'
+		});
+	};
+
+	const autoscroll = () => {
+		if ($autoplayFullscreenEnabled) {
+			scrollToNext();
+		}
+	};
 
 	const onScroll = (event: Event) => {
 		requestAnimationFrame(() => {
@@ -30,12 +54,6 @@
 
 			if (roundedIndex != index) {
 				index = roundedIndex;
-				postCurrent = $results.posts[index];
-				postPrevious = index > 0 ? $results.posts[index - 1] : undefined;
-				postNext = index < $results.posts.length - 1 ? $results.posts[index + 1] : undefined;
-				offsetCurrent = `${index * 100}vh`;
-				offsetPrevious = `${(index - 1) * 100}vh`;
-				offsetNext = `${(index + 1) * 100}vh`;
 				if (current) {
 					current.scrollLeft = 0;
 				}
@@ -56,20 +74,12 @@
 		if (event.key === 'ArrowUp') {
 			event.preventDefault();
 			event.stopPropagation();
-			container.scrollTo({
-				left: 0,
-				top: container.clientHeight * (index - 1),
-				behavior: 'smooth'
-			});
+			scrollToPrevious();
 		}
 		if (event.key === 'ArrowDown') {
 			event.preventDefault();
 			event.stopPropagation();
-			container.scrollTo({
-				left: 0,
-				top: container.clientHeight * (index + 1),
-				behavior: 'smooth'
-			});
+			scrollToNext();
 		}
 	};
 
@@ -96,8 +106,14 @@
 		bind:this={current}
 		style:top={offsetCurrent}
 	>
-		<FullscreenMedia post={postCurrent} />
+		<FullscreenMedia post={postCurrent} on:ended={autoscroll} />
 		<FullscreenDetails post={postCurrent} />
+		<IconButton
+			class="details-button"
+			on:click={() => current.scrollBy({ left: container.clientWidth, top: 0, behavior: 'smooth' })}
+		>
+			<i class="codicon codicon-tag" />
+		</IconButton>
 	</div>
 	{#if postNext}
 		<FullscreenPreview post={postNext} offset={offsetNext} />
@@ -108,9 +124,7 @@
 	<IntersectionDetector
 		absoluteTop="{$results.posts.length * 100}vh"
 		rootMargin="{window.innerHeight * 3}px"
-		on:intersection={() => {
-			dispatch('endreached');
-		}}
+		on:intersection={() => dispatch('endreached')}
 	/>
 </div>
 
@@ -181,6 +195,12 @@
 		}
 	}
 
+	:global(.details-button) {
+		position: absolute;
+		bottom: var(--grid-gap);
+		right: var(--grid-gap);
+	}
+
 	:global(.hint > *) {
 		animation: scroll-hint 1s ease-in-out;
 		animation-delay: 0.5s;
diff --git a/src/lib/components/kurosearch/fullscreen-post/FullscreenVideo.svelte b/src/lib/components/kurosearch/fullscreen-post/FullscreenVideo.svelte
new file mode 100644
index 00000000..62c071be
--- /dev/null
+++ b/src/lib/components/kurosearch/fullscreen-post/FullscreenVideo.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { getVideoSources } from '$lib/logic/media-utils';
+	import { videoObserver } from '$lib/logic/video-observer';
+	import { onDestroy, onMount } from 'svelte';
+	import FullscreenProgress from './FullscreenProgress.svelte';
+
+	export let post: kurosearch.Post;
+
+	let video: HTMLVideoElement | undefined;
+
+	$: sources = getVideoSources(post.file_url, post.sample_url, post.preview_url);
+	$: animatedSource = sources.animated;
+	$: staticSource = sources.static;
+
+	let currentTime = 0;
+	let paused = false;
+	let duration: number;
+
+	const keybinds = (event: KeyboardEvent) => {
+		if (video) {
+			if (event.key === 'ArrowLeft') {
+				event.preventDefault();
+				event.stopPropagation();
+				video.currentTime = Math.max(0, video.currentTime - 5);
+			}
+			if (event.key === 'ArrowRight') {
+				event.preventDefault();
+				event.stopPropagation();
+				video.currentTime = Math.min(video.duration, video.currentTime + 5);
+			}
+			if (event.key === 'Space') {
+				event.preventDefault();
+				event.stopPropagation();
+				paused = !paused;
+			}
+		}
+	};
+
+	onMount(() => {
+		if (video) {
+			videoObserver?.observe(video);
+		}
+		document.addEventListener('keydown', keybinds);
+	});
+	onDestroy(() => {
+		if (video) {
+			videoObserver?.unobserve(video);
+		}
+		document.removeEventListener('keydown', keybinds);
+	});
+</script>
+
+<!-- svelte-ignore a11y-media-has-caption -->
+<video
+	src={animatedSource}
+	poster={staticSource}
+	title="[VIDEO] post #{post.id}"
+	preload="metadata"
+	autoplay
+	bind:this={video}
+	bind:currentTime
+	bind:paused
+	bind:duration
+	on:click={(e) => (e.target.paused ? e.target.play() : e.target.pause())}
+	on:ended
+	on:contextmenu|preventDefault={() => {}}
+/>
+
+<FullscreenProgress bind:value={currentTime} max={duration} />
+
+<style>
+	video {
+		display: flex;
+		width: 100vw;
+		height: 100vh;
+		object-fit: contain;
+		contain: paint;
+
+		scroll-snap-align: start;
+		scroll-snap-stop: always;
+	}
+</style>
diff --git a/src/lib/components/kurosearch/media-image/Image.svelte b/src/lib/components/kurosearch/media-image/Image.svelte
index f31d6d51..c806912d 100644
--- a/src/lib/components/kurosearch/media-image/Image.svelte
+++ b/src/lib/components/kurosearch/media-image/Image.svelte
@@ -43,6 +43,7 @@
 		object-fit: contain;
 		contain: strict;
 		z-index: var(--z-media);
+		background-color: var(--background-1);
 	}
 
 	@container (min-width: 800px) {
diff --git a/src/lib/components/kurosearch/media-video/Video.svelte b/src/lib/components/kurosearch/media-video/Video.svelte
index b1644ee0..d56c883f 100644
--- a/src/lib/components/kurosearch/media-video/Video.svelte
+++ b/src/lib/components/kurosearch/media-video/Video.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { formatVideoTime } from '$lib/logic/format-time';
-	import { isEnter, isSpace } from '$lib/logic/keyboard-utils';
+	import { isSpace } from '$lib/logic/keyboard-utils';
 	import { onDestroy, onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import PlayButton from '../button-play/PlayButton.svelte';
diff --git a/src/lib/components/kurosearch/modified-tag/ModifiedTag.svelte b/src/lib/components/kurosearch/modified-tag/ModifiedTag.svelte
index c7ec21e2..e4db4b5d 100644
--- a/src/lib/components/kurosearch/modified-tag/ModifiedTag.svelte
+++ b/src/lib/components/kurosearch/modified-tag/ModifiedTag.svelte
@@ -5,8 +5,7 @@
 	export let tag: kurosearch.SearchableTag;
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<button class={MODIFIER_NAMES[tag.modifier]} on:click on:contextmenu|preventDefault>
+<button type="button" class={MODIFIER_NAMES[tag.modifier]} on:click on:contextmenu|preventDefault>
 	{formatTagname(tag.name)}
 </button>
 
diff --git a/src/lib/components/kurosearch/post/MosaicPost.svelte b/src/lib/components/kurosearch/post/MosaicPost.svelte
index 0603e603..8e36f9ac 100644
--- a/src/lib/components/kurosearch/post/MosaicPost.svelte
+++ b/src/lib/components/kurosearch/post/MosaicPost.svelte
@@ -9,7 +9,6 @@
 	let rowsPerSquare = 5;
 	let ratio = post.width / post.height;
 	let rows = Math.max(Math.min(Math.round(rowsPerSquare / ratio), rowsPerSquare / maxRatio), 2);
-	console.log(rows);
 
 	const isImage = (src: string) =>
 		src.endsWith('.jpg') || src.endsWith('.jpeg') || src.endsWith('.png') || src.endsWith('.webp');
diff --git a/src/lib/components/kurosearch/post/SingleColumnPost.svelte b/src/lib/components/kurosearch/post/SingleColumnPost.svelte
index a83a0ddc..207f9a15 100644
--- a/src/lib/components/kurosearch/post/SingleColumnPost.svelte
+++ b/src/lib/components/kurosearch/post/SingleColumnPost.svelte
@@ -21,16 +21,13 @@
 	export let openTab: string | undefined = undefined;
 
 	const selectTab = (tab: string) => {
-		if (openTab === tab) {
-			openTab = undefined;
-		} else {
-			openTab = tab;
-		}
+		openTab = openTab === tab ? undefined : tab;
 	};
 
 	const links = [
 		new URL(`https://kurosearch.com/post?id=${post.id}&src=${encodeURIComponent(post.file_url)}`),
 		new URL(`https://rule34.xxx/index.php?page=post&s=view&id=${post.id}`),
+		new URL(post.file_url),
 		...post.source
 			.split(' ')
 			.filter((x) => isValidUrl(x))
diff --git a/src/lib/components/kurosearch/post/Sources.svelte b/src/lib/components/kurosearch/post/Sources.svelte
index de176f1d..012c680b 100644
--- a/src/lib/components/kurosearch/post/Sources.svelte
+++ b/src/lib/components/kurosearch/post/Sources.svelte
@@ -11,6 +11,7 @@
 		'zone-archive.com': ['#59396A', 'white'],
 		'subscribestar.adult': ['#ff4081', 'white'],
 		'redgifs.com': ['#E5194D', 'white'],
+		'deviantart.com': ['#00c787', 'black'],
 		default: ['var(--background-2)', 'white']
 	};
 </script>
@@ -19,13 +20,14 @@
 	{#each links as link}
 		{@const host = link.host.replace('www.', '')}
 		{@const [background, foreground] = HOST_COLOR_MAPPING[host] ?? HOST_COLOR_MAPPING['default']}
+		{@const label = host.includes('api-cdn') ? 'File' : host}
 		<li>
 			<a
 				href={link.toString()}
-				class="codicon codicon-link-external"
+				class="codicon codicon-link-external {foreground}"
 				style="background-color: {background}; color: {foreground};"
 			>
-				{host}
+				{label}
 			</a>
 		</li>
 	{/each}
@@ -43,7 +45,7 @@
 		display: flex;
 		align-items: center;
 		height: var(--line-height);
-		padding-inline: var(--grid-gap);
+		padding-inline: var(--small-gap);
 		background-color: var(--background-2);
 		color: var(--text-highlight);
 		border-radius: var(--border-radius);
@@ -52,4 +54,18 @@
 	a::before {
 		padding-inline-end: var(--small-gap);
 	}
+
+	@media (hover: hover) {
+		a {
+			transition: all var(--default-transition-behaviour);
+		}
+
+		a.black:hover {
+			filter: brightness(0.7);
+		}
+
+		a.white:hover {
+			filter: brightness(1.5);
+		}
+	}
 </style>
diff --git a/src/lib/components/kurosearch/results/Results.svelte b/src/lib/components/kurosearch/results/Results.svelte
index a76a90b6..b0d6a166 100644
--- a/src/lib/components/kurosearch/results/Results.svelte
+++ b/src/lib/components/kurosearch/results/Results.svelte
@@ -64,6 +64,7 @@
 <style>
 	div {
 		width: 100%;
+		height: var(--line-height);
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -72,7 +73,7 @@
 
 	@media (width <= calc(800px + 2rem)) {
 		div {
-			padding-inline: var(--grid-gap);
+			padding-inline: var(--small-gap);
 		}
 	}
 
diff --git a/src/lib/components/kurosearch/sort-filter-config/SortFilterConfig.svelte b/src/lib/components/kurosearch/sort-filter-config/SortFilterConfig.svelte
index 491745e6..6450f08d 100644
--- a/src/lib/components/kurosearch/sort-filter-config/SortFilterConfig.svelte
+++ b/src/lib/components/kurosearch/sort-filter-config/SortFilterConfig.svelte
@@ -1,50 +1,10 @@
-<script context="module" lang="ts">
-	import { RATING_OPTIONS } from '$lib/components/kurosearch/dialog-sort-filter/SortFilterDialog.svelte';
-
-	const LABELS_SORT: Record<
-		kurosearch.SortProperty,
-		Record<kurosearch.SortDirection, string>
-	> = Object.freeze({
-		id: {
-			asc: 'Oldest',
-			desc: 'Newest'
-		},
-		score: {
-			asc: 'Worst',
-			desc: 'Best'
-		},
-		updated: {
-			asc: 'Inactive',
-			desc: 'Active'
-		},
-		random: {
-			asc: 'Random',
-			desc: 'Random'
-		}
-	});
-
-	const getFilterLabel = (
-		rating: kurosearch.Rating,
-		scoreValue: number,
-		scoreComparator: kurosearch.ScoreComparator
-	) => {
-		let ratingLabel = rating === 'all' ? undefined : RATING_OPTIONS[rating];
-		let scoreLabel =
-			scoreValue === 0 && scoreComparator === '>='
-				? undefined
-				: `Score${scoreComparator}${formatCount(scoreValue)}`;
-
-		return [ratingLabel, scoreLabel].filter((x) => x !== undefined).join(',') || 'All';
-	};
-</script>
-
 <script lang="ts">
 	import sort from '$lib/store/sort-store';
 	import filter from '$lib/store/filter-store';
-	import { formatCount } from '$lib/logic/format-count';
 	import { createEventDispatcher } from 'svelte';
 	import SortFilterDialog from '../dialog-sort-filter/SortFilterDialog.svelte';
 	import { addHistory } from '$lib/logic/use/onpopstate';
+	import { getFilterLabel, getSortLabel } from './sortfilter';
 
 	const dispatch = createEventDispatcher();
 	const serializeSortFilter = (sort: any, filter: any) =>
@@ -54,10 +14,11 @@
 	let sortFilterBefore = '';
 
 	$: filterLabel = getFilterLabel($filter.rating, $filter.scoreValue, $filter.scoreComparator);
-	$: sortLabel = LABELS_SORT[$sort.property][$sort.direction];
+	$: sortLabel = getSortLabel($sort.property, $sort.direction);
 </script>
 
 <button
+	type="button"
 	on:click={() => {
 		sortFilterBefore = serializeSortFilter($sort, $filter);
 		dialog.showModal();
@@ -84,30 +45,38 @@
 	button {
 		display: flex;
 		align-items: center;
+		align-self: stretch;
 		background-color: transparent;
 		color: var(--text);
 	}
 
-	span {
+	span,
+	i {
 		user-select: none;
 	}
 
 	i {
 		display: inline-block;
-		margin-inline-start: var(--grid-gap);
 		margin-inline-end: var(--tiny-gap);
 	}
 
+	i.codicon-arrow-swap {
+		margin-inline-start: var(--grid-gap);
+	}
+
 	.codicon-arrow-swap {
 		transform: rotate(90deg);
 	}
 
 	@media (hover: hover) {
 		button {
-			transition: color var(--default-transition-behaviour);
+			padding-inline: var(--grid-gap);
+			border-radius: var(--border-radius);
+			transition: all var(--default-transition-behaviour);
 		}
 		button:hover {
 			color: var(--text-highlight);
+			background-color: var(--background-1);
 		}
 	}
 </style>
diff --git a/src/lib/components/kurosearch/sort-filter-config/sortfilter.ts b/src/lib/components/kurosearch/sort-filter-config/sortfilter.ts
new file mode 100644
index 00000000..b6a2bb20
--- /dev/null
+++ b/src/lib/components/kurosearch/sort-filter-config/sortfilter.ts
@@ -0,0 +1,66 @@
+import { formatCount } from '$lib/logic/format-count';
+
+export const LABELS_SORT: Record<
+	kurosearch.SortProperty,
+	Record<kurosearch.SortDirection, string>
+> = Object.freeze({
+	id: {
+		asc: 'Oldest',
+		desc: 'Newest'
+	},
+	score: {
+		asc: 'Worst',
+		desc: 'Best'
+	},
+	updated: {
+		asc: 'Inactive',
+		desc: 'Active'
+	},
+	random: {
+		asc: 'Random',
+		desc: 'Random'
+	}
+});
+
+export const LABELS_SCORE_COMPARATOR = Object.freeze({ '>=': '≥', '<=': '≤' });
+
+export const LABELS_RATING = Object.freeze({
+	all: 'All',
+	safe: 'Safe',
+	questionable: 'Questionable',
+	explicit: 'Explicit'
+});
+export const LABELS_SORT_PROPERTY = Object.freeze({
+	id: 'Uploaded',
+	score: 'Score',
+	updated: 'Updated',
+	random: 'Random'
+});
+export const LABELS_SORT_DIRECTION = Object.freeze({
+	desc: 'codicon codicon-arrow-down',
+	asc: 'codicon codicon-arrow-up'
+});
+
+export const getScoreLabel = (score: number, comparator: kurosearch.ScoreComparator) =>
+	score === 0 && comparator === '>='
+		? undefined
+		: `Score ${LABELS_SCORE_COMPARATOR[comparator]} ${formatCount(score)}`;
+
+export const getRatingLabel = (rating: kurosearch.Rating) =>
+	rating === 'all' ? undefined : LABELS_RATING[rating];
+
+export const getFilterLabel = (
+	rating: kurosearch.Rating,
+	scoreValue: number,
+	scoreComparator: kurosearch.ScoreComparator
+) => {
+	let ratingLabel = getRatingLabel(rating);
+	let scoreLabel = getScoreLabel(scoreValue, scoreComparator);
+
+	return [ratingLabel, scoreLabel].filter((x) => x !== undefined).join(',') || 'All';
+};
+
+export const getSortLabel = (
+	property: kurosearch.SortProperty,
+	direction: kurosearch.SortDirection
+) => LABELS_SORT[property][direction];
diff --git a/src/lib/components/kurosearch/supertag/Supertag.svelte b/src/lib/components/kurosearch/supertag/Supertag.svelte
index 5ff5c340..c697cd0b 100644
--- a/src/lib/components/kurosearch/supertag/Supertag.svelte
+++ b/src/lib/components/kurosearch/supertag/Supertag.svelte
@@ -17,6 +17,7 @@
 	<h3>{supertag.name}</h3>
 	<small>{Object.keys(supertag.tags).length} tags</small>
 	<button
+		type="button"
 		class="codicon codicon-edit"
 		on:click={() => {
 			editDialog.showModal();
@@ -24,6 +25,7 @@
 		}}
 	/>
 	<button
+		type="button"
 		class="codicon codicon-close"
 		on:click={() => {
 			deleteDialog.showModal();
diff --git a/src/lib/components/kurosearch/tag-detailed/DetailedTag.svelte b/src/lib/components/kurosearch/tag-detailed/DetailedTag.svelte
index 809a2509..36a1bdb4 100644
--- a/src/lib/components/kurosearch/tag-detailed/DetailedTag.svelte
+++ b/src/lib/components/kurosearch/tag-detailed/DetailedTag.svelte
@@ -10,6 +10,7 @@
 </script>
 
 <button
+	type="button"
 	class:active
 	class="{MODIFIER_NAMES[tag.modifier]} {icon}"
 	title="Click to remove tag"
diff --git a/src/lib/components/kurosearch/tag-simple/SimpleTag.svelte b/src/lib/components/kurosearch/tag-simple/SimpleTag.svelte
index 4cbbca83..f19032da 100644
--- a/src/lib/components/kurosearch/tag-simple/SimpleTag.svelte
+++ b/src/lib/components/kurosearch/tag-simple/SimpleTag.svelte
@@ -8,7 +8,7 @@
 	$: icon = TAG_TYPES_WITH_ICONS[tag.type] ?? 'no-icon';
 </script>
 
-<button tabindex="0" title="Click to add tag" on:click class:active class={icon}>
+<button type="button" title="Click to add tag" on:click class:active class={icon}>
 	{formatTagname(tag.name)}
 </button>
 
diff --git a/src/lib/components/pure/button-icon/IconButton.svelte b/src/lib/components/pure/button-icon/IconButton.svelte
index 52dc5f01..b29a67b4 100644
--- a/src/lib/components/pure/button-icon/IconButton.svelte
+++ b/src/lib/components/pure/button-icon/IconButton.svelte
@@ -2,7 +2,7 @@
 	export let id: string | undefined = undefined;
 </script>
 
-<button {id} class={$$props.class} aria-label={$$props['aria-label']} on:click>
+<button type="button" {id} class={$$props.class} aria-label={$$props['aria-label']} on:click>
 	<slot />
 </button>
 
diff --git a/src/lib/components/pure/button-scroll-up/ScrollUpButton.svelte b/src/lib/components/pure/button-scroll-up/ScrollUpButton.svelte
index f14d7093..caea5ec1 100644
--- a/src/lib/components/pure/button-scroll-up/ScrollUpButton.svelte
+++ b/src/lib/components/pure/button-scroll-up/ScrollUpButton.svelte
@@ -23,6 +23,7 @@
 </script>
 
 <button
+	type="button"
 	aria-label="back to top"
 	title="Go back up"
 	on:click={() => window.scrollTo(0, 0)}
diff --git a/src/lib/components/pure/text-button/TextButton.svelte b/src/lib/components/pure/text-button/TextButton.svelte
index cf413dc2..4ac7d247 100644
--- a/src/lib/components/pure/text-button/TextButton.svelte
+++ b/src/lib/components/pure/text-button/TextButton.svelte
@@ -8,7 +8,7 @@
 	export let type: ButtonType = 'primary';
 </script>
 
-<button id={$$props.id} {title} class={type} on:click {disabled}>
+<button type="button" id={$$props.id} {title} class={type} on:click {disabled}>
 	<slot />
 </button>
 
diff --git a/src/lib/components/pure/toggle-icon/ToggleIcon.svelte b/src/lib/components/pure/toggle-icon/ToggleIcon.svelte
index 2700e5f8..c8e0d854 100644
--- a/src/lib/components/pure/toggle-icon/ToggleIcon.svelte
+++ b/src/lib/components/pure/toggle-icon/ToggleIcon.svelte
@@ -8,7 +8,7 @@
 	};
 </script>
 
-<button {title} class={icon} class:active on:click={toggleActive} />
+<button type="button" {title} class={icon} class:active on:click={toggleActive} />
 
 <style>
 	button {
diff --git a/src/lib/store/autoplay-fullscreen-delay-store.ts b/src/lib/store/autoplay-fullscreen-delay-store.ts
new file mode 100644
index 00000000..e7b8e827
--- /dev/null
+++ b/src/lib/store/autoplay-fullscreen-delay-store.ts
@@ -0,0 +1,4 @@
+import { createNumberStore } from './generic/number-store';
+import { StoreKey } from './store-keys';
+
+export default createNumberStore(StoreKey.AutoplayFullscreenDelay, 10);
diff --git a/src/lib/store/autoplay-fullscreen-enabled-store.ts b/src/lib/store/autoplay-fullscreen-enabled-store.ts
new file mode 100644
index 00000000..a778b1e3
--- /dev/null
+++ b/src/lib/store/autoplay-fullscreen-enabled-store.ts
@@ -0,0 +1,4 @@
+import { createBoolStore } from './generic/bool-store';
+import { StoreKey } from './store-keys';
+
+export default createBoolStore(StoreKey.AutoplayFullscreenEnabled, false);
diff --git a/src/lib/store/generic/bool-store.ts b/src/lib/store/generic/bool-store.ts
new file mode 100644
index 00000000..4e374add
--- /dev/null
+++ b/src/lib/store/generic/bool-store.ts
@@ -0,0 +1,6 @@
+import { boolParser, boolSerializer, persistentWritable } from '../persistent-store';
+
+export const createBoolStore = (key: string, initial: boolean) => {
+	const { subscribe, set } = persistentWritable(key, initial, boolSerializer, boolParser);
+	return { subscribe, set, reset: () => set(initial) };
+};
diff --git a/src/lib/store/generic/number-store.ts b/src/lib/store/generic/number-store.ts
new file mode 100644
index 00000000..99786b09
--- /dev/null
+++ b/src/lib/store/generic/number-store.ts
@@ -0,0 +1,6 @@
+import { persistentWritable } from '../persistent-store';
+
+export const createNumberStore = (key: string, initial: number) => {
+	const { subscribe, set } = persistentWritable(key, initial);
+	return { subscribe, set, reset: () => set(initial) };
+};
diff --git a/src/lib/store/store-keys.ts b/src/lib/store/store-keys.ts
index 73f5d4ae..7c65ac74 100644
--- a/src/lib/store/store-keys.ts
+++ b/src/lib/store/store-keys.ts
@@ -13,5 +13,7 @@ export enum StoreKey {
 	CookiesAccepted = 'kurosearch:cookies-accepted',
 	HighResolutionEnabled = 'kurosearch:high-resolution-enabled',
 	WideLayoutEnabled = 'kurosearch:wide-layout-enabled',
-	FullscreenHintDone = 'kurosearch:fullscreen-hint-done'
+	FullscreenHintDone = 'kurosearch:fullscreen-hint-done',
+	AutoplayFullscreenEnabled = 'kurosearch:autoplay-fullscreen-enabled-done',
+	AutoplayFullscreenDelay = 'kurosearch:autoplay-fullscreen-delay'
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 36914d6b..2a58f8ea 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -268,7 +268,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: var(--grid-gap);
+		gap: var(--small-gap);
 	}
 
 	:global(#btn-search) {
diff --git a/src/routes/post/+page.svelte b/src/routes/post/+page.svelte
index 0038f2bc..fcedb8b6 100644
--- a/src/routes/post/+page.svelte
+++ b/src/routes/post/+page.svelte
@@ -64,9 +64,13 @@
 					<Score value={post.score} />
 					<span>•</span>
 					<RelativeTime value={post.change} />
-					<span>•</span>
-					<KurosearchSource url="/post?id={post.id}&src={encodeURIComponent(post.file_url)}" />
-					<span>•</span>
+				</div>
+
+				<h3>Tags</h3>
+				<PostDetailsTagList tags={post.tags} />
+
+				<h3>Links</h3>
+				<div class="flex-row">
 					<ExternalSource source="https://rule34.xxx/index.php?page=post&s=view&id={post.id}" />
 					<span>•</span>
 					<Rule34Source url={post.file_url} />
@@ -76,9 +80,6 @@
 					{/if}
 				</div>
 
-				<h3>Tags</h3>
-				<PostDetailsTagList tags={post.tags} />
-
 				<h3>Comments</h3>
 				<Comments {post} />
 			</section>
diff --git a/src/routes/preferences/+page.svelte b/src/routes/preferences/+page.svelte
index 787c8f29..34bcfb04 100644
--- a/src/routes/preferences/+page.svelte
+++ b/src/routes/preferences/+page.svelte
@@ -1,3 +1,19 @@
+<script lang="ts" context="module">
+	const THEME_OPTIONS = Object.freeze({
+		'crimson dark': 'Dark',
+		'crimson light': 'Light',
+		'hotpink light': 'Bubblegum',
+		'hotpink dark': 'Dark Bubblegum',
+		'crimson coffee': 'Coffee'
+	});
+	const RESULT_COLUMNS_OPTIONS = Object.freeze({
+		'1': 'Single Column',
+		'2': 'Two Columns',
+		'3': 'Three Columns',
+		'4': 'Four Columns'
+	});
+</script>
+
 <script lang="ts">
 	import Checkbox from '$lib/components/pure/checkbox/Checkbox.svelte';
 	import Heading1 from '$lib/components/pure/heading/Heading1.svelte';
@@ -15,26 +31,15 @@
 	import highResolutionEnabled from '$lib/store/high-resolution-enabled';
 	import resultsStore from '$lib/store/results-store';
 	import activeTagsStore from '$lib/store/active-tags-store';
+	import autoplayFullscreenEnabled from '$lib/store/autoplay-fullscreen-enabled-store';
+	import autoplayFullscreenDelay from '$lib/store/autoplay-fullscreen-delay-store';
 	import activeSupertagsStore from '$lib/store/active-supertags-store';
 	import wideLayoutEnabled from '$lib/store/wide-layout-enabled-store';
 	import { addHistory } from '$lib/logic/use/onpopstate';
+	import NumberInput from '$lib/components/kurosearch/dialog-sort-filter/NumberInput.svelte';
 
 	let resetDialog: HTMLDialogElement;
 
-	const THEME_OPTIONS = Object.freeze({
-		'crimson dark': 'Dark',
-		'crimson light': 'Light',
-		'hotpink light': 'Bubblegum',
-		'hotpink dark': 'Dark Bubblegum',
-		'crimson coffee': 'Coffee'
-	});
-	const RESULT_COLUMNS_OPTIONS = Object.freeze({
-		'1': 'Single Column',
-		'2': 'Two Columns',
-		'3': 'Three Columns',
-		'4': 'Four Columns'
-	});
-
 	const reset = () => {
 		theme.reset();
 		localstorageEnabled.reset();
@@ -103,6 +108,19 @@
 		</Checkbox>
 	</Preference>
 
+	<Preference
+		title="Autoscroll in Fullscreen"
+		description="When enabled, fullscreen view will scroll automatically."
+	>
+		<div class="flex">
+			<Checkbox id="checkbox-fullscreen-autplay" bind:checked={$autoplayFullscreenEnabled}>
+				{$autoplayFullscreenEnabled ? 'Enabled' : 'Disabled'}
+			</Checkbox>
+			<NumberInput bind:value={$autoplayFullscreenDelay} min={1} max={60} step={1} />
+			<span>{$autoplayFullscreenDelay} seconds</span>
+		</div>
+	</Preference>
+
 	<Preference title="Result layout" description="Save active tags and posts between sessions.">
 		<div class="flex">
 			<Select bind:value={$resultColumns} options={RESULT_COLUMNS_OPTIONS} />
@@ -130,8 +148,10 @@
 			on:click={() => {
 				resetDialog.showModal();
 				addHistory('dialog');
-			}}>Reset</TextButton
+			}}
 		>
+			Reset
+		</TextButton>
 	</Preference>
 </section>
 
@@ -159,6 +179,7 @@
 	.flex {
 		display: flex;
 		flex-wrap: wrap;
+		align-items: center;
 		gap: var(--grid-gap);
 	}
 </style>
diff --git a/static/manifest.json b/static/manifest.json
index 1813142f..f04be430 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -5,7 +5,6 @@
 	"theme_color": "#000000",
 	"background_color": "#000000",
 	"display": "standalone",
-	"orientation": "natural",
 	"start_url": "/",
 	"icons": [
 		{