Can retrieve room media

matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts

@@ -67,4 +67,17 @@ export class MatrixApiEvent {
       })
     ).data;
   }
+
+  /**
+   * Get Matrix event file URL
+   */
+  static GetEventFileURL(
+    room: Room,
+    event_id: string,
+    thumbnail: boolean
+  ): string {
+    return `${APIClient.ActualBackendURL()}/matrix/room/${
+      room.id
+    }/event/${event_id}/file?thumbnail=${thumbnail}`;
+  }
 }

matrixgw_frontend/src/utils/RoomEventsManager.ts

@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import type {
   MatrixEvent,
   MatrixEventsList,
@@ -14,6 +15,7 @@ export interface Message {
   event_id: string;
   account: string;
   time_sent: number;
+  time_sent_dayjs: dayjs.Dayjs;
   modified: boolean;
   reactions: MessageReaction[];
   content: string;
@@ -80,6 +82,7 @@ export class RoomEventsManager {
           modified: false,
           reactions: [],
           time_sent: evt.time,
+          time_sent_dayjs: dayjs.unix(evt.time / 1000),
           image: data.content.file?.url,
           content: data.content.body,
         });

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -1,10 +1,11 @@
-import dayjs from "dayjs";
+import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
 import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
+import type { Room } from "../../api/matrix/MatrixApiRoom";
 import type { Message, RoomEventsManager } from "../../utils/RoomEventsManager";
 import { AccountIcon } from "./AccountIcon";
-import { MatrixApiMedia } from "../../api/matrix/MatrixApiMedia";
 
 export function RoomMessagesList(p: {
+  room: Room;
   users: UsersMap;
   mgr: RoomEventsManager;
 }): React.ReactElement {
@@ -20,6 +21,11 @@ export function RoomMessagesList(p: {
             p.mgr.messages[idx - 1].account === m.account &&
             m.time_sent - p.mgr.messages[idx - 1].time_sent < 60 * 3 * 1000
           }
+          firstMessageOfDay={
+            idx === 0 ||
+            m.time_sent_dayjs.startOf("day").unix() !=
+              p.mgr.messages[idx - 1].time_sent_dayjs.startOf("day").unix()
+          }
         />
       ))}
     </div>
@@ -27,13 +33,20 @@ export function RoomMessagesList(p: {
 }
 
 function RoomMessage(p: {
+  room: Room;
   users: UsersMap;
   message: Message;
   previousFromSamePerson: boolean;
+  firstMessageOfDay: boolean;
 }): React.ReactElement {
   const user = p.users.get(p.message.account);
   return (
     <>
+      {p.firstMessageOfDay && (
+        <div style={{ textAlign: "center" }}>
+          {p.message.time_sent_dayjs.format("DD/MM/YYYY")}
+        </div>
+      )}
       {!p.previousFromSamePerson && user && (
         <div
           style={{
@@ -49,9 +62,15 @@ function RoomMessage(p: {
       )}
 
       <div>
-        {dayjs.unix(p.message.time_sent / 1000).format("HH:mm")}{" "}
+        {p.message.time_sent_dayjs.format("HH:mm")}{" "}
         {p.message.image ? (
-          <img src={MatrixApiMedia.MediaURL(p.message.image, true)} />
+          <img
+            src={MatrixApiEvent.GetEventFileURL(
+              p.room,
+              p.message.event_id,
+              true
+            )}
+          />
         ) : (
           p.message.content
         )}