Create required components

docs/message-protocol-v2.md

@@ -10,7 +10,9 @@
             "type": "image",
             "content": {
                 "file": "/path/to/probe/file",
-                "alt": "Image alt text (optional)"
+                "alt": "Image alt text (optional)",
+                "width": 100,
+                "height": 100
             }
         },
         {

src/app/Controllers/MessageSegments/mseg-file.component.ts

@@ -0,0 +1,11 @@
+import { Component, input } from "@angular/core";
+import { MessageSegmentFile } from "../../Models/Messages/MessageSegments";
+
+@Component({
+    selector: 'app-mseg-text',
+    templateUrl: '../../Views/MessageSegments/mseg-file.html',
+    // styleUrls: ['../../Styles/MessageSegments/message-segment-text.scss']
+})
+export class MessageSegmentFileComponent {
+    context = input.required<MessageSegmentFile>();
+}

src/app/Controllers/MessageSegments/mseg-img.component.ts

@@ -0,0 +1,11 @@
+import { Component, input } from "@angular/core";
+import { MessageSegmentImage } from "../../Models/Messages/MessageSegments";
+
+@Component({
+    selector: 'app-mseg-img',
+    templateUrl: '../../Views/MessageSegments/mseg-img.html',
+    // styleUrls: ['../../Styles/MessageSegments/message-segment-text.scss']
+})
+export class MessageSegmentImgComponent {
+    context = input.required<MessageSegmentImage>();
+}

src/app/Controllers/MessageSegments/mseg-text.component.ts

@@ -0,0 +1,11 @@
+import { Component, input } from "@angular/core";
+import { MessageSegmentText } from "../../Models/Messages/MessageSegments";
+
+@Component({
+    selector: 'app-mseg-text',
+    templateUrl: '../../Views/MessageSegments/mseg-text.html',
+    // styleUrls: ['../../Styles/MessageSegments/message-segment-text.scss']
+})
+export class MessageSegmentTextComponent {
+    context = input.required<MessageSegmentText>();
+}

src/app/Controllers/MessageSegments/mseg-video.component.ts

@@ -0,0 +1,11 @@
+import { Component, input } from "@angular/core";
+import { MessageSegmentVideo } from "../../Models/Messages/MessageSegments";
+
+@Component({
+    selector: 'app-mseg-video',
+    templateUrl: '../../Views/MessageSegments/mseg-video.html',
+    // styleUrls: ['../../Styles/MessageSegments/message-segment-text.scss']
+})
+export class MessageSegmentVideoComponent {
+    context = input.required<MessageSegmentVideo>();
+}

src/app/Controllers/MessageSegments/mseg-voice.component.ts

@@ -0,0 +1,11 @@
+import { Component, input } from "@angular/core";
+import { MessageSegmentVoice } from "../../Models/Messages/MessageSegments";
+
+@Component({
+    selector: 'app-mseg-voice',
+    templateUrl: '../../Views/MessageSegments/mseg-voice.html',
+    // styleUrls: ['../../Styles/MessageSegments/message-segment-text.scss']
+})
+export class MessageSegmentVoiceComponent {
+    context = input.required<MessageSegmentVoice>();
+}

src/app/Controllers/advanced-setting.component.ts

@@ -51,7 +51,6 @@ export class AdvancedSettingComponent implements OnInit {
             .subscribe(
                 () => {
                     this.updatingSetting = null;
-                    this.cacheService.cachedData.me = Object.assign({}, this.me);
                     this.cacheService.cachedData.options = Object.assign({}, this.options);
                     this.cacheService.saveCache();
                 },

src/app/Controllers/message.component.ts

@@ -0,0 +1,14 @@
+import { Component, input } from '@angular/core';
+import { Message } from '../Models/Message';
+
+@Component({
+    selector: 'app-message',
+    templateUrl: '../Views/message.html',
+})
+export class MessageComponent {
+    message = input.required<Message>();
+    isByMe = input<boolean>(false);
+    groupWithPrevious = input<boolean>(false);
+    isSending = input<boolean>(false);
+    isFailed = input<boolean>(false);
+}

src/app/Models/Messages/MessageContent.ts

@@ -0,0 +1,6 @@
+import { MessageSegmentBase } from "./MessageSegments";
+
+export interface MessageContent {
+    preview?: string;
+    segments: MessageSegmentBase[];
+}

src/app/Models/Messages/MessageSegments.ts

@@ -0,0 +1,63 @@
+export type MessageSegmentTypes = (
+    | MessageSegmentText
+    | MessageSegmentImage
+    | MessageSegmentVideo
+    | MessageSegmentVoice
+    | MessageSegmentFile
+    | MessageSegmentContact
+    | MessageSegmentThreadInvitation
+    | MessageSegmentThreadJoinRequest
+)['type'];
+
+export interface MessageSegmentBase {
+    type: MessageSegmentTypes;
+}
+
+export interface MessageSegmentText extends MessageSegmentBase {
+    type: 'text';
+    content: string;
+}
+
+interface MessageSegmentFileLike<TName extends MessageSegmentTypes> extends MessageSegmentBase {
+    type: TName;
+    url: string;
+}
+
+export interface MessageSegmentImage extends MessageSegmentFileLike<'image'> {
+    width: number;
+    height: number;
+    alt?: string;
+}
+
+export type MessageSegmentVideo = MessageSegmentFileLike<'video'>;
+
+export interface MessageSegmentVoice extends MessageSegmentFileLike<'voice'> {
+    duration: number;
+}
+
+export interface MessageSegmentFile extends MessageSegmentFileLike<'file'> {
+    fileName: string;
+    size: number;
+}
+
+export interface MessageSegmentContact extends MessageSegmentBase {
+    type: 'contact';
+    id: string;
+    nickname: string;
+    avatarUrl: string;
+    bio: string;
+}
+
+export interface MessageSegmentThreadInvitation extends MessageSegmentBase {
+    type: 'thread-invitation';
+    id: string;
+    token: string;
+    validTo: Date;
+}
+
+export interface MessageSegmentThreadJoinRequest extends MessageSegmentBase {
+    type: 'thread-join-request';
+    id: string;
+    token: string;
+    validTo: Date;
+}

src/app/Utils/Typing.ts

@@ -1,13 +1,13 @@
 /**
- * Example input: <{a: string, b: boolean, c: number, d: boolean}, boolean>
- * Example output: {b: boolean, d: boolean}
+ * Example input: `<{a: string, b: boolean, c: number, d: boolean}, boolean>`
+ * Example output: `{b: boolean, d: boolean}`
  */
 export type PropertiesWithType<T, P> = {
     [K in keyof T as T[K] extends P ? K : never]: T[K];
 };
 
 /**
- * Example input: <{a: string, b: boolean, c: number, d: boolean}, boolean>
- * Example output: 'b' | 'd'
+ * Example input: `<{a: string, b: boolean, c: number, d: boolean}, boolean>`
+ * Example output: `'b' | 'd'`
  */
 export type PropertryNamesWithType<T, P> = keyof PropertiesWithType<T, P>;

src/app/app.module.ts

@@ -64,6 +64,12 @@ import { ToggleMenuItemComponent } from './Controllers/toggle-menu-item.componen
 import { NewThreadComponent } from './Controllers/new-thread.component';
 import { IconForFilePipe } from './Pipes/icon-for-file.pipe';
 import { ThreadAvatarComponent } from './Controllers/thread-avatar.component';
+import { MessageSegmentTextComponent } from './Controllers/MessageSegments/mseg-text.component';
+import { MessageSegmentImgComponent } from './Controllers/MessageSegments/mseg-img.component';
+import { MessageSegmentVideoComponent } from './Controllers/MessageSegments/mseg-video.component';
+import { MessageSegmentVoiceComponent } from './Controllers/MessageSegments/mseg-voice.component';
+import { MessageSegmentFileComponent } from './Controllers/MessageSegments/mseg-file.component';
+import { MessageComponent } from './Controllers/message.component';
 
 @NgModule({
     imports: [
@@ -107,7 +113,13 @@ import { ThreadAvatarComponent } from './Controllers/thread-avatar.component';
         ThreadOptionsComponent,
         ToggleMenuItemComponent,
         NewThreadComponent,
-        ThreadAvatarComponent
+        ThreadAvatarComponent,
+        MessageComponent,
+        MessageSegmentTextComponent,
+        MessageSegmentImgComponent,
+        MessageSegmentVideoComponent,
+        MessageSegmentVoiceComponent,
+        MessageSegmentFileComponent,
     ],
     providers: [
         ApiService,