breadcrumbs: false
pagination: true
pager: false
- labels: false
+ labels: true
badges: false
jumbotron: false
thumbnails: true
### Bootstrap scripts
scripts:
transition: false
- alert: true
+ alert: false
button: false
carousel: false
collapse: false
root: helpers.root('src'),
// remove other default values
- modulesDirectories: [ 'node_modules', 'node_modules/blueimp-file-upload/js/vendor' ],
+ modulesDirectories: [ 'node_modules' ],
packageAlias: 'browser'
chunksSortMode: 'dependency'
}),
- new webpack.ProvidePlugin({
- jQuery: 'jquery',
- $: 'jquery',
- jquery: 'jquery'
- })
-
],
/*
"@angular/router-deprecated": "2.0.0-rc.1",
"angular-pipes": "^2.0.0",
"awesome-typescript-loader": "^0.17.0",
- "blueimp-file-upload": "^9.12.1",
"bootstrap-loader": "^1.0.8",
"bootstrap-sass": "^3.3.6",
"compression-webpack-plugin": "^0.3.1",
"es6-shim": "^0.35.0",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.19.0",
- "jquery": "^2.2.3",
- "jquery.ui.widget": "^1.10.3",
"json-loader": "^0.5.4",
"ng2-bootstrap": "^1.0.16",
+ "ng2-file-upload": "^1.0.3",
"node-sass": "^3.7.0",
"normalize.css": "^4.1.1",
"raw-loader": "^0.5.1",
"bundles/"
]
}
-}
\ No newline at end of file
+}
-export type SearchField = "name" | "author" | "podUrl" | "magnetUri";
+export type SearchField = "name" | "author" | "podUrl" | "magnetUri" | "tags";
name: 'Name',
author: 'Author',
podUrl: 'Pod Url',
- magnetUri: 'Magnet Uri'
+ magnetUri: 'Magnet Uri',
+ tags: 'Tags'
};
searchCriterias: Search = {
field: 'name',
}
getRequestHeader() {
- return new Headers({ 'Authorization': `${this.getTokenType()} ${this.getToken()}` });
+ return new Headers({ 'Authorization': this.getRequestHeaderValue() });
+ }
+
+ getRequestHeaderValue() {
+ return `${this.getTokenType()} ${this.getToken()}`;
}
getToken() {
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-<form (ngSubmit)="uploadFile()" #videoForm="ngForm">
+<form novalidate (ngSubmit)="upload()" [ngFormModel]="videoForm">
<div class="form-group">
- <label for="name">Video name</label>
+ <label for="name">Name</label>
<input
- type="text" class="form-control" name="name" id="name" required
- ngControl="name" #name="ngForm"
+ type="text" class="form-control" name="name" id="name"
+ ngControl="name" #name="ngForm" [(ngModel)]="video.name"
>
- <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
- Name is required
+ <div [hidden]="name.valid || name.pristine" class="alert alert-warning">
+ A name is required and should be between 3 and 50 characters long
</div>
</div>
<div class="form-group">
- <div class="btn btn-default btn-file">
+ <label for="tags">Tags</label>
+ <input
+ type="text" class="form-control" name="tags" id="tags"
+ ngControl="tags" #tags="ngForm" [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag"
+ >
+ <div [hidden]="tags.valid || tags.pristine" class="alert alert-warning">
+ A tag should be between 2 and 10 characters long
+ </div>
+ </div>
+
+ <div class="tags">
+ <div class="label label-info tag" *ngFor="let tag of video.tags">
+ {{ tag }}
+ <span class="remove" (click)="removeTag(tag)">x</span>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="videofile">File</label>
+ <div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
<span>Select the video...</span>
- <input type="file" name="videofile" id="videofile">
+ <input
+ type="file" name="videofile" id="videofile"
+ ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
+ >
</div>
+ </div>
- <span *ngIf="fileToUpload">{{ fileToUpload.name }}</span>
+ <div class="file-to-upload">
+ <div class="file" *ngIf="uploader.queue.length > 0">
+ <span class="filename">{{ filename }}</span>
+ <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
+ </div>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea
- name="description" id="description" class="form-control" placeholder="Description..." required
- ngControl="description" #description="ngForm"
+ name="description" id="description" class="form-control" placeholder="Description..."
+ ngControl="description" #description="ngForm" [(ngModel)]="video.description"
>
</textarea>
- <div [hidden]="description.valid || description.pristine" class="alert alert-danger">
- A description is required
+ <div [hidden]="description.valid || description.pristine" class="alert alert-warning">
+ A description is required and should be between 3 and 250 characters long
</div>
</div>
- <div id="progress" *ngIf="progressBar.max !== 0">
- <progressbar [value]="progressBar.value" [max]="progressBar.max">{{ progressBar.value | bytes }} / {{ progressBar.max | bytes }}</progressbar>
+ <div class="progress">
+ <progressbar [value]="uploader.progress" max="100"></progressbar>
</div>
- <input type="submit" value="Upload" class="btn btn-default" [disabled]="!videoForm.form.valid || !fileToUpload">
+ <div class="form-group">
+ <input
+ type="submit" value="Upload" class="btn btn-default form-control" [title]="getInvalidFieldsTitle()"
+ [disabled]="!videoForm.valid || video.tags.length === 0 || filename === null"
+ >
+ </div>
</form>
.btn-file {
position: relative;
overflow: hidden;
+ display: block;
}
.btn-file input[type=file] {
margin-bottom: 10px;
}
-#progress {
- margin-bottom: 10px;
+div.tags {
+ height: 40px;
+ font-size: 20px;
+ margin-top: 20px;
+
+ .tag {
+ margin-right: 10px;
+
+ .remove {
+ cursor: pointer;
+ }
+ }
+}
+
+div.file-to-upload {
+ height: 40px;
+
+ .glyphicon-remove {
+ cursor: pointer;
+ }
+}
+
+div.progress {
+ // height: 40px;
}
-/// <reference path="../../../../typings/globals/jquery/index.d.ts" />
-/// <reference path="../../../../typings/globals/jquery.fileupload/index.d.ts" />
-
+import { Control, ControlGroup, Validators } from '@angular/common';
import { Component, ElementRef, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';
import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
+import { FileSelectDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
-import { AuthService, User } from '../../shared';
+import { AuthService } from '../../shared';
@Component({
selector: 'my-videos-add',
styles: [ require('./video-add.component.scss') ],
template: require('./video-add.component.html'),
- directives: [ PROGRESSBAR_DIRECTIVES ],
+ directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES ],
pipes: [ BytesPipe ]
})
export class VideoAddComponent implements OnInit {
+ currentTag: string; // Tag the user is writing in the input
error: string = null;
- fileToUpload: any;
- progressBar: { value: number; max: number; } = { value: 0, max: 0 };
- user: User;
-
- private form: any;
+ videoForm: ControlGroup;
+ uploader: FileUploader;
+ video = {
+ name: '',
+ tags: [],
+ description: ''
+ };
constructor(
private authService: AuthService,
private router: Router
) {}
+ get filename() {
+ if (this.uploader.queue.length === 0) {
+ return null;
+ }
+
+ return this.uploader.queue[0].file.name;
+ }
+
+ get isTagsInputDisabled () {
+ return this.video.tags.length >= 3;
+ }
+
+ getInvalidFieldsTitle() {
+ let title = '';
+ const nameControl = this.videoForm.controls['name'];
+ const descriptionControl = this.videoForm.controls['description'];
+
+ if (!nameControl.valid) {
+ title += 'A name is required\n';
+ }
+
+ if (this.video.tags.length === 0) {
+ title += 'At least one tag is required\n';
+ }
+
+ if (this.filename === null) {
+ title += 'A file is required\n';
+ }
+
+ if (!descriptionControl.valid) {
+ title += 'A description is required\n';
+ }
+
+ return title;
+ }
+
ngOnInit() {
- this.user = User.load();
- jQuery(this.elementRef.nativeElement).find('#videofile').fileupload({
+ this.videoForm = new ControlGroup({
+ name: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(50) ])),
+ description: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(250) ])),
+ tags: new Control('', Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
+ });
+
+
+ this.uploader = new FileUploader({
+ authToken: this.authService.getRequestHeaderValue(),
+ queueLimit: 1,
url: '/api/v1/videos',
- dataType: 'json',
- singleFileUploads: true,
- multipart: true,
- autoUpload: false,
-
- add: (e, data) => {
- this.form = data;
- this.fileToUpload = data['files'][0];
- },
-
- progressall: (e, data) => {
- this.progressBar.value = data.loaded;
- // The server is a little bit slow to answer (has to seed the video)
- // So we add more time to the progress bar (+10%)
- this.progressBar.max = data.total + (0.1 * data.total);
- },
-
- done: (e, data) => {
- this.progressBar.value = this.progressBar.max;
- console.log('Video uploaded.');
-
- // Print all the videos once it's finished
- this.router.navigate(['VideosList']);
- },
-
- fail: (e, data) => {
- const xhr = data.jqXHR;
- if (xhr.status === 400) {
- this.error = xhr.responseText;
- } else {
- this.error = 'Unknow error';
- }
-
- console.error(data);
- }
+ removeAfterUpload: true
});
+
+ this.uploader.onBuildItemForm = (item, form) => {
+ form.append('name', this.video.name);
+ form.append('description', this.video.description);
+
+ for (let i = 0; i < this.video.tags.length; i++) {
+ form.append(`tags[${i}]`, this.video.tags[i]);
+ }
+ };
+ }
+
+ onTagKeyPress(event: KeyboardEvent) {
+ // Enter press
+ if (event.keyCode === 13) {
+ // Check if the tag is valid and does not already exist
+ if (
+ this.currentTag !== '' &&
+ this.videoForm.controls['tags'].valid &&
+ this.video.tags.indexOf(this.currentTag) === -1
+ ) {
+ this.video.tags.push(this.currentTag);
+ this.currentTag = '';
+ }
+ }
+ }
+
+ removeFile() {
+ this.uploader.clearQueue();
+ }
+
+ removeTag(tag: string) {
+ this.video.tags.splice(this.video.tags.indexOf(tag), 1);
}
- uploadFile() {
- this.error = null;
- this.form.formData = jQuery(this.elementRef.nativeElement).find('form').serializeArray();
- this.form.headers = this.authService.getRequestHeader().toJSON();
- this.form.submit();
+ upload() {
+ const item = this.uploader.queue[0];
+ // TODO: wait for https://github.com/valor-software/ng2-file-upload/pull/242
+ item.alias = 'videofile';
+
+ item.onSuccess = () => {
+ console.log('Video uploaded.');
+
+ // Print all the videos once it's finished
+ this.router.navigate(['VideosList']);
+ };
+
+ item.onError = (response: string, status: number) => {
+ this.error = (status === 400) ? response : 'Unknow error';
+ console.error(this.error);
+ };
+
+
+ this.uploader.uploadAll();
}
}
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
-import 'jquery';
import 'bootstrap-loader';
-import 'jquery.ui.widget/jquery.ui.widget';
-import 'blueimp-file-upload';
+import 'ng2-file-upload';
"src/vendor.ts",
"typings/globals/es6-shim/index.d.ts",
"typings/globals/jasmine/index.d.ts",
- "typings/globals/jquery.fileupload/index.d.ts",
- "typings/globals/jquery/index.d.ts",
"typings/globals/node/index.d.ts",
"typings/index.d.ts"
]
"globalDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
- "jquery": "registry:dt/jquery#1.10.0+20160417213236",
- "jquery.fileupload": "registry:dt/jquery.fileupload#5.40.1+20160316155526",
"node": "registry:dt/node#4.0.0+20160509154515"
}
}
const THUMBNAILS_STATIC_PATH = '/static/thumbnails'
const VIDEOS_CONSTRAINTS_FIELDS = {
- NAME: { min: 1, max: 50 }, // Length
- DESCRIPTION: { min: 1, max: 250 }, // Length
+ NAME: { min: 3, max: 50 }, // Length
+ DESCRIPTION: { min: 3, max: 250 }, // Length
MAGNET_URI: { min: 10 }, // Length
DURATION: { min: 1, max: 7200 }, // Number
AUTHOR: { min: 3, max: 20 }, // Length
}
if (!customValidators.isVideoDurationValid(duration)) {
- return res.status(400).send('Duration of the video file is too big (max: ' + constants.MAXIMUM_VIDEO_DURATION + 's).')
+ return res.status(400).send('Duration of the video file is too big (max: ' + constants.VIDEOS_CONSTRAINTS_FIELDS.DURATION.max + 's).')
}
videoFile.duration = duration
// ---------------------------------------------------------------------------
+// TODO: add indexes on searchable columns
const videosSchema = mongoose.Schema({
name: String,
namePath: String,
projects / github / Chocobozzz / PeerTube.git / commitdiff
