Merge branch 'master' into gek/current-stream-duration

webroot/js/app.js

@@ -46,7 +46,6 @@ class Owncast {
       el: '#app-container',
       data: {
         isOnline: false,
-        layout: hasTouchScreen() ? 'touch' : 'desktop',
         messages: [],
         overallMaxViewerCount: 0,
         sessionMaxViewerCount: 0,
@@ -86,6 +85,8 @@ class Owncast {
       onError: this.handlePlayerError,
     });
     this.player.init();
+
+    this.getChatHistory();
   };
 
   setConfigData(data) {
@@ -132,17 +133,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)
@@ -296,4 +301,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.concat(this.vueApp.messages);
+  }
 };

webroot/js/message.js

@@ -74,13 +74,11 @@ class MessagingInterface {
 		this.initLocalStates();
 
 		if (hasTouchScreen()) {
-			this.scrollableMessagesContainer = document.body;
+			setVHvar();
+			window.addEventListener("orientationchange", setVHvar);
 			this.tagAppContainer.classList.add('touch-screen');
-			window.onorientationchange = this.handleOrientationChange.bind(this);
-			this.handleOrientationChange();
-		} else {
-			this.tagAppContainer.classList.add('desktop');
 		}
+
 	}
 
 	setWebsocket(socket) {
@@ -93,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();
 	}
 
@@ -112,22 +110,9 @@ class MessagingInterface {
 			this.tagAppContainer.classList.add('no-chat');
 			this.tagAppContainer.classList.remove('chat');
 		}
+		this.setChatPlaceholderText();
 	}
 
-	handleOrientationChange() {
-		var isPortrait = Math.abs(window.orientation % 180) === 0;
-		if(!isPortrait) {
-			if (document.body.clientWidth < 1024) {
-				this.tagAppContainer.classList.add('no-chat');
-				this.tagAppContainer.classList.add('landscape');
-			}
-		} else {
-			if (this.chatDisplayed) {
-				this.tagAppContainer.classList.remove('no-chat');
-			}
-			this.tagAppContainer.classList.remove('landscape');
-		}
-	}
 	
 	handleChatToggle() {
 		this.chatDisplayed = !this.chatDisplayed;
@@ -241,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() {
@@ -248,14 +239,22 @@ class MessagingInterface {
 			this.formMessageInput.disabled = true;
 			this.formMessageInput.placeholder = "Chat is offline."
 		}
-		// also show "disabled" text/message somewhere.
 	}
 	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

@@ -32,6 +32,9 @@ const VIDEO_SRC = {
 const VIDEO_OPTIONS = {
   autoplay: false,
   liveui: true, // try this
+  liveTracker: {
+    trackingThreshold: 0,
+  },
   sources: [VIDEO_SRC],
 };
 
@@ -39,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
@@ -154,4 +158,11 @@ function secondsToHMMSS(seconds = 0) {
   const secsString = secs < 10 ? `0${secs}` : `${secs}`;
 
   return hoursString + minString + secsString;
-}
+}
+
+function setVHvar() {
+  var vh = window.innerHeight * 0.01;
+  // Then we set the value in the --vh custom property to the root of the document
+  document.documentElement.style.setProperty('--vh', `${vh}px`);
+  console.log("== new vh", vh)
+}