From 07fa4c97ca50b83b0bee9230da97d02401b4e05f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 20 Feb 2018 16:13:05 +0100 Subject: Add support to video support on client --- .../src/app/shared/forms/form-validators/video.ts | 12 +++++-- .../shared/forms/markdown-textarea.component.html | 10 +++--- .../shared/forms/markdown-textarea.component.scss | 1 + .../shared/forms/markdown-textarea.component.ts | 37 +++++++++++++--------- client/src/app/shared/video/video-details.model.ts | 1 + client/src/app/shared/video/video-edit.model.ts | 3 ++ client/src/app/shared/video/video.service.ts | 1 + 7 files changed, 43 insertions(+), 22 deletions(-) (limited to 'client/src/app/shared') diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts index 34a237a12..9ecbbbd60 100644 --- a/client/src/app/shared/forms/form-validators/video.ts +++ b/client/src/app/shared/forms/form-validators/video.ts @@ -44,10 +44,10 @@ export const VIDEO_CHANNEL = { } export const VIDEO_DESCRIPTION = { - VALIDATORS: [ Validators.minLength(3), Validators.maxLength(3000) ], + VALIDATORS: [ Validators.minLength(3), Validators.maxLength(10000) ], MESSAGES: { 'minlength': 'Video description must be at least 3 characters long.', - 'maxlength': 'Video description cannot be more than 3000 characters long.' + 'maxlength': 'Video description cannot be more than 10000 characters long.' } } @@ -58,3 +58,11 @@ export const VIDEO_TAGS = { 'maxlength': 'A tag should be less than 30 characters long.' } } + +export const VIDEO_SUPPORT = { + VALIDATORS: [ Validators.minLength(3), Validators.maxLength(300) ], + MESSAGES: { + 'minlength': 'Video support must be at least 3 characters long.', + 'maxlength': 'Video support cannot be more than 300 characters long.' + } +} diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html index e8c5ded5b..46a97b163 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.html +++ b/client/src/app/shared/forms/markdown-textarea.component.html @@ -1,12 +1,12 @@
- - + +
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss index 82aff541d..6f7494621 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.scss +++ b/client/src/app/shared/forms/markdown-textarea.component.scss @@ -22,6 +22,7 @@ min-height: 75px; padding: 15px; font-size: 15px; + word-wrap: break-word; } } } diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts index 2eae1b27e..928a63b28 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.ts +++ b/client/src/app/shared/forms/markdown-textarea.component.ts @@ -21,29 +21,30 @@ import truncate from 'lodash-es/truncate' }) export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { - @Input() description = '' + @Input() content = '' @Input() classes: string[] = [] @Input() textareaWidth = '100%' @Input() textareaHeight = '150px' @Input() previewColumn = false @Input() truncate: number + @Input() markdownType: 'text' | 'enhanced' = 'text' textareaMarginRight = '0' flexDirection = 'column' - truncatedDescriptionHTML = '' - descriptionHTML = '' + truncatedPreviewHTML = '' + previewHTML = '' - private descriptionChanged = new Subject() + private contentChanged = new Subject() constructor (private markdownService: MarkdownService) {} ngOnInit () { - this.descriptionChanged + this.contentChanged .debounceTime(150) .distinctUntilChanged() - .subscribe(() => this.updateDescriptionPreviews()) + .subscribe(() => this.updatePreviews()) - this.descriptionChanged.next(this.description) + this.contentChanged.next(this.content) if (this.previewColumn) { this.flexDirection = 'row' @@ -54,9 +55,9 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { propagateChange = (_: any) => { /* empty */ } writeValue (description: string) { - this.description = description + this.content = description - this.descriptionChanged.next(this.description) + this.contentChanged.next(this.content) } registerOnChange (fn: (_: any) => void) { @@ -68,19 +69,25 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { } onModelChange () { - this.propagateChange(this.description) + this.propagateChange(this.content) - this.descriptionChanged.next(this.description) + this.contentChanged.next(this.content) } arePreviewsDisplayed () { return isInSmallView() === false } - private updateDescriptionPreviews () { - if (this.description === null || this.description === undefined) return + private updatePreviews () { + if (this.content === null || this.content === undefined) return - this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: this.truncate })) - this.descriptionHTML = this.markdownService.markdownToHTML(this.description) + this.truncatedPreviewHTML = this.markdownRender(truncate(this.content, { length: this.truncate })) + this.previewHTML = this.markdownRender(this.content) + } + + private markdownRender (text: string) { + if (this.markdownType === 'text') return this.markdownService.textMarkdownToHTML(text) + + return this.markdownService.enhancedMarkdownToHTML(text) } } diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts index c746bfd66..4e4f64c7b 100644 --- a/client/src/app/shared/video/video-details.model.ts +++ b/client/src/app/shared/video/video-details.model.ts @@ -57,6 +57,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { this.channel = hash.channel this.account = hash.account this.tags = hash.tags + this.support = hash.support this.commentsEnabled = hash.commentsEnabled this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100 diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts index c39252f46..a8bbb63eb 100644 --- a/client/src/app/shared/video/video-edit.model.ts +++ b/client/src/app/shared/video/video-edit.model.ts @@ -12,6 +12,7 @@ export class VideoEdit { commentsEnabled: boolean channel: number privacy: VideoPrivacy + support: string thumbnailfile?: any previewfile?: any thumbnailUrl: string @@ -33,6 +34,7 @@ export class VideoEdit { this.commentsEnabled = videoDetails.commentsEnabled this.channel = videoDetails.channel.id this.privacy = videoDetails.privacy + this.support = videoDetails.support this.thumbnailUrl = videoDetails.thumbnailUrl this.previewUrl = videoDetails.previewUrl } @@ -50,6 +52,7 @@ export class VideoEdit { licence: this.licence, language: this.language, description: this.description, + support: this.support, name: this.name, tags: this.tags, nsfw: this.nsfw, diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts index 2e7138cd1..99da14779 100644 --- a/client/src/app/shared/video/video.service.ts +++ b/client/src/app/shared/video/video.service.ts @@ -62,6 +62,7 @@ export class VideoService { tags: video.tags, nsfw: video.nsfw, commentsEnabled: video.commentsEnabled, + support: video.support, thumbnailfile: video.thumbnailfile, previewfile: video.previewfile } -- cgit v1.2.3