Move video alert in a dedicated component

client/src/app/+videos/+video-watch/shared/information/index.ts

@@ -1 +1,2 @@
 export * from './privacy-concerns.component'
+export * from './video-alert.component'

client/src/app/+videos/+video-watch/shared/information/video-alert.component.html

@@ -0,0 +1,24 @@
+<div i18n class="alert alert-warning" *ngIf="isVideoToImport()">
+  The video is being imported, it will be available when the import is finished.
+</div>
+
+<div i18n class="alert alert-warning" *ngIf="isVideoToTranscode()">
+  The video is being transcoded, it may not work properly.
+</div>
+
+<div i18n class="alert alert-info" *ngIf="hasVideoScheduledPublication()">
+  This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
+</div>
+
+<div i18n class="alert alert-info" *ngIf="isWaitingForLive()">
+  This live has not started yet.
+</div>
+
+<div i18n class="alert alert-info" *ngIf="isLiveEnded()">
+  This live has ended.
+</div>
+
+<div class="alert alert-danger" *ngIf="video?.blacklisted">
+  <div class="blocked-label" i18n>This video is blocked.</div>
+  {{ video.blockedReason }}
+</div>

client/src/app/+videos/+video-watch/shared/information/video-alert.component.scss

@@ -0,0 +1,4 @@
+.alert {
+  text-align: center;
+  border-radius: 0;
+}

client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input } from '@angular/core'
+import { VideoDetails } from '@app/shared/shared-main'
+import { VideoState } from '@shared/models'
+
+@Component({
+  selector: 'my-video-alert',
+  templateUrl: './video-alert.component.html',
+  styleUrls: [ './video-alert.component.scss' ]
+})
+export class VideoAlertComponent {
+  @Input() video: VideoDetails
+
+  isVideoToTranscode () {
+    return this.video && this.video.state.id === VideoState.TO_TRANSCODE
+  }
+
+  isVideoToImport () {
+    return this.video && this.video.state.id === VideoState.TO_IMPORT
+  }
+
+  hasVideoScheduledPublication () {
+    return this.video && this.video.scheduledUpdate !== undefined
+  }
+
+  isWaitingForLive () {
+    return this.video?.state.id === VideoState.WAITING_FOR_LIVE
+  }
+
+  isLiveEnded () {
+    return this.video?.state.id === VideoState.LIVE_ENDED
+  }
+}

client/src/app/+videos/+video-watch/video-watch.component.html

@@ -20,32 +20,7 @@
     <my-plugin-placeholder pluginId="player-next"></my-plugin-placeholder>
   </div>
 
-  <div class="row">
+  <my-video-alert [video]="video"></my-video-alert>
-    <div i18n class="col-md-12 alert alert-warning" *ngIf="isVideoToImport()">
-      The video is being imported, it will be available when the import is finished.
-    </div>
-
-    <div i18n class="col-md-12 alert alert-warning" *ngIf="isVideoToTranscode()">
-      The video is being transcoded, it may not work properly.
-    </div>
-
-    <div i18n class="col-md-12 alert alert-info" *ngIf="hasVideoScheduledPublication()">
-      This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
-    </div>
-
-    <div i18n class="col-md-12 alert alert-info" *ngIf="isWaitingForLive()">
-      This live has not started yet.
-    </div>
-
-    <div i18n class="col-md-12 alert alert-info" *ngIf="isLiveEnded()">
-      This live has ended.
-    </div>
-
-    <div class="col-md-12 alert alert-danger" *ngIf="video?.blacklisted">
-      <div class="blocked-label" i18n>This video is blocked.</div>
-      {{ video.blockedReason }}
-    </div>
-  </div>
 
   <!-- Video information -->
   <div *ngIf="video" class="margin-content video-bottom">

client/src/app/+videos/+video-watch/video-watch.component.scss

@@ -30,11 +30,6 @@ $video-height: 66vh;
   height: 100%;
 }
 
-.alert {
-  text-align: center;
-  border-radius: 0;
-}
-
 .flex-direction-column {
   flex-direction: column;
 }

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

@@ -220,26 +220,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     }
   }
 
-  isVideoToTranscode () {
-    return this.video && this.video.state.id === VideoState.TO_TRANSCODE
-  }
-
-  isVideoToImport () {
-    return this.video && this.video.state.id === VideoState.TO_IMPORT
-  }
-
-  hasVideoScheduledPublication () {
-    return this.video && this.video.scheduledUpdate !== undefined
-  }
-
-  isWaitingForLive () {
-    return this.video?.state.id === VideoState.WAITING_FOR_LIVE
-  }
-
-  isLiveEnded () {
-    return this.video?.state.id === VideoState.LIVE_ENDED
-  }
-
   isVideoBlur (video: Video) {
     return video.isVideoNSFWForUser(this.user, this.serverConfig)
   }

client/src/app/+videos/+video-watch/video-watch.module.ts

@@ -14,13 +14,14 @@ import { SharedActorImageModule } from '../../shared/shared-actor-image/shared-a
 import { VideoCommentService } from '../../shared/shared-video-comment/video-comment.service'
 import { PlayerStylesComponent } from './player-styles.component'
 import {
+  ActionButtonsComponent,
+  PrivacyConcernsComponent,
   RecommendationsModule,
+  VideoAlertComponent,
   VideoAvatarChannelComponent,
   VideoDescriptionComponent,
   VideoRateComponent,
-  VideoWatchPlaylistComponent,
+  VideoWatchPlaylistComponent
-  ActionButtonsComponent,
-  PrivacyConcernsComponent
 } from './shared'
 import { VideoCommentAddComponent } from './shared/comment/video-comment-add.component'
 import { VideoCommentComponent } from './shared/comment/video-comment.component'
@@ -55,6 +56,7 @@ import { VideoWatchComponent } from './video-watch.component'
     VideoDescriptionComponent,
     PrivacyConcernsComponent,
     ActionButtonsComponent,
+    VideoAlertComponent,
 
     VideoCommentsComponent,
     VideoCommentAddComponent,