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 @@
+
+ The video is being imported, it will be available when the import is finished.
+
+
+
+ The video is being transcoded, it may not work properly.
+
+
+
+ This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
+
+
+
+ This live has not started yet.
+
+
+
+ This live has ended.
+
+
+
+
This video is blocked.
+ {{ video.blockedReason }}
+
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
+ }
+}
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 09be2d085..a0508731f 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -20,32 +20,7 @@
-
-
- The video is being imported, it will be available when the import is finished.
-
-
-
- The video is being transcoded, it may not work properly.
-
-
-
- This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
-
-
-
- This live has not started yet.
-
-
-
- This live has ended.
-
-
-
-
This video is blocked.
- {{ video.blockedReason }}
-
-
+
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 ee74cb0b0..2fc847716 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/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;
}
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 ca20c2b85..7af37ef03 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/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)
}
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index 602525342..4669a700c 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/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,
- ActionButtonsComponent,
- PrivacyConcernsComponent
+ VideoWatchPlaylistComponent
} 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,