diff --git a/assets/js/hooks/newVersionUpdate.ts b/assets/js/hooks/newVersionUpdate.ts index 85e2dabf..c72b4584 100644 --- a/assets/js/hooks/newVersionUpdate.ts +++ b/assets/js/hooks/newVersionUpdate.ts @@ -1,5 +1,44 @@ +const countdown = (secondsCount: number) => { + let minutes, seconds; + + const dateEnd = new Date().getTime() + secondsCount * 1000; + + const timer = setInterval(calculate, 1000); + + function calculate() { + const dateStartDefault = new Date(); + const dateStart = new Date( + dateStartDefault.getUTCFullYear(), + dateStartDefault.getUTCMonth(), + dateStartDefault.getUTCDate(), + dateStartDefault.getUTCHours(), + dateStartDefault.getUTCMinutes(), + dateStartDefault.getUTCSeconds(), + ); + let timeRemaining = parseInt((dateEnd - dateStart.getTime()) / 1000); + + if (timeRemaining >= 0) { + timeRemaining = timeRemaining % 86400; + timeRemaining = timeRemaining % 3600; + minutes = parseInt(timeRemaining / 60); + timeRemaining = timeRemaining % 60; + seconds = parseInt(timeRemaining); + + document.getElementById('version-update-seconds').innerHTML = minutes * 60 + seconds; + } else { + return; + } + } +}; + const LAST_VERSION_KEY = 'wandererLastVersion'; +const updateVerion = (newVersion: string) => { + localStorage.setItem(LAST_VERSION_KEY, newVersion); + + window.location.reload(); +}; + export default { mounted() { const hook = this; @@ -14,12 +53,7 @@ export default { el.classList.add('hex-brick--active'); }); - setTimeout(() => { - const lastVersion = hook.el.dataset.version; - localStorage.setItem(LAST_VERSION_KEY, lastVersion); - - window.location.reload(); - }, 2000); + updateVerion(hook.el.dataset.version); }; refreshZone.addEventListener('click', handleUpdate); @@ -33,12 +67,23 @@ export default { }, updated() { + const hook = this; const activeVersion = this.getItem(LAST_VERSION_KEY); - const lastVersion = this.el.dataset.version; + const lastVersion = hook.el.dataset.version; if (activeVersion === lastVersion) { return; } - this.el.classList.remove('hidden'); + const enabled = hook.el.dataset.enabled; + if (enabled === 'true') { + hook.el.classList.remove('hidden'); + const autoRefreshTimeout = Math.floor(Math.random() * (150 - 75 + 1)) + 75; + countdown(autoRefreshTimeout); + setTimeout(() => { + updateVerion(hook.el.dataset.version); + }, autoRefreshTimeout * 1000); + } else { + updateVerion(hook.el.dataset.version); + } }, getItem(key: string) { diff --git a/lib/wanderer_app_web/components/layouts.ex b/lib/wanderer_app_web/components/layouts.ex index 396144d5..056e7d91 100644 --- a/lib/wanderer_app_web/components/layouts.ex +++ b/lib/wanderer_app_web/components/layouts.ex @@ -22,6 +22,7 @@ defmodule WandererAppWeb.Layouts do end attr :app_version, :string + attr :enabled, :boolean def new_version_banner(assigns) do ~H""" @@ -30,6 +31,7 @@ defmodule WandererAppWeb.Layouts do phx-hook="NewVersionUpdate" phx-update="ignore" data-version={@app_version} + data-enabled={Jason.encode!(@enabled)} class="!z-1000 hidden absolute top-0 left-0 w-full h-full group items-center fade-in-scale text-white !bg-opacity-70 rounded p-px overflow-hidden flex items-center" >
diff --git a/lib/wanderer_app_web/components/layouts/live.html.heex b/lib/wanderer_app_web/components/layouts/live.html.heex index 89c881f0..4770d31a 100644 --- a/lib/wanderer_app_web/components/layouts/live.html.heex +++ b/lib/wanderer_app_web/components/layouts/live.html.heex @@ -19,7 +19,7 @@ <.ping_container rtt_class={@rtt_class} /> <.donate_container /> <.feedback_container /> - <.new_version_banner app_version={@app_version} /> + <.new_version_banner app_version={@app_version} enabled={@map_subscriptions_enabled?} />
<%= live_render(@socket, WandererAppWeb.ServerStatusLive, diff --git a/lib/wanderer_app_web/components/map/map_refresh.ex b/lib/wanderer_app_web/components/map/map_refresh.ex index 188dfeae..6bcf0c25 100644 --- a/lib/wanderer_app_web/components/map/map_refresh.ex +++ b/lib/wanderer_app_web/components/map/map_refresh.ex @@ -4,6 +4,11 @@ defmodule WandererAppWeb.MapRefresh do def render(assigns) do ~H"""
+
+

+ +

+