Add concept of video state, and add ability to wait transcoding before

publishing a video

12 files changed, 189 insertions, 121 deletions

diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 35a99d0b3..eb24de7a7 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -18,7 +18,7 @@
       <div class="video-info">
         <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
         <span i18n class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
-        <div class="video-info-private">{{ video.privacy.label }}</div>
+        <div class="video-info-private">{{ video.privacy.label }} - {{ getStateLabel(video) }}</div>
       </div>
 
       <!-- Display only once -->
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index eed4be01f..afc01073c 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -12,6 +12,7 @@ import { AbstractVideoList } from '../../shared/video/abstract-video-list'
 import { Video } from '../../shared/video/video.model'
 import { VideoService } from '../../shared/video/video.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoState } from '../../../../../shared/models/videos'
 
 @Component({
   selector: 'my-account-videos',
@@ -59,7 +60,7 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
   }
 
   isInSelectionMode () {
-    return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true)
+    return Object.keys(this.checkedVideos).some(k => this.checkedVideos[ k ] === true)
   }
 
   getVideosObservable (page: number) {
@@ -74,47 +75,68 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
 
   async deleteSelectedVideos () {
     const toDeleteVideosIds = Object.keys(this.checkedVideos)
-      .filter(k => this.checkedVideos[k] === true)
-      .map(k => parseInt(k, 10))
+                                    .filter(k => this.checkedVideos[ k ] === true)
+                                    .map(k => parseInt(k, 10))
 
-    const res = await this.confirmService.confirm(`Do you really want to delete ${toDeleteVideosIds.length} videos?`, 'Delete')
+    const res = await this.confirmService.confirm(
+      this.i18n('Do you really want to delete {{deleteLength}} videos?', { deleteLength: toDeleteVideosIds.length }),
+      this.i18n('Delete')
+    )
     if (res === false) return
 
     const observables: Observable<any>[] = []
     for (const videoId of toDeleteVideosIds) {
-      const o = this.videoService
-                    .removeVideo(videoId)
+      const o = this.videoService.removeVideo(videoId)
                     .pipe(tap(() => this.spliceVideosById(videoId)))
 
       observables.push(o)
     }
 
-    observableFrom(observables).pipe(
-      concatAll())
+    observableFrom(observables)
+      .pipe(concatAll())
       .subscribe(
         res => {
-          this.notificationsService.success('Success', `${toDeleteVideosIds.length} videos deleted.`)
+          this.notificationsService.success(
+            this.i18n('Success'),
+            this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length })
+          )
+
           this.abortSelectionMode()
           this.reloadVideos()
         },
 
-        err => this.notificationsService.error('Error', err.message)
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
       )
   }
 
   async deleteVideo (video: Video) {
-    const res = await this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete')
+    const res = await this.confirmService.confirm(
+      this.i18n('Do you really want to delete {{videoName}}?', { videoName: video.name }),
+      this.i18n('Delete')
+    )
     if (res === false) return
 
     this.videoService.removeVideo(video.id)
-      .subscribe(
-        status => {
-          this.notificationsService.success('Success', `Video ${video.name} deleted.`)
-          this.reloadVideos()
-        },
+        .subscribe(
+          status => {
+            this.notificationsService.success(
+              this.i18n('Success'),
+              this.i18n('Video {{videoName}} deleted.', { videoName: video.name })
+            )
+            this.reloadVideos()
+          },
+
+          error => this.notificationsService.error(this.i18n('Error'), error.message)
+        )
+  }
 
-        error => this.notificationsService.error('Error', error.message)
-      )
+  getStateLabel (video: Video) {
+    if (video.state.id === VideoState.PUBLISHED) return this.i18n('Published')
+
+    if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) return this.i18n('Waiting transcoding')
+    if (video.state.id === VideoState.TO_TRANSCODE) return this.i18n('To transcode')
+
+    return this.i18n('Unknown state')
   }
 
   protected buildVideoHeight () {
@@ -124,7 +146,7 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
 
   private spliceVideosById (id: number) {
     for (const key of Object.keys(this.loadedPages)) {
-      const videos = this.loadedPages[key]
+      const videos = this.loadedPages[ key ]
       const index = videos.findIndex(v => v.id === id)
 
       if (index !== -1) {
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index 19c350ab3..e500ad6fc 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -1,4 +1,11 @@
-import { UserRight, VideoChannel, VideoDetails as VideoDetailsServerModel, VideoFile } from '../../../../../shared'
+import {
+  UserRight,
+  VideoChannel,
+  VideoConstant,
+  VideoDetails as VideoDetailsServerModel,
+  VideoFile,
+  VideoState
+} from '../../../../../shared'
 import { AuthUser } from '../../core'
 import { Video } from '../../shared/video/video.model'
 import { Account } from '@app/shared/account/account.model'
@@ -12,6 +19,9 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   account: Account
   commentsEnabled: boolean
 
+  waitTranscoding: boolean
+  state: VideoConstant<VideoState>
+
   likesPercent: number
   dislikesPercent: number
 
diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
index ad2929db5..f045a3acd 100644
--- a/client/src/app/shared/video/video-edit.model.ts
+++ b/client/src/app/shared/video/video-edit.model.ts
@@ -1,7 +1,8 @@
 import { VideoDetails } from './video-details.model'
 import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
+import { VideoUpdate } from '../../../../../shared/models/videos'
 
-export class VideoEdit {
+export class VideoEdit implements VideoUpdate {
   category: number
   licence: number
   language: string
@@ -10,6 +11,7 @@ export class VideoEdit {
   tags: string[]
   nsfw: boolean
   commentsEnabled: boolean
+  waitTranscoding: boolean
   channelId: number
   privacy: VideoPrivacy
   support: string
@@ -32,6 +34,7 @@ export class VideoEdit {
       this.tags = videoDetails.tags
       this.nsfw = videoDetails.nsfw
       this.commentsEnabled = videoDetails.commentsEnabled
+      this.waitTranscoding = videoDetails.waitTranscoding
       this.channelId = videoDetails.channel.id
       this.privacy = videoDetails.privacy.id
       this.support = videoDetails.support
@@ -42,7 +45,7 @@ export class VideoEdit {
 
   patch (values: Object) {
     Object.keys(values).forEach((key) => {
-      this[key] = values[key]
+      this[ key ] = values[ key ]
     })
   }
 
@@ -57,6 +60,7 @@ export class VideoEdit {
       tags: this.tags,
       nsfw: this.nsfw,
       commentsEnabled: this.commentsEnabled,
+      waitTranscoding: this.waitTranscoding,
       channelId: this.channelId,
       privacy: this.privacy
     }
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index d37dc2c3e..48a4b4260 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -1,5 +1,5 @@
 import { User } from '../'
-import { Video as VideoServerModel, VideoPrivacy } from '../../../../../shared'
+import { Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 import { VideoConstant } from '../../../../../shared/models/videos/video.model'
 import { getAbsoluteAPIUrl } from '../misc/utils'
@@ -36,6 +36,9 @@ export class Video implements VideoServerModel {
   dislikes: number
   nsfw: boolean
 
+  waitTranscoding?: boolean
+  state?: VideoConstant<VideoState>
+
   account: {
     id: number
     uuid: string
@@ -58,15 +61,14 @@ export class Video implements VideoServerModel {
 
   private static createDurationString (duration: number) {
     const hours = Math.floor(duration / 3600)
-    const minutes = Math.floor(duration % 3600 / 60)
+    const minutes = Math.floor((duration % 3600) / 60)
     const seconds = duration % 60
 
     const minutesPadding = minutes >= 10 ? '' : '0'
     const secondsPadding = seconds >= 10 ? '' : '0'
     const displayedHours = hours > 0 ? hours.toString() + ':' : ''
 
-    return displayedHours + minutesPadding +
-        minutes.toString() + ':' + secondsPadding + seconds.toString()
+    return displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
   }
 
   constructor (hash: VideoServerModel, translations = {}) {
@@ -78,6 +80,8 @@ export class Video implements VideoServerModel {
     this.licence = hash.licence
     this.language = hash.language
     this.privacy = hash.privacy
+    this.waitTranscoding = hash.waitTranscoding
+    this.state = hash.state
     this.description = hash.description
     this.duration = hash.duration
     this.durationLabel = Video.createDurationString(hash.duration)
@@ -104,6 +108,8 @@ export class Video implements VideoServerModel {
     this.licence.label = peertubeTranslate(this.licence.label, translations)
     this.language.label = peertubeTranslate(this.language.label, translations)
     this.privacy.label = peertubeTranslate(this.privacy.label, translations)
+
+    if (this.state) this.state.label = peertubeTranslate(this.state.label, translations)
   }
 
   isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 58cb52efc..d63915ad2 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -80,6 +80,7 @@ export class VideoService {
       privacy: video.privacy,
       tags: video.tags,
       nsfw: video.nsfw,
+      waitTranscoding: video.waitTranscoding,
       commentsEnabled: video.commentsEnabled,
       thumbnailfile: video.thumbnailfile,
       previewfile: video.previewfile
@@ -98,11 +99,11 @@ export class VideoService {
     const req = new HttpRequest('POST', VideoService.BASE_VIDEO_URL + 'upload', video, { reportProgress: true })
 
     return this.authHttp
-               .request<{ video: { id: number, uuid: string} }>(req)
+               .request<{ video: { id: number, uuid: string } }>(req)
                .pipe(catchError(this.restExtractor.handleError))
   }
 
-  getMyVideos (videoPagination: ComponentPagination, sort: VideoSortField): Observable<{ videos: Video[], totalVideos: number}> {
+  getMyVideos (videoPagination: ComponentPagination, sort: VideoSortField): Observable<{ videos: Video[], totalVideos: number }> {
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
 
     let params = new HttpParams()
@@ -120,7 +121,7 @@ export class VideoService {
     account: Account,
     videoPagination: ComponentPagination,
     sort: VideoSortField
-  ): Observable<{ videos: Video[], totalVideos: number}> {
+  ): Observable<{ videos: Video[], totalVideos: number }> {
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
 
     let params = new HttpParams()
@@ -138,7 +139,7 @@ export class VideoService {
     videoChannel: VideoChannel,
     videoPagination: ComponentPagination,
     sort: VideoSortField
-  ): Observable<{ videos: Video[], totalVideos: number}> {
+  ): Observable<{ videos: Video[], totalVideos: number }> {
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
 
     let params = new HttpParams()
@@ -156,7 +157,7 @@ export class VideoService {
     videoPagination: ComponentPagination,
     sort: VideoSortField,
     filter?: VideoFilter
-  ): Observable<{ videos: Video[], totalVideos: number}> {
+  ): Observable<{ videos: Video[], totalVideos: number }> {
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
 
     let params = new HttpParams()
@@ -225,7 +226,7 @@ export class VideoService {
     search: string,
     videoPagination: ComponentPagination,
     sort: VideoSortField
-  ): Observable<{ videos: Video[], totalVideos: number}> {
+  ): Observable<{ videos: Video[], totalVideos: number }> {
     const url = VideoService.BASE_VIDEO_URL + 'search'
 
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
@@ -295,18 +296,18 @@ export class VideoService {
 
   private extractVideos (result: ResultList<VideoServerModel>) {
     return this.serverService.localeObservable
-      .pipe(
-        map(translations => {
-          const videosJson = result.data
-          const totalVideos = result.total
-          const videos: Video[] = []
-
-          for (const videoJson of videosJson) {
-            videos.push(new Video(videoJson, translations))
-          }
-
-          return { videos, totalVideos }
-        })
-      )
+               .pipe(
+                 map(translations => {
+                   const videosJson = result.data
+                   const totalVideos = result.total
+                   const videos: Video[] = []
+
+                   for (const videoJson of videosJson) {
+                     videos.push(new Video(videoJson, translations))
+                   }
+
+                   return { videos, totalVideos }
+                 })
+               )
   }
 }
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index c8cd0d679..379cf7948 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -109,6 +109,16 @@
           <label i18n for="commentsEnabled">Enable video comments</label>
         </div>
 
+        <div class="form-group form-group-checkbox">
+          <input type="checkbox" id="waitTranscoding" formControlName="waitTranscoding" />
+          <label for="waitTranscoding"></label>
+          <label i18n for="waitTranscoding">Wait transcoding before publishing the video</label>
+          <my-help
+            tooltipPlacement="top" helpType="custom" i18n-customHtml
+            customHtml="If you decide to not wait transcoding before publishing the video, it can be unplayable until it transcoding ends."
+          ></my-help>
+        </div>
+
       </div>
     </tab>
 
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
index 61515c0b0..ee4fd5dc1 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
@@ -47,6 +47,7 @@ export class VideoEditComponent implements OnInit {
     const defaultValues = {
       nsfw: 'false',
       commentsEnabled: 'true',
+      waitTranscoding: 'true',
       tags: []
     }
     const obj = {
@@ -55,6 +56,7 @@ export class VideoEditComponent implements OnInit {
       channelId: this.videoValidatorsService.VIDEO_CHANNEL,
       nsfw: null,
       commentsEnabled: null,
+      waitTranscoding: null,
       category: this.videoValidatorsService.VIDEO_CATEGORY,
       licence: this.videoValidatorsService.VIDEO_LICENCE,
       language: this.videoValidatorsService.VIDEO_LANGUAGE,
@@ -74,13 +76,13 @@ export class VideoEditComponent implements OnInit {
     )
 
     // We will update the "support" field depending on the channel
-    this.form.controls['channelId']
+    this.form.controls[ 'channelId' ]
       .valueChanges
       .pipe(map(res => parseInt(res.toString(), 10)))
       .subscribe(
         newChannelId => {
-          const oldChannelId = parseInt(this.form.value['channelId'], 10)
-          const currentSupport = this.form.value['support']
+          const oldChannelId = parseInt(this.form.value[ 'channelId' ], 10)
+          const currentSupport = this.form.value[ 'support' ]
 
           // Not initialized yet
           if (isNaN(newChannelId)) return
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 332f757d7..85afd0caa 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -164,6 +164,7 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
 
     const privacy = this.firstStepPrivacyId.toString()
     const nsfw = false
+    const waitTranscoding = true
     const commentsEnabled = true
     const channelId = this.firstStepChannelId.toString()
 
@@ -173,6 +174,7 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
     formData.append('privacy', VideoPrivacy.PRIVATE.toString())
     formData.append('nsfw', '' + nsfw)
     formData.append('commentsEnabled', '' + commentsEnabled)
+    formData.append('waitTranscoding', '' + waitTranscoding)
     formData.append('channelId', '' + channelId)
     formData.append('videofile', videofile)
 
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 4c650b121..8bd5c00ff 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -3,6 +3,10 @@
   <div id="video-element-wrapper">
   </div>
 
+  <div i18n id="warning-transcoding" class="alert alert-warning" *ngIf="isVideoToTranscode()">
+    The video is being transcoded, it may not work properly.
+  </div>
+
   <!-- Video information -->
   <div *ngIf="video" class="margin-content video-bottom">
     <div class="video-info">
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 00e776a69..06dd75653 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -28,6 +28,10 @@
   }
 }
 
+#warning-transcoding {
+  text-align: center;
+}
+
 #video-not-found {
   height: 300px;
   line-height: 300px;
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index eefa43a73..498542fff 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -1,5 +1,5 @@
 import { catchError } from 'rxjs/operators'
-import { Component, ElementRef, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild, Inject } from '@angular/core'
+import { Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { RedirectService } from '@app/core/routing/redirect.service'
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
@@ -10,7 +10,7 @@ import { Subscription } from 'rxjs'
 import * as videojs from 'video.js'
 import 'videojs-hotkeys'
 import * as WebTorrent from 'webtorrent'
-import { UserVideoRateType, VideoRateType } from '../../../../../shared'
+import { UserVideoRateType, VideoRateType, VideoState } from '../../../../../shared'
 import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
 import { RestExtractor, VideoBlacklistService } from '../../shared'
@@ -21,7 +21,7 @@ import { MarkdownService } from '../shared'
 import { VideoDownloadComponent } from './modal/video-download.component'
 import { VideoReportComponent } from './modal/video-report.component'
 import { VideoShareComponent } from './modal/video-share.component'
-import { getVideojsOptions, loadLocale, addContextMenu } from '../../../assets/player/peertube-player'
+import { addContextMenu, getVideojsOptions, loadLocale } from '../../../assets/player/peertube-player'
 import { ServerService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { environment } from '../../../environments/environment'
@@ -91,21 +91,21 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     }
 
     this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt')
-      .subscribe(
-        data => {
-          this.otherVideos = data.videos
-          this.updateOtherVideosDisplayed()
-        },
+        .subscribe(
+          data => {
+            this.otherVideos = data.videos
+            this.updateOtherVideosDisplayed()
+          },
 
-        err => console.error(err)
-      )
+          err => console.error(err)
+        )
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
       if (this.player) {
         this.player.pause()
       }
 
-      const uuid = routeParams['uuid']
+      const uuid = routeParams[ 'uuid' ]
 
       // Video did not change
       if (this.video && this.video.uuid === uuid) return
@@ -113,13 +113,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.videoService
           .getVideo(uuid)
           .pipe(catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ])))
-          .subscribe(
-            video => {
-              const startTime = this.route.snapshot.queryParams.start
-              this.onVideoFetched(video, startTime)
-                  .catch(err => this.handleError(err))
-            }
-          )
+          .subscribe(video => {
+            const startTime = this.route.snapshot.queryParams.start
+            this.onVideoFetched(video, startTime)
+                .catch(err => this.handleError(err))
+          })
     })
   }
 
@@ -157,17 +155,17 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     if (res === false) return
 
     this.videoBlacklistService.blacklistVideo(this.video.id)
-                              .subscribe(
-                                status => {
-                                  this.notificationsService.success(
-                                    this.i18n('Success'),
-                                    this.i18n('Video {{videoName}} had been blacklisted.', { videoName: this.video.name })
-                                  )
-                                  this.redirectService.redirectToHomepage()
-                                },
+        .subscribe(
+          () => {
+            this.notificationsService.success(
+              this.i18n('Success'),
+              this.i18n('Video {{videoName}} had been blacklisted.', { videoName: this.video.name })
+            )
+            this.redirectService.redirectToHomepage()
+          },
 
-                                error => this.notificationsService.error(this.i18n('Error'), error.message)
-                              )
+          error => this.notificationsService.error(this.i18n('Error'), error.message)
+        )
   }
 
   showMoreDescription () {
@@ -188,22 +186,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.descriptionLoading = true
 
     this.videoService.loadCompleteDescription(this.video.descriptionPath)
-      .subscribe(
-        description => {
-          this.completeDescriptionShown = true
-          this.descriptionLoading = false
+        .subscribe(
+          description => {
+            this.completeDescriptionShown = true
+            this.descriptionLoading = false
 
-          this.shortVideoDescription = this.video.description
-          this.completeVideoDescription = description
+            this.shortVideoDescription = this.video.description
+            this.completeVideoDescription = description
 
-          this.updateVideoDescription(this.completeVideoDescription)
-        },
+            this.updateVideoDescription(this.completeVideoDescription)
+          },
 
-        error => {
-          this.descriptionLoading = false
-          this.notificationsService.error(this.i18n('Error'), error.message)
-        }
-      )
+          error => {
+            this.descriptionLoading = false
+            this.notificationsService.error(this.i18n('Error'), error.message)
+          }
+        )
   }
 
   showReportModal (event: Event) {
@@ -259,19 +257,19 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     if (res === false) return
 
     this.videoService.removeVideo(this.video.id)
-      .subscribe(
-        status => {
-          this.notificationsService.success(
-            this.i18n('Success'),
-            this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name })
-          )
+        .subscribe(
+          status => {
+            this.notificationsService.success(
+              this.i18n('Success'),
+              this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name })
+            )
 
-          // Go back to the video-list.
-          this.redirectService.redirectToHomepage()
-        },
+            // Go back to the video-list.
+            this.redirectService.redirectToHomepage()
+          },
 
-        error => this.notificationsService.error(this.i18n('Error'), error.message)
-      )
+          error => this.notificationsService.error(this.i18n('Error'), error.message)
+        )
   }
 
   acceptedPrivacyConcern () {
@@ -279,6 +277,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.hasAlreadyAcceptedPrivacyConcern = true
   }
 
+  isVideoToTranscode () {
+    return this.video && this.video.state.id === VideoState.TO_TRANSCODE
+  }
+
   private updateVideoDescription (description: string) {
     this.video.description = description
     this.setVideoDescriptionHTML()
@@ -294,10 +296,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   private setVideoLikesBarTooltipText () {
-    this.likesBarTooltipText = this.i18n(
-      '{{likesNumber}} likes / {{dislikesNumber}} dislikes',
-      { likesNumber: this.video.likes, dislikesNumber: this.video.dislikes }
-    )
+    this.likesBarTooltipText = this.i18n('{{likesNumber}} likes / {{dislikesNumber}} dislikes', {
+      likesNumber: this.video.likes,
+      dislikesNumber: this.video.dislikes
+    })
   }
 
   private handleError (err: any) {
@@ -320,15 +322,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     if (this.isUserLoggedIn() === false) return
 
     this.videoService.getUserVideoRating(this.video.id)
-                     .subscribe(
-                       ratingObject => {
-                         if (ratingObject) {
-                           this.userRating = ratingObject.rating
-                         }
-                       },
+        .subscribe(
+          ratingObject => {
+            if (ratingObject) {
+              this.userRating = ratingObject.rating
+            }
+          },
 
-                       err => this.notificationsService.error(this.i18n('Error'), err.message)
-                      )
+          err => this.notificationsService.error(this.i18n('Error'), err.message)
+        )
   }
 
   private async onVideoFetched (video: VideoDetails, startTime = 0) {
@@ -409,14 +411,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     }
 
     method.call(this.videoService, this.video.id)
-     .subscribe(
-      () => {
-        // Update the video like attribute
-        this.updateVideoRating(this.userRating, nextRating)
-        this.userRating = nextRating
-      },
-      err => this.notificationsService.error(this.i18n('Error'), err.message)
-     )
+          .subscribe(
+            () => {
+              // Update the video like attribute
+              this.updateVideoRating(this.userRating, nextRating)
+              this.userRating = nextRating
+            },
+
+            err => this.notificationsService.error(this.i18n('Error'), err.message)
+          )
   }
 
   private updateVideoRating (oldRating: UserVideoRateType, newRating: VideoRateType) {