dhalucario/esix-client
1
0
Fork 0
Code Activity

Compare commits

base: dhalucario:8c5d4900618721c75b37ec6921ca8317d3d51a78
Branches Tags
dhalucario:main
..
compare: dhalucario:14a1267ffa447d52fa1dfaa8be7963915fa66e51
Branches Tags
dhalucario:main

No commits in common. "8c5d4900618721c75b37ec6921ca8317d3d51a78" and "14a1267ffa447d52fa1dfaa8be7963915fa66e51" have entirely different histories.
8c5d490061 ... 14a1267ffa

9 changed files with 102 additions and 90 deletions
Show stats Expand all files Collapse all files

2
src/app.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<body data-sveltekit-preload-data="hover" data-theme="r621">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

10
src/app.pcss
View file

@ -6,13 +6,3 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
img {
width: 100%;
margin: 0 auto;
}

8
src/lib/components/PostMedia.svelte
View file

@ -8,17 +8,17 @@
*/
/** @type {Props} */
let { post = null, class: className} = $props();
let { post = null } = $props();
</script>
{#if post?.preview?.has}
<img class:max-h-dvh={settings.limitImageHeight} class={className} src={post.preview.url} alt={`Post ${post.id}`} />
<img class:max-h-dvh={settings.limitImageHeight} src={post.preview.url} alt={`Post ${post.id}`} />
{:else}
{#if ['webm', 'mp4'].includes(post.file.ext)}
<video class:max-h-dvh={settings.limitImageHeight} class={className} controls playsinline>
<video class:max-h-dvh={settings.limitImageHeight} controls playsinline>
<source src={post.file.url} />
</video>
{:else}
<img class:max-h-dvh={settings.limitImageHeight} class={className} src={post.file.url} alt={`Post ${post.id}`} />
<img class:max-h-dvh={settings.limitImageHeight} src={post.file.url} alt={`Post ${post.id}`} />
{/if}
{/if}

14
src/lib/settings.js Normal file
View file

@ -0,0 +1,14 @@
import { localStorageStore } from '@skeletonlabs/skeleton';
export const lastSearch = localStorageStore('lastSearch', '');
export const imageGridColumns = localStorageStore('gridColumns', 6);
export const postGridPreviewQuality = localStorageStore('gridPreviewQuality', 'preview');
export const blacklist = localStorageStore('blacklist', [
'gore',
'scat',
'watersports',
'young',
'loli',
'shota',
]);
export const limitImageHeight = localStorageStore('limitImageHeight', false);

6
src/lib/useSettings.svelte.js
View file

@ -1,9 +1,13 @@
import {onMount} from "svelte";
function initFromLocalStorage(storageKey, initalValue = null) {
return window.localStorage.getItem(storageKey) ?? initalValue;
}
export default function useSettings() {
let lastSearch = $state(null),
imageGridColumns = $state(6),
limitImageHeight = $state(true),
limitImageHeight = $state(false),
postGridPreviewQuality = $state('preview'),
blacklist = $state([
'gore',

27
src/routes/+layout.svelte
View file

@ -1,29 +1,18 @@
<script>
import '../app.pcss';
import { loading } from '$lib/stores.js';
import { Fa } from 'svelte-fa';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { loading } from "$lib/stores.js";
/**
* @typedef {Object} Props
* @property {import('svelte').Snippet} [children]
*/
/** @type {Props} */
let { children } = $props();
</script>
<div class="bg-gray-200">
{@render children?.()}
{#if $loading}
<div class="absolute bottom-4 right-4 spin">
<Fa size={'2x'} icon={faSpinner}></Fa>
</div>
<p class="absolute top-0 left-0">Loading</p>
{/if}
{@render children?.()}
</div>
<style lang="postcss">
.spin {
animation: spin 2s infinite;
}
@keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(360deg) }
100% { transform: rotate(720deg) }
}
</style>

20
src/routes/posts/[post_id]/+page.svelte
View file

@ -1,17 +1,20 @@
<script>
import {faStar, faCaretUp, faCaretDown, faHeart, faCopy} from '@fortawesome/free-solid-svg-icons';
import { Fa } from 'svelte-fa';
import { PostMedia, Header } from '$lib/components';
import { PostMedia } from '$lib/components';
import { onMount } from 'svelte';
import { TAG_TYPES } from '$lib/Tags';
import { invoke } from '@tauri-apps/api/core';
import Header from "$lib/components/Header.svelte";
import {goto} from "$app/navigation";
import {loading} from "$lib/stores.js";
let { data } = $props();
let post = $state(null);
const tagTypes = Object.entries(TAG_TYPES);
/** @type any|null */
let post = $state(null);
onMount(async () => {
loading.set(true);
post = await invoke('get_post', {postId: +data.postId});
@ -26,11 +29,12 @@
goto("/?" + queryParams.toString())
}}></Header>
<main class="[grid-area:main]">
<main clasS="[grid-area:main]">
<div class="container mx-auto flex flex-col items-center justify-center">
{#if post}
<div class="flex flex-col">
<div class="card mb-4 flex flex-col">
<section class="flex flex-col place-items-center bg-white">
<PostMedia class="object-contain" {post} />
<PostMedia {post} />
</section>
<section class="flex flex-row justify-between bg-black">
<div class="flex flex-row px-2 gap-2">
@ -59,7 +63,7 @@
</div>
<div class="flex flex-row px-2 gap-2">
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white"
onclick={async () => {await navigator.clipboard.writeText(`https://e621.net/posts/${post.id}`)}}>
onclick={() => {}}>
<Fa size={'1.5x'} icon={faCopy} />
</button>
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
@ -69,11 +73,11 @@
</section>
<footer class="card-footer py-4 px-2">
<h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3>
<p class="text-wrap">{post.description}</p>
<!--<pre>{JSON.stringify(post, null, 4)}</pre>-->
<p>{post.description}</p>
</footer>
</div>
{/if}
</div>
</main>
<aside class="[grid-area:aside]">

2
src/routes/settings/+page.svelte
View file

@ -1,2 +0,0 @@
<script></script>
<div></div>

13
src/styles.css Normal file
View file

@ -0,0 +1,13 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
img {
width: 100%;
margin: 0 auto;
}