blisstown/campfire
blisstown/campfire
2
0
Fork 1
Code Issues 19 Pull requests Projects 1 Releases Activity

huge refactor. addresses #21 w/ inifinite scrolling notifications

Browse source
This commit is contained in:
ari melody 2024-07-03 22:00:32 +01:00
parent f883b61659
commit 2e64f63caa
Signed by: ari
GPG key ID: CF99829C92678188
29 changed files with 887 additions and 1030 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/lib/ui/post/ActionBar.svelte
View file

@ -1,7 +1,9 @@
<script>
import { client } from '../../client/client.js';
import * as api from '../../client/api.js';
import * as api from '$lib/api.js';
import { get } from 'svelte/store';
import { server } from '$lib/client/server.js';
import { app } from '$lib/client/app.js';
import { parseReactions } from '$lib/post.js';
import ActionButton from './ActionButton.svelte';
@ -18,9 +20,9 @@
async function toggleBoost() {
let data;
if (post.boosted)
data = await get(client).unboostPost(post.id);
data = await api.unboostPost(get(server).host, get(app).token, post.id);
else
data = await get(client).boostPost(post.id);
data = await api.boostPost(get(server).host, get(app).token, post.id);
if (!data) {
console.error(`Failed to boost post ${post.id}`);
return;
@ -32,16 +34,16 @@
async function toggleFavourite() {
let data;
if (post.favourited)
data = await get(client).unfavouritePost(post.id);
data = await api.unfavouritePost(get(server).host, get(app).token, post.id);
else
data = await get(client).favouritePost(post.id);
data = await api.favouritePost(get(server).host, get(app).token, post.id);
if (!data) {
console.error(`Failed to favourite post ${post.id}`);
return;
}
post.favourited = data.favourited;
post.favourite_count = data.favourites_count;
if (data.reactions) post.reactions = api.parseReactions(data.reactions);
if (data.reactions) post.reactions = parseReactions(data.reactions);
}
async function toggleReaction(reaction) {
@ -49,16 +51,16 @@
let data;
if (reaction.me)
data = await get(client).unreactPost(post.id, reaction.name);
data = await api.unreactPost(get(server).host, get(app).token, post.id, reaction.name);
else
data = await get(client).reactPost(post.id, reaction.name);
data = await api.reactPost(get(server).host, get(app).token, post.id, reaction.name);
if (!data) {
console.error(`Failed to favourite post ${post.id}`);
return;
}
post.favourited = data.favourited;
post.favourite_count = data.favourites_count;
if (data.reactions) post.reactions = api.parseReactions(data.reactions);
if (data.reactions) post.reactions = parseReactions(data.reactions);
}
</script>

28
src/lib/ui/post/Body.svelte
View file

@ -1,8 +1,6 @@
<script>
export let post;
let rich_text;
post.rich_text().then(res => {rich_text = res});
let open_warned = false;
</script>
@ -22,22 +20,22 @@
</button>
{/if}
{#if !post.warning || open_warned}
{#if post.text}
<span class="post-text">{@html rich_text}</span>
{#if post.html}
<span class="post-text">{@html post.html}</span>
{/if}
{#if post.files && post.files.length > 0}
<div class="post-media-container" data-count={post.files.length}>
{#each post.files as file}
<div class="post-media {file.type}" on:click|stopPropagation on:mouseup|stopPropagation>
{#if ["image", "gifv", "gif"].includes(file.type)}
<a href={file.url} target="_blank">
<img src={file.url} alt={file.description} title={file.description} height="200" loading="lazy" decoding="async">
{#if post.media && post.media.length > 0}
<div class="post-media-container" data-count={post.media.length}>
{#each post.media as media}
<div class="post-media {media.type}" on:click|stopPropagation on:mouseup|stopPropagation>
{#if ["image", "gifv", "gif"].includes(media.type)}
<a href={media.url} target="_blank">
<img src={media.url} alt={media.description} title={media.description} height="200" loading="lazy" decoding="async">
</a>
{:else if file.type === "video"}
{:else if media.type === "video"}
<video controls height="200">
<source src={file.url} alt={file.description} title={file.description} type={file.url.endsWith('.mp4') ? 'video/mp4' : 'video/webm'}>
<p>{file.description} &ensp; <a href={file.url}>[link]</a></p>
<!-- <media src={file.url} alt={file.description} loading="lazy" decoding="async"> -->
<source src={media.url} alt={media.description} title={media.description} type={media.url.endsWith('.mp4') ? 'video/mp4' : 'video/webm'}>
<p>{media.description} &ensp; <a href={media.url}>[link]</a></p>
<!-- <media src={media.url} alt={media.description} loading="lazy" decoding="async"> -->
</video>
{/if}
</div>

9
src/lib/ui/post/BoostContext.svelte
View file

@ -1,17 +1,16 @@
<script>
import { parseText as parseEmojis } from '../../emoji.js';
import { shorthand as short_time } from '../../time.js';
import { shorthand as short_time } from '$lib/time.js';
export let post;
let time_string = post.created_at.toLocaleString();
const time_string = post.created_at.toLocaleString();
</script>
<div class="post-context">
<span class="post-context-icon">🔁</span>
<span class="post-context-action">
<a href={post.user.url} target="_blank"><span class="name">
{@html parseEmojis(post.user.rich_name)}</span>
<a href={post.account.url} target="_blank"><span class="name">
{@html post.account.rich_name}</span>
</a>
boosted this post.
</span>

3
src/lib/ui/post/Post.svelte
View file

@ -1,5 +1,4 @@
<script>
import { parseOne as parseEmoji } from '../../emoji.js';
import { play_sound } from '../../sound.js';
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
@ -51,7 +50,7 @@
}
});
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
let aria_label = post.account.username + '; ' + post.text + '; ' + post.created_at;
</script>
<div class="post-container">

11
src/lib/ui/post/PostHeader.svelte
View file

@ -1,6 +1,5 @@
<script>
import { parseText as parseEmojis } from '../../emoji.js';
import { shorthand as short_time } from '../../time.js';
import { shorthand as short_time } from '$lib/time.js';
export let post;
export let reply = undefined;
@ -9,13 +8,13 @@
</script>
<div class={"post-header-container" + (reply ? " reply" : "")}>
<a href={post.user.url} target="_blank" class="post-avatar-container" on:mouseup|stopPropagation>
<img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
<a href={post.account.url} target="_blank" class="post-avatar-container" on:mouseup|stopPropagation>
<img src={post.account.avatar_url} type={post.account.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
</a>
<header class="post-header">
<div class="post-user-info" on:mouseup|stopPropagation>
<a href={post.user.url} target="_blank" class="name">{@html post.user.rich_name}</a>
<span class="username">{post.user.mention}</span>
<a href={post.account.url} target="_blank" class="name">{@html post.account.rich_name}</a>
<span class="username">{post.account.mention}</span>
</div>
<div class="post-info" on:mouseup|stopPropagation>
<a href={post.url} target="_blank" class="created-at">

5
src/lib/ui/post/ReplyContext.svelte
View file

@ -1,7 +1,4 @@
<script>
import { parseText as parseEmojis, parseOne as parseEmoji } from '../../emoji.js';
import { shorthand as short_time } from '../../time.js';
import * as api from '../../client/api.js';
import { goto } from '$app/navigation';
import PostHeader from './PostHeader.svelte';
@ -12,7 +9,7 @@
export let post;
let time_string = post.created_at.toLocaleString();
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
let aria_label = post.account.username + '; ' + post.text + '; ' + post.created_at;
let mouse_pos = { top: 0, left: 0 };