From 27380ec55888c8bdc24e52eddd46fbf3eb12088e Mon Sep 17 00:00:00 2001 From: Noah Petherbridge Date: Sat, 30 Dec 2023 14:50:52 -0800 Subject: [PATCH] Status Message overhaul --- public/static/css/chat.css | 8 ++ src/App.vue | 115 +++++++++++++----- src/components/WhoListRow.vue | 45 +++----- src/lib/StatusMessage.js | 212 ++++++++++++++++++++++++++++++++++ 4 files changed, 322 insertions(+), 58 deletions(-) create mode 100644 src/lib/StatusMessage.js diff --git a/public/static/css/chat.css b/public/static/css/chat.css index f845632..625d22c 100644 --- a/public/static/css/chat.css +++ b/public/static/css/chat.css @@ -122,6 +122,14 @@ img { bottom: 4px; } +/* User status indicator in the lower left corner of DMs */ +.user-status-dm-field { + position: absolute; + z-index: 38; /* below auto-scroll checkbox */ + left: 12px; + bottom: 4px; +} + /* Footer row: message entry box */ .chat-container > .chat-footer { grid-column: 1 / 4; diff --git a/src/App.vue b/src/App.vue index 43435d5..f831171 100644 --- a/src/App.vue +++ b/src/App.vue @@ -16,6 +16,7 @@ import ProfileModal from './components/ProfileModal.vue'; import ChatClient from './lib/ChatClient'; import LocalStorage from './lib/LocalStorage'; import VideoFlag from './lib/VideoFlag'; +import StatusMessage from './lib/StatusMessage'; import { SoundEffects, DefaultSounds } from './lib/sounds'; import { isAppleWebkit } from './lib/browsers'; @@ -121,6 +122,7 @@ export default { messageBox: null, // HTML element for message entry box typingNotifDebounce: null, status: "online", // away/idle status + StatusMessage: StatusMessage, // Emoji picker visible for messages showEmojiPicker: false, @@ -317,6 +319,15 @@ export default { this.setupIdleDetection(); this.setupDropZone(); // file upload drag/drop + // Configure the StatusMessage controller. + StatusMessage.nsfw = this.config.permitNSFW; + StatusMessage.currentStatus = () => { + return this.status; + }; + StatusMessage.isAdmin = () => { + return this.isOp; + }; + this.webcam.elem = document.querySelector("#localVideo"); this.historyScrollbox = document.querySelector("#chatHistory"); @@ -545,6 +556,27 @@ export default { // Is the current channel a DM? return this.channel.indexOf("@") === 0; }, + chatPartnerStatusMessage() { + // In a DM thread, returns your chat partner's status message. + if (!this.isDM) { + return null; + } + + let username = this.normalizeUsername(this.channel), + user = this.whoMap[username]; + if (user == undefined || this.isUserOffline(username)) { + return this.StatusMessage.offline(); + } + + return this.StatusMessage.getStatus(user.status); + }, + isChatPartnerAway() { + // In a DM thread, returns if your chat partner's status is anything + // other than "online". + if (!this.isDM) return false; + let status = this.chatPartnerStatusMessage; + return status === null || status.name !== "online"; + }, canUploadFile() { // Public channels: OK if (!this.channel.indexOf('@') === 0) { @@ -3948,6 +3980,15 @@ export default { 'p-1 pb-5': messageStyle.indexOf('compact') === 0 }"> + +
+ Status: + + {{ chatPartnerStatusMessage.emoji }} {{ chatPartnerStatusMessage.label }} + + undefined +
+