forked from blisstown/campfire
69 lines
2.2 KiB
Svelte
69 lines
2.2 KiB
Svelte
<script>
|
|
import * as api from '$lib/api.js';
|
|
import { server, capabilities } from '$lib/client/server.js';
|
|
import { app } from '$lib/client/app.js';
|
|
import { account } from '@cf/store/account';
|
|
import { parseReactions } from '$lib/post.js';
|
|
|
|
import ReactionButton from './ReactionButton.svelte';
|
|
import ReactIcon from '../../../img/icons/react.svg';
|
|
|
|
export let post;
|
|
|
|
async function toggleReaction(reaction) {
|
|
if (!$app || !$app.token) return;
|
|
|
|
if (
|
|
reaction.name.includes('@') &&
|
|
!$server.capabilities.includes(capabilities.FOREIGN_REACTIONS)
|
|
) return;
|
|
|
|
let data;
|
|
if (reaction.me)
|
|
data = await api.unreactPost($server.host, $app.token, post.id, reaction.name);
|
|
else
|
|
data = await api.reactPost($server.host, $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 = parseReactions(data.reactions);
|
|
}
|
|
</script>
|
|
|
|
<div class="post-reactions" aria-label="Reactions" on:mouseup|stopPropagation on:keydown|stopPropagation>
|
|
{#each post.reactions as reaction}
|
|
<ReactionButton
|
|
type="reaction"
|
|
on:click={() => toggleReaction(reaction)}
|
|
bind:active={reaction.me}
|
|
bind:count={reaction.count}
|
|
disabled={!$account || (reaction.name.includes('@') && !$server.capabilities.includes(capabilities.FOREIGN_REACTIONS))}
|
|
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>
|
|
{/each}
|
|
<ReactionButton disabled>
|
|
<ReactIcon/>
|
|
</ReactionButton>
|
|
</div>
|
|
|
|
<style>
|
|
.post-reactions {
|
|
width: fit-content;
|
|
min-height: 32px;
|
|
margin-top: 8px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
</style>
|