Replace momentjs with pipes from ngx-moment

package.json

@@ -95,6 +95,7 @@
     "zone.js": "^0.8.20"
   },
   "dependencies": {
+    "ngx-moment": "^2.0.0",
     "url-parse": "^1.2.0"
   }
 }

src/app/app.module.ts

@@ -27,6 +27,8 @@ import { ToasterModule } from "angular2-toaster";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { BootstrapModalModule } from "ngx-modialog/plugins/bootstrap";
 import { ModalModule } from "ngx-modialog";
+import { MomentModule } from 'ngx-moment';
+import { TimestampComponent } from "./elements/timestamp/timestamp.component";
 import { LocatorService } from "./services/locator.service";
 import { LandingComponent } from "./views/landing/landing.component";
 import { SpinnerComponent } from "./elements/spinner/spinner.component";
@@ -94,11 +96,13 @@ const SHOWDOWN_CONVERTER = new showdown.Converter();
         ModalModule.forRoot(),
         BootstrapModalModule,
         PerfectScrollbarModule,
+        MomentModule,
     ],
     declarations: [
         AppComponent,
         LandingComponent,
         SpinnerComponent,
+        TimestampComponent,
         LoggedInComponent,
         LoginComponent,
         RoomListComponent,

src/app/elements/event-tiles/event-tile.component.base.ts

@@ -21,8 +21,6 @@ import { Room } from "../../models/matrix/dto/room";
 import { RoomTimelineEvent } from "../../views/room/room.component";
 import { RoomEvent } from "../../models/matrix/events/room/room-event";
 import { RoomMemberEvent } from "../../models/matrix/events/room/state/m.room.member";
-import { MOMENT_FULL_TIMESTAMP_FORMAT } from "../../app.module";
-import moment = require("moment");
 
 export abstract class EventTileComponentBase {
     @Input() timelineEvent: RoomTimelineEvent;
@@ -44,11 +42,7 @@ export abstract class EventTileComponentBase {
         return this.room.getMemberEvent(this.event.sender);
     }
 
-    public get timestamp(): string {
-        return moment(this.event.origin_server_ts).fromNow();
-    }
-
-    public get fullTimestamp(): string {
-        return moment(this.event.origin_server_ts).format(MOMENT_FULL_TIMESTAMP_FORMAT);
+    public get timestamp(): number {
+        return this.event.origin_server_ts / 1000;
     }
 }

src/app/elements/event-tiles/message/message.component.html

@@ -27,7 +27,7 @@
     <div class="content">
         <div class="sender-info" *ngIf="showSender">
             <span class="name">{{ senderDisplayName }}</span>
-            <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+            <my-timestamp [timestamp]="timestamp"></my-timestamp>
         </div>
         <div class="body" #eventBody></div>
     </div>

src/app/elements/event-tiles/state/create/create.component.html

@@ -20,5 +20,5 @@
     <my-member-pill [userId]="sender.state_key" [room]="room"></my-member-pill>
     <span class="description">created the room</span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>

src/app/elements/event-tiles/state/member/member.component.html

@@ -30,7 +30,7 @@
                     [forcedAvatarUrl]="target.content.avatar_url"
     ></my-member-pill>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 
 <!-- DISPLAY NAME ONLY -->
@@ -47,7 +47,7 @@
                     [forcedAvatarUrl]="target.content.avatar_url"
     ></my-member-pill>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 
 <!-- AVATAR ONLY -->
@@ -64,23 +64,23 @@
                     [forcedAvatarUrl]="target.content.avatar_url"
     ></my-member-pill>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 
 <!-- JOINED -->
 <div class="tile" *ngIf="determinedState === 'join'">
     <my-member-pill [userId]="target.state_key" [room]="room"></my-member-pill>
     <span class="description">joined the room</span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 
 <!-- LEFT -->
 <div class="tile" *ngIf="determinedState === 'left'">
     <my-member-pill [userId]="target.state_key" [room]="room"></my-member-pill>
     <span class="description">left the room</span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 
 <!-- KICKED -->
@@ -93,7 +93,7 @@
         <span class="reason" *ngIf="target.content.reason"> for "{{ target.content.reason }}"</span>
     </span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 
 <!-- BANNED -->
@@ -106,7 +106,7 @@
         <span class="reason" *ngIf="target.content.reason"> for "{{ target.content.reason }}"</span>
     </span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 
 <!-- UNBANNED -->
@@ -115,7 +115,7 @@
     <span class="description">lifted the ban on</span>
     <my-member-pill [userId]="target.state_key" [room]="room"></my-member-pill>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 
 <!-- INVITED -->
@@ -125,22 +125,22 @@
     <my-member-pill [userId]="target.state_key" [room]="room"></my-member-pill>
     <span class="description">to the room</span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 
 <!-- DECLINED INVITE -->
 <div class="tile" *ngIf="determinedState === 'decline'">
     <my-member-pill [userId]="sender.state_key" [room]="room"></my-member-pill>
     <span class="description">declined the invite</span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 
 <!-- UNKNOWN -->
 <div class="tile" *ngIf="determinedState === 'none'">
     <my-member-pill [userId]="target.state_key" [room]="room"></my-member-pill>
     <span class="description">had their membership updated</span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 

src/app/elements/event-tiles/state/name/name.component.html

@@ -20,11 +20,11 @@
     <my-member-pill [userId]="sender.state_key" [room]="room"></my-member-pill>
     <span class="description">changed the room name to "{{ event.content.name }}"</span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 <div class="tile" *ngIf="!event.content.name">
     <my-member-pill [userId]="sender.state_key" [room]="room"></my-member-pill>
     <span class="description">removed the room name</span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>

src/app/elements/event-tiles/state/topic/topic.component.html

@@ -20,11 +20,11 @@
     <my-member-pill [userId]="sender.state_key" [room]="room"></my-member-pill>
     <span class="description">changed the room topic to "{{ event.content.topic }}"</span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>
 <div class="tile" *ngIf="!event.content.topic">
     <my-member-pill [userId]="sender.state_key" [room]="room"></my-member-pill>
     <span class="description">removed the room's topic</span>
 
-    <span class="timestamp" [title]="fullTimestamp">{{ timestamp }}</span>
+    <my-timestamp [timestamp]="timestamp"></my-timestamp>
 </div>

src/app/elements/timestamp/timestamp.component.html

@@ -0,0 +1 @@
+<span class="timestamp" title="{{(timestamp | amFromUnix) | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a'}}">{{(timestamp | amFromUnix) | amTimeAgo }}</span>

src/app/elements/timestamp/timestamp.component.ts

@@ -0,0 +1,27 @@
+/*
+ *     Evelium - A matrix client
+ *     Copyright (C)  2018 Marcel Radzio
+ *
+ *     This program is free software: you can redistribute it and/or modify
+ *     it under the terms of the GNU General Public License as published by
+ *     the Free Software Foundation, either version 3 of the License, or
+ *     (at your option) any later version.
+ *
+ *     This program is distributed in the hope that it will be useful,
+ *     but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *     GNU General Public License for more details.
+ *
+ *     You should have received a copy of the GNU General Public License
+ *     along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: "my-timestamp",
+    templateUrl: "./timestamp.component.html",
+})
+export class TimestampComponent {
+    @Input() timestamp: number;
+}