From 092ab73b6b17dc58e5437e2c5e293d58b2ba6772 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nelson=20Estev=C3=A3o?= <nelsonmestevao@gmail.com>
Date: Tue, 10 May 2022 20:14:11 +0100
Subject: [PATCH] Subscribe to reactions and show confetti animations when
 other people react (#23)

---
 assets/js/app.js                              | 21 +++++++++++++++++++
 lib/karaokium_web/live/karaoke_live/show.ex   | 16 ++++++++++++++
 .../live/karaoke_live/show.html.heex          |  2 ++
 3 files changed, 39 insertions(+)

diff --git a/assets/js/app.js b/assets/js/app.js
index b14b507..9a96bb3 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -36,6 +36,27 @@ let liveSocket = new LiveSocket("/karaokium/live", Socket, {
   params: { _csrf_token: csrfToken },
 });
 
+function reaction(emoji) {
+  let elem = document.getElementById("cover-album")
+  reactions(elem, emoji);
+}
+
+window.addEventListener("phx:likes-reactions", (e) => {
+  reaction("👍")
+});
+
+window.addEventListener("phx:hearts-reactions", (e) => {
+  reaction("❤️")
+});
+
+window.addEventListener("phx:confettis-reactions", (e) => {
+  reaction("🎉")
+});
+
+window.addEventListener("phx:stars-reactions", (e) => {
+  reaction("⭐️")
+});
+
 // Show progress bar on live navigation and form submits. Only displays if still
 // loading after 120 msec
 topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
diff --git a/lib/karaokium_web/live/karaoke_live/show.ex b/lib/karaokium_web/live/karaoke_live/show.ex
index 2bc8ea3..dd5c90b 100644
--- a/lib/karaokium_web/live/karaoke_live/show.ex
+++ b/lib/karaokium_web/live/karaoke_live/show.ex
@@ -59,6 +59,22 @@ defmodule KaraokiumWeb.KaraokeLive.Show do
     {:noreply, reload(socket)}
   end
 
+  @impl true
+  def handle_info({:created, %Polling.Reaction{emoji: emoji}}, socket) do
+    key = case emoji do
+      :"👍" -> "likes-reactions"
+      :"❤️" -> "hearts-reactions"
+      :"🎉" -> "confettis-reactions"
+      :"⭐️" -> "stars-reactions"
+      _ -> "confettis-reactions"
+    end
+
+    {:noreply,
+     socket
+     |> push_event(key, %{emoji: emoji})
+     |> reload()}
+  end
+
   @impl true
   def handle_info({event, _changes}, socket) when event in [:updated, :created, :deleted] do
     {:noreply, reload(socket)}
diff --git a/lib/karaokium_web/live/karaoke_live/show.html.heex b/lib/karaokium_web/live/karaoke_live/show.html.heex
index cce684c..cae1f9b 100644
--- a/lib/karaokium_web/live/karaoke_live/show.html.heex
+++ b/lib/karaokium_web/live/karaoke_live/show.html.heex
@@ -4,6 +4,7 @@
       <section style="margin-top: -50px;">
         <aside style="padding: 0;">
           <img
+            id="cover-album"
             style="border-radius: 4px 4px 0 0;"
             alt={@karaoke.performing.song.album.name}
             src={hd(@karaoke.performing.song.album.images).url}
@@ -46,6 +47,7 @@
           <% else %>
             <div class="button" onmousedown={"reactions(this, '#{emoji}')"}>
               <button
+                phx-throttle="1000"
                 phx-click="react"
                 phx-value-emoji={emoji}
                 style="background-color: #f08f6d; font-size: 20px; padding: 10px; margin: 10px;"