Fix minor bugs

CHANGELOG.md

@@ -1,5 +1,19 @@
 ## v2.1.2
 
+### Features
+
+- Add duplicate feature on finished events
+
+### Fixes and improvements
+
+- Improve performance of global reactions
+- Change QR Code background color to white
+- Improve auto scroll of messages on the manager
+- Fix pinning of questions
+- Fix name picker being empty during a reconnect
+- Change wording for more options dropdown and access
+- Fix dropdown position to be on the front of other elements
+
 ## v2.1.1
 
 ### Fixes and improvements

assets/js/app.js

@@ -169,18 +169,27 @@ Hooks.Scroll = {
 
 Hooks.ScrollIntoDiv = {
   mounted() {
-    this.scrollElement(true);
-    this.handleEvent("scroll", this.scrollElement.bind(this));
-  },
-  scrollElement(firstScroll) {
-    let t = this.el.parentElement;
-    if (
-      firstScroll === true ||
-      t.scrollHeight - t.scrollTop - t.clientHeight <= 100
-    ) {
-      t.scrollTo({ top: t.scrollHeight, behavior: "smooth" });
+    let useParent = this.el.dataset.useParent === "true";
+    this.scrollElement = this.el.dataset.useParent === "true" ? this.el.parentElement : this.el;
+    this.checkIfAtBottom();
+    this.scrollToBottom(true);
+    this.handleEvent("scroll", () => this.scrollToBottom());
+    this.scrollElement.addEventListener("scroll", () => this.checkIfAtBottom());
+  },
+  checkIfAtBottom() {
+    this.isAtBottom = this.scrollElement.scrollHeight - this.scrollElement.scrollTop - this.scrollElement.clientHeight <= 30;
+  },
+  scrollToBottom(force = false) {
+    if (force || this.isAtBottom) {
+      this.scrollElement.scrollTo({ top: this.scrollElement.scrollHeight, behavior: "smooth" });
     }
   },
+  updated() {
+    this.scrollToBottom();
+  },
+  destroyed() {
+    this.scrollElement.removeEventListener("scroll", () => this.checkIfAtBottom());
+  }
 };
 
 Hooks.NicknamePicker = {
@@ -192,6 +201,12 @@ Hooks.NicknamePicker = {
 
     this.el.addEventListener("click", (e) => this.clicked(e));
   },
+  reconnected() {
+    let currentNickname = localStorage.getItem("nickname") || "";
+    if (currentNickname.length > 0) {
+      this.pushEvent("set-nickname", { nickname: currentNickname });
+    }
+  },
   destroyed() {
     this.el.removeEventListener("click", (e) => this.clicked(e));
   },
@@ -362,18 +377,37 @@ Hooks.OpenPresenter = {
   },
 };
 Hooks.GlobalReacts = {
+  svgCache: {},
+
   mounted() {
+    this.preloadSVGs();
     this.handleEvent("global-react", (data) => {
-      var img = document.createElement("img");
-      img.src = "/images/icons/" + data.type + ".svg";
-      img.className =
-        "react-animation absolute transform opacity-0" + this.el.className;
-      this.el.appendChild(img);
+      const svgContent = this.svgCache[data.type];
+      if (svgContent) {
+        const container = document.createElement("div");
+        container.innerHTML = svgContent;
+        const svgElement = container.firstChild;
+        svgElement.classList.add("react-animation", "absolute", "transform", "opacity-0");
+        svgElement.classList.add(...this.el.className.split(" "));
+        this.el.appendChild(svgElement);
+      }
     });
     this.handleEvent("reset-global-react", (data) => {
       this.el.innerHTML = "";
     });
   },
+
+  preloadSVGs() {
+    const svgTypes = ["heart", "hundred", "clap", "raisehand"];
+    svgTypes.forEach(type => {
+      fetch(`/images/icons/${type}.svg`)
+        .then(response => response.text())
+        .then(svgContent => {
+          this.svgCache[type] = svgContent;
+        })
+        .catch(error => console.error(`Error loading SVG for ${type}:`, error));
+    });
+  }
 };
 Hooks.JoinEvent = {
   mounted() {
@@ -461,10 +495,10 @@ Hooks.QRCode = {
         },
         dotsOptions: {
           type: "square",
-          color: "#ffffff",
+          color: "#000000",
         },
         backgroundOptions: {
-          color: "#000000",
+          color: "#ffffff",
         },
         imageOptions: {
           crossOrigin: "anonymous",
@@ -565,16 +599,6 @@ window.addEventListener("phx:page-loading-stop", (info) => {
   topbar.hide();
 });
 
-const renderOnlineUsers = function (presences) {
-  let onlineUsers = Presence.list(
-    presences,
-    (_id, { metas: [user, ...rest] }) => {
-      return onlineUserTemplate(user);
-    }
-  ).join("");
-
-  document.querySelector("body").innerHTML = onlineUsers;
-};
 
 const onlineUserTemplate = function (user) {
   return `
@@ -587,7 +611,6 @@ const onlineUserTemplate = function (user) {
 let presences = {};
 liveSocket.on("presence_state", (state) => {
   presences = Presence.syncState(presences, state);
-  renderOnlineUsers(presences);
 });
 
 // connect if there are any LiveViews on the page

assets/js/manager.js

@@ -63,8 +63,16 @@ export class Manager {
       let originalSnap = localStorage.getItem("preview-position");
       if (originalSnap) {
         let snaps = originalSnap.split(":");
-        preview.style.left = `${snaps[0]}px`;
-        preview.style.top = `${snaps[1]}px`;
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const previewWidth = preview.offsetWidth;
+        const previewHeight = preview.offsetHeight;
+
+        const left = Math.min(Math.max(parseInt(snaps[0]), 0), windowWidth - previewWidth);
+        const top = Math.min(Math.max(parseInt(snaps[1]), 0), windowHeight - previewHeight);
+
+        preview.style.left = `${left}px`;
+        preview.style.top = `${top}px`;
       }
 
       const startDrag = (e) => {

config/dev.exs

@@ -35,7 +35,8 @@ config :claper, ClaperWeb.Endpoint,
       ~r"priv/static/[^uploads].*(js|css|png|jpeg|jpg|gif|svg)$",
       ~r"priv/gettext/.*(po)$",
       ~r"lib/claper_web/(live|views)/.*(ex)$",
-      ~r"lib/claper_web/templates/.*(eex)$"
+      ~r"lib/claper_web/templates/.*(eex)$",
+      ~r"assets/.*\.(js|css)$"
     ]
   ]
 

lib/claper/events.ex

@@ -398,7 +398,7 @@ defmodule Claper.Events do
 
            attrs =
              Map.from_struct(original_event)
-             |> Map.drop([:id, :inserted_at, :updated_at, :presentation_file])
+             |> Map.drop([:id, :inserted_at, :updated_at, :presentation_file, :expired_at])
              |> Map.put(:leaders, [])
              |> Map.put(:code, "#{new_code}")
              |> Map.put(:name, "#{original_event.name} (Copy)")

lib/claper_web/live/event_live/event_card_component.ex

@@ -82,7 +82,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                   phx-target={@myself}
                   class="flex w-full lg:w-auto pl-3 pr-4 text-white items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline hover:bg-primary-600 bg-primary-500"
                 >
-                  <span class="mr-2"><%= gettext("Access") %></span>
+                  <span class="mr-2"><%= gettext("Join") %></span>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -101,7 +101,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                 <div
                   phx-hook="Dropdown"
                   id={"dropdown-#{@event.uuid}"}
-                  class="hidden rounded shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max"
+                  class="hidden rounded shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max z-30"
                 >
                   <ul>
                     <li>
@@ -172,7 +172,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                   >
                     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                   </svg>
-                  <span><%= gettext("Terminate") %></span>
+                  <span><%= gettext("End") %></span>
                 </.link>
               </div>
               <div class="flex items-start gap-x-2 relative text-sm ">
@@ -183,7 +183,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                     phx-target={@myself}
                     class="flex w-full lg:w-auto pl-3 pr-4 text-gray-700 items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline hover:bg-gray-300 bg-gray-200"
                   >
-                    <span class="mr-2"><%= gettext("Action") %></span>
+                    <span class="mr-2"><%= gettext("More options") %></span>
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       fill="none"
@@ -202,7 +202,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                   <div
                     phx-hook="Dropdown"
                     id={"dropdown-action-#{@event.uuid}"}
-                    class="hidden rounded shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max font-medium text-sm"
+                    class="hidden rounded shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max font-medium text-sm z-30"
                   >
                     <ul>
                       <li>
@@ -263,7 +263,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                     phx-target={@myself}
                     class="flex w-full lg:w-auto pl-3 pr-4 text-gray-700 items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline hover:bg-gray-300 bg-gray-200"
                   >
-                    <span class="mr-2"><%= gettext("Action") %></span>
+                    <span class="mr-2"><%= gettext("More options") %></span>
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       fill="none"
@@ -352,7 +352,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                   phx-target={@myself}
                   class="flex w-full lg:w-auto pl-3 pr-4 text-gray-700 items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline hover:bg-gray-300 bg-gray-200"
                 >
-                  <span class="mr-2"><%= gettext("Action") %></span>
+                  <span class="mr-2"><%= gettext("More options") %></span>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -371,9 +371,27 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                 <div
                   phx-hook="Dropdown"
                   id={"dropdown-action-#{@event.uuid}"}
-                  class="hidden rounded shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max font-medium text-sm"
+                  class="hidden rounded shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max font-medium text-sm z-30"
                 >
                   <ul>
+                    <li>
+                      <button
+                        phx-value-id={@event.uuid}
+                        phx-click="duplicate"
+                        class="py-2 px-2 rounded text-gray-600 hover:bg-gray-100 flex items-center gap-x-2"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          class="w-5 h-5"
+                        >
+                          <path d="M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" />
+                          <path d="M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" />
+                        </svg>
+                        <span><%= gettext("Duplicate") %></span>
+                      </button>
+                    </li>
                     <li>
                       <.link
                         phx-click="delete"

lib/claper_web/live/event_live/manage.ex

@@ -152,6 +152,7 @@ defmodule ClaperWeb.EventLive.Manage do
       socket
       |> stream_insert(:posts, post)
       |> stream_insert(:pinned_posts, post)
+      |> stream_insert(:questions, post)
       |> assign(:pinned_post_count, socket.assigns.pinned_post_count + 1)
 
     {:noreply, updated_socket}
@@ -163,6 +164,7 @@ defmodule ClaperWeb.EventLive.Manage do
       socket
       |> stream_insert(:posts, post)
       |> stream_delete(:pinned_posts, post)
+      |> stream_insert(:questions, post)
       |> assign(:pinned_post_count, socket.assigns.pinned_post_count - 1)
 
     {:noreply, updated_socket}

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

@@ -298,43 +298,6 @@
             />
           </div>
         <% end %>
-
-        <%= if @create == "import" do %>
-          <div class="scroll-py-3 overflow-y-auto bg-gray-100 p-3">
-            <p class="text-xl font-bold">
-              <%= gettext("Select presentation") %>
-            </p>
-            <ul>
-              <%= for event <- @events do %>
-                <li class="my-3">
-                  <button
-                    phx-click="import"
-                    phx-value-event={event.uuid}
-                    class="bg-blue-500 text-white flex gap-x-2 items-center px-2 py-1 rounded-md"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="w-5 h-5"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
-                      />
-                    </svg>
-                    <span>
-                      <%= event.name %>
-                    </span>
-                  </button>
-                </li>
-              <% end %>
-            </ul>
-          </div>
-        <% end %>
       </div>
     </div>
   </div>
@@ -1246,6 +1209,7 @@
                   id="question-list"
                   class="overflow-y-auto pb-5 px-3"
                   phx-update="stream"
+                  data-use-parent="true"
                   phx-hook="ScrollIntoDiv"
                 >
                   <.live_component

lib/claper_web/live/event_live/post_component.ex

@@ -64,7 +64,7 @@ defmodule ClaperWeb.EventLive.PostComponent do
 
           <div
             id={"post-menu-#{@post.id}"}
-            class="hidden absolute right-4 top-7 bg-white rounded-lg px-5 py-2"
+            class="hidden absolute right-4 top-7 bg-white rounded-lg px-5 py-2 animate__faster"
           >
             <span class="text-red-500">
               <%= link(gettext("Delete"),

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

@@ -21,7 +21,7 @@
     id="joinScreen"
     class={"#{if @state.join_screen_visible, do: "opacity-100 z-40", else: "opacity-0"} h-full w-full flex flex-col justify-center bg-black absolute transition-opacity"}
   >
-    <div class="h-full bg-black text-white bg-opacity-50 text-center flex flex-col items-center justify-center">
+    <div class="h-full bg-white text-black text-center flex flex-col items-center justify-center">
       <span class="font-semibold mb-10 sm:text-3xl md:text-4xl lg:text-6xl">
         <%= gettext("Scan to interact in real-time") %>
       </span>
@@ -216,7 +216,7 @@
               />
             <% else %>
               <img
-                class="w-full max-h-screen mx-auto inline-block"
+                class=" max-h-screen !w-auto"
                 src={"https://#{Application.get_env(:claper, :presentations) |> Keyword.get(:aws_bucket)}.s3.#{Application.get_env(:ex_aws, :region)}.amazonaws.com/presentations/#{@event.presentation_file.hash}/#{index}.jpg"}
               />
             <% end %>

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

@@ -10,7 +10,7 @@
 
       <div
         id="side-menu"
-        class="hidden fixed h-screen w-64 bg-white rounded-r-lg flex z-30 px-4 flex-col justify-start lg:left-0"
+        class="hidden fixed h-screen w-64 bg-white rounded-r-lg flex z-30 px-4 flex-col justify-start lg:left-0 animate__faster"
       >
         <div>
           <img src="/images/logo-large-black.svg" class="h-16 my-3" />
@@ -158,7 +158,7 @@
 
     <div
       id="nickname-popup"
-      class="hidden fixed bottom-0 h-36 w-full lg:w-1/3 lg:mx-auto bg-black text-white z-40 shadow-md rounded-md p-4 flex flex-col gap-y-2"
+      class="hidden fixed bottom-0 h-36 w-full lg:w-1/3 lg:mx-auto bg-black text-white z-40 shadow-md rounded-md p-4 flex flex-col gap-y-2 animate__faster"
     >
       <%= if @state.anonymous_chat_enabled do %>
         <button