From fbf5c41a563b43754ab39e905d42666f987e6c5b Mon Sep 17 00:00:00 2001 From: Riken Shah Date: Thu, 12 Aug 2021 08:20:50 +0000 Subject: [PATCH] buddy_list: Show still image for animated emojis. This commit changes the behavior of how we show animated emojis in the buddy list. We now show still image of animated emoji and when hovered show the animated emoji. Fixes #19521 --- frontend_tests/node_tests/dispatch.js | 2 +- frontend_tests/node_tests/emoji.js | 14 ++++++++++++-- frontend_tests/node_tests/lib/events.js | 3 ++- static/js/ui_init.js | 20 ++++++++++++++++++++ static/shared/js/emoji.js | 5 +++++ static/templates/user_presence_row.hbs | 6 ++++-- 6 files changed, 44 insertions(+), 6 deletions(-) diff --git a/frontend_tests/node_tests/dispatch.js b/frontend_tests/node_tests/dispatch.js index c4cf323889..6c8a3d9de8 100644 --- a/frontend_tests/node_tests/dispatch.js +++ b/frontend_tests/node_tests/dispatch.js @@ -511,7 +511,7 @@ run_test("realm_emoji", ({override}) => { dispatch(event); // Now emoji.js knows about the spain emoji. - assert_same(emoji.get_realm_emoji_url("spain"), "/some/path/to/spain.png"); + assert_same(emoji.get_realm_emoji_url("spain"), "/some/path/to/spain.gif"); // Make sure our UI modules all got dispatched the same simple way. for (const stub of ui_stubs) { diff --git a/frontend_tests/node_tests/emoji.js b/frontend_tests/node_tests/emoji.js index 6a96e33c4e..f29e9d603e 100644 --- a/frontend_tests/node_tests/emoji.js +++ b/frontend_tests/node_tests/emoji.js @@ -45,7 +45,7 @@ run_test("get_emoji_* API", () => { assert.equal(emoji.get_emoji_codepoint("holiday_tree"), "1f384"); assert.equal(emoji.get_emoji_codepoint("bogus"), undefined); - assert.equal(emoji.get_realm_emoji_url("spain"), "/some/path/to/spain.png"); + assert.equal(emoji.get_realm_emoji_url("spain"), "/some/path/to/spain.gif"); }); run_test("get_emoji_details_by_name", () => { @@ -87,7 +87,17 @@ run_test("get_emoji_details_by_name", () => { emoji_name: "spain", reaction_type: "realm_emoji", emoji_code: "101", - url: "/some/path/to/spain.png", + url: "/some/path/to/spain.gif", + still_url: "/some/path/to/spain.png", + }); + + emoji_name = "green_tick"; + emoji_name = emoji.get_emoji_details_by_name(emoji_name); + assert.deepEqual(emoji_name, { + emoji_name: "green_tick", + reaction_type: "realm_emoji", + emoji_code: "102", + url: "/some/path/to/emoji", }); // Test sending without emoji name. diff --git a/frontend_tests/node_tests/lib/events.js b/frontend_tests/node_tests/lib/events.js index f35d67d72d..59b6c3b29a 100644 --- a/frontend_tests/node_tests/lib/events.js +++ b/frontend_tests/node_tests/lib/events.js @@ -73,7 +73,8 @@ exports.test_realm_emojis = { 101: { id: "101", name: "spain", - source_url: "/some/path/to/spain.png", + source_url: "/some/path/to/spain.gif", + still_url: "/some/path/to/spain.png", deactivated: false, author_id: test_user.user_id, }, diff --git a/static/js/ui_init.js b/static/js/ui_init.js index c2b698385f..8e32599610 100644 --- a/static/js/ui_init.js +++ b/static/js/ui_init.js @@ -150,6 +150,26 @@ function initialize_right_sidebar() { }); $("#right-sidebar-container").html(rendered_sidebar); + + $("#user_presences").on("mouseenter", ".user_sidebar_entry", (e) => { + const status_emoji = $(e.target).closest(".user_sidebar_entry").find("img.status_emoji"); + if (status_emoji.length) { + const animated_url = status_emoji.data("animated-url"); + if (animated_url) { + status_emoji.attr("src", animated_url); + } + } + }); + + $("#user_presences").on("mouseleave", ".user_sidebar_entry", (e) => { + const status_emoji = $(e.target).closest(".user_sidebar_entry").find("img.status_emoji"); + if (status_emoji.length) { + const still_url = status_emoji.data("still-url"); + if (still_url) { + status_emoji.attr("src", still_url); + } + } + }); } function initialize_navbar() { diff --git a/static/shared/js/emoji.js b/static/shared/js/emoji.js index bf353f4031..dfdf999e61 100644 --- a/static/shared/js/emoji.js +++ b/static/shared/js/emoji.js @@ -157,6 +157,7 @@ export function update_emojis(realm_emojis) { id: data.id, emoji_name: data.name, emoji_url: data.source_url, + still_url: data.still_url, deactivated: data.deactivated, }); if (data.deactivated !== true) { @@ -164,6 +165,7 @@ export function update_emojis(realm_emojis) { id: data.id, emoji_name: data.name, emoji_url: data.source_url, + still_url: data.still_url, }); } } @@ -193,6 +195,9 @@ export function get_emoji_details_by_name(emoji_name) { const emoji_code_info = active_realm_emojis.get(emoji_name); emoji_info.emoji_code = emoji_code_info.id; emoji_info.url = emoji_code_info.emoji_url; + if (emoji_code_info.still_url) { + emoji_info.still_url = emoji_code_info.still_url; + } } else { const codepoint = get_emoji_codepoint(emoji_name); if (codepoint === undefined) { diff --git a/static/templates/user_presence_row.hbs b/static/templates/user_presence_row.hbs index 108a21d6f7..0a1e27dda3 100644 --- a/static/templates/user_presence_row.hbs +++ b/static/templates/user_presence_row.hbs @@ -10,8 +10,10 @@ {{#if status_emoji_info.emoji_alt_code}}
 :{{status_emoji_info.emoji_name}}:
{{else}} - {{#if status_emoji_info.url}} - + {{#if status_emoji_info.still_url}} + + {{else if status_emoji_info.url}} + {{else}}
{{/if}}