Can retrieve room media

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
         )}