Design second video upload step

9 files changed, 176 insertions, 21 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.html b/client/src/app/videos/+video-edit/shared/video-description.component.html
new file mode 100644
index 000000000..da66a9753
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.html
@@ -0,0 +1,9 @@
+<textarea
+  [(ngModel)]="description" (ngModelChange)="onModelChange()"
+  id="description" placeholder="My super video">
+</textarea>
+
+<tabset #staticTabs class="previews">
+  <tab heading="Truncated description preview" [innerHTML]="truncatedDescriptionHTML"></tab>
+  <tab heading="Complete description preview" [innerHTML]="descriptionHTML"></tab>
+</tabset>
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss
new file mode 100644
index 000000000..38506bb46
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.scss
@@ -0,0 +1,41 @@
+textarea {
+  @include peertube-input-text(100%);
+
+  padding: 5px 15px;
+  font-size: 15px;
+  height: 150px;
+}
+
+.previews /deep/ {
+  font-size: 15px !important;
+
+  .nav {
+    margin-top: 10px;
+    font-size: 16px !important;
+    border: none !important;
+
+    .nav-item .nav-link {
+      color: #000 !important;
+      height: 30px !important;
+      margin-right: 30px;
+      padding: 0 15px;
+      display: flex;
+      align-items: center;
+      border-radius: 3px;
+      border: none !important;
+
+      &.active, &:hover {
+        background-color: #F0F0F0;
+      }
+
+      &.active {
+        font-weight: $font-semibold !important;
+      }
+    }
+  }
+
+  .tab-content {
+    min-height: 75px;
+    padding: 15px;
+  }
+}
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.ts b/client/src/app/videos/+video-edit/shared/video-description.component.ts
new file mode 100644
index 000000000..8dfb74b2a
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.ts
@@ -0,0 +1,66 @@
+import { Component, forwardRef, Input, OnInit } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { truncate } from 'lodash'
+import 'rxjs/add/operator/debounceTime'
+import 'rxjs/add/operator/distinctUntilChanged'
+import { Subject } from 'rxjs/Subject'
+import { MarkdownService } from '../../shared'
+
+@Component({
+  selector: 'my-video-description',
+  templateUrl: './video-description.component.html',
+  styleUrls: [ './video-description.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => VideoDescriptionComponent),
+      multi: true
+    }
+  ]
+})
+
+export class VideoDescriptionComponent implements ControlValueAccessor, OnInit {
+  @Input() description = ''
+  truncatedDescriptionHTML = ''
+  descriptionHTML = ''
+
+  private descriptionChanged = new Subject<string>()
+
+  constructor (private markdownService: MarkdownService) {}
+
+  ngOnInit () {
+    this.descriptionChanged
+      .debounceTime(150)
+      .distinctUntilChanged()
+      .subscribe(() => this.updateDescriptionPreviews())
+
+    this.descriptionChanged.next(this.description)
+  }
+
+  propagateChange = (_: any) => { /* empty */ }
+
+  writeValue (description: string) {
+    this.description = description
+
+    this.descriptionChanged.next(this.description)
+  }
+
+  registerOnChange (fn: (_: any) => void) {
+    this.propagateChange = fn
+  }
+
+  registerOnTouched () {
+    // Unused
+  }
+
+  onModelChange () {
+    this.propagateChange(this.description)
+
+    this.descriptionChanged.next(this.description)
+  }
+
+  private updateDescriptionPreviews () {
+    this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: 250 }))
+    this.descriptionHTML = this.markdownService.markdownToHTML(this.description)
+  }
+}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 2d0bfc36e..d363499ce 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -43,6 +43,14 @@
   position: relative;
   bottom: $button-height;
 
