Skip to content

Commit

Permalink
feat: Remember Active Dashboard Chat User, Message Text, and Replying…
Browse files Browse the repository at this point in the history 
…-To (#2772)

* feat: Remember Active Dashboard Chat User

- Caches the active chatter in the dashboard when the chat-messages
  controller gets reloaded.
- This intentionally **does not** get saved to disk, and the application
  will always start back up with "Streamer" as the active chat sender.
- Previously, changing component tabs then changing back would cause the
  chat sender to get reset to Streamer. This is *not* cool.
- Implements #2353

* Revert "feat: Remember Active Dashboard Chat User"

This reverts commit 294daba.

* fix: Rework PR #2772 With chatMessageService

- Migrated chat/dashboard caching from settingsService to
  chatMessageService.
- Added caching for chat sender (bot vs streamer).
- Added caching for outgoing message text that has not (yet) been sent.
- You can now select your chat sender, type out a beautiful message,
  change to another tab in the application for any reason, then come
  back and further edit or send the message.

* debt: Cleanup html Warnings in chatMessages

- 3x "Attribute value missing" warns
  - "href" keys inside of "a" tags aren't mandatory
  - But an "href" key must have a value assigned
  - Removed unnecessary "href" keys.
- 1x "Element 'div' cannot be nested inside of element 'span'
  - Self-explanatory
  - Changed outer span to a div.

* Include replies/threads in Dashboard Memory

- Add message reply/threading caching to the chat messages control.
- Why remember 2/3rds but ignore the last 1/3rd?
- I think I'm done touching this PR now, outside of potential v5 merges.
- For real this time.

---------

Co-authored-by: Erik Bigler <[email protected]>
  • Loading branch information
@phroggster @ebiggz
phroggster and ebiggz authored Sep 13, 2024
1 parent aec4eed commit 295d613
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 42 deletions.
42 changes: 18 additions & 24 deletions src/gui/app/controllers/chat-messages.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,12 @@
utilityService,
activityFeedService
) {
$scope.settings = settingsService;

$scope.afs = activityFeedService;
$scope.cms = chatMessagesService;
$scope.settings = settingsService;

$scope.chatMessage = "";
$scope.chatSender = "Streamer";
$scope.disabledMessage = "";

$scope.cms = chatMessagesService;

$scope.selectedUserData = {};

$scope.botLoggedIn = connectionService.accounts.bot.loggedIn;
Expand All @@ -34,19 +30,17 @@
$scope.hideEventLabel = () => ((parseInt(settings.dashboardActivityFeed.replace("%", "") / 100 * $parent.width())) < 180 ? true : false);
};

$scope.threadDetails = null;

function getThreadMessages(threadOrReplyMessageId) {
return chatMessagesService.chatQueue.filter((chatItem) => {
return chatItem.type === "message" && (chatItem.data.id === threadOrReplyMessageId || chatItem.data.replyParentMessageId === threadOrReplyMessageId || chatItem.data.threadParentMessageId === threadOrReplyMessageId);
}).map(ci => ci.data);
}

