Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat/add preference to set high resolution in multi column mode #22

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/lib/components/kurosearch/post/MosaicPost.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { getPostId } from '$lib/logic/id-utils';
import { isEnter } from '$lib/logic/keyboard-utils';
import { calculateAspectRatio } from './ratio';
import highResolutionMultiColEnabled from "$lib/store/high-resolution-multi-col-enabled.js"

export let post: kurosearch.Post;

Expand All @@ -14,7 +15,11 @@
const isImage = (src: string) =>
src.endsWith('.jpg') || src.endsWith('.jpeg') || src.endsWith('.png') || src.endsWith('.webp');

$: previewSrc = isImage(post.sample_url) ? post.sample_url : post.preview_url;
$: previewSrc = highResolutionMultiColEnabled
? post.file_url
: isImage(post.sample_url)
? post.sample_url
: post.preview_url;
</script>

<!-- svelte-ignore a11y-no-static-element-interactions -->
Expand Down
15 changes: 15 additions & 0 deletions src/lib/store/high-resolution-multi-col-enabled.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { boolParser, boolSerializer, persistentWritable } from './persistent-store';
import { StoreKey } from './store-keys';

const createHighResolutionMultiColEnabledStore = () => {
const initial = false;
const { subscribe, set } = persistentWritable(
StoreKey.HighResolutionMultiColEnabled,
initial,
boolSerializer,
boolParser
);
return { subscribe, set, reset: () => set(initial) };
};

export default createHighResolutionMultiColEnabledStore();
1 change: 1 addition & 0 deletions src/lib/store/store-keys.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export enum StoreKey {
AlwaysLoop = 'kurosearch:always-loop',
CookiesAccepted = 'kurosearch:cookies-accepted',
HighResolutionEnabled = 'kurosearch:high-resolution-enabled',
HighResolutionMultiColEnabled = 'kurosearch:high-resolution-multi-col-enabled',
WideLayoutEnabled = 'kurosearch:wide-layout-enabled',
FullscreenHintDone = 'kurosearch:fullscreen-hint-done',
AutoplayFullscreenEnabled = 'kurosearch:autoplay-fullscreen-enabled-done',
Expand Down
9 changes: 8 additions & 1 deletion src/routes/preferences/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
import { addHistory } from '$lib/logic/use/onpopstate';
import NumberInput from '$lib/components/kurosearch/dialog-sort-filter/NumberInput.svelte';
import openTagsOnPostClick from '$lib/store/tags-shortcut-store';
import highResolutionMultiColEnabled from "$lib/store/high-resolution-multi-col-enabled"

let resetDialog: HTMLDialogElement;

Expand Down Expand Up @@ -122,7 +123,7 @@
</div>
</Preference>

<Preference title="Result layout" description="Save active tags and posts between sessions.">
<Preference title="Result layout" description="Change posts grid in result layout.">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch 👍 thanks for correcting it.

<div class="flex">
<Select bind:value={$resultColumns} options={RESULT_COLUMNS_OPTIONS} />
<Checkbox id="checkbox-wide-layout" bind:checked={$wideLayoutEnabled}>
Expand All @@ -135,9 +136,15 @@
title="Higher Resolution"
description="When enabled, the app will always load the highest resolution available. This causes increased network consumption and can impact performance."
>
<p>{"For single column mode"}</p>
<Checkbox id="checkbox-high-resolution-enabled" bind:checked={$highResolutionEnabled}>
{$highResolutionEnabled ? 'Enabled' : 'Disabled'}
</Checkbox>
<br>
<p>{"For multi column mode"}</p>
<Checkbox id="checkbox-high-resolution-multi-col-enabled" bind:checked={$highResolutionMultiColEnabled}>
{$highResolutionMultiColEnabled ? 'Enabled' : 'Disabled'}
</Checkbox>
</Preference>

<Preference
Expand Down