Updates

n1k0 · May 2, 2024 · 0a50e3e · 0a50e3e
1 parent ac4c928
commit 0a50e3e
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 49 deletions.
diff --git a/v2/app.js b/v2/app.js
diff --git a/v2/index.html b/v2/index.html
@@ -1,70 +1,101 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Tooty</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link href="bootstrap/css/bootstrap.min.css" media="all" rel="stylesheet" />
     <link href="style.css" media="all" rel="stylesheet" />
-    <link rel="icon" type="image/png" sizes="192x192"  href="images/favicon-192x192.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
-    <meta name="msapplication-TileColor" content="#272b30">
-    <meta name="theme-color" content="#272b30">
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="images/favicon-192x192.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="images/favicon-96x96.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="images/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="images/favicon-16x16.png"
+    />
+    <meta name="msapplication-TileColor" content="#272b30" />
+    <meta name="theme-color" content="#272b30" />
   </head>
 
   <body>
     <script src="app.js"></script>
     <script>
-      const app = Elm.Main.init({flags: {
-        clients: localStorage.getItem("tooty.clients") || "[]",
-        registration: JSON.parse(localStorage.getItem("tooty.registration"))
-      }});
-
+      const app = Elm.Main.init({
+        flags: {
+          clients: localStorage.getItem("tooty.clients") || "[]",
+          registration: JSON.parse(localStorage.getItem("tooty.registration")),
+        },
+      });
 
       let globalPublicWs;
       let localPublicWs;
       let userWs;
-
-      app.ports.connectToWsServer.subscribe(data => {
-          url = data.server.replace('https', 'wss') + data.apiUrl + "?access_token=" + data.token + "&stream=" + data.streamType;
-
-          if (data.streamType == 'public') {
-            globalPublicWs = new WebSocket(url);
-            globalPublicWs.onmessage = function(event) {
-              app.ports.wsGlobalEvent.send(event.data);
-            }
-
-          } else if (data.streamType == 'public:local') {
-            localPublicWs = new WebSocket(url);
-            localPublicWs.onmessage = function(event) {
-              app.ports.wsLocalEvent.send(event.data);
-            }
-          } else if (data.streamType == 'user') {
-            userWs = new WebSocket(url);
-            userWs.onmessage = function(event) {
-              app.ports.wsUserEvent.send(event.data);
-            }
+      function connect(url, streamType) {
+        var ws = new WebSocket(url);
+        ws.onmessage = function (event) {
+          if (streamType == "public") {
+            app.ports.wsGlobalEvent.send(event.data);
+          } else if (streamType == "public:local") {
+            app.ports.wsLocalEvent.send(event.data);
+          } else if (streamType == "user") {
+            app.ports.wsUserEvent.send(event.data);
           } else {
-            console.log("Unknown streamType", data.streamType)
+            console.log("Unknown streamType", streamType);
           }
-      });
+        };
+        ws.onclose = function (e) {
+          console.log(
+            "Socket is closed. Reconnect will be attempted in 1 second.",
+            e.reason
+          );
+          setTimeout(function () {
+            connect(url, streamType);
+          }, 1000);
+        };
+      }
 
+      app.ports.connectToWsServer.subscribe((data) => {
+        url =
+          data.server.replace("https", "wss") +
+          data.apiUrl +
+          "?access_token=" +
+          data.token +
+          "&stream=" +
+          data.streamType;
 
-      app.ports.saveClients.subscribe(json => {
+        connect(url, data.streamType);
+      });
+
+      app.ports.saveClients.subscribe((json) => {
         localStorage.setItem("tooty.clients", json);
       });
 
-      app.ports.saveRegistration.subscribe(json => {
+      app.ports.saveRegistration.subscribe((json) => {
         localStorage.setItem("tooty.registration", json);
       });
 
-      app.ports.deleteRegistration.subscribe(json => {
+      app.ports.deleteRegistration.subscribe((json) => {
         localStorage.removeItem("tooty.registration");
       });
 
-      app.ports.setStatus.subscribe(function(data) {
+      app.ports.setStatus.subscribe(function (data) {
         var element = document.getElementById(data.id);
         if (element) {
           element.value = data.status;
@@ -73,8 +104,8 @@
         }
       });
 
-      app.ports.scrollIntoView.subscribe(function(id) {
-        requestAnimationFrame(function() {
+      app.ports.scrollIntoView.subscribe(function (id) {
+        requestAnimationFrame(function () {
           var element = document.getElementById(id);
           if (element) {
             element.scrollIntoView(false);
@@ -83,7 +114,7 @@
       });
 
       // @TODO : Port this to elm/http@2.0.0
-      app.ports.uploadMedia.subscribe(data => {
+      app.ports.uploadMedia.subscribe((data) => {
         const files = Array.from(document.getElementById(data.id).files);
         const formData = new FormData();
         formData.append("file", files[0]);
@@ -92,8 +123,8 @@
           headers: { Authorization: "Bearer " + data.token },
           body: formData,
         })
-          .catch(err => app.ports.uploadError.send(err.message))
-          .then(response => response.text())
+          .catch((err) => app.ports.uploadError.send(err.message))
+          .then((response) => response.text())
           .then(app.ports.uploadSuccess.send);
       });
 
@@ -102,21 +133,20 @@
           icon: data.icon,
           body: data.body,
         });
-        notif.onclick = () => location.hash = data.clickUrl;
+        notif.onclick = () => (location.hash = data.clickUrl);
       }
 
-      app.ports.notify.subscribe(data => {
+      app.ports.notify.subscribe((data) => {
         if (Notification.permission === "granted") {
           notify(data);
         } else if (Notification.permission !== "denied") {
-          Notification.requestPermission(permission => {
+          Notification.requestPermission((permission) => {
             if (permission === "granted") {
               notify(data);
             }
           });
         }
       });
-
     </script>
   </body>
 </html>