diff --git a/assets/js/app.js b/assets/js/app.js index 8291029..ac40e7d 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -18,12 +18,12 @@ // Include phoenix_html to handle method=PUT/DELETE in forms and buttons. import "phoenix_html" // Establish Phoenix Socket and LiveView configuration. -import { Socket } from "phoenix" +import CustomSocket from "./custom_socket" import { LiveSocket } from "phoenix_live_view" import topbar from "../vendor/topbar" let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") -let liveSocket = new LiveSocket("/live", Socket, { +let liveSocket = new LiveSocket("/live", CustomSocket, { longPollFallbackMs: 2500, params: { _csrf_token: csrfToken }, }) diff --git a/assets/js/custom_socket.js b/assets/js/custom_socket.js new file mode 100644 index 0000000..81314a9 --- /dev/null +++ b/assets/js/custom_socket.js @@ -0,0 +1,20 @@ +import { Socket } from "phoenix" + +export default class CustomSocket extends Socket { + // Adapted from https://github.com/phoenixframework/phoenix/tree/v1.7.14/assets/js/phoenix + onConnClose = function (event) { + let closeCode = event && event.code + if (this.hasLogger()) this.log("transport", "close", event) + + // Extra closeCodes handling for Firefox + // see https://github.com/phoenixframework/phoenix/pull/5735#issuecomment-2167196419 + if (closeCode == 1000 || closeCode == 1001) this.channels.forEach((c) => c.leave()) + + this.triggerChanError() + this.clearHeartbeats() + if (!this.closeWasClean && closeCode !== 1000) { + this.reconnectTimer.scheduleTimeout() + } + this.stateChangeCallbacks.close.forEach(([, callback]) => callback(event)) + } +} diff --git a/lib/playground_web/components/core_components.ex b/lib/playground_web/components/core_components.ex index ddb9b1d..637994c 100644 --- a/lib/playground_web/components/core_components.ex +++ b/lib/playground_web/components/core_components.ex @@ -155,7 +155,7 @@ defmodule PlaygroundWeb.CoreComponents do id="client-error" kind={:error} title={gettext("We can't find the internet")} - phx-disconnected={delayed_show(".phx-client-error #client-error")} + phx-disconnected={show(".phx-client-error #client-error")} phx-connected={hide("#client-error")} hidden > @@ -612,19 +612,6 @@ defmodule PlaygroundWeb.CoreComponents do ) end - # Workaround for "We can't find the internet" flashes on Firefox - # https://github.com/phoenixframework/phoenix/issues/5102#issuecomment-1970738490 - def delayed_show(js \\ %JS{}, selector) do - JS.show(js, - to: selector, - time: 1300, - transition: - {"delay-1000 transition-all transform 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,