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

10
src/app.pcss
View file

@ -6,13 +6,3 @@
* { * {
box-sizing: border-box; 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} */ /** @type {Props} */
let { post = null, class: className} = $props(); let { post = null } = $props();
</script> </script>
{#if post?.preview?.has} {#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} {:else}
{#if ['webm', 'mp4'].includes(post.file.ext)} {#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} /> <source src={post.file.url} />
</video> </video>
{:else} {: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}
{/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"; import {onMount} from "svelte";
function initFromLocalStorage(storageKey, initalValue = null) {
return window.localStorage.getItem(storageKey) ?? initalValue;
}
export default function useSettings() { export default function useSettings() {
let lastSearch = $state(null), let lastSearch = $state(null),
imageGridColumns = $state(6), imageGridColumns = $state(6),
limitImageHeight = $state(true), limitImageHeight = $state(false),
postGridPreviewQuality = $state('preview'), postGridPreviewQuality = $state('preview'),
blacklist = $state([ blacklist = $state([
'gore', 'gore',

27
src/routes/+layout.svelte
View file

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

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

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