Use endpoint for chat history instead of websocket (#67)

* Change placeholder when chat is disabled

* Use the /chat endpoint for bulk chat history population instead of websocket. For #47

* Force LiveUI/seek bar during live to show. Closes #11.

* Change pulling chat history into app.js

* Force new messages to have visability = true

core/chat/client.go

@@ -111,6 +111,7 @@ func (c *Client) listenRead() {
 			msg.ID = id
 			msg.MessageType = "CHAT"
 			msg.Timestamp = time.Now()
+			msg.Visible = true
 
 			if err := websocket.JSON.Receive(c.ws, &msg); err == io.EOF {
 				c.doneCh <- true

core/chat/server.go

@@ -56,12 +56,6 @@ func (s *server) err(err error) {
 	s.errCh <- err
 }
 
-func (s *server) sendPastMessages(c *Client) {
-	for _, msg := range s.Messages {
-		c.Write(msg)
-	}
-}
-
 func (s *server) sendAll(msg models.ChatMessage) {
 	for _, c := range s.Clients {
 		c.Write(msg)
@@ -104,7 +98,6 @@ func (s *server) Listen() {
 			s.Clients[c.id] = c
 
 			s.listener.ClientAdded(c.id)
-			s.sendPastMessages(c)
 
 		// remove a client
 		case c := <-s.delCh:

webroot/js/app.js

@@ -86,6 +86,8 @@ class Owncast {
       onError: this.handlePlayerError,
     });
     this.player.init();
+
+    this.getChatHistory();
   };
 
   setConfigData(data) {
@@ -132,17 +134,21 @@ class Owncast {
         return; 
       }
       const message = new Message(model);
-      const existing = this.vueApp.messages.filter(function (item) {
-        return item.id === message.id;
-      })
-      if (existing.length === 0 || !existing) {
-        this.vueApp.messages = [...this.vueApp.messages, message];
-      }
+      this.addMessage(message);
     };
     this.websocket = ws;
     this.messagingInterface.setWebsocket(this.websocket);
   };
 
+  addMessage(message) {
+    const existing = this.vueApp.messages.filter(function (item) {
+      return item.id === message.id;
+    })
+    if (existing.length === 0 || !existing) {
+      this.vueApp.messages = [...this.vueApp.messages, message];
+    }
+  }
+
   // fetch /config data
   getConfig() {
     fetch(URL_CONFIG)
@@ -276,4 +282,18 @@ class Owncast {
     this.handleOfflineMode();
     // stop timers?
   };
+
+  async getChatHistory() {
+    const url = "/chat";
+    const response = await fetch(url);
+    const data = await response.json();
+    const messages = data.map(function (message) {
+      return new Message(message);
+    })
+    this.setChatHistory(messages);
+  }
+
+  setChatHistory(messages) {
+    this.vueApp.messages = messages;
+  }
 };

webroot/js/message.js

@@ -81,6 +81,7 @@ class MessagingInterface {
 		} else {
 			this.tagAppContainer.classList.add('desktop');
 		}
+
 	}
 
 	setWebsocket(socket) {