mirror of
https://github.com/fly-apps/live_beats.git
synced 2024-11-13 11:41:00 +00:00
Show connection status flash
This commit is contained in:
parent
6849e108d7
commit
8ee6b39ad5
3 changed files with 42 additions and 1 deletions
|
@ -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:
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -144,6 +144,9 @@
|
|||
|
||||
<.flash flash={@flash} kind={:info}/>
|
||||
<.flash flash={@flash} kind={:error}/>
|
||||
<.connection_status>
|
||||
Re-establishing connection...
|
||||
</.connection_status>
|
||||
|
||||
<%= @inner_content %>
|
||||
</main>
|
||||
|
|
Loading…
Reference in a new issue