2024-06-28 06:19:00 +01:00
|
|
|
<script>
|
|
|
|
|
import BoostContext from './BoostContext.svelte';
|
|
|
|
|
import ReplyContext from './ReplyContext.svelte';
|
|
|
|
|
import PostHeader from './PostHeader.svelte';
|
|
|
|
|
import Body from './Body.svelte';
|
|
|
|
|
import ReactionButton from './ReactionButton.svelte';
|
|
|
|
|
import ActionButton from './ActionButton.svelte';
|
|
|
|
|
import { parseOne as parseEmoji } from '../../emoji.js';
|
|
|
|
|
import { play_sound } from '../../sound.js';
|
|
|
|
|
import { onMount } from 'svelte';
|
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 19:57:32 +01:00
|
|
|
import ReplyIcon from '../../../img/icons/reply.svg';
|
|
|
|
|
import RepostIcon from '../../../img/icons/repost.svg';
|
|
|
|
|
import FavouriteIcon from '../../../img/icons/like.svg';
|
|
|
|
|
import FavouriteIconFill from '../../../img/icons/like_fill.svg';
|
|
|
|
|
import ReactIcon from '../../../img/icons/react.svg';
|
|
|
|
|
import QuoteIcon from '../../../img/icons/quote.svg';
|
|
|
|
|
import MoreIcon from '../../../img/icons/more.svg';
|
|
|
|
|
|
2024-06-28 06:19:00 +01:00
|
|
|
export let post_data;
|
|
|
|
|
export let focused = false;
|
|
|
|
|
|
|
|
|
|
let post_context = undefined;
|
|
|
|
|
let post = post_data;
|
2024-06-29 16:19:34 +01:00
|
|
|
let is_boost = !!post_data.boost;
|
|
|
|
|
if (is_boost) {
|
2024-06-28 06:19:00 +01:00
|
|
|
post_context = post_data;
|
|
|
|
|
post = post_data.boost;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function gotoPost() {
|
2024-06-29 14:48:34 +01:00
|
|
|
if (focused) return;
|
|
|
|
|
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;
|
|
|
|
|
}
|
2024-06-29 23:10:29 +01:00
|
|
|
post.boosted = data.reblog ? data.reblog.reblogged : data.boosted;
|
|
|
|
|
post.boost_count = data.reblog ? data.reblog.reblogs_count : data.reblogs_count;
|
2024-06-28 08:43:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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
|
|
|
let el;
|
|
|
|
|
onMount(() => {
|
|
|
|
|
if (focused) {
|
2024-06-29 14:48:34 +01:00
|
|
|
window.scrollTo(0, el.scrollHeight);
|
2024-06-28 06:19:00 +01:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
|
|
|
|
|
</script>
|
|
|
|
|
|
2024-06-29 14:48:34 +01:00
|
|
|
<div class="post-container">
|
2024-06-28 06:19:00 +01:00
|
|
|
{#if post.reply}
|
|
|
|
|
<ReplyContext post={post.reply} />
|
|
|
|
|
{/if}
|
|
|
|
|
{#if is_boost && !post_context.text}
|
|
|
|
|
<BoostContext post={post_context} />
|
|
|
|
|
{/if}
|
2024-06-29 14:48:34 +01:00
|
|
|
<article
|
|
|
|
|
class={"post" + (focused ? " focused" : "")}
|
|
|
|
|
aria-label={aria_label}
|
|
|
|
|
bind:this={el}
|
|
|
|
|
on:click={gotoPost}
|
|
|
|
|
on:keydown={gotoPost}>
|
2024-06-28 06:19:00 +01:00
|
|
|
<PostHeader post={post} />
|
|
|
|
|
<Body post={post} />
|
|
|
|
|
<footer class="post-footer">
|
2024-06-29 14:48:34 +01:00
|
|
|
<div class="post-reactions" aria-label="Reactions" on:click|stopPropagation on:keydown|stopPropagation>
|
2024-06-28 06:19:00 +01:00
|
|
|
{#each post.reactions as reaction}
|
2024-06-28 08:43:12 +01:00
|
|
|
<ReactionButton
|
|
|
|
|
type="reaction"
|
|
|
|
|
on:click={() => toggleReaction(reaction)}
|
|
|
|
|
bind:active={reaction.me}
|
|
|
|
|
bind:count={reaction.count}
|
|
|
|
|
disabled={reaction.name.includes('@')}
|
|
|
|
|
title={reaction.name}
|
|
|
|
|
label="">
|
|
|
|
|
{#if reaction.url}
|
|
|
|
|
<img src={reaction.url} class="emoji" height="20" title={reaction.name} alt={reaction.name}>
|
|
|
|
|
{:else}
|
|
|
|
|
{reaction.name}
|
|
|
|
|
{/if}
|
|
|
|
|
</ReactionButton>
|
2024-06-28 06:19:00 +01:00
|
|
|
{/each}
|
|
|
|
|
</div>
|
2024-06-29 14:48:34 +01:00
|
|
|
<div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation>
|
2024-06-30 19:57:32 +01:00
|
|
|
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>
|
|
|
|
|
<ReplyIcon/>
|
|
|
|
|
</ActionButton>
|
|
|
|
|
<ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">
|
|
|
|
|
<RepostIcon/>
|
|
|
|
|
<svelte:fragment slot="activeIcon">
|
|
|
|
|
<RepostIcon/>
|
|
|
|
|
</svelte:fragment>
|
|
|
|
|
</ActionButton>
|
|
|
|
|
<ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>
|
|
|
|
|
<FavouriteIcon/>
|
|
|
|
|
<svelte:fragment slot="activeIcon">
|
|
|
|
|
<FavouriteIconFill/>
|
|
|
|
|
</svelte:fragment>
|
|
|
|
|
</ActionButton>
|
|
|
|
|
<ActionButton type="react" label="React" disabled>
|
|
|
|
|
<ReactIcon/>
|
|
|
|
|
</ActionButton>
|
|
|
|
|
<ActionButton type="quote" label="Quote" disabled>
|
|
|
|
|
<QuoteIcon/>
|
|
|
|
|
</ActionButton>
|
|
|
|
|
<ActionButton type="more" label="More" disabled>
|
|
|
|
|
<MoreIcon/>
|
|
|
|
|
</ActionButton>
|
2024-06-28 06:19:00 +01:00
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
</article>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.post-container {
|
2024-06-29 14:48:34 +01:00
|
|
|
width: 732px;
|
|
|
|
|
max-width: 732px;
|
2024-06-28 06:19:00 +01:00
|
|
|
margin-bottom: 8px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background-color: var(--bg-800);
|
|
|
|
|
}
|
|
|
|
|
|
2024-06-29 14:48:34 +01:00
|
|
|
.post {
|
|
|
|
|
padding: 16px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
transition: background-color .1s;
|
2024-06-28 06:19:00 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post:not(.focused) {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post.focused {
|
|
|
|
|
border: 1px solid color-mix(in srgb, transparent, var(--accent) 20%);
|
|
|
|
|
box-shadow: 0 0 16px color-mix(in srgb, transparent, var(--accent) 20%);
|
|
|
|
|
}
|
|
|
|
|
|
2024-06-29 14:48:34 +01:00
|
|
|
.post:hover {
|
|
|
|
|
background-color: color-mix(in srgb, var(--bg-800), black 5%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-container:has(.post-context) .post {
|
|
|
|
|
padding-top: 40px;
|
|
|
|
|
margin-top: -32px;
|
|
|
|
|
}
|
|
|
|
|
|
2024-06-28 06:19:00 +01:00
|
|
|
:global(.post-reactions) {
|
2024-06-28 08:43:12 +01:00
|
|
|
width: fit-content;
|
2024-06-28 06:19:00 +01:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
2024-06-28 08:43:12 +01:00
|
|
|
gap: 4px;
|
2024-06-28 06:19:00 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:global(.post-actions) {
|
2024-06-28 08:43:12 +01:00
|
|
|
width: fit-content;
|
2024-06-28 06:19:00 +01:00
|
|
|
margin-top: 8px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
2024-06-28 08:43:12 +01:00
|
|
|
gap: 2px;
|
2024-06-28 06:19:00 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-container :global(.emoji) {
|
|
|
|
|
height: 20px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
