interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move video form inside a component

This commit is contained in:
Chocobozzz 2017-12-07 11:15:19 +01:00
parent 59aa1e5e75
commit ff249f499c
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
7 changed files with 190 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/app/shared/forms/form-validators/video.ts
View File

@ -1,5 +1,11 @@
import { Validators } from '@angular/forms'
export type ValidatorMessage = {
[ id: string ]: {
[ error: string ]: string
}
}
export const VIDEO_NAME = {
VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ],
MESSAGES: {

85
client/src/app/videos/+video-edit/shared/video-edit.component.html Normal file
View File

@ -0,0 +1,85 @@
<div [formGroup]="form">
<div class="form-group">
<label for="name">Name</label>
<input
type="text" class="form-control" id="name"
formControlName="name"
>
<div *ngIf="formErrors.name" class="alert alert-danger">
{{ formErrors.name }}
</div>
</div>
<div class="form-group">
<label for="privacy">Privacy</label>
<select class="form-control" id="privacy" formControlName="privacy">
<option></option>
<option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
</select>
<div *ngIf="formErrors.privacy" class="alert alert-danger">
{{ formErrors.privacy }}
</div>
</div>
<div class="form-group">
<input
type="checkbox" id="nsfw"
formControlName="nsfw"
>
<label for="nsfw">This video contains mature or explicit content</label>
</div>
<div class="form-group">
<label for="category">Category</label>
<select class="form-control" id="category" formControlName="category">
<option></option>
<option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select>
<div *ngIf="formErrors.category" class="alert alert-danger">
{{ formErrors.category }}
</div>
</div>
<div class="form-group">
<label for="licence">Licence</label>
<select class="form-control" id="licence" formControlName="licence">
<option></option>
<option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
</select>
<div *ngIf="formErrors.licence" class="alert alert-danger">
{{ formErrors.licence }}
</div>
</div>
<div class="form-group">
<label for="language">Language</label>
<select class="form-control" id="language" formControlName="language">
<option></option>
<option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
</select>
<div *ngIf="formErrors.language" class="alert alert-danger">
{{ formErrors.language }}
</div>
</div>
<div class="form-group">
<label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
<tag-input
[ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
formControlName="tags" maxItems="5" modelAsStrings="true"
></tag-input>
</div>
<div class="form-group">
<label for="description">Description</label>
<my-video-description formControlName="description"></my-video-description>
<div *ngIf="formErrors.description" class="alert alert-danger">
{{ formErrors.description }}
</div>
</div>
</div>

83
client/src/app/videos/+video-edit/shared/video-edit.component.ts Normal file
View File

@ -0,0 +1,83 @@
import { Component, Input, OnInit } from '@angular/core'
import { FormBuilder, FormControl, FormGroup } from '@angular/forms'
import { ActivatedRoute, Router } from '@angular/router'
import { NotificationsService } from 'angular2-notifications'
import { ServerService } from 'app/core'
import { VideoEdit } from 'app/shared/video/video-edit.model'
import 'rxjs/add/observable/forkJoin'
import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
import {
ValidatorMessage,
VIDEO_CATEGORY,
VIDEO_DESCRIPTION,
VIDEO_LANGUAGE,
VIDEO_LICENCE,
VIDEO_NAME,
VIDEO_PRIVACY,
VIDEO_TAGS
} from '../../../shared/forms/form-validators'
@Component({
selector: 'my-video-edit',
styleUrls: [ './video-edit.component.scss' ],
templateUrl: './video-edit.component.html'
})
export class VideoEditComponent implements OnInit {
@Input() form: FormGroup
@Input() formErrors: { [ id: string ]: string } = {}
@Input() validationMessages: ValidatorMessage = {}
@Input() videoPrivacies = []
tags: string[] = []
videoCategories = []
videoLicences = []
videoLanguages = []
video: VideoEdit
tagValidators = VIDEO_TAGS.VALIDATORS
tagValidatorsMessages = VIDEO_TAGS.MESSAGES
error: string = null
constructor (
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private notificationsService: NotificationsService,
private serverService: ServerService
) { }
updateForm () {
this.formErrors['name'] = ''
this.formErrors['privacy'] = ''
this.formErrors['category'] = ''
this.formErrors['licence'] = ''
this.formErrors['language'] = ''
this.formErrors['description'] = ''
this.validationMessages['name'] = VIDEO_NAME.MESSAGES
this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES
this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES
this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES
this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES
this.validationMessages['description'] = VIDEO_DESCRIPTION.MESSAGES
this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS))
this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS))
this.form.addControl('nsfw', new FormControl(false))
this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS))
this.form.addControl('licence', new FormControl('', VIDEO_LICENCE.VALIDATORS))
this.form.addControl('language', new FormControl('', VIDEO_LANGUAGE.VALIDATORS))
this.form.addControl('description', new FormControl('', VIDEO_DESCRIPTION.VALIDATORS))
this.form.addControl('tags', new FormControl(''))
}
ngOnInit () {
this.updateForm()
this.videoCategories = this.serverService.getVideoCategories()
this.videoLicences = this.serverService.getVideoLicences()
this.videoLanguages = this.serverService.getVideoLanguages()
}
}

