Optimize resource usage of the manager when attendees join the event

CHANGELOG.md

@@ -5,7 +5,7 @@
 - Fix OIDC to allow only client_secret_basic and client_secret_post auth methods
 - Fix minimum length for 2 characters messages
 - Fix poll option order
-- Fix translations
+- Fix translations for current interactions
 - Improve poll results UI
 - Optimize resource usage of the manager when attendees join the event
 

assets/js/app.js

@@ -316,6 +316,13 @@ Hooks.Pickr = {
     this.pickr.destroy();
   },
 };
+Hooks.UpdateAttendees = {
+  mounted() {
+    this.handleEvent("update-attendees", ({ count }) => {
+      this.el.textContent = count;
+    });
+  },
+};
 Hooks.Presenter = {
   mounted() {
     this.presenter = new Presenter(this);

lib/claper_web/live/event_live/embed_component.ex

@@ -17,21 +17,17 @@ defmodule ClaperWeb.EventLive.EmbedComponent do
           <div class="text-white flex space-x-2 items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
+              fill="none"
               viewBox="0 0 24 24"
               stroke-width="1.5"
               stroke="currentColor"
-              fill="none"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              class="h-6 w-6"
             >
-              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-              <path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path>
-              <path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path>
-              <path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path>
-              <path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path>
-              <path d="M17 12h.01"></path>
-              <path d="M13 12h.01"></path>
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"
+              />
             </svg>
             <span class="font-bold"><%= gettext("See current web content") %></span>
           </div>

lib/claper_web/live/event_live/manage.ex

@@ -86,7 +86,7 @@ defmodule ClaperWeb.EventLive.Manage do
   @impl true
   def handle_info(%{event: "presence_diff"}, %{assigns: %{event: event}} = socket) do
     attendees = Presence.list("event:#{event.uuid}")
-    {:noreply, assign(socket, :attendees_nb, Enum.count(attendees))}
+    {:noreply, push_event(socket, "update-attendees", %{count: Enum.count(attendees)})}
   end
 
   @impl true

lib/claper_web/live/event_live/manage.html.heex

@@ -402,7 +402,9 @@
                   clip-rule="evenodd"
                 />
               </svg>
-              <span><%= @attendees_nb %></span>
+              <span id="attendees-count" phx-update="ignore" phx-hook="UpdateAttendees">
+                <%= @attendees_nb %>
+              </span>
             </div>
           </div>
         </div>

lib/claper_web/live/event_live/poll_component.ex

@@ -53,7 +53,7 @@ defmodule ClaperWeb.EventLive.PollComponent do
           <% end %>
         </div>
         <div>
-          <div class="flex flex-col space-y-3">
+          <div class="flex flex-col space-y-3 overflow-y-auto max-h-[500px]">
             <%= if (length @poll.poll_opts) > 0 do %>
               <%= for {opt, idx} <- Enum.with_index(@poll.poll_opts) do %>
                 <%= if (length @current_poll_vote) > 0 do %>
@@ -123,14 +123,14 @@ defmodule ClaperWeb.EventLive.PollComponent do
           </div>
 
           <%= if (length @selected_poll_opt) == 0 || (length @current_poll_vote) > 0 do %>
-            <button class="px-3 py-2 text-white font-semibold bg-gray-500 rounded-md mt-3 mb-12 cursor-default">
+            <button class="px-3 py-2 text-white font-semibold bg-gray-500 rounded-md mt-3 mb-4 cursor-default">
               <%= gettext("Vote") %>
             </button>
           <% else %>
             <button
               phx-click="vote"
               phx-disable-with="..."
-              class="px-3 py-2 text-white font-semibold bg-primary-500 hover:bg-primary-600 rounded-md mt-3 mb-12"
+              class="px-3 py-2 text-white font-semibold bg-primary-500 hover:bg-primary-600 rounded-md mt-3 mb-4"
             >
               <%= gettext("Vote") %>
             </button>

lib/claper_web/live/event_live/presenter.ex

@@ -84,7 +84,7 @@ defmodule ClaperWeb.EventLive.Presenter do
   @impl true
   def handle_info(%{event: "presence_diff"}, %{assigns: %{event: event}} = socket) do
     attendees = Presence.list("event:#{event.uuid}")
-    {:noreply, assign(socket, :attendees_nb, Enum.count(attendees))}
+    {:noreply, push_event(socket, "update-attendees", %{count: Enum.count(attendees)})}
   end
 
   @impl true

lib/claper_web/live/event_live/presenter.html.heex

@@ -234,7 +234,9 @@
 
     <div class="inline-flex justify-between items-center text-white text-2xl">
       <img src="/images/icons/online-users.svg" class="h-12 mr-2" />
-      <span id="counter"><%= @attendees_nb %></span>
+      <span id="counter" phx-hook="UpdateAttendees" phx-update="ignore">
+        <%= @attendees_nb %>
+      </span>
     </div>
   </div>
 </div>

lib/claper_web/live/event_live/show.ex

@@ -166,7 +166,7 @@ defmodule ClaperWeb.EventLive.Show do
   def handle_info(%{event: "presence_diff"}, %{assigns: %{event: event}} = socket) do
     attendees = Presence.list("event:#{event.uuid}")
 
-    {:noreply, assign(socket, :attendees_nb, Enum.count(attendees))}
+    {:noreply, push_event(socket, "update-attendees", %{count: Enum.count(attendees)})}
   end
 
   @impl true

lib/claper_web/live/event_live/show.html.heex

@@ -50,7 +50,9 @@
 
         <div class="inline-flex justify-between items-center text-white text-sm">
           <img src="/images/icons/online-users.svg" class="h-6 mr-2" />
-          <span id="counter"><%= @attendees_nb %></span>
+          <span id="counter" phx-update="ignore" phx-hook="UpdateAttendees">
+            <%= @attendees_nb %>
+          </span>
         </div>
       </div>
     </div>