2024-06-28 06:19:00 +01:00
|
|
|
<script>
|
|
|
|
|
import { parseText as parseEmojis, parseOne as parseEmoji } from '../../emoji.js';
|
|
|
|
|
import { shorthand as short_time } from '../../time.js';
|
2024-06-28 08:43:12 +01:00
|
|
|
import { get } from 'svelte/store';
|
|
|
|
|
import { Client } from '../../client/client.js';
|
|
|
|
|
import * as api from '../../client/api.js';
|
2024-06-29 14:48:34 +01:00
|
|
|
import { goto } from '$app/navigation';
|
2024-06-28 06:19:00 +01:00
|
|
|
|
2024-06-30 20:53:51 +01:00
|
|
|
import PostHeader from './PostHeader.svelte';
|
|
|
|
|
import Body from './Body.svelte';
|
|
|
|
|
import Post from './Post.svelte';
|
|
|
|
|
import ActionBar from './ActionBar.svelte';
|
|
|
|
|
import ReactionBar from './ReactionBar.svelte';
|
2024-06-30 19:57:32 +01:00
|
|
|
|
2024-06-28 06:19:00 +01:00
|
|
|
export let post;
|
|
|
|
|
let time_string = post.created_at.toLocaleString();
|
2024-06-29 14:48:34 +01:00
|
|
|
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
|
2024-06-28 06:19:00 +01:00
|
|
|
|
|
|
|
|
function gotoPost() {
|
2024-06-29 14:48:34 +01:00
|
|
|
if (event.key && event.key !== "Enter") return;
|
2024-06-29 16:19:34 +01:00
|
|
|
console.log(`/post/${post.id}`);
|
2024-06-29 14:48:34 +01:00
|
|
|
goto(`/post/${post.id}`);
|
2024-06-28 06:19:00 +01:00
|
|
|
}
|
2024-06-28 08:43:12 +01:00
|
|
|
|
|
|
|
|
async function toggleBoost() {
|
|
|
|
|
let client = get(Client.get());
|
|
|
|
|
let data;
|
|
|
|
|
if (post.boosted)
|
|
|
|
|
data = await client.unboostPost(post.id);
|
|
|
|
|
else
|
|
|
|
|
data = await client.boostPost(post.id);
|
|
|
|
|
if (!data) {
|
|
|
|
|
console.error(`Failed to boost post ${post.id}`);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
post.boosted = data.boosted;
|
|
|
|
|
post.boost_count = data.reblogs_count;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function toggleFavourite() {
|
|
|
|
|
let client = get(Client.get());
|
|
|
|
|
let data;
|
|
|
|
|
if (post.favourited)
|
|
|
|
|
data = await client.unfavouritePost(post.id);
|
|
|
|
|
else
|
|
|
|
|
data = await client.favouritePost(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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function toggleReaction(reaction) {
|
|
|
|
|
if (reaction.name.includes('@')) return;
|
|
|
|
|
let client = get(Client.get());
|
|
|
|
|
|
|
|
|
|
let data;
|
|
|
|
|
if (reaction.me)
|
|
|
|
|
data = await client.unreactPost(post.id, reaction.name);
|
|
|
|
|
else
|
|
|
|
|
data = await client.reactPost(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);
|
|
|
|
|
}
|
2024-06-28 06:19:00 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
{#if post.reply}
|
|
|
|
|
<svelte:self post={post.reply} />
|
|
|
|
|
{/if}
|
|
|
|
|
|
2024-06-29 14:48:34 +01:00
|
|
|
<article
|
|
|
|
|
class="post-reply"
|
|
|
|
|
aria-label={aria_label}
|
|
|
|
|
on:click={gotoPost}
|
|
|
|
|
on:keydown={gotoPost}>
|
2024-06-28 06:19:00 +01:00
|
|
|
<div class="line"></div>
|
|
|
|
|
|
|
|
|
|
<div class="post-reply-main">
|
|
|
|
|
<PostHeader post={post} reply />
|
|
|
|
|
|
|
|
|
|
<Body post={post} />
|
|
|
|
|
|
|
|
|
|
<footer class="post-footer">
|
2024-06-30 20:53:51 +01:00
|
|
|
<ReactionBar post={post} />
|
|
|
|
|
<ActionBar post={post} />
|
2024-06-28 06:19:00 +01:00
|
|
|
</footer>
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.post-reply {
|
2024-06-29 14:48:34 +01:00
|
|
|
padding: 16px 16px 16px 16px;
|
2024-06-28 06:19:00 +01:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
color: var(--text);
|
|
|
|
|
align-items: stretch;
|
2024-06-29 14:48:34 +01:00
|
|
|
border-radius: 8px;
|
|
|
|
|
transition: background-color .1s;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-reply:hover {
|
|
|
|
|
background-color: color-mix(in srgb, var(--bg-800), black 5%);
|
2024-06-28 06:19:00 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-avatar-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line {
|
|
|
|
|
position: relative;
|
2024-06-29 14:48:34 +01:00
|
|
|
top: 32px;
|
|
|
|
|
left: 23px;
|
2024-06-28 06:19:00 +01:00
|
|
|
border-right: 2px solid var(--bg-700);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-reply-main {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding-left: 60px;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:global(.post-body) {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:global(.post-body p) {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
