changes

config.json

@@ -1,8 +1,7 @@
 {
 	"server": {
 		"ipAddress": "192.168.1.222",
-		"port": 8080,
-		"messageMaxAge": 259200
+		"port": 8080
 	},
 	"paths": {
 		"databasePath": "/home/radon/Documents/chattest.db",
@@ -10,5 +9,9 @@
 		"indexCssPath": "./content/root.css",
 		"indexHtmlPath": "./content/root.html",
 		"messagesHtmlPath": "./content/messages.html"
+	},
+	"options": {
+		"messageMaxAge": 259200,
+		"nameMaxLength": 32
 	}
 }

content/root.css

@@ -255,14 +255,14 @@ body {
 	gap: 10px;
 }
 
-.youtube-embed {
+.video-embed {
 	position: inline;
 	padding-top: 10px;
 	width: 100%;
 	max-width: 560px;  /* Standard YouTube width */
 }
 
-.youtube-embed iframe {
+.video-embed iframe {
 	border-radius: 4px;
 }
 

content/root.js

@@ -39,9 +39,7 @@ async function deleteMessage(messageId) {
 			});
 
 			if (response.ok) {
-				// Refresh messages
-				console.log("Message deleted successfully");
-				location.reload();
+				updateMessagesInPlace();
 			} else {
 				console.error("Failed to delete message");
 			}
@@ -51,6 +49,22 @@ async function deleteMessage(messageId) {
 	}
 }
 
