Make chat window scrollable

This commit is contained in:
Peter Stockings
2026-03-03 19:04:27 +11:00
parent 4cf4c153cd
commit 31c79e794e

View File

@@ -4,7 +4,7 @@ import ctypes
from PyQt6.QtWidgets import ( from PyQt6.QtWidgets import (
QApplication, QMainWindow, QStackedWidget, QWidget, QVBoxLayout, QApplication, QMainWindow, QStackedWidget, QWidget, QVBoxLayout,
QHBoxLayout, QLabel, QLineEdit, QPushButton, QFileDialog, QMessageBox, QHBoxLayout, QLabel, QLineEdit, QPushButton, QFileDialog, QMessageBox,
QFrame, QSlider QFrame, QSlider, QTextEdit
) )
from PyQt6.QtCore import Qt, pyqtSignal, QObject, QTimer from PyQt6.QtCore import Qt, pyqtSignal, QObject, QTimer
from PyQt6.QtGui import QFont, QIcon, QColor from PyQt6.QtGui import QFont, QIcon, QColor
@@ -253,10 +253,10 @@ class VlcSyncApp(QMainWindow):
self.users_lbl = QLabel("0 watching") self.users_lbl = QLabel("0 watching")
self.users_lbl.setObjectName("usersLbl") self.users_lbl.setObjectName("usersLbl")
self.chat_messages = QLabel("Welcome to the room! 👋\n") self.chat_messages = QTextEdit()
self.chat_messages.setAlignment(Qt.AlignmentFlag.AlignTop | Qt.AlignmentFlag.AlignLeft) self.chat_messages.setObjectName("chatMessages")
self.chat_messages.setWordWrap(True) self.chat_messages.setReadOnly(True)
# We should really use a QScrollArea or QTextEdit here eventually self.chat_messages.setHtml("Welcome to the room! 👋")
chat_input_layout = QHBoxLayout() chat_input_layout = QHBoxLayout()
self.chat_input = QLineEdit() self.chat_input = QLineEdit()
@@ -496,7 +496,7 @@ class VlcSyncApp(QMainWindow):
self.room_file_badge.setText(f"📄 {self.local_file_name}") self.room_file_badge.setText(f"📄 {self.local_file_name}")
self.create_room_btn.setText("Create Room") self.create_room_btn.setText("Create Room")
self.join_room_btn.setText("Join Room") self.join_room_btn.setText("Join Room")
self.chat_messages.setText("Welcome to the room! 👋<br>") self.chat_messages.setHtml("Welcome to the room! 👋")
if self.local_file_path: if self.local_file_path:
self.vlc_player.load_media(self.local_file_path) self.vlc_player.load_media(self.local_file_path)
@@ -512,7 +512,7 @@ class VlcSyncApp(QMainWindow):
chat_history = msg.get("chatHistory", []) chat_history = msg.get("chatHistory", [])
if chat_history: if chat_history:
self.chat_messages.setText("Welcome to the room! 👋<br>") self.chat_messages.setHtml("Welcome to the room! 👋")
for chat in chat_history: for chat in chat_history:
self.on_chat_message(chat.get("username", "Unknown"), chat.get("message", ""), chat.get("timestamp", 0)) self.on_chat_message(chat.get("username", "Unknown"), chat.get("message", ""), chat.get("timestamp", 0))
@@ -524,14 +524,12 @@ class VlcSyncApp(QMainWindow):
time_str = dt.strftime("%I:%M %p") time_str = dt.strftime("%I:%M %p")
current = self.chat_messages.text() new_msg = f"<b>{author}</b>: {text} <span style='color: gray; font-size: 10px;'>{time_str}</span>"
new_msg = f"<b>{author}</b>: {text} <span style='color: gray; font-size: 10px;'>{time_str}</span><br>" self.chat_messages.append(new_msg)
self.chat_messages.setText(current + new_msg)
def on_system_message(self, text: str): def on_system_message(self, text: str):
current = self.chat_messages.text() new_msg = f"<i style='color: #888;'>{text}</i>"
new_msg = f"<i style='color: #888;'>{text}</i><br>" self.chat_messages.append(new_msg)
self.chat_messages.setText(current + new_msg)
def on_users_updated(self, users: list): def on_users_updated(self, users: list):
self.users_lbl.setText(f"{len(users)} watching: {', '.join(users)}") self.users_lbl.setText(f"{len(users)} watching: {', '.join(users)}")
@@ -724,6 +722,33 @@ class VlcSyncApp(QMainWindow):
color: #3ea6ff; color: #3ea6ff;
font-size: 12px; font-size: 12px;
} }
#chatMessages {
background-color: transparent;
border: none;
color: #f1f1f1;
}
#chatMessages QScrollBar:vertical {
border: none;
background: transparent;
width: 8px;
margin: 0px;
}
#chatMessages QScrollBar::handle:vertical {
background: #555;
min-height: 20px;
border-radius: 4px;
}
#chatMessages QScrollBar::handle:vertical:hover {
background: #666;
}
#chatMessages QScrollBar::add-line:vertical, #chatMessages QScrollBar::sub-line:vertical {
height: 0px;
}
#chatMessages QScrollBar::add-page:vertical, #chatMessages QScrollBar::sub-page:vertical {
background: none;
}
""") """)
if __name__ == "__main__": if __name__ == "__main__":