7
client/src/app/videos/+video-edit/shared/video-edit.module.ts
View File

@ -5,6 +5,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs'
import { MarkdownService, VideoDescriptionComponent } from '../../shared'
import { SharedModule } from '../../../shared'
import { VideoEditComponent } from './video-edit.component'
@NgModule({
imports: [
@ -15,14 +16,16 @@ import { SharedModule } from '../../../shared'
],
declarations: [
VideoDescriptionComponent
VideoDescriptionComponent,
VideoEditComponent
],
exports: [
TagInputModule,
TabsModule,
VideoDescriptionComponent
VideoDescriptionComponent,
VideoEditComponent
],
providers: [

88
client/src/app/videos/+video-edit/video-update.component.html
View File

@ -3,92 +3,12 @@
<h3>Update {{ video?.name }}</h3>
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<form novalidate [formGroup]="form">
<div class="form-group">
<label for="name">Name</label>
<input
type="text" class="form-control" id="name"
formControlName="name"
>
<div *ngIf="formErrors.name" class="alert alert-danger">
{{ formErrors.name }}
</div>
</div>
<div class="form-group">
<label for="privacy">Privacy</label>
<select class="form-control" id="privacy" formControlName="privacy">
<option></option>
<option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
</select>
<div *ngIf="formErrors.privacy" class="alert alert-danger">
{{ formErrors.privacy }}
</div>
</div>
<div class="form-group">
<input
type="checkbox" id="nsfw"
formControlName="nsfw"
>
<label for="nsfw">This video contains mature or explicit content</label>
</div>
<div class="form-group">
<label for="category">Category</label>
<select class="form-control" id="category" formControlName="category">
<option></option>
<option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select>
<div *ngIf="formErrors.category" class="alert alert-danger">
{{ formErrors.category }}
</div>
</div>
<div class="form-group">
<label for="licence">Licence</label>
<select class="form-control" id="licence" formControlName="licence">
<option></option>
<option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
</select>
<div *ngIf="formErrors.licence" class="alert alert-danger">
{{ formErrors.licence }}
</div>
</div>
<div class="form-group">
<label for="language">Language</label>
<select class="form-control" id="language" formControlName="language">
<option></option>
<option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
</select>
<div *ngIf="formErrors.language" class="alert alert-danger">
{{ formErrors.language }}
</div>
</div>
<div class="form-group">
<label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
<tag-input
[ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
formControlName="tags" maxItems="5" modelAsStrings="true"
></tag-input>
</div>
<div class="form-group">
<label for="description">Description</label>
<my-video-description formControlName="description"></my-video-description>
<div *ngIf="formErrors.description" class="alert alert-danger">
{{ formErrors.description }}
</div>
</div>
<my-video-edit
[form]="form" [formErrors]="formErrors"
[validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies"
></my-video-edit>
<div class="form-group">
<input

46
client/src/app/videos/+video-edit/video-update.component.ts
View File

@ -15,6 +15,7 @@ import {
VIDEO_PRIVACY,
VIDEO_TAGS
} from '../../shared'
import { ValidatorMessage } from '../../shared/forms/form-validators'
import { VideoService } from '../../shared/video/video.service'
import { VideoEdit } from '../../shared/video/video-edit.model'
@ -25,34 +26,13 @@ import { VideoEdit } from '../../shared/video/video-edit.model'
})
export class VideoUpdateComponent extends FormReactive implements OnInit {
tags: string[] = []
videoCategories = []
videoLicences = []
videoLanguages = []
videoPrivacies = []
video: VideoEdit
tagValidators = VIDEO_TAGS.VALIDATORS
tagValidatorsMessages = VIDEO_TAGS.MESSAGES
error: string = null
form: FormGroup
formErrors = {
name: '',
privacy: '',
category: '',
licence: '',
language: '',
description: ''
}
validationMessages = {
name: VIDEO_NAME.MESSAGES,
privacy: VIDEO_PRIVACY.MESSAGES,
category: VIDEO_CATEGORY.MESSAGES,
licence: VIDEO_LICENCE.MESSAGES,
language: VIDEO_LANGUAGE.MESSAGES,
description: VIDEO_DESCRIPTION.MESSAGES
}
formErrors: { [ id: string ]: string } = {}
validationMessages: ValidatorMessage = {}
videoPrivacies = []
fileError = ''
@ -68,30 +48,16 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
}
buildForm () {
this.form = this.formBuilder.group({
name: [ '', VIDEO_NAME.VALIDATORS ],
privacy: [ '', VIDEO_PRIVACY.VALIDATORS ],
nsfw: [ false ],
category: [ '', VIDEO_CATEGORY.VALIDATORS ],
licence: [ '', VIDEO_LICENCE.VALIDATORS ],
language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
tags: [ '' ]
})
this.form = this.formBuilder.group({})
this.form.valueChanges.subscribe(data => this.onValueChanged(data))
}
ngOnInit () {
this.buildForm()
this.videoCategories = this.serverService.getVideoCategories()
this.videoLicences = this.serverService.getVideoLicences()
this.videoLanguages = this.serverService.getVideoLanguages()
this.videoPrivacies = this.serverService.getVideoPrivacies()
const uuid: string = this.route.snapshot.params['uuid']
this.videoService.getVideo(uuid)
.switchMap(video => {
return this.videoService
@ -103,7 +69,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
video => {
this.video = new VideoEdit(video)
// We cannot set private a video that was not private anymore
// We cannot set private a video that was not private
if (video.privacy !== VideoPrivacy.PRIVATE) {
const newVideoPrivacies = []
for (const p of this.videoPrivacies) {

10
client/src/app/videos/+video-watch/video-watch.component.ts
View File

@ -11,12 +11,12 @@ import '../../../assets/player/peertube-videojs-plugin'
import { AuthService, ConfirmService } from '../../core'
import { VideoBlacklistService } from '../../shared'
import { Account } from '../../shared/account/account.model'
import { VideoDetails } from '../../shared/video/video-details.model'
import { Video } from '../../shared/video/video.model'
import { MarkdownService } from '../shared'
import { VideoDownloadComponent } from './video-download.component'
import { VideoReportComponent } from './video-report.component'
import { VideoShareComponent } from './video-share.component'
import { VideoDetails } from '../../shared/video/video-details.model'
@Component({
selector: 'my-video-watch',
@ -199,14 +199,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
return this.authService.isLoggedIn()
}
canUserUpdateVideo () {
return this.video.isUpdatableBy(this.authService.getUser())
}
isVideoRemovable () {
return this.video.isRemovableBy(this.authService.getUser())
}
isVideoBlacklistable () {
return this.video.isBlackistableBy(this.authService.getUser())
}