Move video alert in a dedicated component

4 files changed, 61 insertions, 0 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/information/index.ts b/client/src/app/+videos/+video-watch/shared/information/index.ts
index 4c9920765..2569251cf 100644
--- a/client/src/app/+videos/+video-watch/shared/information/index.ts
+++ b/client/src/app/+videos/+video-watch/shared/information/index.ts
@@ -1 +1,2 @@
 export * from './privacy-concerns.component'
+export * from './video-alert.component'
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
new file mode 100644
index 000000000..3480d3656
--- /dev/null
+++ b/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>
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.scss b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.scss
new file mode 100644
index 000000000..109c31c57
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.scss
@@ -0,0 +1,4 @@
+.alert {
+  text-align: center;
+  border-radius: 0;
+}
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
new file mode 100644
index 000000000..8a46ba0d5
--- /dev/null
+++ b/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
+  }
+}