feat: Clickable read receipt on Ping Message

wireapp · Nov 14, 2024 · 4d6a730 · 4d6a730
1 parent 0258aa7
commit 4d6a730
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 20 deletions.
diff --git a/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx b/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx
@@ -102,7 +102,7 @@ export const ContentMessageComponent = ({
   const {
     senderName,
     timestamp,
-    ephemeral_caption: ephemeralCaption,
+    ephemeralCaption,
     ephemeral_status,
     assets,
     was_edited,
@@ -114,7 +114,7 @@ export const ContentMessageComponent = ({
   } = useKoSubscribableChildren(message, [
     'senderName',
     'timestamp',
-    'ephemeral_caption',
+    'ephemeralCaption',
     'ephemeral_status',
     'assets',
     'was_edited',

diff --git a/src/script/components/MessagesList/Message/MessageWrapper.tsx b/src/script/components/MessagesList/Message/MessageWrapper.tsx
@@ -259,6 +259,7 @@ export const MessageWrapper: React.FC<MessageParams> = ({
         message={message}
         is1to1Conversation={conversation.is1to1()}
         isLastDeliveredMessage={isLastDeliveredMessage}
+        onClickDetails={onClickDetails}
       />
     );
   }

diff --git a/src/script/components/MessagesList/Message/PingMessage.tsx b/src/script/components/MessagesList/Message/PingMessage.tsx
@@ -26,30 +26,35 @@ import {t} from 'Util/LocalizerUtil';
 
 import {ReadReceiptStatus} from './ReadReceiptStatus';
 
+import {Message} from '../../../entity/message/Message';
 import {PingMessage as PingMessageEntity} from '../../../entity/message/PingMessage';
 
 export interface PingMessageProps {
   message: PingMessageEntity;
   is1to1Conversation: boolean;
   isLastDeliveredMessage: boolean;
+  onClickDetails: (message: Message) => void;
 }
 
-const PingMessage = ({message, is1to1Conversation, isLastDeliveredMessage}: PingMessageProps) => {
-  const {unsafeSenderName, caption, ephemeral_caption, isObfuscated, get_icon_classes} = useKoSubscribableChildren(
-    message,
-    ['unsafeSenderName', 'caption', 'ephemeral_caption', 'isObfuscated', 'get_icon_classes'],
-  );
+const PingMessage = ({message, is1to1Conversation, isLastDeliveredMessage, onClickDetails}: PingMessageProps) => {
+  const {unsafeSenderName, caption, ephemeralCaption, isObfuscated, iconClasses} = useKoSubscribableChildren(message, [
+    'unsafeSenderName',
+    'caption',
+    'ephemeralCaption',
+    'isObfuscated',
+    'iconClasses',
+  ]);
 
   return (
     <div className="message-header" data-uie-name="element-message-ping">
       <div className="message-header-icon">
-        <div className={`icon-ping ${get_icon_classes}`} />
+        <div className={cx('icon-ping', iconClasses)} />
       </div>
       <div
         className={cx('message-header-label message-header-ping', {
           'ephemeral-message-obfuscated': isObfuscated,
         })}
-        title={ephemeral_caption}
+        title={ephemeralCaption}
         data-uie-name="element-message-ping-text"
       >
         <p className="message-header-label__multiline">
@@ -58,7 +63,11 @@ const PingMessage = ({message, is1to1Conversation, isLastDeliveredMessage}: Ping
         </p>
 
         <div>
-          <ReadReceiptStatus message={message} is1to1Conversation={is1to1Conversation} />
+          <ReadReceiptStatus
+            message={message}
+            is1to1Conversation={is1to1Conversation}
+            onClickDetails={onClickDetails}
+          />
 
           {message.expectsReadConfirmation && is1to1Conversation && isLastDeliveredMessage && (
             <div

diff --git a/src/script/entity/message/Message.ts b/src/script/entity/message/Message.ts
@@ -65,7 +65,7 @@ export class Message {
   public id: string;
   public primary_key?: string;
   public readonly accent_color: ko.PureComputed<string>;
-  public readonly ephemeral_caption: ko.PureComputed<string>;
+  public readonly ephemeralCaption: ko.PureComputed<string>;
   public readonly ephemeral_expires: ko.Observable<boolean | number | string>;
   public readonly ephemeral_remaining: ko.Observable<number>;
   public readonly ephemeral_started: ko.Observable<number>;
@@ -88,7 +88,7 @@ export class Message {
   constructor(id: string = '0', super_type?: SuperType) {
     this.id = id;
     this.super_type = super_type;
-    this.ephemeral_caption = ko.pureComputed(() => {
+    this.ephemeralCaption = ko.pureComputed(() => {
       const remainingTime = this.ephemeral_remaining();
       return remainingTime ? `${formatDurationCaption(remainingTime)} ${t('ephemeralRemaining')}` : '';
     });

diff --git a/src/script/entity/message/PingMessage.ts b/src/script/entity/message/PingMessage.ts
@@ -24,24 +24,23 @@ import {t} from 'Util/LocalizerUtil';
 import {Message} from './Message';
 
 import {SuperType} from '../../message/SuperType';
+import {ReactionMap} from '../../storage';
 
 export class PingMessage extends Message {
   public readonly caption: ko.PureComputed<string>;
-  public readonly get_icon_classes: ko.PureComputed<string>;
+  public readonly iconClasses: ko.PureComputed<string>;
+  readonly reactions = ko.observable<ReactionMap>([]);
 
   constructor() {
     super();
     this.super_type = SuperType.PING;
 
     this.caption = ko.pureComputed(() => (this.user().isMe ? t('conversationPingYou') : t('conversationPing')));
 
-    this.get_icon_classes = ko.pureComputed(() => {
-      const show_ping_animation = Date.now() - this.timestamp() < 2000;
-      let css_classes = this.accent_color();
-      if (show_ping_animation) {
-        css_classes += ' ping-animation ping-animation-soft';
-      }
-      return css_classes;
+    this.iconClasses = ko.pureComputed(() => {
+      const showPingAnimation = Date.now() - this.timestamp() < 2000;
+      const cssClasses = this.accent_color();
+      return showPingAnimation ? `${cssClasses} ping-animation ping-animation-soft` : cssClasses;
     });
   }
 }