lipre

commit 0ccd6ac6d8fc0045bf0277458d44cb028f084def
parent 3e651b08512df5ce778a61aabde78188218488d7
Author: Vetle Haflan <vetle@haflan.dev>
Date:   Mon, 25 Jan 2021 21:53:56 +0100

Various fixes and improvements

- Properly close rooms when presenter disconnects
- Show alert when disconnected, with click-to-reconnect
- No more transitions between tabs

Diffstat:
M
lipre.go
 | 
15
++++++++++++++-
M
ui/src/App.vue
 | 
40
+++++++++++++++++++++++++---------------

2 files changed, 39 insertions(+), 16 deletions(-)
diff --git a/lipre.go b/lipre.go
@@ -22,6 +22,15 @@ type Room struct {
 	files map[string][]byte
 }
 
+func (room *Room) Close() {
+	for _, viewer := range room.viewers {
+		if viewer != nil {
+			viewer.Close()
+		}
+	}
+	delete(rooms, room.code)
+}
+
 // TODO: Lock on this for concurrency?
 var rooms = make(map[string]*Room)
 
@@ -32,7 +41,7 @@ func (room *Room) listen() {
 			if websocket.IsUnexpectedCloseError(err, websocket.CloseGoingAway, websocket.CloseAbnormalClosure) {
 				log.Printf("error: %v", err)
 			}
-			delete(rooms, room.code)
+			room.Close()
 			return
 		}
 		file := struct {
@@ -93,6 +102,10 @@ func presentHandler(w http.ResponseWriter, r *http.Request) {
 	}
 	room := &Room{code: roomCode, presenter: conn, files: make(map[string][]byte)}
 	rooms[roomCode] = room
+	conn.SetCloseHandler(func(code int, text string) error {
+		room.Close()
+		return nil
+	})
 	go room.listen()
 }
 
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -8,11 +8,18 @@
                     {{filename}}
                 </v-tab>
             </v-tabs>
-            <v-badge v-show="status"/>
         </v-app-bar>
         <v-main>
+            <v-alert dense 
+                     v-if="!connected" 
+                     :type="connected === null ? 'info' : 'error'"
+                     :style="connected ? '' : 'cursor: pointer;'"
+                     @click="connect">
+                {{connected === null ? 'Connecting...' : 'No connection - click to retry'}}
+            </v-alert>
             <v-tabs-items v-model="tab">
                 <v-tab-item v-for="filename in filenames"
+                    :transition="false" :reverse-transition="false"
                     style="font-family: monospace; white-space: pre; font-size:12px; margin: 1em"
                     :key="filename"><pre><code>{{files[filename]}}</code></pre></v-tab-item>
             </v-tabs-items>
@@ -28,21 +35,30 @@ export default {
             tab: null,
             files: {},
             filenames: [],
-            status: "",
+            connected: null,
             ws: null,
-            follow: true
+            follow: true,
         }
     },
     methods: {
-        connect(roomCode) {
+        connect() {
+            this.connected = null
+            let qParams = new URLSearchParams(window.location.search)
+            let roomCode = qParams.get("room")
+            if (!roomCode) {
+                //this.status = "No room specified" // TODO: Use?
+                this.connected = false
+                return
+            }
             let url = `ws://${document.location.host}/view/${roomCode}`
             this.ws = new WebSocket(url)
-            this.files = {}
             this.ws.onclose = () => {
-                this.status = "No connection"
+                this.connected = false
             }
             this.ws.onopen = () => {
-                this.status = "Connected"
+                this.files = {}
+                this.filenames = []
+                this.connected = true
             }
             this.ws.onmessage = (msg) => {
                 let fileReceived = JSON.parse(msg.data)
@@ -59,7 +75,7 @@ export default {
                         hljs.initHighlightingOnLoad()
                     }
                     if (this.tab === null || this.follow) {
-                        this.tab = fileReceived.name
+                        this.tab = this.filenames.findIndex(fn => fn === fileReceived.name)
                     }
                 }
                 //hljs.highlightBlock(document.getElementById("viewer"))
@@ -67,13 +83,7 @@ export default {
         }
     },
     mounted() {
-        let qParams = new URLSearchParams(window.location.search)
-        let roomCode = qParams.get("room")
-        if (!roomCode) {
-            this.status = "No room specified"
-            return
-        }
-        this.connect(roomCode)
+        this.connect()
     }
 }
 </script>