fix(frontend): if server connection is lost, toast is now persistent

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/App.vue

@@ -51,24 +51,8 @@ export default {
 	},
 	watch: {
 		socketConnected(connected) {
-			if (!connected)
-				new Toast({
-					content: "Could not connect to the server.",
-					persistant: true
-				});
-			else {
-				// better implementation once vue-roaster is updated
-				document
-					.getElementById("toasts-content")
-					.childNodes.forEach(toast => {
-						if (
-							toast.innerHTML ===
-							"Could not connect to the server."
-						) {
-							toast.remove();
-						}
-					});
-			}
+			if (!connected) this.disconnectedMessage.show();
+			else this.disconnectedMessage.hide();
 		},
 		nightmode(nightmode) {
 			if (nightmode) this.enableNightMode();
@@ -114,6 +98,14 @@ export default {
 			localStorage.removeItem("github_redirect");
 		}
 
+		this.disconnectedMessage = new Toast({
+			content: "Could not connect to the server.",
+			persistent: true,
+			interactable: false
+		});
+
+		this.disconnectedMessage.hide();
+
 		ws.onConnect(true, () => {
 			this.socketConnected = true;
 		});

frontend/src/aw.js

@@ -14,6 +14,7 @@ const notConnectedToast = new Toast({
 	persistent: true,
 	interactable: false
 });
+
 notConnectedToast.hide();
 
 const sendingVideoDataToast = new Toast({
@@ -21,6 +22,7 @@ const sendingVideoDataToast = new Toast({
 	persistent: true,
 	interactable: false
 });
+
 sendingVideoDataToast.hide();
 
 const deniedToast = new Toast({
@@ -29,6 +31,7 @@ const deniedToast = new Toast({
 	persistent: true,
 	interactable: false
 });
+
 deniedToast.hide();
 
 const competitorToast = new Toast({
@@ -37,6 +40,7 @@ const competitorToast = new Toast({
 	persistent: true,
 	interactable: false
 });
+
 competitorToast.hide();
 
 export default {

frontend/src/pages/Station/index.vue

@@ -1124,7 +1124,7 @@ export default {
 									"This song is unavailable for you, but is playing for everyone else.";
 								new Toast({
 									content: toastMessage,
-									persistant: true
+									persistent: true
 								});
 
 								// save current song id

frontend/src/ws.js

@@ -167,10 +167,10 @@ export default {
 		this.socket.onerror = err => {
 			console.log("WS: SOCKET ERROR", err);
 
-			new Toast({
-				content: "Cannot perform this action at this time.",
-				timeout: 8000
-			});
+			// new Toast({
+			// 	content: "Cannot perform this action at this time.",
+			// 	timeout: 8000
+			// });
 		};
 	}
 };