+async function updateMessagesInPlace() {
+	const currenteScrollLocation = getScrollLocation();
+	await loadMessages(true);
+	setScrollLocation(currenteScrollLocation);
+}
+
+function getScrollLocation() {
+	const messagesDiv = document.getElementById("messages");
+	return messagesDiv.scrollTop;
+}
+
+function setScrollLocation(height) {
+	const messagesDiv = document.getElementById("messages");
+	messagesDiv.scrollTop = height;
+}
+
 document.addEventListener("click", function (event) {
 	const settingsPanel = document.getElementById("settings-panel");
 	const settingsButton = document.querySelector(".settings-button");
@@ -117,7 +131,7 @@ async function loadUsers() {
 }
 
 let lastMessageCount = 0;
-async function loadMessages() {
+async function loadMessages(forceUpdate = false) {
 	try {
 		let messagesDiv = document.getElementById("messages");
 		const response = await fetch("/messages");
@@ -152,10 +166,10 @@ async function loadMessages() {
 
 		const newMessageCount = messages.length;
 
-		if (
-			newMessageCount > lastMessageCount ||
-			lastMessageCount === 0
-		) {
+		const update = newMessageCount != lastMessageCount ||
+			lastMessageCount === 0 || forceUpdate;
+
+		if (update) {
 			messagesDiv.innerHTML = "";
 			Array.from(messages).forEach((msg) => {
 				const messageDiv = document.createElement(
@@ -172,31 +186,60 @@ async function loadMessages() {
 						"<br>",
 					);
 
-				const linkedContent = content.replace(
+				const usernameDiv = document.createElement(
+					"div",
+				);
+				usernameDiv.innerHTML = username;
+				compareUsername = usernameDiv.textContent;
+				let deleteHtml = "";
+
+				const embeddedContent = contentEmbedding(
+					content,
+				);
+
+				if (
+					compareUsername ===
+						document.getElementById(
+							"current-user",
+						).textContent
+				) {
+					deleteHtml =
+						`<button class="delete-button" title="Delete message" onclick="deleteMessage('${messageId}')" style="display: inline;">🗑️</button>`;
+				}
+				messageDiv.innerHTML = `
+					<div class="message-header">
+						<div class="username">${username} ${timestamp} ${deleteHtml}</div>
+					</div>
+					<div class="content">${embeddedContent}</div>`;
+
+				messagesDiv.appendChild(messageDiv);
+			});
+			scrollToBottom();
+			lastMessageCount = newMessageCount;
+		}
+	} catch (error) {
+		console.error("Error loading messages:", error);
+	}
+}
+
+function contentEmbedding(content) {
+	return content.replace(
 		/(?![^<]*>)(https?:\/\/[^\s<]+)/g,
 		function (url) {
-						console.log(
-							"Processing URL:",
-							url,
-						); // Debug log
-
 			const videoId = getYouTubeID(
 				url,
 			);
 			if (videoId) {
-							return `<div class="youtube-embed"><iframe 
+				return `<div class="video-embed"><iframe 
 									width="100%" 
 									height="315" 
 									src="https://www.youtube.com/embed/${videoId}" 
 									frameborder="0" 
+									onerror="console.log('Video failed to load:', this.src); this.style.display='none'"
+									onload="console.log('Video loaded successfully:', this.src)" 
 									allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-									    allowfullscreen>
-									</iframe></div>`;
+									allowfullscreen></iframe></div>`;
 			} else if (isImageUrl(url)) {
-							console.log(
-								"Attempting to embed image:",
-								url,
-							);
 				return `<div class="image-embed"><img 
 									src="${url}" 
 									alt="Embedded image" 
@@ -207,38 +250,6 @@ async function loadMessages() {
 			return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
 		},
 	);
-
-				let deleteHtml = "";
-
-				const usernameDiv = document.createElement(
-					"div",
-				);
-				usernameDiv.innerHTML = username;
-				compareUsername = usernameDiv.textContent;
-
-				if (
-					compareUsername ===
-						document.getElementById(
-							"current-user",
-						).textContent
-				) {
-					deleteHtml =
-						`<button class="delete-button" onclick="deleteMessage('${messageId}')" style="display: inline;">🗑️</button>`;
-				}
-				messageDiv.innerHTML = `
-					<div class="message-header">
-						<div class="username">${username} ${timestamp} ${deleteHtml}</div>
-					</div>
-					<div class="content">${linkedContent}</div>`;
-
-				messagesDiv.appendChild(messageDiv);
-			});
-			scrollToBottom();
-			lastMessageCount = newMessageCount;
-		}
-	} catch (error) {
-		console.error("Error loading messages:", error);
-	}
 }
 
 function isImageUrl(url) {
@@ -327,8 +338,8 @@ async function setUsername() {
 			setTimeout(() => {
 				document.getElementById("settings-panel").style
 					.display = "none";
-			}, 500);
-			location.reload();
+			}, 750);
+			updateMessagesInPlace();
 		} else {
 			showUsernameStatus(
 				data.error || "Failed to set username",
@@ -363,7 +374,7 @@ async function sendMessage() {
 		if (response.ok) {
 			messageInput.value = "";
 			messageInput.style.height = "auto";
-			loadMessages();
+			loadMessages(true);
 		} else {
 			showStatus(
 				data.error || "Failed to send message",
@@ -470,7 +481,7 @@ async function initialize() {
 	setInterval(loadMessages, 1000);
 	setInterval(loadUsers, 1000);
 	setInterval(pingCheck, 3000);
-	await loadMessages();
+	await loadMessages(true);
 	scrollToBottom();
 }
 

main.go

@@ -438,8 +438,8 @@ func (s *Server) handleUsername(w http.ResponseWriter, r *http.Request) {
 
 	s.mu.Lock()
 
-	if len(req.Username) > 64 {
-		http.Error(w, fmt.Sprintf(`{"error": "Username too long (must be less than 64 characters)"}`), http.StatusRequestEntityTooLarge)
+	if len(req.Username) > s.Config.Options.NameMaxLength {
+		http.Error(w, fmt.Sprintf(`{"error": "Username too long (%v out of %v characters maximum)"}`, len(req.Username), s.Config.Options.NameMaxLength), http.StatusRequestEntityTooLarge)
 		s.mu.Unlock()
 		return
 	}
@@ -451,8 +451,8 @@ func (s *Server) handleUsername(w http.ResponseWriter, r *http.Request) {
 	}
 
 	if s.Database.UserNameExists(req.Username) {
-		s.mu.Unlock()
 		http.Error(w, fmt.Sprintf(`{"error": "Username already exists"}`), http.StatusConflict)
+		s.mu.Unlock()
 		return
 	}
 
@@ -659,7 +659,7 @@ func (s *Server) handleCss(w http.ResponseWriter, r *http.Request) {
 func (s *Server) Run() {
 	s.Database.DbCreateTableMessages()
 	s.Database.DbCreateTableUsers()
-	s.Database.DeleteOldMessages(s.Config.Server.MessageMaxAge)
+	s.Database.DeleteOldMessages(s.Config.Options.MessageMaxAge)
 	handler := http.NewServeMux()
 	handler.HandleFunc("/ping", s.handlePing)
 	handler.HandleFunc("/username", s.handleUsername)
@@ -701,7 +701,6 @@ type Config struct {
 	Server struct {
 		IpAddress string `json:"ipAddress"`
 		Port      int    `json:"port"`
-		MessageMaxAge int    `json:"messageMaxAge"`
 	} `json:"server"`
 	Paths struct {
 		DatabasePath     string `json:"databasePath"`
@@ -710,6 +709,10 @@ type Config struct {
 		IndexHtmlPath    string `json:"indexHtmlPath"`
 		MessagesHtmlPath string `json:"messagesHtmlPath"`
 	} `json:"paths"`
+	Options struct {
+		MessageMaxAge int `json:"messageMaxAge"`
+		NameMaxLength int `json:"nameMaxLength"`
+	} `json:"options"`
 }
 
 func LoadConfig(filepath string) Config {