diff --git a/dist/index.css b/dist/index.css index 984619b4..20b0221a 100644 --- a/dist/index.css +++ b/dist/index.css @@ -733,7 +733,7 @@ body[showing-chat] #chat-page-wrapper { display: none !important; overflow: hidden; } -.message-bubble > .message-reaction-row:has(button:not([zero])) { +.message-bubble > .message-reaction-row:has(button:not([count="0"])) { display: grid !important; } .message-bubble > .message-reaction-row button { @@ -745,7 +745,7 @@ body[showing-chat] #chat-page-wrapper { flex: 1 !important; animation: slide-up var(--animation-duration); } -.message-bubble > .message-reaction-row button[zero] { +.message-bubble > .message-reaction-row button[count="0"] { display: none; } .message-reaction-row { diff --git a/dist/index.js b/dist/index.js index d4265460..3575b0f5 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1498,11 +1498,7 @@ const fileContent = FileModel2.createFileContent(v4_default(), "reaction"); const reaction = { ...fileContent, - fileId: _ChatModel.createMessageReactionId( - messageId, - content, - sender - ), + fileId: _ChatModel.createMessageReactionId(messageId, sender), messageId, sender, content, @@ -1512,24 +1508,11 @@ }; } static { - this.createMessageReactionId = (messageId, content, sender) => { - return messageId + sender + reactionStringMap[content]; + this.createMessageReactionId = (messageId, sender) => { + return messageId + sender; }; } }; - var ReactionSymbols = /* @__PURE__ */ ((ReactionSymbols2) => { - ReactionSymbols2["ThumbsUp"] = "\u{1F44D}"; - ReactionSymbols2["Check"] = "\u2705"; - ReactionSymbols2["Stop"] = "\u{1F6D1}"; - ReactionSymbols2["Attention"] = "\u2757\uFE0F"; - ReactionSymbols2["DoubleAttention"] = "\u203C\uFE0F"; - ReactionSymbols2["Question"] = "\u2753"; - return ReactionSymbols2; - })(ReactionSymbols || {}); - var reactionStringMap = {}; - Object.entries(ReactionSymbols).forEach((value) => { - reactionStringMap[value[1]] = value[0]; - }); var ChatInfoReference = { dataVersion: DATA_VERSION, primaryChannel: "", @@ -2038,35 +2021,39 @@ this.status = new State( void 0 ); - this.reactionsThumbsUp = new MapState(); - this.reactionsCheck = new MapState(); - this.reactionsStop = new MapState(); - this.reactionsAttention = new MapState(); - this.reactionsDoubleAttention = new MapState(); - this.reactionsQuestion = new MapState(); - this.reactionsThumbsUpCount = createProxyState( - [this.reactionsThumbsUp], - () => this.reactionsThumbsUp.value.size + this.allReactions = new MapState(); + this.userReaction = new State(void 0); + this.reactionsThumbsUp = MapState; + this.reactionsCheck = MapState; + this.reactionsStop = MapState; + this.reactionsAttention = MapState; + this.reactionsDoubleAttention = MapState; + this.reactionsQuestion = MapState; + this.generateReactionCountProxyState = (content) => { + return createProxyState( + [this.allReactions], + () => [...this.allReactions.value.values()].filter( + (x) => x.content == content + ).length + ); + }; + this.reactionsThumbsUpCount = this.generateReactionCountProxyState( + "\u{1F44D}" /* ThumbsUp */ ); - this.reactionsCheckCount = createProxyState( - [this.reactionsCheck], - () => this.reactionsCheck.value.size + this.reactionsCheckCount = this.generateReactionCountProxyState( + "\u2705" /* Check */ ); - this.reactionsStopCount = createProxyState( - [this.reactionsStop], - () => this.reactionsStop.value.size + this.reactionsStopCount = this.generateReactionCountProxyState( + "\u{1F6D1}" /* Stop */ ); - this.reactionsAttentionCount = createProxyState( - [this.reactionsAttention], - () => this.reactionsAttention.value.size + this.reactionsAttentionCount = this.generateReactionCountProxyState( + "\u2757\uFE0F" /* Attention */ ); - this.reactionsDoubleAttentionCount = createProxyState( - [this.reactionsDoubleAttention], - () => this.reactionsDoubleAttention.value.size + this.reactionsDoubleAttentionCount = this.generateReactionCountProxyState( + "\u203C\uFE0F" /* DoubleAttention */ ); - this.reactionsQuestionCount = createProxyState( - [this.reactionsQuestion], - () => this.reactionsQuestion.value.size + this.reactionsQuestionCount = this.generateReactionCountProxyState( + "\u2753" /* Question */ ); // state this.isPresentingInfoModal = new State(false); @@ -2089,27 +2076,13 @@ }; // reactions this.handleReaction = (reaction) => { - function setReaction(mapState) { - if (reaction.isDeleting) { - mapState.remove(reaction.sender); - } else { - mapState.set(reaction.sender, reaction); - } - } - switch (reaction.content) { - case "\u{1F44D}" /* ThumbsUp */: - return setReaction(this.reactionsThumbsUp); - case "\u2705" /* Check */: - return setReaction(this.reactionsCheck); - case "\u{1F6D1}" /* Stop */: - return setReaction(this.reactionsStop); - case "\u2757\uFE0F" /* Attention */: - return setReaction(this.reactionsAttention); - case "\u203C\uFE0F" /* DoubleAttention */: - return setReaction(this.reactionsDoubleAttention); - case "\u2753" /* Question */: - return setReaction(this.reactionsQuestion); + if (reaction.isDeleting) { + this.allReactions.remove(reaction.sender); + } else { + this.allReactions.set(reaction.sender, reaction); } + if (reaction.sender != this.coreViewModel.settingsModel.username) return; + this.userReaction.value = reaction.isDeleting ? void 0 : reaction.content; }; this.sendReaction = (content, isDeleting) => { this.messagePageViewModel.sendReaction( @@ -3434,60 +3407,42 @@ function MessageReactionButton(coreViewModel2, chatMessageViewModel, content) { let audioLabel; let count; - let reactionState; - let isActive = new State(false); - let isZero = new State(true); + let isActive = createProxyState([chatMessageViewModel.userReaction], () => chatMessageViewModel.userReaction.value == content); function sendReaction() { chatMessageViewModel.sendReaction(content, isActive.value); } - function getUsername() { - return chatMessageViewModel.messagePageViewModel.chatViewModel.settingsViewModel.username.value; - } - function checkIsHighlighted() { - return reactionState.value.has(getUsername()); - } switch (content) { case "\u{1F44D}" /* ThumbsUp */: { audioLabel = coreViewModel2.translations.chatPage.message.thumbsUpReaction; count = chatMessageViewModel.reactionsThumbsUpCount; - reactionState = chatMessageViewModel.reactionsThumbsUp; break; } case "\u2705" /* Check */: { audioLabel = coreViewModel2.translations.chatPage.message.checkReaction; count = chatMessageViewModel.reactionsCheckCount; - reactionState = chatMessageViewModel.reactionsCheck; break; } case "\u{1F6D1}" /* Stop */: { audioLabel = coreViewModel2.translations.chatPage.message.stopReaction; count = chatMessageViewModel.reactionsStopCount; - reactionState = chatMessageViewModel.reactionsStop; break; } case "\u2757\uFE0F" /* Attention */: { audioLabel = coreViewModel2.translations.chatPage.message.attentionReaction; count = chatMessageViewModel.reactionsAttentionCount; - reactionState = chatMessageViewModel.reactionsAttention; break; } case "\u203C\uFE0F" /* DoubleAttention */: { audioLabel = coreViewModel2.translations.chatPage.message.doubleAttentionReaction; count = chatMessageViewModel.reactionsDoubleAttentionCount; - reactionState = chatMessageViewModel.reactionsDoubleAttention; break; } case "\u2753" /* Question */: { audioLabel = coreViewModel2.translations.chatPage.message.questionReaction; count = chatMessageViewModel.reactionsQuestionCount; - reactionState = chatMessageViewModel.reactionsQuestion; break; } } - reactionState.subscribe(() => { - isActive.value = checkIsHighlighted(); - isZero.value = reactionState.value.size == 0; - }); return /* @__PURE__ */ createElement( "button", { @@ -3495,7 +3450,7 @@ "on:click": sendReaction, "aria-label": audioLabel, "toggle:selected": isActive, - "toggle:zero": isZero + "set:count": count }, content, /* @__PURE__ */ createElement("span", { "subscribe:innerText": count }) @@ -3542,6 +3497,11 @@ return /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icon), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, label), /* @__PURE__ */ createElement("b", { class: "break-word", "subscribe:innerText": contentState }))); } + // src/View/Components/messageReactionEntry.tsx + function MessageReactionEntry(reaction) { + return /* @__PURE__ */ createElement("div", { class: "tile flex-row" }, /* @__PURE__ */ createElement("span", { class: "flex width-100" }, reaction.sender), /* @__PURE__ */ createElement("span", null, reaction.content)); + } + // src/View/Modals/chatMessageInfoModal.tsx function ChatMessageInfoModal(coreViewModel2, chatMessageViewModel) { return /* @__PURE__ */ createElement( @@ -3566,10 +3526,19 @@ "description", coreViewModel2.translations.chatPage.message.messageContent, chatMessageViewModel.body - )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, coreViewModel2.translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, coreViewModel2.translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, coreViewModel2.translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"))), /* @__PURE__ */ createElement("hr", null), MessageReactionButtonRow( + )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, coreViewModel2.translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, coreViewModel2.translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, coreViewModel2.translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, MessageReactionButtonRow( coreViewModel2, chatMessageViewModel - )), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.hideInfoModal }, coreViewModel2.translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))) + ), /* @__PURE__ */ createElement( + "div", + { + class: "flex-column gap", + "children:append": [ + chatMessageViewModel.allReactions, + MessageReactionEntry + ] + } + ))), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.hideInfoModal }, coreViewModel2.translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))) ); } @@ -5623,7 +5592,7 @@ this.connectionModel = connectionModel2; this.chatListModel = chatListModel2; this.fileTransferModel = fileTransferModel2; - this.BUILD = "Build 26.04.10.A"; + this.BUILD = "Build 26.04.10.B"; // DRAG & DROP this.draggedObject = new State(void 0); // SUGGESTIONS diff --git a/src/Model/Chat/chatModel.ts b/src/Model/Chat/chatModel.ts index c4e7bf7a..9c2650aa 100644 --- a/src/Model/Chat/chatModel.ts +++ b/src/Model/Chat/chatModel.ts @@ -416,11 +416,7 @@ export default class ChatModel { const fileContent = FileModel.createFileContent(v4(), "reaction"); const reaction: ChatMessageReaction = { ...fileContent, - fileId: ChatModel.createMessageReactionId( - messageId, - content, - sender, - ), + fileId: ChatModel.createMessageReactionId(messageId, sender), messageId, sender, @@ -432,10 +428,9 @@ export default class ChatModel { static createMessageReactionId = ( messageId: string, - content: ReactionSymbols, sender: string, ): string => { - return messageId + sender + reactionStringMap[content]; + return messageId + sender; }; } @@ -449,11 +444,6 @@ export enum ReactionSymbols { Question = "❓", } -const reactionStringMap: { [key: ReactionSymbols | string]: string } = {}; -Object.entries(ReactionSymbols).forEach((value) => { - reactionStringMap[value[1]] = value[0]; -}); - export interface ChatInfo extends ValidObject { primaryChannel: string; secondaryChannels: string[]; diff --git a/src/View/ChatPages/messagePage.css b/src/View/ChatPages/messagePage.css index 09ff8b01..f60e08a5 100644 --- a/src/View/ChatPages/messagePage.css +++ b/src/View/ChatPages/messagePage.css @@ -181,7 +181,7 @@ overflow: hidden; } -.message-bubble > .message-reaction-row:has(button:not([zero])) { +.message-bubble > .message-reaction-row:has(button:not([count="0"])) { display: grid !important; } @@ -195,7 +195,7 @@ animation: slide-up var(--animation-duration); } -.message-bubble > .message-reaction-row button[zero] { +.message-bubble > .message-reaction-row button[count="0"] { display: none; } diff --git a/src/View/Components/messageReactionButton.tsx b/src/View/Components/messageReactionButton.tsx index 6e27597e..6087ccca 100644 --- a/src/View/Components/messageReactionButton.tsx +++ b/src/View/Components/messageReactionButton.tsx @@ -13,50 +13,35 @@ export function MessageReactionButton( ) { let audioLabel: string; let count: React.State; - let reactionState: React.MapState; - let isActive = new React.State(false); - let isZero = new React.State(true); + let isActive = React.createProxyState([chatMessageViewModel.userReaction], (() => chatMessageViewModel.userReaction.value == content)) function sendReaction() { chatMessageViewModel.sendReaction(content, isActive.value); } - function getUsername(): string { - return chatMessageViewModel.messagePageViewModel.chatViewModel - .settingsViewModel.username.value; - } - - function checkIsHighlighted(): boolean { - return reactionState.value.has(getUsername()); - } - switch (content) { case ReactionSymbols.ThumbsUp: { audioLabel = coreViewModel.translations.chatPage.message.thumbsUpReaction; count = chatMessageViewModel.reactionsThumbsUpCount; - reactionState = chatMessageViewModel.reactionsThumbsUp; break; } case ReactionSymbols.Check: { audioLabel = coreViewModel.translations.chatPage.message.checkReaction; count = chatMessageViewModel.reactionsCheckCount; - reactionState = chatMessageViewModel.reactionsCheck; break; } case ReactionSymbols.Stop: { audioLabel = coreViewModel.translations.chatPage.message.stopReaction; count = chatMessageViewModel.reactionsStopCount; - reactionState = chatMessageViewModel.reactionsStop; break; } case ReactionSymbols.Attention: { audioLabel = coreViewModel.translations.chatPage.message.attentionReaction; count = chatMessageViewModel.reactionsAttentionCount; - reactionState = chatMessageViewModel.reactionsAttention; break; } case ReactionSymbols.DoubleAttention: { @@ -64,30 +49,23 @@ export function MessageReactionButton( coreViewModel.translations.chatPage.message .doubleAttentionReaction; count = chatMessageViewModel.reactionsDoubleAttentionCount; - reactionState = chatMessageViewModel.reactionsDoubleAttention; break; } case ReactionSymbols.Question: { audioLabel = coreViewModel.translations.chatPage.message.questionReaction; count = chatMessageViewModel.reactionsQuestionCount; - reactionState = chatMessageViewModel.reactionsQuestion; break; } } - reactionState.subscribe(() => { - isActive.value = checkIsHighlighted(); - isZero.value = reactionState.value.size == 0; - }); - return (