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

@@ -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) {

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.

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,
     },

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() {

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) {

static/templates/user_presence_row.hbs

@@ -10,8 +10,10 @@
                 {{#if status_emoji_info.emoji_alt_code}}
                     <div class="emoji_alt_code">&nbsp:{{status_emoji_info.emoji_name}}:</div>
                 {{else}}
-                    {{#if status_emoji_info.url}}
-                    <img src="{{status_emoji_info.url}}" class="emoji status_emoji" />
+                    {{#if status_emoji_info.still_url}}
+                    <img src="{{status_emoji_info.still_url}}" class="emoji status_emoji" data-animated-url="{{status_emoji_info.url}}" data-still-url="{{status_emoji_info.still_url}}" />
+                    {{else if status_emoji_info.url}}
+                    <img src="{{status_emoji_info.url}}" class="emoji status_emoji" data-animated-url="{{status_emoji_info.url}}" data-still-url="{{status_emoji_info.still_url}}" />
                     {{else}}
                     <div class="emoji status_emoji emoji-{{status_emoji_info.emoji_code}}"></div>
                     {{/if}}