- Added skip and abort button to queue

app/src/web/AlertQueue.ts

@@ -18,6 +18,11 @@ interface Queue<T> {
 class Queue<T> extends EventEmitter {
     private arr: T[] = [];
 
+    private inputs: {
+        counter?: HTMLElement,
+        addButton?: HTMLButtonElement,
+        abortButton?: HTMLButtonElement
+    } = {};
     first(): T{
         return this.arr[0];
     }
@@ -33,9 +38,25 @@ class Queue<T> extends EventEmitter {
         return el;
     }
 
+    empty() {
+        this.arr = [];
+    }
+
     len(){
         return this.arr.length;
     }
+    
+    bind(
+        counter: HTMLElement
+    ){
+        this.inputs.counter = counter;
+    }
+
+    updateView(){
+        if(this.inputs.counter){
+            this.inputs.counter.innerText = this.len().toString();
+        }
+    }
 }
 
 export default Queue;

app/src/web/WSServer.ts

@@ -1,12 +1,25 @@
 import ws from "ws";
+import { EventEmitter } from "events";
 
 interface EndEvent {
-    action: "end"
+    action: "ended"
 }
 
-type ClientMessage = EndEvent
+interface WaitingForVideoEvent {
+    action: "waitingForVideo"
+}
+
+type ClientMessage = EndEvent | WaitingForVideoEvent
 
-class WebSocketServer {
+interface WebSocketServer {
+    on(event: "ended", listener: ()=>void): this;
+    on(event: "waitingForVideo", listener: ()=>void): this;
+
+    emit(event: "ended"): boolean;
+    emit(event: "waitingForVideo"): boolean;
+}
+
+class WebSocketServer extends EventEmitter {
     server?: ws.Server;
 
     private interval?: NodeJS.Timeout;
@@ -15,6 +28,7 @@ class WebSocketServer {
     } = {};
 
     constructor(private port: number = 8045){
+        super();
         if(! (!isNaN(port) && port > 0 && port < 65535)){
             throw new Error("Malicious port")
         }
@@ -60,7 +74,26 @@ class WebSocketServer {
     }
 
     connectionHandler(rawMsg: string){
-        let msg: ClientMessage = JSON.parse(rawMsg);
+        let msg: ClientMessage;
+        try {
+            msg= JSON.parse(rawMsg);
+        } catch (error) {
+            console.log("Error while parsing incoming message");
+            console.log(error);
+            console.log(rawMsg);
+            return;
+        }
+        switch (msg.action) {
+            case "ended":
+                this.emit("ended");
+                break;
+            case "waitingForVideo":
+                this.emit("waitingForVideo");
+                break;
+            default:
+                break;
+        }
+        
     }
 
     bind(

app/src/web/preload.ts

@@ -28,9 +28,28 @@ function sendPath(path: string){
   ]));
 }
 
+wss.on("waitingForVideo", ()=>{
+  if(AlertQueue.len() > 0){
+    let el = AlertQueue.remove();
+    sendPath(el.filepath);
+  }
+})
+wss.on("ended", ()=>{
+  if(AlertQueue.len() > 0){
+    let el = AlertQueue.remove();
+    sendPath(el.filepath);
+  }
+})
+
+AlertQueue.on("remove", ()=>{
+  AlertQueue.updateView();
+})
+
 AlertQueue.on("add", ()=>{
-  let el = AlertQueue.remove();
-  sendPath(el.filepath);
+  AlertQueue.updateView();
+  wss.sendToAll(JSON.stringify([{
+    cmd: "videoInQueue"
+  }]))
 })
 
 let Alerts: AlertFront | undefined;
@@ -51,6 +70,11 @@ window.addEventListener("DOMContentLoaded", () => {
     document.getElementById("saveAlert") as HTMLButtonElement
   )
 
+  AlertQueue.bind(
+    document.getElementById("queueCounter")
+  )
+  AlertQueue.updateView();
+
   Alerts = new AlertFront(twitch);
   Alerts.updateView();
 
@@ -71,7 +95,6 @@ window.addEventListener("DOMContentLoaded", () => {
   })
 
   ipcRenderer.on("twitch-oauth", (event, authcode: string)=>{
-    console.log(authcode);
     settings.options.twitch_oauth_token = authcode;
     settings.save();
     settings.updateView();
@@ -79,7 +102,6 @@ window.addEventListener("DOMContentLoaded", () => {
 
   twitch.on("reward", (reward) => {
     let al = settings.options.alerts;
-    console.log("Reward");
     for(let key in al){
       if(al.hasOwnProperty(key)){
         if(al[key].rewardtitle === reward.redemption.reward.title){
@@ -101,4 +123,18 @@ window.addEventListener("DOMContentLoaded", () => {
   addAlertButton.addEventListener("click", e => {
     Alerts.add();
   })
+  let abortAlertButton = document.getElementById("abortAlert");
+  abortAlertButton.addEventListener("click", e => {
+    AlertQueue.empty();
+    AlertQueue.updateView();
+    wss.sendToAll(JSON.stringify([{
+      cmd: "abort"
+    }]))
+  })
+  let skipAlertButton = document.getElementById("skipAlert");
+  skipAlertButton.addEventListener("click", e => {
+    wss.sendToAll(JSON.stringify([{
+      cmd: "abort"
+    }]))
+  })
 });

app/web/index.html

@@ -100,6 +100,9 @@
         </div>
         <button id="addAlert" class="btn btn-success">Add</button>
         <button id="saveAlert" class="btn btn-primary">Save</button>
+        <button id="skipAlert" class="btn btn-danger">Skip</button>
+        <button id="abortAlert" class="btn btn-danger">Abort</button>
+        <h3>Queue length: <span id="queueCounter"></span></h3>
     </div>
     <script src="lib/jquery-3.4.1.slim.min.js"></script>
     <script src="lib/popper.min.js"></script>

index.html

@@ -5,27 +5,33 @@
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <title>OBS Twitch Points Alerts</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
-    <!-- <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
-    <script src='main.js'></script> -->
     <style>
+        body {
+            width: 100%;
+            height: 100%;
+        }
         * {
             color: white;
         }
         video {
             background-color: rgba(0, 0, 0, 0);
             height: 100vh;
+            margin: 0 auto;
+            display: block;
             z-index: -100;
         }
         h2 {
+            display: none;
             position: absolute;
             top: 5em;
             left: 5em;
             z-index: 100;
         }
     </style>
+
 </head>
 <body>
-    <video>
+    <video></video>
     <script>
         let video = document.querySelector("video");
         video.volume = 0.2;
@@ -41,6 +47,7 @@
     </script>
     <script>
         function parseCommand(cmdObject){
+            console.log(cmdObject.cmd);
             switch(cmdObject.cmd){
                 case "reload":
                     location.reload();
@@ -60,6 +67,21 @@
                         video.src=cmdObject.src
                     }
                     break;
+                case "videoInQueue":
+                    if(video.src == ""){
+                        ws.send(JSON.stringify({
+                            action: "waitingForVideo"
+                        }))
+                    }
+                    break;
+                case "abort":
+                    video.pause();
+                    video.src = "";
+                    video.removeAttribute("src");
+                    ws.send(JSON.stringify({
+                        action: "waitingForVideo"
+                    }))
+                    break;
             }
         }
 
@@ -75,7 +97,10 @@
         };
         video.addEventListener("ended", ()=>{
             video.src = "";
-            ws.send('{action:"end"}');
+            video.removeAttribute("src");
+            ws.send(JSON.stringify({
+                action: "ended"
+            }));
         })
     </script>
     <script>