Merge branch 'mobile-development' into USH-1539-ALT

apps/mobile-mzima-client/src/app/post/components/post-content/post-content.component.html

@@ -11,7 +11,7 @@
     "
   >
     <ng-container *ngFor="let field of post_content.fields | sortByField : 'priority' : 'asc'">
-      <div class="post__group" *ngIf="field.value?.id">
+      <div class="post__group" *ngIf="field.value?.id || field.value?.length > 0">
         <ng-container *ngIf="field.type !== 'title' && field.type !== 'description'">
           <h4>{{ field.label }}</h4>
         </ng-container>
@@ -81,6 +81,54 @@ <h4>{{ field.label }}</h4>
           </ng-template>
         </ng-container>
 
+        <div class="post__images" *ngIf="field.input === 'image' && field.value.length > 0">
+          <ng-container *ngIf="isConnection; else noConnection">
+            <div class="post__images__item" *ngFor="let media of field.value">
+              <div class="post__images__item" *ngFor="let media of field.value">
+                <img class="post__media" [src]="media.url" />
+              </div>
+            </div>
+          </ng-container>
+
+          <ng-template #noConnection>
+            <app-offline-notification></app-offline-notification>
+          </ng-template>
+        </div>
+
+        <div class="post__audio" *ngIf="field.input === 'audio' && field.value.length > 0">
+          <ng-container *ngIf="isConnection; else noConnection">
+            <div class="post__audio__item" *ngFor="let media of field.value">
+              <span class="post__audio__item__filename">{{ media.filename }}</span>
+              <audio controls [src]="media.url"></audio>
+            </div>
+          </ng-container>
+
+          <ng-template #noConnection>
+            <app-offline-notification></app-offline-notification>
+          </ng-template>
+        </div>
+
+        <div class="post__documents" *ngIf="field.input === 'document' && field.value.length > 0">
+          <ng-container *ngIf="isConnection; else noConnection">
+            <a
+              class="post__documents__item"
+              *ngFor="let media of field.value"
+              [href]="media.url"
+              target="_blank"
+            >
+              <img class="post__documents__item__thumbnail" [src]="media.icon" />
+              <div class="post__documents__item__details">
+                <div class="filename">{{ media.filename }}</div>
+                <div class="filesize">{{ media.fileSize }}</div>
+              </div>
+            </a>
+          </ng-container>
+
+          <ng-template #noConnection>
+            <app-offline-notification></app-offline-notification>
+          </ng-template>
+        </div>
+
         <ng-container *ngIf="field.input === 'video'">
           <ng-container *ngIf="videoUrls.length && isConnection">
             <div *ngIf="field.value.value">

apps/mobile-mzima-client/src/app/post/components/post-content/post-content.component.scss

@@ -27,6 +27,66 @@
   }
 }
 
+.post {
+  &__images {
+    &__item {
+      padding: 4px;
+      img {
+        max-width: 100%;
+      }
+    }
+  }
+
+  &__audio {
+    &__item {
+      padding: 4px;
+      display: flex;
+      flex-direction: column;
+      &__filename {
+        font-size: 14px;
+        color: #6c7074;
+      }
+      audio {
+        width: 100%;
+      }
+    }
+  }
+
+  &__documents {
+    display: flex;
+    flex-direction: column;
+    &__item {
+      margin-bottom: 4px;
+      color: var(--color-neutral-100);
+      text-decoration: none;
+      display: flex;
+      flex-direction: row;
+      border: 1px solid #f5f5f5;
+      align-items: center;
+      &__thumbnail {
+        max-width: 64px;
+        max-height: 64px;
+      }
+      &__details {
+        padding: 8px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .filename {
+          width: 100%;
+          font-size: 14px;
+          overflow-wrap: break-word;
+          word-break: break-all;
+        }
+        .filesize {
+          font-size: 11px;
+          color: #b6b7ba;
+        }
+      }
+    }
+  }
+}
+
 .post--checkbox-list {
   padding-left: 15px;
 }

apps/mobile-mzima-client/src/app/post/post-edit/post-edit.page.ts

@@ -642,6 +642,9 @@ export class PostEditPage {
               } else {
                 value.value = this.form.value[field.key] || null;
               }
+              // TODO: Implement edit on new multimedia fields, but ignore for now.
+            } else if (['image', 'audio', 'document'].includes(field.input)) {
+              value.value = [];
             } else {
               value.value = this.form.value[field.key] || null;
             }
@@ -741,7 +744,7 @@ export class PostEditPage {
     const promises: Promise<any>[] = [];
     for (let postData of pendingPosts) {
       for (const field of postData.post_content[0].fields) {
-        if (field.type === 'media') {
+        if (field.type === 'media' && field.input === 'upload') {
           if (field?.file?.delete) {
             postData = await this.deleteFile(postData, field.file);
           } else if (field.value.value && typeof field.value.value !== 'number') {

apps/mobile-mzima-client/src/app/post/post.page.ts

@@ -2,6 +2,8 @@ import { Component, OnDestroy } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import {
+  MediaFile,
+  MediaFileStatus,
   MediaService,
   PostContent,
   PostContentField,
@@ -123,11 +125,41 @@ export class PostPage implements OnDestroy {
 
   private getData(post: PostResult): void {
     for (const content of post.post_content as PostContent[]) {
+      this.preparingMedia(content.fields);
       this.preparingSafeVideoUrls(content.fields);
       this.preparingRelatedPosts(content.fields);
     }
   }
 
+  private preparingMedia(fields: PostContentField[]): void {
+    fields
+      .filter((field: any) => field.type === 'media')
+      .map(async (mediaField) => {
+        if (Array.isArray(mediaField.value)) {
+          const mediaFiles: MediaFile[] = [];
+          for await (const mediaValue of mediaField.value) {
+            const media = await lastValueFrom(this.mediaService.getById(mediaValue.value!));
+            const mediaFile: MediaFile = new MediaFile(
+              media.result,
+              media.result.original_file_url,
+            );
+            mediaFile.id = mediaValue.id;
+            mediaFile.value = media.result.id;
+            mediaFile.caption = media.result.caption;
+            mediaFile.status = MediaFileStatus.READY;
+            mediaFiles.push(mediaFile);
+          }
+          mediaField.value = mediaFiles;
+        } else if (mediaField.value?.value) {
+          const media = await lastValueFrom(this.mediaService.getById(mediaField.value.value!));
+          mediaField.value.preview = media.result.original_file_url;
+          mediaField.value.caption = media.result.caption;
+          mediaField.value.mimeType = media.result.mime;
+          mediaField.value.size = media.result.original_file_size;
+        }
+      });
+  }
+
   private preparingRelatedPosts(fields: PostContentField[]): void {
     fields
       .filter((field: any) => field.type === 'relation')