forked from coracle/flotilla
Fine tune message sending notification
This commit is contained in:
Jon Staab
Generated
+4
-4
@@ -23,7 +23,7 @@
|
||||
"@tiptap/extension-text": "^2.6.6",
|
||||
"@tiptap/suggestion": "^2.6.4",
|
||||
"@types/throttle-debounce": "^5.0.2",
|
||||
"@welshman/app": "~0.0.15",
|
||||
"@welshman/app": "~0.0.16",
|
||||
"@welshman/content": "~0.0.12",
|
||||
"@welshman/dvm": "~0.0.10",
|
||||
"@welshman/feeds": "~0.0.20",
|
||||
@@ -1660,9 +1660,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@welshman/app": {
|
||||
"version": "0.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@welshman/app/-/app-0.0.15.tgz",
|
||||
"integrity": "sha512-rIKJSuWB7uqc1jGtEPEJk/lSFQQVB3qmKESuS55CicBguULljyr0inatSujJo6X3QpN4kLtDLph7gC6HEAWadg==",
|
||||
"version": "0.0.16",
|
||||
"resolved": "https://registry.npmjs.org/@welshman/app/-/app-0.0.16.tgz",
|
||||
"integrity": "sha512-XR60o3iQlMMMvnf8UuSCz5tpMVfR6Ifq/5GGXVlmNF5ngHi0D6NKWoa4r86iJ3Tac3dtl36ZUdzyJksJi618rg==",
|
||||
"dependencies": {
|
||||
"@welshman/dvm": "~0.0.10",
|
||||
"@welshman/feeds": "~0.0.20",
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import {readable, derived} from "svelte/store"
|
||||
import {hash, ellipsize, uniqBy, groupBy, now} from "@welshman/lib"
|
||||
import type {TrustedEvent} from "@welshman/util"
|
||||
import {deriveEvents} from "@welshman/store"
|
||||
import {deriveEvents, throttled} from "@welshman/store"
|
||||
import {PublishStatus} from "@welshman/net"
|
||||
import {
|
||||
publishStatusData,
|
||||
@@ -14,6 +14,7 @@
|
||||
import type {PublishStatusData} from "@welshman/app"
|
||||
import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
|
||||
import {repository} from "@welshman/app"
|
||||
import {slideAndFade} from '@lib/transition'
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Avatar from "@lib/components/Avatar.svelte"
|
||||
import Content from "@app/components/Content.svelte"
|
||||
@@ -38,7 +39,7 @@
|
||||
const rootHints = [rootTag?.[2]].filter(Boolean) as string[]
|
||||
const rootEvent = rootId ? deriveEvent(rootId, rootHints) : readable(null)
|
||||
const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
|
||||
const ps = derived(publishStatusData, $m => Object.values($m[event.id] || {}))
|
||||
const ps = throttled(300, derived(publishStatusData, $m => Object.values($m[event.id] || {})))
|
||||
|
||||
const findStatus = ($ps: PublishStatusData[], statuses: PublishStatus[]) =>
|
||||
$ps.find(({status}) => statuses.includes(status))
|
||||
@@ -89,7 +90,7 @@
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex gap-2">
|
||||
<div class="flex gap-2 w-full">
|
||||
{#if showPubkey}
|
||||
<Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
|
||||
{:else}
|
||||
@@ -103,27 +104,28 @@
|
||||
<span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="text-sm">
|
||||
<div class="text-sm col-1">
|
||||
<Content {event} />
|
||||
{#if isPending}
|
||||
<span class="flex-inline ml-1 gap-1">
|
||||
<span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
|
||||
<div class="flex gap-1 justify-end items-center" transition:slideAndFade>
|
||||
<span class="loading loading-spinner mx-1 h-3 w-3" />
|
||||
<span class="opacity-50">Sending...</span>
|
||||
</span>
|
||||
</div>
|
||||
{:else if failure}
|
||||
<span
|
||||
class="flex-inline tooltip ml-1 cursor-pointer gap-1"
|
||||
data-tip="{failure.message} ({displayRelayUrl(failure.url)})">
|
||||
<Icon icon="danger" class="translate-y-px" size={3} />
|
||||
<div
|
||||
class="flex tooltip cursor-pointer gap-1 justify-end items-center"
|
||||
data-tip="{failure.message} ({displayRelayUrl(failure.url)})"
|
||||
transition:slideAndFade>
|
||||
<Icon icon="danger" size={3} />
|
||||
<span class="opacity-50">Failed to send!</span>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if $reactions.length > 0 || $zaps.length > 0}
|
||||
<div class="ml-12 text-xs">
|
||||
{#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
|
||||
{#each groupBy(e => e.content, uniqBy(e => e.pubkey + e.content, $reactions)).entries() as [content, events]}
|
||||
{@const isOwn = events.some(e => e.pubkey === $pubkey)}
|
||||
{@const onClick = () => onReactionClick(content, events)}
|
||||
<button
|
||||
|
||||
+25
-10
@@ -30,6 +30,8 @@ import {
|
||||
readList,
|
||||
getListTags,
|
||||
asDecryptedEvent,
|
||||
isSignedEvent,
|
||||
hasValidSignature,
|
||||
} from "@welshman/util"
|
||||
import type {TrustedEvent, SignedEvent, PublishedList, List} from "@welshman/util"
|
||||
import {Nip59} from "@welshman/signer"
|
||||
@@ -179,7 +181,21 @@ export const pullConservatively = ({relays, filters}: AppSyncOpts) => {
|
||||
}
|
||||
|
||||
setContext({
|
||||
net: getDefaultNetContext(),
|
||||
net: getDefaultNetContext({
|
||||
isValid: (url: string, event: TrustedEvent) => {
|
||||
if (!isSignedEvent(event) || !hasValidSignature(event)) {
|
||||
return false
|
||||
}
|
||||
|
||||
const roomTags = event.tags.filter(nthEq(0, '~'))
|
||||
|
||||
if (roomTags.length > 0 && !roomTags.some(nthEq(2, url))) {
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
}),
|
||||
app: getDefaultAppContext({
|
||||
dufflepudUrl: DUFFLEPUD_URL,
|
||||
indexerRelays: INDEXER_RELAYS,
|
||||
@@ -252,16 +268,19 @@ export const {
|
||||
// Messages
|
||||
|
||||
export type ChannelMessage = {
|
||||
url: string,
|
||||
room: string
|
||||
event: TrustedEvent
|
||||
}
|
||||
|
||||
export const readMessage = (event: TrustedEvent): Maybe<ChannelMessage> => {
|
||||
const rooms = event.tags.filter(nthEq(0, ROOM)).map(nth(1))
|
||||
const roomTags = event.tags.filter(nthEq(0, ROOM))
|
||||
|
||||
if (rooms.length > 1) return undefined
|
||||
if (roomTags.length !== 1) return undefined
|
||||
|
||||
return {room: rooms[0] || "", event}
|
||||
const [_, room, url] = roomTags[0]
|
||||
|
||||
return {url, room, event}
|
||||
}
|
||||
|
||||
export const channelMessages = deriveEventsMapped<ChannelMessage>(repository, {
|
||||
@@ -283,15 +302,11 @@ export const makeChannelId = (url: string, room: string) => `${url}'${room}`
|
||||
|
||||
export const splitChannelId = (id: string) => id.split("'")
|
||||
|
||||
export const channels = derived([trackerStore, channelMessages], ([$tracker, $channelMessages]) => {
|
||||
export const channels = derived(channelMessages, $channelMessages => {
|
||||
const messagesByChannelId = new Map<string, ChannelMessage[]>()
|
||||
|
||||
for (const message of $channelMessages) {
|
||||
for (const url of $tracker.getRelays(message.event.id)) {
|
||||
const channelId = makeChannelId(url, message.room)
|
||||
|
||||
pushToMapKey(messagesByChannelId, channelId, message)
|
||||
}
|
||||
pushToMapKey(messagesByChannelId, makeChannelId(message.url, message.room), message)
|
||||
}
|
||||
|
||||
return Array.from(messagesByChannelId.entries()).map(([id, messages]) => {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
// @ts-nocheck
|
||||
import {cubicOut} from 'svelte/easing'
|
||||
import type {FlyParams} from "svelte/transition"
|
||||
import {fly as baseFly} from "svelte/transition"
|
||||
|
||||
@@ -5,3 +7,40 @@ export {fade, slide} from "svelte/transition"
|
||||
|
||||
export const fly = (node: Element, params?: FlyParams | undefined) =>
|
||||
baseFly(node, {y: 20, ...params})
|
||||
|
||||
// Copy-pasted and tweaked from slide source code
|
||||
export function slideAndFade(node: any, { delay = 0, duration = 400, easing = cubicOut, axis = 'y' } = {}) {
|
||||
const style = getComputedStyle(node)
|
||||
const opacity = +style.opacity
|
||||
const primary_property = axis === 'y' ? 'height' : 'width'
|
||||
const primary_property_value = parseFloat(style[primary_property])
|
||||
const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right']
|
||||
const capitalized_secondary_properties = secondary_properties.map(
|
||||
(e: string) => `${e[0].toUpperCase()}${e.slice(1)}`
|
||||
)
|
||||
const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`])
|
||||
const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`])
|
||||
const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`])
|
||||
const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`])
|
||||
const border_width_start_value = parseFloat(
|
||||
style[`border${capitalized_secondary_properties[0]}Width`]
|
||||
)
|
||||
const border_width_end_value = parseFloat(
|
||||
style[`border${capitalized_secondary_properties[1]}Width`]
|
||||
)
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: (t: number) =>
|
||||
'overflow: hidden;' +
|
||||
`opacity: ${t};` +
|
||||
`${primary_property}: ${t * primary_property_value}px;` +
|
||||
`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
|
||||
`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
|
||||
`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
|
||||
`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
|
||||
`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
|
||||
`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user