$scope.currentThreadMessages = () => {
if (!$scope.threadDetails?.threadParentMessageId) {
if (!chatMessagesService.threadDetails?.threadParentMessageId) {
return [];
}
return getThreadMessages($scope.threadDetails.threadParentMessageId);
return getThreadMessages(chatMessagesService.threadDetails.threadParentMessageId);
};

$scope.updateLayoutSettings = (updatedSettings) => {
Expand Down Expand Up @@ -126,7 +120,7 @@
};

$scope.updateChatInput = function(text) {
$scope.chatMessage = text;
chatMessagesService.chatMessage = text;
focusMessageInput();
};

Expand All @@ -138,15 +132,15 @@

const threadParentId = parentReplyMessage.threadParentMessageId || parentReplyMessage.replyParentMessageId || parentReplyMessage.id;

$scope.threadDetails = {
chatMessagesService.threadDetails = {
threadParentMessageId: threadParentId,
replyToMessageId: threadOrReplyMessageId,
replyToUserDisplayName: parentReplyMessage.username
};
};

$scope.closeThreadPanel = () => {
$scope.threadDetails = null;
chatMessagesService.threadDetails = null;
};

$scope.onReplyClicked = function(threadOrReplyMessageId) {
Expand All @@ -169,14 +163,14 @@
const chatHistory = [];
let currrentHistoryIndex = -1;
$scope.submitChat = function() {
if ($scope.chatMessage == null || $scope.chatMessage.length < 1) {
if (chatMessagesService.chatMessage == null || chatMessagesService.chatMessage.length < 1) {
return;
}
chatMessagesService.submitChat($scope.chatSender, $scope.chatMessage, $scope.threadDetails?.replyToMessageId);
chatHistory.unshift($scope.chatMessage);
chatMessagesService.submitChat(chatMessagesService.chatSender, chatMessagesService.chatMessage, chatMessagesService.threadDetails?.replyToMessageId);
chatHistory.unshift(chatMessagesService.chatMessage);
currrentHistoryIndex = -1;
$scope.chatMessage = "";
$scope.threadDetails = null;
chatMessagesService.chatMessage = "";
chatMessagesService.threadDetails = null;
};

$scope.onMessageFieldUpdate = () => {
Expand All @@ -188,23 +182,23 @@
if (keyCode === 38) {
//up arrow
if (
$scope.chatMessage.length < 1 ||
$scope.chatMessage === chatHistory[currrentHistoryIndex]
chatMessagesService.chatMessage.length < 1 ||
chatMessagesService.chatMessage === chatHistory[currrentHistoryIndex]
) {
if (currrentHistoryIndex + 1 < chatHistory.length) {
currrentHistoryIndex++;
$scope.chatMessage = chatHistory[currrentHistoryIndex];
chatMessagesService.chatMessage = chatHistory[currrentHistoryIndex];
}
}
} else if (keyCode === 40) {
//down arrow
if (
$scope.chatMessage.length > 0 ||
$scope.chatMessage === chatHistory[currrentHistoryIndex]
chatMessagesService.chatMessage.length > 0 ||
chatMessagesService.chatMessage === chatHistory[currrentHistoryIndex]
) {
if (currrentHistoryIndex - 1 >= 0) {
currrentHistoryIndex--;
$scope.chatMessage = chatHistory[currrentHistoryIndex];
chatMessagesService.chatMessage = chatHistory[currrentHistoryIndex];
}
}
} else if (keyCode === 13) {
Expand Down
7 changes: 7 additions & 0 deletions src/gui/app/services/chat-messages.service.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,13 @@

service.autodisconnected = false;

// The active chat sender identifier, either "Streamer" or "Bot"
service.chatSender = "Streamer";
// The pending but unsent outgoing chat message text
service.messageText = "";
// The message/thread currently being replied to
service.threadDetails = null;

// Tells us if we should process in app chat or not.
service.getChatFeed = function() {
return settingsService.getRealChatFeed();
Expand Down
33 changes: 15 additions & 18 deletions src/gui/app/templates/chat/_chat-messages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
>
</div>
<button
ng-hide="scrollGlued || threadDetails != null"
ng-hide="scrollGlued || cms.threadDetails != null"
ng-click="scrollGlued = true"
class="chat-scroll-paused-btn btn-sm clickable mb-4"
>
Expand Down Expand Up @@ -89,7 +89,7 @@
<div class="chat-autodisconnected" ng-show="cms.autodisconnected">
Disconnected from chat, trying to reconnect...
</div>
<div ng-if="threadDetails != null" class="thread-wrapper" ng-class="{ 'mt-5': alternateBackgrounds}">
<div ng-if="cms.threadDetails != null" class="thread-wrapper" ng-class="{ 'mt-5': alternateBackgrounds}">
<div class="thread-header">
<h4><i class="fas" ng-class="currentThreadMessages().length < 2 ? 'fa-reply' : 'fa-comment-alt-lines'" style="margin-right: 10px;"></i>{{currentThreadMessages().length < 2 ? "Reply to" : "Thread"}}</h4>
<button type="button" class="thread-close-btn clickable" aria-label="Close" ng-click="closeThreadPanel()"><i class="far fa-times"></i></button>
Expand All @@ -112,36 +112,34 @@ <h4><i class="fas" ng-class="currentThreadMessages().length < 2 ? 'fa-reply' : '
chat-size-style="{{customFontSizeStyle}}"
/>
</div>
<div class="thread-replying-to" ng-if="threadDetails.replyToMessageId != threadDetails.threadParentMessageId">
<span>Replying to <span style="font-weight: 800">@{{threadDetails.replyToUserDisplayName}}</span></span>
<button class="btn btn-link" ng-click="threadDetails.replyToMessageId = threadDetails.threadParentMessageId">Cancel</button>
<div class="thread-replying-to" ng-if="cms.threadDetails.replyToMessageId != cms.threadDetails.threadParentMessageId">
<span>Replying to <span style="font-weight: 800">@{{cms.threadDetails.replyToUserDisplayName}}</span></span>
<button class="btn btn-link" ng-click="cms.threadDetails.replyToMessageId = cms.threadDetails.threadParentMessageId">Cancel</button>
</div>
</div>
</div>
<div class="text-input-wrapper">
<div
class="text-input"
chat-auto-complete-menu
ng-model="chatMessage"
ng-model="cms.chatMessage"
input-id="chatMessageInput"
>
<div class="dropup">
<span
<div
class="dropdown-toggle chatter-dropdown"
data-toggle="dropdown"
uib-tooltip="Chat as"
tooltip-placement="left"
tooltip-append-to-body="true"
>
<span class="ml-4" style="width: 100%; text-align: center"
>{{chatSender}}</span
>
<span class="ml-4" style="width: 100%; text-align: center">{{cms.chatSender}}</span>
<div class="fb-arrow down mx-4 mb-1"></div>
</span>
</div>
<ul class="dropdown-menu">
<li ng-click="chatSender = 'Streamer'"><a href>Streamer</a></li>
<li ng-click="chatSender = 'Bot'" ng-show="botLoggedIn">
<a href>Bot</a>
<li ng-click="cms.chatSender = 'Streamer'"><a>Streamer</a></li>
<li ng-click="cms.chatSender = 'Bot'" ng-show="botLoggedIn">
<a>Bot</a>
</li>
</ul>
</div>
Expand All @@ -153,7 +151,7 @@ <h4><i class="fas" ng-class="currentThreadMessages().length < 2 ? 'fa-reply' : '
class="text-input-field"
style="height: 100%"
ng-maxlength="360"
ng-model="chatMessage"
ng-model="cms.chatMessage"
ng-change="onMessageFieldUpdate()"
ng-keydown="onMessageFieldKeypress($event)"
ng-trim="false"
Expand Down Expand Up @@ -206,7 +204,6 @@ <h4><i class="fas" ng-class="currentThreadMessages().length < 2 ? 'fa-reply' : '
</div>
<div uib-dropdown>
<a
href
uib-dropdown-toggle
class="clickable"
style="color: white; font-size: 20px; line-height: 1"
Expand All @@ -216,7 +213,7 @@ <h4><i class="fas" ng-class="currentThreadMessages().length < 2 ? 'fa-reply' : '
</a>
<ul class="dropdown-menu right-justified-dropdown" uib-dropdown-menu>
<li ng-class="{'disabled': afs.activities.length < 1}">
<a href ng-click="afs.toggleMarkAllAcknowledged()"
<a ng-click="afs.toggleMarkAllAcknowledged()"
><i
class="far fa-check-square mr-4"
aria-label="Mark all events as acknowledged"
Expand All @@ -226,7 +223,7 @@ <h4><i class="fas" ng-class="currentThreadMessages().length < 2 ? 'fa-reply' : '
>
</li>
<li>
<a href ng-click="afs.showEditActivityFeedEventsModal()"
<a ng-click="afs.showEditActivityFeedEventsModal()"
><i class="far fa-toggle-off mr-4" aria-label="Edit events"></i>
Edit events</a
>
Expand Down

0 comments on commit 295d613

Please sign in to comment.