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

45
src/lib/ui/LoginForm.svelte
View file

@ -1,37 +1,42 @@
<script>
import { client } from '$lib/client/client.js';
import * as api from '$lib/api.js';
import { server, createServer } from '$lib/client/server.js';
import { app } from '$lib/client/app.js';
import { get } from 'svelte/store';
import Logo from '$lib/../img/campfire-logo.svg';
let instance_url_error = false;
let display_error = false;
let logging_in = false;
function log_in(event) {
async function log_in(event) {
event.preventDefault();
instance_url_error = false;
display_error = false;
logging_in = true;
const host = event.target.host.value;
if (!host || host === "") {
instance_url_error = "Please enter an instance domain.";
display_error = "Please enter an server domain.";
logging_in = false;
return;
}
console.log(client);
get(client).init(host).then(res => {
server.set(await createServer(host));
if (!get(server)) {
display_error = "Failed to connect to the server.\nCheck the browser console for details!"
logging_in = false;
if (!res) return;
if (res.constructor === String) {
instance_url_error = res;
return;
};
let oauth_url = get(client).getOAuthUrl();
location = oauth_url;
});
return;
}
app.set(await api.createApp(get(server).host));
if (!get(app)) {
display_error = "Failed to create an application for this server."
logging_in = false;
return;
}
location = api.getOAuthUrl(get(server).host, get(app).id);
}
</script>
@ -40,11 +45,11 @@
<Logo />
</div>
<p>Welcome, fediverse user!</p>
<p>Please enter your instance domain to log in.</p>
<p>Please enter your server domain to log in.</p>
<div class="input-wrapper">
<input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
{#if instance_url_error}
<p class="error">{instance_url_error}</p>
<input type="text" id="host" aria-label="server domain" class={logging_in ? "throb" : ""}>
{#if display_error}
<p class="error">{display_error}</p>
{/if}
</div>
<br>

27
src/lib/ui/Navigation.svelte
View file

@ -1,18 +1,17 @@
<script>
import Logo from '$lib/../img/campfire-logo.svg';
import Button from './Button.svelte';
import Feed from './Feed.svelte';
import { client } from '$lib/client/client.js';
import { user } from '$lib/stores/user.js';
import { account, logged_in } from '$lib/stores/account.js';
import { play_sound } from '$lib/sound.js';
import { getTimeline } from '$lib/timeline.js';
import { getNotifications } from '$lib/notifications.js';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { get } from 'svelte/store';
import { logged_in } from '$lib/stores/user.js';
import { unread_notif_count, last_read_notif_id } from '$lib/notifications.js';
import Logo from '$lib/../img/campfire-logo.svg';
import Button from './Button.svelte';
import Feed from './Feed.svelte';
import TimelineIcon from '../../img/icons/timeline.svg';
import NotificationsIcon from '../../img/icons/notifications.svg';
import ExploreIcon from '../../img/icons/explore.svg';
@ -37,7 +36,7 @@
break;
case "notifications":
route = "/notifications";
getNotifications();
getNotifications(true);
break;
case "explore":
case "lists":
@ -63,7 +62,7 @@
</script>
<div id="navigation">
<header class="instance-header">
<header class="server-header">
<div class="app-logo">
<Logo />
</div>
@ -151,11 +150,11 @@
</div>
<div id="account-button">
<img src={$user.avatar_url} class="account-avatar" height="64px" alt="" aria-hidden="true" on:click={() => play_sound()}>
<img src={$account.avatar_url} class="account-avatar" height="64px" alt="" aria-hidden="true" on:click={() => play_sound()}>
<div class="account-name" aria-hidden="true">
<a href={$user.url} class="nickname" title={$user.nickname}>{@html $user.rich_name}</a>
<span class="username" title={`@${$user.username}@${$user.host}`}>
{`@${$user.username}@${$user.host}`}
<a href={$account.url} class="nickname" title={$account.nickname}>{@html $account.rich_name}</a>
<span class="username" title={`@${$account.username}@${$account.host}`}>
{`@${$account.username}@${$account.host}`}
</span>
</div>
</div>
@ -183,7 +182,7 @@
background-color: var(--bg-800);
}
.instance-header {
.server-header {
width: 100%;
height: 172px;
display: flex;
@ -196,7 +195,7 @@
background-image: linear-gradient(to top, var(--bg-800), var(--bg-600));
}
.instance-icon {
.server-icon {
height: 50%;
border-radius: 8px;
}

2
src/lib/ui/Notification.svelte
View file

@ -1,5 +1,5 @@
<script>
import * as api from '$lib/client/api.js';
import * as api from '$lib/api.js';
import { goto } from '$app/navigation';
import ReplyIcon from '$lib/../img/icons/reply.svg';

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 };