Show chat by default. Closes #72. Show placeholder text that no registration is needed. Closes #73

webroot/js/app.js

@@ -293,6 +293,6 @@ class Owncast {
   }
 
   setChatHistory(messages) {
-    this.vueApp.messages = messages;
+    this.vueApp.messages = messages.concat(this.vueApp.messages);
   }
 };

webroot/js/message.js

@@ -91,7 +91,7 @@ class MessagingInterface {
 			getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`);
 		this.updateUsernameFields(this.username);
 
-		this.chatDisplayed = getLocalStorage(KEY_CHAT_DISPLAYED) || false;
+		this.chatDisplayed = getLocalStorage(KEY_CHAT_DISPLAYED) || true;
 		this.displayChat();
 	}
 
@@ -110,6 +110,7 @@ class MessagingInterface {
 			this.tagAppContainer.classList.add('no-chat');
 			this.tagAppContainer.classList.remove('chat');
 		}
+		this.setChatPlaceholderText();
 	}
 
 	
@@ -225,6 +226,12 @@ class MessagingInterface {
 		// clear out things.
 		this.formMessageInput.value = '';
 		this.tagMessageFormWarning.innerText = '';
+
+		const hasSentFirstChatMessage = getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT);
+		if (!hasSentFirstChatMessage) {
+			setLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT, true);
+			this.setChatPlaceholderText();
+		}
 	}
 
 	disableChat() {
@@ -236,9 +243,18 @@ class MessagingInterface {
 	enableChat() {
 		if (this.formMessageInput) {
 			this.formMessageInput.disabled = false;
-			this.formMessageInput.placeholder = "Message"
+			this.setChatPlaceholderText();
 		}
 	}
+
+	setChatPlaceholderText() {
+		const firstMessageChatPlacholderText = "Type here to chat, no account necessary.";
+		const chatPlaceholderText = "Message"
+
+		const hasSentFirstChatMessage = getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT);
+		this.formMessageInput.placeholder = hasSentFirstChatMessage ? chatPlaceholderText : firstMessageChatPlacholderText
+	}
+
 	// handle Vue.js message display
 	onReceivedMessages(newMessages, oldMessages) {
 		if (newMessages.length !== oldMessages.length) {

webroot/js/utils.js

@@ -42,6 +42,7 @@ const VIDEO_OPTIONS = {
 const KEY_USERNAME = 'owncast_username';
 const KEY_AVATAR = 'owncast_avatar';
 const KEY_CHAT_DISPLAYED = 'owncast_chat';
+const KEY_CHAT_FIRST_MESSAGE_SENT = 'owncast_first_message_sent';
 
 const TIMER_STATUS_UPDATE = 5000; // ms
 const TIMER_WEBSOCKET_RECONNECT = 5000; // ms