Show connection status flash

This commit is contained in:
Chris McCord 2021-11-22 09:24:36 -05:00
parent 6849e108d7
commit 8ee6b39ad5
3 changed files with 42 additions and 1 deletions

View file

@ -183,6 +183,8 @@ window.addEventListener("phx:page-loading-stop", info => topbar.hide())
window.addEventListener("js:exec", e => e.target[e.detail.call](...e.detail.args))
// connect if there are any LiveViews on the page
liveSocket.getSocket().onOpen(() => execJS("#connection-status", "js-hide"))
liveSocket.getSocket().onError(() => execJS("#connection-status", "js-show"))
liveSocket.connect()
// expose liveSocket on window for web console debug logs and latency simulation:

View file

@ -16,12 +16,37 @@ defmodule LiveBeatsWeb.LiveHelpers do
Routes.song_index_path(LiveBeatsWeb.Endpoint, :index, profile.username)
end
def connection_status(assigns) do
~H"""
<div
id="connection-status"
class="hidden rounded-md bg-red-50 p-4 fixed top-1 right-1 w-96 fade-in-scale"
js-show={show("#connection-status")}
js-hide={hide("#connection-status")}
>
<div class="flex">
<div class="flex-shrink-0">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-red-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-red-800">
<%= render_slot(@inner_block) %>
</p>
</div>
</div>
</div>
"""
end
def flash(%{kind: :error} = assigns) do
~H"""
<%= if live_flash(@flash, @kind) do %>
<div
id="flash"
class="rounded-md bg-green-50 p-4 top-0 right-0 w-96 fade-in-scale"
class="rounded-md bg-red-50 p-4 fixed top-1 right-1 w-96 fade-in-scale"
phx-click={JS.push("lv:clear-flash") |> JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")}
phx-value-key="error"
phx-hook="Flash"
@ -154,6 +179,17 @@ defmodule LiveBeatsWeb.LiveHelpers do
)
end
def show(js \\ %JS{}, selector) do
JS.show(js,
to: selector,
time: 300,
display: "inline-block",
transition:
{"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
"opacity-100 translate-y-0 sm:scale-100"}
)
end
def hide(js \\ %JS{}, selector) do
JS.hide(js,
to: selector,

View file

@ -144,6 +144,9 @@
<.flash flash={@flash} kind={:info}/>
<.flash flash={@flash} kind={:error}/>
<.connection_status>
Re-establishing connection...
</.connection_status>
<%= @inner_content %>
</main>