Move audio enabling entirely to client

This commit is contained in:
Chris McCord 2021-11-08 14:32:40 -05:00
parent 6358b0bb3b
commit 17db535839
3 changed files with 20 additions and 21 deletions

View file

@ -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(){

View file

@ -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

View file

@ -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