67 lines
2.7 KiB
HTML
67 lines
2.7 KiB
HTML
@if (serviceManager.currentSession != null) {
|
|
@for (message of messages(); track message.msgid; let i = $index) {
|
|
<div
|
|
class="message"
|
|
[class.author]="message.author == serviceManager.currentSession()!.userData.userid"
|
|
[class.chained_start]="isMessageStartOfChain(i)"
|
|
[class.chained_middle]="isMessageMiddleInChain(i)"
|
|
[class.chained_end]="isMessageEndOfChain(i)"
|
|
>
|
|
<div class="above">
|
|
<span>{{ message.sent_at.T * 1000 | date: 'HH:mm' }}</span>
|
|
</div>
|
|
<div class="bubble" tuiDropdownContext [tuiDropdown]="messageContextMenu">
|
|
<span class="message-text">{{ message.message }}</span>
|
|
<masonry style="max-height: 300px">
|
|
@for (file of filterExpressedMedia(message.files); track file) {
|
|
@if (file.type == "image") {
|
|
<img [src]="file.path"
|
|
style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
|
|
} @else if (file.type == "video") {
|
|
@if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
|
|
<video-player maxHeight="300px" maxWidth="300px" [src]="file.path"
|
|
[thumbnailOverwrite]="file.extraMetaData['thumbnailMetaData']"></video-player>
|
|
} @else {
|
|
<video-player maxHeight="300px" maxWidth="300px" [src]="file.path"></video-player>
|
|
}
|
|
}
|
|
}
|
|
</masonry>
|
|
|
|
<div tuiGroup orientation="vertical" style="width: 100%">
|
|
@for (file of filterNonExpressedMedia(message.files); track file) {
|
|
<div style="width: 100%; height: 50px; display: flex; align-items: center; padding: 0 10px; background: var(--tui-background-accent-1); gap: 5px">
|
|
<tui-icon icon="@tui.file"/>
|
|
<span>{{ file.fileName }}</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="below"></div>
|
|
|
|
<ng-template #messageContextMenu>
|
|
<tui-data-list>
|
|
<button
|
|
tuiOption
|
|
type="button"
|
|
iconEnd="@tui.pencil"
|
|
(click)="messageBoxViewModel().editingMessage.set({message: message.message, messageId: message.msgid}); messageBoxViewModel().message.set(message.message);"
|
|
>
|
|
{{ "chat.elements.messages.contextMenu.edit" | translate }}
|
|
</button>
|
|
|
|
<button
|
|
style="color: var(--tui-text-negative)"
|
|
tuiOption
|
|
type="button"
|
|
iconEnd="@tui.trash"
|
|
(click)="onDelete.emit(message.msgid)"
|
|
>
|
|
{{ "chat.elements.messages.contextMenu.delete" | translate }}
|
|
</button>
|
|
</tui-data-list>
|
|
</ng-template>
|
|
</div>
|
|
}
|
|
}
|