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

publishing a video

6 files changed, 100 insertions, 75 deletions

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) {