feat: added auto-refresh timeout for cloud new version updates

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

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"
     >
       <div class="hs-overlay-backdrop transition duration absolute left-0 top-0 w-full h-full bg-gray-900 bg-opacity-50 dark:bg-opacity-80 dark:bg-neutral-900">

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?} />
 </div>
 
 <%= live_render(@socket, WandererAppWeb.ServerStatusLive,

lib/wanderer_app_web/components/map/map_refresh.ex

@@ -4,6 +4,11 @@ defmodule WandererAppWeb.MapRefresh do
   def render(assigns) do
     ~H"""
     <div id="map-refresh" class="socket">
+      <div class="flex z-100 h-full w-full items-center justify-center z-auto">
+        <p class="text-[30px] ">
+          <span id="version-update-seconds"></span>
+        </p>
+      </div>
       <div class="gel center-gel">
         <div class="hex-brick h1"></div>
         <div class="hex-brick h2"></div>