Add file upload

- Add file upload for posts supporting video and images

src/app/components/feed/feed.component.html

@@ -11,7 +11,6 @@
           <img *ngIf="fileType == 'image'" id="inputPreview" [src]="localFileUrl"/>
           <video *ngIf="fileType == 'video'"  [src]="localFileUrl" controls="" class="html5-video-player">
             Your browser does not support playing HTML5 video.
-            You can <a href="https://files.catbox.moe/m6gsbb.mp4" download="">download the file</a> instead.
           </video>
         </div>
         <mat-form-field id="input">

src/app/components/feed/feed.component.ts

@@ -74,6 +74,9 @@ export class FeedComponent implements OnInit {
         postElement.value = '';
         this.textInputValue = '';
         this.checked = false;
+        this.file = null;
+        this.localFileUrl = null;
+        this.fileType = null;
         if (this.view !== 'new') {
           this.showNew();
         }
@@ -86,6 +89,9 @@ export class FeedComponent implements OnInit {
         postElement.value = '';
         this.textInputValue = '';
         this.checked = false;
+        this.file = null;
+        this.localFileUrl = null;
+        this.fileType = null;
         if (this.view !== 'new') {
           this.showNew();
         }

src/app/components/feed/postlist/postlist.component.html

@@ -22,6 +22,12 @@
     </mat-card-subtitle>
   </mat-card-header>
   <mat-card-content>
+    <div class="postMedia">
+      <img *ngIf="post.mediaType === 'IMAGE'" [src]="post.mediaUrl"  alt="post image"/>
+      <video *ngIf="post.mediaType === 'VIDEO'" controls>
+        <source [src]="post.mediaUrl" type="video/webm">
+      </video>
+    </div>
     <p [innerHTML]="post.htmlContent"></p>
   </mat-card-content>
   <mat-card-actions>

src/app/models/post.ts

@@ -13,6 +13,7 @@ export class Post {
   author: Author;
   activity: Activity;
   mediaUrl: string;
+  mediaType: 'VIDEO' | 'IMAGE';
 
   constructor(
     id: number,
@@ -25,7 +26,7 @@ export class Post {
     date: string,
     author: Author,
     activity: Activity,
-    mediaUrl?: string,
+    media?: {url: string, type: 'VIDEO' | 'IMAGE'},
   ) {
     this.id = id;
     this.content = content;
@@ -37,6 +38,9 @@ export class Post {
     this.date = date;
     this.author = author;
     this.activity = activity;
-    this.mediaUrl = mediaUrl;
+    if (media) {
+      this.mediaUrl = media.url;
+      this.mediaType = media.type;
+    }
   }
 }

src/app/services/feed/feed.service.ts

@@ -19,6 +19,7 @@ const createPostGqlQuery = `mutation($content: String!) {
     downvotes,
     userVote,
     deletable,
+    media {url, type},
     activity{
       id
       name
@@ -42,6 +43,7 @@ const createPostActivityGqlQuery = `mutation($content: String!, $id: ID) {
     downvotes,
     userVote,
     deletable,
+    media {url, type},
     activity{
       id
       name
@@ -77,6 +79,7 @@ const getPostGqlQuery = `query($first: Int, $offset: Int, $sort: SortType){
     downvotes,
     userVote,
     deletable,
+    media {url, type},
     activity{
       id
       name
@@ -179,11 +182,17 @@ export class FeedService extends BaseService {
           const updatedPosts = this.posts.getValue();
           const post = this.constructPost(response);
           updatedPosts.unshift(post);
-          this.posts.next(updatedPosts);
           if (file) {
             this.uploadPostImage(post.id, file).subscribe((result) => {
               post.mediaUrl = result.fileName;
+              post.mediaType = result.fileName.endsWith('.webm') ? 'VIDEO' : 'IMAGE';
+              this.posts.next(updatedPosts);
+            }, error => {
+              console.error(error);
+              this.deletePost(post.id);
             });
+          } else {
+            this.posts.next(updatedPosts);
           }
         }
       }));
@@ -322,7 +331,8 @@ export class FeedService extends BaseService {
       post.deletable,
       date,
       author,
-      activity);
+      activity,
+      post.media);
   }
 
   public constructAllPosts(response: any): Post[] {
@@ -362,7 +372,8 @@ export class FeedService extends BaseService {
         post.deletable,
         date,
         author,
-        activity));
+        activity,
+        post.media));
     }
     return posts;
   }