☰

Animated GIFs and Emojis on hover - slack.com

Enables animations on hover if you disable "Allow animated images and emoji" from Slack's accessibility settings / 2022-03-02

// ==UserScript==
// @name        Animated GIFs and Emojis on hover - slack.com
// @description Enables animations on hover if you disable "Allow animated images and emoji" from Slack's accessibility settings / 2022-03-02
// @namespace   Rebane
// @match       https://app.slack.com/client/*
// @grant       none
// @version     1.1
// @author      Rebane
// @license     Unlicense; https://unlicense.org/
// ==/UserScript==

/* Handle animating GIFs when hovering over GIF message attachments. */
document.addEventListener('mouseover', (event) => {
  if (!event.target?.classList.contains("c-message_attachment__image"))
    return;
  if (!event.target.style.backgroundImage.includes(".gu&"))
    return;
  event.target.classList.add("user-activate-animated");
  if (!event.target.dataset?.originalSrc)
    event.target.dataset.originalSrc = event.target.style.backgroundImage;
  event.target.style.backgroundImage = `${event.target.style.backgroundImage.replaceAll(".gu&","&")}, ${event.target.style.backgroundImage}`;
});

document.addEventListener('mouseout', (event) => {
  if (!event.target?.classList.contains("user-activate-animated"))
    return;
  event.target.classList.remove("user-activate-animated");
  event.target.style.backgroundImage = event.target.dataset.originalSrc;
});

/* Handle animating emoji when hovering over a message or the emoji picker. */
document.addEventListener('mouseover', (event) => {
  event.composedPath()
    .filter((elem) => { return elem?.classList?.contains("c-message_kit__message") || elem?.classList?.contains("p-emoji_picker") })
    .forEach((emojiParent) => {
      emojiParent.querySelectorAll("img.c-emoji, .c-emoji > img").forEach((emoji) => {
        if (!emoji.src.endsWith(".gif") || !emoji.src.includes("&o1=gu"))
          return;
        if (!emoji.dataset?.originalSrc)
          emoji.dataset.originalSrc = emoji.src;
        emoji.classList.add("user-activate-animated-emoji");
        emoji.src = emoji.src.replace("&o1=gu","");
      });
      emojiParent.addEventListener('mouseleave', () => {
        emojiParent.querySelectorAll(".user-activate-animated-emoji").forEach((emoji) => {
          emoji.classList.remove("user-activate-animated-emoji");
          emoji.src = emoji.dataset.originalSrc;
        });
      });
    });
});