From 07d1dbf744ee7e1ecb2c5eb656d27c6a0ef797eb Mon Sep 17 00:00:00 2001
From: Chris McCord <chris@chrismccord.com>
Date: Fri, 19 Nov 2021 09:55:26 -0500
Subject: [PATCH] Fixup flash hiding

---
 assets/js/app.js                        | 28 +++++++++++++------------
 lib/live_beats_web/live/live_helpers.ex |  6 ++----
 mix.lock                                |  2 +-
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 04aa4b2..34316da 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -12,6 +12,19 @@ let execJS = (selector, attr) => {
 
 let Hooks = {}
 
+Hooks.Flash = {
+  mounted(){
+    let hide = () => liveSocket.execJS(this.el, this.el.getAttribute("phx-click"))
+    this.timer = setTimeout(() => hide(), 8000)
+    this.el.addEventListener("phx:hide-start", () => clearTimeout(this.timer))
+    this.el.addEventListener("mouseover", () => {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => hide(), 8000)
+    })
+  },
+  destroyed(){ clearTimeout(this.timer) }
+}
+
 Hooks.Menu = {
   getAttr(name){
     let val = this.el.getAttribute(name)
@@ -78,17 +91,6 @@ Hooks.Menu = {
   }
 }
 
-Hooks.Flash = {
-	mounted(){
-    let hide = () => this.el.click()
-    let timer = setTimeout(() => hide(), 8000)
-    this.el.addEventListener("mouseover", () => {
-      clearTimeout(timer)
-      timer = setTimeout(() => hide(), 8000)
-    })
-	}
-}
-
 Hooks.AudioPlayer = {
   mounted(){
     this.playbackBeganAt = null
@@ -159,7 +161,7 @@ Hooks.AudioPlayer = {
       clearInterval(this.progressTimer)
       return
     }
-		this.progress.style.width = `${(this.player.currentTime / (this.player.duration) * 100)}%`
+    this.progress.style.width = `${(this.player.currentTime / (this.player.duration) * 100)}%`
     this.duration.innerText = this.formatTime(this.player.duration)
     this.currentTime.innerText = this.formatTime(this.player.currentTime)
   },
@@ -169,7 +171,7 @@ Hooks.AudioPlayer = {
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
-	hooks: Hooks,
+  hooks: Hooks,
   params: {_csrf_token: csrfToken}
 })
 
diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex
index 467f6f4..c0b0690 100644
--- a/lib/live_beats_web/live/live_helpers.ex
+++ b/lib/live_beats_web/live/live_helpers.ex
@@ -22,9 +22,8 @@ defmodule LiveBeatsWeb.LiveHelpers do
       <div
         id="flash"
         class="rounded-md bg-green-50 p-4 top-0 right-0 w-96 fade-in-scale"
-        phx-click="lv:clear-flash"
+        phx-click={JS.push("lv:clear-flash") |> JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")}
         phx-value-key="error"
-        phx-remove={JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")}
         phx-hook="Flash"
       >
         <div class="flex">
@@ -55,9 +54,8 @@ defmodule LiveBeatsWeb.LiveHelpers do
       <div
         id="flash"
         class="rounded-md bg-green-50 p-4 fixed top-1 right-1 w-96 fade-in-scale"
-        phx-click="lv:clear-flash"
+        phx-click={JS.push("lv:clear-flash") |> JS.remove_class("fade-in-scale") |> hide("#flash")}
         phx-value-key="info"
-        phx-remove={JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")}
         phx-hook="Flash"
       >
         <div class="flex">
diff --git a/mix.lock b/mix.lock
index f25a8ac..592a856 100644
--- a/mix.lock
+++ b/mix.lock
@@ -25,7 +25,7 @@
   "phoenix_html": {:hex, :phoenix_html, "3.1.0", "0b499df05aad27160d697a9362f0e89fa0e24d3c7a9065c2bd9d38b4d1416c09", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "0c0a98a2cefa63433657983a2a594c7dee5927e4391e0f1bfd3a151d1def33fc"},
   "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.5.0", "3282d8646e1bfc1ef1218f508d9fcefd48cf47f9081b7667bd9b281b688a49cf", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.6", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:phoenix_live_view, "~> 0.16.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "609740be43de94ae0abd2c4300ff0356a6e8a9487bf340e69967643a59fa7ec8"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.3.3", "3a53772a6118d5679bf50fc1670505a290e32a1d195df9e069d8c53ab040c054", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "766796676e5f558dbae5d1bdb066849673e956005e3730dfd5affd7a6da4abac"},
-  "phoenix_live_view": {:git, "https://github.com/phoenixframework/phoenix_live_view.git", "2721a80d47828e34a11332cea0b159c1e4a6e38b", []},
+  "phoenix_live_view": {:git, "https://github.com/phoenixframework/phoenix_live_view.git", "5409845a27938924c0d9a6267b498438a9103295", []},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.0.0", "a1ae76717bb168cdeb10ec9d92d1480fec99e3080f011402c0a2d68d47395ffb", [:mix], [], "hexpm", "c52d948c4f261577b9c6fa804be91884b381a7f8f18450c5045975435350f771"},
   "phoenix_view": {:hex, :phoenix_view, "1.0.0", "fea71ecaaed71178b26dd65c401607de5ec22e2e9ef141389c721b3f3d4d8011", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "82be3e2516f5633220246e2e58181282c71640dab7afc04f70ad94253025db0c"},
   "plug": {:hex, :plug, "1.12.1", "645678c800601d8d9f27ad1aebba1fdb9ce5b2623ddb961a074da0b96c35187d", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "d57e799a777bc20494b784966dc5fbda91eb4a09f571f76545b72a634ce0d30b"},