From 17db535839e8a7b4b60fd025b647e0b540e1bd59 Mon Sep 17 00:00:00 2001
From: Chris McCord <chris@chrismccord.com>
Date: Mon, 8 Nov 2021 14:32:40 -0500
Subject: [PATCH] Move audio enabling entirely to client

---
 assets/js/app.js                        |  9 +++++----
 lib/live_beats_web/live/live_helpers.ex |  7 ++++++-
 lib/live_beats_web/live/player_live.ex  | 25 +++++++++----------------
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 2185384..88df096 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -5,6 +5,10 @@ import topbar from "../vendor/topbar"
 
 let nowSeconds = () => Math.round(Date.now() / 1000)
 
+let execJS = (selector, attr) => {
+  document.querySelectorAll(selector).forEach(el => liveSocket.execJS(el, el.getAttribute(attr)))
+}
+
 let Hooks = {}
 
 Hooks.Progress = {
@@ -60,10 +64,7 @@ Hooks.AudioPlayer = {
     this.player.play().then(() => {
       if(sync){ this.player.currentTime = nowSeconds() - this.playbackBeganAt }
       this.progressTimer = setInterval(() => this.updateProgress(), 100)
-      this.pushEvent("audio-accepted", {})
-    }, error => {
-      this.pushEvent("audio-rejected", {})
-    })
+    }, error => execJS("#enable-audio", "data-js-show"))
   },
 
   pause(){
diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex
index 375fcdf..115a2a8 100644
--- a/lib/live_beats_web/live/live_helpers.ex
+++ b/lib/live_beats_web/live/live_helpers.ex
@@ -151,9 +151,10 @@ defmodule LiveBeatsWeb.LiveHelpers do
       |> assign_new(:title, fn -> [] end)
       |> assign_new(:confirm, fn -> [] end)
       |> assign_new(:cancel, fn -> [] end)
+      |> assign_rest(~w(id show patch_to redirect_to on_cancel on_confirm title confirm cancel)a)
 
     ~H"""
-    <div id={@id} class={"fixed z-10 inset-0 overflow-y-auto #{if @show, do: "fade-in", else: "hidden"}"} aria-labelledby="modal-title" role="dialog" aria-modal="true">
+    <div id={@id} class={"fixed z-10 inset-0 overflow-y-auto #{if @show, do: "fade-in", else: "hidden"}"} aria-labelledby="modal-title" role="dialog" aria-modal="true" {@rest}>
       <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
         <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
         <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
@@ -370,4 +371,8 @@ defmodule LiveBeatsWeb.LiveHelpers do
   def js_exec(js \\ %JS{}, to, call, args) do
     JS.dispatch(js, "js:exec", to: to, detail: %{call: call, args: args})
   end
+
+  defp assign_rest(assigns, exclude) do
+    assign(assigns, :rest, assigns_to_attributes(assigns, exclude))
+  end
 end
diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex
index 09dbfd9..cf115e9 100644
--- a/lib/live_beats_web/live/player_live.ex
+++ b/lib/live_beats_web/live/player_live.ex
@@ -86,13 +86,15 @@ defmodule LiveBeatsWeb.PlayerLive do
         </button>
       </div>
 
-      <%= if @error do %>
-        <.modal show id="enable-audio" on_confirm={js_listen_now() |> hide_modal("enable-audio")}>
-          <:title>Start Listening now</:title>
-          Your browser needs a click event to enable playback
-          <:confirm>Listen Now</:confirm>
-        </.modal>
-      <% end %>
+      <.modal
+        id="enable-audio"
+        on_confirm={js_listen_now() |> hide_modal("enable-audio")}
+        data-js-show={show_modal("enable-audio")}
+      >
+        <:title>Start Listening now</:title>
+        Your browser needs a click event to enable playback
+        <:confirm>Listen Now</:confirm>
+      </.modal>
     </div>
     <!-- /player -->
     """
@@ -108,7 +110,6 @@ defmodule LiveBeatsWeb.PlayerLive do
       assign(socket,
         song: nil,
         playing: false,
-        error: false,
         current_user_id: socket.assigns.current_user.id,
         # todo use actual room user id
         room_user_id: socket.assigns.current_user.id
@@ -134,14 +135,6 @@ defmodule LiveBeatsWeb.PlayerLive do
     end
   end
 
-  def handle_event("audio-rejected", _, socket) do
-    {:noreply, assign(socket, error: true)}
-  end
-
-  def handle_event("audio-accepted", _, socket) do
-    {:noreply, assign(socket, error: false)}
-  end
-
   def handle_info(:play_current, socket) do
     # we raced a pubsub, noop
     if socket.assigns.song do