+  .message-submit {
+    display: inline-block;
+    margin-right: 25px;
+
+    color: #585858;
+    font-size: 15px;
+  }
+
   .submit-button {
     @include peertube-button;
     @include orange-button;
@@ -54,6 +62,7 @@
       background-color: inherit;
       border: none;
       padding: 0;
+      outline: 0;
     }
 
     .icon.icon-validate {
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index c7ed8c351..ce106d82f 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -3,8 +3,9 @@ import { NgModule } from '@angular/core'
 import { TagInputModule } from 'ngx-chips'
 import { TabsModule } from 'ngx-bootstrap/tabs'
 
-import { MarkdownService, VideoDescriptionComponent } from '../../shared'
+import { MarkdownService } from '../../shared'
 import { SharedModule } from '../../../shared'
+import { VideoDescriptionComponent } from './video-description.component'
 import { VideoEditComponent } from './video-edit.component'
 
 @NgModule({
diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
index 6883f8280..a6f2bf6f2 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -15,20 +15,23 @@
       </div>
 
       <div class="form-group">
-        <select [(ngModel)]="firstStepPrivacy">
+        <select [(ngModel)]="firstStepPrivacyId">
           <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
         </select>
       </div>
 
       <div class="form-group">
-        <select [(ngModel)]="firstStepChannel">
+        <select [(ngModel)]="firstStepChannelId">
           <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
         </select>
       </div>
     </div>
   </div>
 
-  <p-progressBar *ngIf="isUploadingVideo" [value]="videoUploadPercents"></p-progressBar>
+  <p-progressBar
+      *ngIf="isUploadingVideo" [value]="videoUploadPercents"
+      [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }"
+  ></p-progressBar>
 
   <!-- Hidden because we need to load the component -->
   <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
@@ -37,10 +40,13 @@
         [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies"
     ></my-video-edit>
 
+
     <div class="submit-container">
-      <div class="submit-button" [ngClass]="{ disabled: !form.valid }">
+      <div *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>
+
+      <div class="submit-button" (click)="updateSecondStep()" [ngClass]="{ disabled: !form.valid || videoUploaded !== true }">
         <span class="icon icon-validate"></span>
-        <input type="button" value="Publish" (click)="upload()" />
+        <input type="button" value="Publish" />
       </div>
     </div>
   </form>
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index dfdf7ff73..39673b4b7 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -18,6 +18,7 @@
     .icon.icon-upload {
       @include icon(90px);
       margin-bottom: 25px;
+      cursor: default;
 
       background-image: url('../../../assets/images/video/upload.svg');
     }
@@ -58,10 +59,9 @@
 }
 
 p-progressBar {
-  margin-top: 50px;
-  margin-bottom: 40px;
-
   /deep/ .ui-progressbar {
+    margin-top: 25px !important;
+    margin-bottom: 40px !important;
     font-size: 15px !important;
     color: #fff !important;
     height: 30px !important;
@@ -76,6 +76,19 @@ p-progressBar {
     .ui-progressbar-label {
       text-align: left;
       padding-left: 18px;
+      margin-top: 0 !important;
+    }
+  }
+
+  &.processing {
+    /deep/ .ui-progressbar-label {
+      // Same color as background to hide "100%"
+      color: rgba(11, 204, 41, 0.16) !important;
+
+      &::before {
+        content: 'Processing...';
+        color: #fff;
+      }
     }
   }
 }
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index 2409acfda..2bbc3de17 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -5,6 +5,7 @@ import { Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
 import { VideoService } from 'app/shared/video/video.service'
 import { VideoCreate } from '../../../../../shared'
+import { VideoPrivacy } from '../../../../../shared/models/videos'
 import { AuthService, ServerService } from '../../core'
 import { FormReactive } from '../../shared'
 import { ValidatorMessage } from '../../shared/forms/form-validators'
@@ -25,6 +26,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   isUploadingVideo = false
   videoUploaded = false
   videoUploadPercents = 0
+  videoUploadedId = 0
 
   error: string = null
   form: FormGroup
@@ -33,8 +35,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
 
   userVideoChannels = []
   videoPrivacies = []
-  firstStepPrivacy = 0
-  firstStepChannel = 0
+  firstStepPrivacyId = 0
+  firstStepChannelId = 0
 
   constructor (
     private formBuilder: FormBuilder,
@@ -59,7 +61,9 @@ export class VideoAddComponent extends FormReactive implements OnInit {
       .subscribe(
         () => {
           this.videoPrivacies = this.serverService.getVideoPrivacies()
-          this.firstStepPrivacy = this.videoPrivacies[0].id
+
+          // Public by default
+          this.firstStepPrivacyId = VideoPrivacy.PUBLIC
         })
 
     this.authService.userInformationLoaded
@@ -72,7 +76,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
           if (Array.isArray(videoChannels) === false) return
 
           this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name }))
-          this.firstStepChannel = this.userVideoChannels[0].id
+          this.firstStepChannelId = this.userVideoChannels[0].id
         }
       )
   }
@@ -89,14 +93,15 @@ export class VideoAddComponent extends FormReactive implements OnInit {
 
   uploadFirstStep () {
     const videofile = this.videofileInput.nativeElement.files[0]
-    const name = videofile.name
-    const privacy = this.firstStepPrivacy.toString()
+    const name = videofile.name.replace(/\.[^/.]+$/, '')
+    const privacy = this.firstStepPrivacyId.toString()
     const nsfw = false
-    const channelId = this.firstStepChannel.toString()
+    const channelId = this.firstStepChannelId.toString()
 
     const formData = new FormData()
     formData.append('name', name)
-    formData.append('privacy', privacy.toString())
+    // Put the video "private" -> we wait he validates the second step
+    formData.append('privacy', VideoPrivacy.PRIVATE.toString())
     formData.append('nsfw', '' + nsfw)
     formData.append('channelId', '' + channelId)
     formData.append('videofile', videofile)
@@ -117,6 +122,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
           console.log('Video uploaded.')
 
           this.videoUploaded = true
+
+          this.videoUploadedId = event.body.video.id
         }
       },
 
@@ -133,13 +140,16 @@ export class VideoAddComponent extends FormReactive implements OnInit {
       return
     }
 
-    const video = new VideoEdit(this.form.value)
+    const video = new VideoEdit()
+    video.patch(this.form.value)
+    video.channel = this.firstStepChannelId
+    video.id = this.videoUploadedId
 
     this.videoService.updateVideo(video)
       .subscribe(
         () => {
           this.notificationsService.success('Success', 'Video published.')
-          this.router.navigate([ '/videos/watch', video.uuid ])
+          this.router.navigate([ '/videos/watch', video.id ])
         },
 
         err => {
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index 3163495bf..261b8a130 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -11,9 +11,9 @@
     ></my-video-edit>
 
     <div class="submit-container">
-      <div class="submit-button" [ngClass]="{ disabled: !form.valid }">
+      <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid }">
         <span class="icon icon-validate"></span>
-        <input type="button" value="Update" (click)="update()" />
+        <input type="button" value="Update" />
       </div>
     </div>
   </form>