Subscribe to reactions and show confetti animations when other people…

… react (#23)
cesium · May 10, 2022 · 092ab73 · 092ab73
1 parent f25e763
commit 092ab73
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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;"