modify message-box Sticker

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html

@@ -0,0 +1,8 @@
+<ul>
+  <li *ngIf="stickerUrl">
+    <img [src]="stickerUrl" onerror="this.src='assets/sticker/sticker_default.png'">
+  </li>
+  <li *ngIf="contentJson && contentJson.chat">
+    {{ contentJson.chat }}
+  </li>
+</ul>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Info } from '@ucap-webmessenger/protocol-event';
+import { NGXLogger } from 'ngx-logger';
+import { StickerInfo } from '../../models/sticker-info.json';
 
 @Component({
   selector: 'ucap-chat-message-box-sticker',
@@ -6,7 +9,21 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./sticker.component.scss']
 })
 export class StickerComponent implements OnInit {
-  constructor() {}
+  @Input()
+  message: Info;
 
-  ngOnInit() {}
+  contentJson?: StickerInfo;
+  stickerUrl?: string;
+  constructor(private logger: NGXLogger) {}
+
+  ngOnInit() {
+    try {
+      this.contentJson = JSON.parse(this.message.sentMessage);
+      if (!!this.contentJson.file) {
+        this.stickerUrl = `assets/sticker/sticker_s_${this.contentJson.file}.png`;
+      }
+    } catch (e) {
+      this.logger.error(e);
+    }
+  }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -26,6 +26,9 @@
       <ucap-chat-message-box-file *ngSwitchCase="EventType.File" [message]="message" (save)="onSave($event)"
         (imageViewer)="onImageViewer($event)">
       </ucap-chat-message-box-file>
+      <ucap-chat-message-box-sticker *ngSwitchCase="EventType.Sticker" [message]="message">
+      </ucap-chat-message-box-sticker>
+      <ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message"></ucap-chat-message-box-text>
       <div *ngSwitchDefault>
         date splitter
         <ucap-chat-message-box-date-splitter></ucap-chat-message-box-date-splitter>
@@ -36,8 +39,6 @@
         recall
         <ucap-chat-message-box-recall></ucap-chat-message-box-recall>
         <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
-        sticker
-        <ucap-chat-message-box-sticker></ucap-chat-message-box-sticker>
         translation
         <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
         video-conference

projects/ucap-webmessenger-ui-chat/src/lib/models/sticker-info.json.ts

@@ -0,0 +1,5 @@
+export interface StickerInfo {
+  name?: string;
+  file?: string;
+  chat?: string;
+}

projects/ucap-webmessenger-ui-chat/src/public-api.ts

@@ -20,7 +20,8 @@ export * from './lib/components/message-box/video.component';
 export * from './lib/components/form.component';
 export * from './lib/components/messages.component';
 
-export * from './lib/models/mass-talk-info.json';
 export * from './lib/models/file-info.json';
+export * from './lib/models/mass-talk-info.json';
+export * from './lib/models/sticker-info.json';
 
 export * from './lib/ucap-ui-chat.module';