[IMP] mail: introduce MessageView/clockWatcher

Task-2831082

closes odoo/odoo#90957

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

addons/mail/static/src/components/message/message.js

@@ -8,7 +8,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { _lt } from 'web.core';
 import Popover from "web.Popover";
 
-const { Component, onWillUnmount, useRef } = owl;
+const { Component, useRef } = owl;
 
 const READ_MORE = _lt("Read More");
 const READ_LESS = _lt("Read Less");
@@ -41,12 +41,6 @@ export class Message extends Component {
          * To get checkbox state.
          */
         this._checkboxRef = useRef('checkbox');
-        /**
-         * Id of setInterval used to auto-update time elapsed of message at
-         * regular time.
-         */
-        this._intervalId = undefined;
-        onWillUnmount(() => this._willUnmount());
         /**
          * States the index of the last "read more" that was inserted.
          * Useful to remember the state for each "read more" even if their DOM
@@ -64,10 +58,6 @@ export class Message extends Component {
         this._isReadMoreByIndex = new Map();
     }
 
-    _willUnmount() {
-        clearInterval(this._intervalId);
-    }
-
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
@@ -265,13 +255,6 @@ export class Message extends Component {
                 message: this.messageView.message,
             });
         }
-        this.messageView.message.refreshDateFromNow();
-        clearInterval(this._intervalId);
-        this._intervalId = setInterval(() => {
-            if (this.messageView) {
-                this.messageView.message.refreshDateFromNow();
-            }
-        }, 60 * 1000);
     }
 
 }

addons/mail/static/src/components/message/message.xml

@@ -94,7 +94,7 @@
                                 </t>
                                 <t t-if="messageView.message.date">
                                     <small class="o_Message_date o_Message_headerDate text-500" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }" t-att-title="messageView.message.datetime">
-                                        - <t t-esc="messageView.message.dateFromNow"/>
+                                        - <t t-esc="messageView.dateFromNow"/>
                                     </small>
                                 </t>
                                 <t t-if="messageView.messageSeenIndicatorView">

addons/mail/static/src/models/clock_watcher.js

@@ -8,7 +8,7 @@ import { one } from '@mail/model/model_field';
  */
 registerModel({
     name: 'ClockWatcher',
-    identifyingFields: [['activityViewOwner']],
+    identifyingFields: [['activityViewOwner', 'messageViewOwner']],
     fields: {
         activityViewOwner: one('ActivityView', {
             inverse: 'clockWatcher',
@@ -18,5 +18,9 @@ registerModel({
             inverse: 'watchers',
             required: true,
         }),
+        messageViewOwner: one('MessageView', {
+            inverse: 'clockWatcher',
+            readonly: true,
+        }),
     },
 });

addons/mail/static/src/models/message.js

@@ -4,7 +4,7 @@ import { registerModel } from '@mail/model/model_core';
 import { attr, many, one } from '@mail/model/model_field';
 import { clear, insert, insertAndReplace, replace } from '@mail/model/model_field_command';
 import emojis from '@mail/js/emojis';
-import { addLink, htmlToTextContentInline, parseAndTransform, timeFromNow } from '@mail/js/utils';
+import { addLink, htmlToTextContentInline, parseAndTransform } from '@mail/js/utils';
 
 import { session } from '@web/session';
 import { sprintf } from '@web/core/utils/strings';
@@ -242,12 +242,6 @@ registerModel({
                 },
             });
         },
-        /**
-         * Refreshes the value of `dateFromNow` field to the "current now".
-         */
-        refreshDateFromNow() {
-            this.update({ dateFromNow: this._computeDateFromNow() });
-        },
         /**
          * Removes the given reaction from this message.
          *
@@ -377,15 +371,6 @@ registerModel({
             }
             return this.date.format('LL');
         },
-        /**
-         * @returns {string}
-         */
-        _computeDateFromNow() {
-            if (!this.date) {
-                return clear();
-            }
-            return timeFromNow(this.date);
-        },
         /**
          * @private
          * @returns {string|FieldCommand}
@@ -740,12 +725,6 @@ registerModel({
         dateDay: attr({
             compute: '_computeDateDay',
         }),
-        /**
-         * States the time elapsed since date up to now.
-         */
-        dateFromNow: attr({
-            compute: '_computeDateFromNow',
-        }),
         /**
          * The date time of the message at current user locale time.
          */

addons/mail/static/src/models/message_view.js

@@ -182,6 +182,19 @@ registerModel({
         _computeAuthorAvatarTitleText() {
             return this.env._t("Open chat");
         },
+        /**
+         * @returns {string}
+         */
+        _computeDateFromNow() {
+            if (!this.message.date) {
+                return clear();
+            }
+            const now = moment(this.clockWatcher.clock.date.getTime());
+            if (now.diff(this.message.date, 'seconds') < 45) {
+                return this.env._t("now");
+            }
+            return this.message.date.fromNow();
+        },
         /**
          * @private
          * @returns {string|FieldCommand}
@@ -288,6 +301,15 @@ registerModel({
         authorAvatarTitleText: attr({
             compute: '_computeAuthorAvatarTitleText',
         }),
+        clockWatcher: one('ClockWatcher', {
+            default: insertAndReplace({
+                clock: insertAndReplace({
+                    frequency: 60 * 1000,
+                }),
+            }),
+            inverse: 'messageViewOwner',
+            isCausal: true,
+        }),
         /**
          * States the component displaying this message view (if any).
          */
@@ -303,6 +325,12 @@ registerModel({
             inverse: 'messageViewInEditing',
             isCausal: true,
         }),
+        /**
+         * States the time elapsed since date up to now.
+         */
+        dateFromNow: attr({
+            compute: '_computeDateFromNow',
+        }),
         /**
          * States the delete message confirm view that is displaying this
          * message view.