diff --git a/webv2/damus.css b/webv2/damus.css index a5a34ca..cde157e 100644 --- a/webv2/damus.css +++ b/webv2/damus.css @@ -73,6 +73,21 @@ textarea, input { width: 80%; } +.reaction-group { + display: inline-flex; + background-color: rgba(255,255,255,0.15); + padding: 4px; + border-radius: 5px; +} + +.reaction-group img { + margin-left: -8px; +} + +.reaction-emoji { + margin-right: 14px; +} + textarea { width: 100%; } @@ -145,10 +160,18 @@ html { } .pfp { + border-radius: 50%; +} + +.pfp-small { + width: 28px; + height: 28px; +} + +.pfp-normal { + margin: 0 15px 0 15px; width: 60px; height: 60px; - margin: 0 15px 0 15px; - border-radius: 50%; } .comment { @@ -159,7 +182,7 @@ html { /*align-items: center;*/ } -.comment p { +.comment .comment-body { background-color: rgba(255.0,255.0,255.0,0.1); padding: 10px; border-radius: 8px; @@ -167,6 +190,10 @@ html { width: 55%; } +.comment-body p { + margin: 0 0 10px 0; +} + .comment .info { text-align: right; width: 18%; diff --git a/webv2/damus.js b/webv2/damus.js index 6008ca0..cd7bb1c 100644 --- a/webv2/damus.js +++ b/webv2/damus.js @@ -40,6 +40,7 @@ function init_home_model() { notifications: 0, rendered: {}, all_events: {}, + reactions_to: {}, events: [], profiles: {}, last_event_of_kind: {}, @@ -121,12 +122,30 @@ async function damus_web_init() return pool } +function process_reaction_event(model, ev) +{ + let last = {} + + for (const tag of ev.tags) { + if (tag.length >= 2 && (tag[0] === "e" || tag[0] === "p")) + last[tag[0]] = tag[1] + } + + if (last.e && last.p) { + model.reactions_to[last.e] = model.reactions_to[last.e] || new Set() + model.reactions_to[last.e].add(ev.id) + } +} + function process_event(model, ev) { ev.refs = determine_event_refs(ev.tags) const notified = was_pubkey_notified(model.pubkey, ev) ev.notified = notified + if (ev.kind === 7) + process_reaction_event(model, ev) + const last_notified = get_local_state('last_notified_date') if (notified && (last_notified == null || ((ev.created_at*1000) > last_notified))) { set_local_state('last_notified_date', new Date().getTime()) @@ -151,6 +170,11 @@ function was_pubkey_notified(pubkey, ev) return false } +function should_add_to_home(ev) +{ + return ev.kind === 1 || ev.kind === 42 +} + let rerender_home_timer function handle_home_event(ids, model, relay, sub_id, ev) { model.all_events[ev.id] = ev @@ -158,7 +182,9 @@ function handle_home_event(ids, model, relay, sub_id, ev) { switch (sub_id) { case ids.home: process_event(model, ev) - insert_event_sorted(model.events, ev) + + if (should_add_to_home(ev)) + insert_event_sorted(model.events, ev) if (model.realtime) { if (rerender_home_timer) @@ -490,16 +516,17 @@ function can_reply(ev) { return ev.kind === 1 || ev.kind === 42 } +const DEFAULT_PROFILE = { + name: "anon", + display_name: "Anonymous", +} + function render_event(model, ev, opts={}) { if (!opts.is_composing && model.rendered[ev.id]) return "" model.rendered[ev.id] = true - const profile = model.profiles[ev.pubkey] || { - name: "anon", - display_name: "Anonymous", - } + const profile = model.profiles[ev.pubkey] || DEFAULT_PROFILE const delta = time_delta(new Date().getTime(), ev.created_at*1000) - const pk = ev.pubkey const bar = !can_reply(ev) || opts.nobar? "" : render_action_bar(ev) let replying_to = "" @@ -528,15 +555,79 @@ function render_event(model, ev, opts={}) {
+
+ ${format_content(ev)} +
+ ${render_reactions(model, ev)} + ${bar} +