From 8a1ac197778aaf654472788d10461c855dca3b10 Mon Sep 17 00:00:00 2001
From: multiple creatures <dev@multiple-creature.party>
Date: Thu, 16 May 2019 15:41:49 -0500
Subject: [PATCH] when autoplay is off play animated emoji on hover

---
 .../flavours/glitch/styles/components/emoji.scss   | 14 ++++++++++++++
 app/javascript/flavours/glitch/util/emoji/index.js |  7 +++++--
 app/views/layouts/application.html.haml            |  1 +
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss
index dd386d698..2d1395e4f 100644
--- a/app/javascript/flavours/glitch/styles/components/emoji.scss
+++ b/app/javascript/flavours/glitch/styles/components/emoji.scss
@@ -11,6 +11,20 @@
   }
 }
 
+.hoverplay {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0 0;
+}
+
+.hoverplay:hover {
+  background-size: contain;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding-left: 16px;
+}
+
 .emoji-picker-dropdown__menu {
   background: $simple-background-color;
   position: absolute;
diff --git a/app/javascript/flavours/glitch/util/emoji/index.js b/app/javascript/flavours/glitch/util/emoji/index.js
index 82a1ef89c..2205cd7a3 100644
--- a/app/javascript/flavours/glitch/util/emoji/index.js
+++ b/app/javascript/flavours/glitch/util/emoji/index.js
@@ -28,8 +28,11 @@ const emojify = (str, customEmojis = {}) => {
         // now got a replacee as ':shortname:'
         // if you want additional emoji handler, add statements below which set replacement and return true.
         if (shortname in customEmojis) {
-          const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
-          replacement = `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
+          if (autoPlayGif) {
+            replacement = `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${customEmojis[shortname].url}" />`;
+          } else {
+            replacement = `<img draggable="false" class="emojione hoverplay" alt="${shortname}" title="${shortname}" src="${customEmojis[shortname].static_url}" style="background-image:url(${customEmojis[shortname].url})" />`;
+          }
           return true;
         }
         return false;
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 387a0f7c3..85094b73d 100755
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -88,6 +88,7 @@
     -if current_account&.user_wants_larger_emoji?
       :css
         .status__content .emojione { width: 32px !important; height: 32px !important }
+        .status__content .hoverplay:hover { padding-left: 32px !important }
 
   %body{ class: body_classes }
     = content_for?(:content) ? yield(:content) : yield