From 526d861685214017a856cdb0edadef27e4040563 Mon Sep 17 00:00:00 2001 From: trivernis Date: Thu, 23 Jan 2020 14:50:16 +0100 Subject: [PATCH 1/4] Add post file uploading and processing - Add processing of videos via ffmpeg - Add files for posts --- src/app/components/feed/feed.component.ts | 4 +-- src/app/models/post.ts | 5 +++- src/app/services/feed/feed.service.ts | 36 ++++++++++++++++++----- 3 files changed, 35 insertions(+), 10 deletions(-) diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index a99eea9..9bae09b 100644 --- a/src/app/components/feed/feed.component.ts +++ b/src/app/components/feed/feed.component.ts @@ -70,7 +70,7 @@ export class FeedComponent implements OnInit { */ createPost(postElement, activityId: string) { if (postElement && activityId && this.checked) { - this.feedService.createPostActivity(postElement.value, activityId).subscribe(() => { + this.feedService.createPostActivity(postElement.value, activityId, this.file).subscribe(() => { postElement.value = ''; this.textInputValue = ''; this.checked = false; @@ -82,7 +82,7 @@ export class FeedComponent implements OnInit { this.errorMessage = error.error.errors[0].message; }); } else if (postElement) { - this.feedService.createPost(postElement.value).subscribe(() => { + this.feedService.createPost(postElement.value, this.file).subscribe(() => { postElement.value = ''; this.textInputValue = ''; this.checked = false; diff --git a/src/app/models/post.ts b/src/app/models/post.ts index eb4cb67..36fb5ac 100644 --- a/src/app/models/post.ts +++ b/src/app/models/post.ts @@ -12,6 +12,7 @@ export class Post { deletable: boolean; author: Author; activity: Activity; + mediaUrl: string; constructor( id: number, @@ -23,7 +24,8 @@ export class Post { deletable: boolean, date: string, author: Author, - activity: Activity + activity: Activity, + mediaUrl?: string, ) { this.id = id; this.content = content; @@ -35,5 +37,6 @@ export class Post { this.date = date; this.author = author; this.activity = activity; + this.mediaUrl = mediaUrl; } } diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts index 1689b91..79f3e80 100644 --- a/src/app/services/feed/feed.service.ts +++ b/src/app/services/feed/feed.service.ts @@ -4,10 +4,11 @@ import {Post} from 'src/app/models/post'; import {Author} from 'src/app/models/author'; import {environment} from 'src/environments/environment'; import {Activity} from 'src/app/models/activity'; -import {BehaviorSubject} from 'rxjs'; +import {BehaviorSubject, Observable} from 'rxjs'; import {tap} from 'rxjs/operators'; import {BaseService} from '../base.service'; import {formatDate} from '@angular/common'; +import {IFileUploadResult} from '../../models/interfaces/IFileUploadResult'; const createPostGqlQuery = `mutation($content: String!) { createPost(content: $content) { @@ -138,47 +139,68 @@ export class FeedService extends BaseService { /** * Creates a new post * @param pContent + * @param file */ - public createPost(pContent: String) { + public createPost(pContent: String, file?: File) { const body = { query: createPostGqlQuery, variables: { content: pContent } }; - return this.createPostRequest(body); + return this.createPostRequest(body, file); } /** * Creates a post with an activity * @param pContent * @param activityId + * @param file */ - public createPostActivity(pContent: String, activityId: String) { + public createPostActivity(pContent: String, activityId: String, file?: File) { const body = { query: createPostActivityGqlQuery, variables: { content: pContent, id: activityId } }; - return this.createPostRequest(body); + return this.createPostRequest(body, file); } /** * Creates a new post with a given request. * @param body + * @param file - a file that is being uploaded with the post */ - private createPostRequest(body: { variables: any; query: string }) { + private createPostRequest(body: { variables: any; query: string }, file?: File) { return this.postGraphql(body, null, 0) .pipe(tap(response => { if (this.activePostList === Sort.NEW) { const updatedPosts = this.posts.getValue(); - updatedPosts.unshift(this.constructPost(response)); + 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; + }); + } } })); } + /** + * Uploads a file for a post + * @param postId + * @param file + */ + private uploadPostImage(postId: number, file: File): Observable { + const formData = new FormData(); + formData.append('postMedia', file); + formData.append('postId', postId.toString()); + return this.post(environment.greenvironmentUrl + '/upload', formData); + } + /** * Upvotes a post * @param postId From f318c58edf34ae432638d7bfe3413f2df218a1aa Mon Sep 17 00:00:00 2001 From: trivernis Date: Thu, 23 Jan 2020 15:41:32 +0100 Subject: [PATCH 2/4] Add file upload - Add file upload for posts supporting video and images --- src/app/components/feed/feed.component.html | 1 - src/app/components/feed/feed.component.ts | 6 ++++++ .../feed/postlist/postlist.component.html | 6 ++++++ src/app/models/post.ts | 8 ++++++-- src/app/services/feed/feed.service.ts | 17 ++++++++++++++--- 5 files changed, 32 insertions(+), 6 deletions(-) diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 47b1ed2..fca185c 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -11,7 +11,6 @@ diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index 9bae09b..d226149 100644 --- a/src/app/components/feed/feed.component.ts +++ b/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(); } diff --git a/src/app/components/feed/postlist/postlist.component.html b/src/app/components/feed/postlist/postlist.component.html index a323d42..50f13eb 100644 --- a/src/app/components/feed/postlist/postlist.component.html +++ b/src/app/components/feed/postlist/postlist.component.html @@ -22,6 +22,12 @@ +
+ post image + +

diff --git a/src/app/models/post.ts b/src/app/models/post.ts index 36fb5ac..3143140 100644 --- a/src/app/models/post.ts +++ b/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; + } } } diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts index 79f3e80..58b187b 100644 --- a/src/app/services/feed/feed.service.ts +++ b/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; } From 504a6e2f6cf421a84f04097ebfdb39a4ea11771d Mon Sep 17 00:00:00 2001 From: trivernis Date: Thu, 23 Jan 2020 16:01:11 +0100 Subject: [PATCH 3/4] Hotfix fileupload change retry limit to 0 --- src/app/services/feed/feed.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts index 58b187b..2686fd4 100644 --- a/src/app/services/feed/feed.service.ts +++ b/src/app/services/feed/feed.service.ts @@ -207,7 +207,7 @@ export class FeedService extends BaseService { const formData = new FormData(); formData.append('postMedia', file); formData.append('postId', postId.toString()); - return this.post(environment.greenvironmentUrl + '/upload', formData); + return this.post(environment.greenvironmentUrl + '/upload', formData, null, 0); } /** From e3f5fc65193ae95cc3a55c731e622b29c8146a0c Mon Sep 17 00:00:00 2001 From: trivernis Date: Thu, 23 Jan 2020 16:42:19 +0100 Subject: [PATCH 4/4] Fix checking for video instead of image --- src/app/services/feed/feed.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts index 2686fd4..3c924fd 100644 --- a/src/app/services/feed/feed.service.ts +++ b/src/app/services/feed/feed.service.ts @@ -185,7 +185,7 @@ export class FeedService extends BaseService { if (file) { this.uploadPostImage(post.id, file).subscribe((result) => { post.mediaUrl = result.fileName; - post.mediaType = result.fileName.endsWith('.webm') ? 'VIDEO' : 'IMAGE'; + post.mediaType = result.fileName.endsWith('.png') ? 'IMAGE' : 'VIDEO'; this.posts.next(updatedPosts); }, error => { console.error(error);