aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html13
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss12
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts32
3 files changed, 54 insertions, 3 deletions
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 f82f1c554..8d4a4a5ca 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -1,4 +1,4 @@
1<div class="row"> 1<div class="root-row row">
2 <!-- We need the video container for videojs so we just hide it --> 2 <!-- We need the video container for videojs so we just hide it -->
3 <div id="video-element-wrapper"> 3 <div id="video-element-wrapper">
4 <div *ngIf="remoteServerDown" class="remote-server-down"> 4 <div *ngIf="remoteServerDown" class="remote-server-down">
@@ -17,7 +17,12 @@
17 </div> 17 </div>
18 18
19 <div i18n class="alert alert-info" *ngIf="hasVideoScheduledPublication()"> 19 <div i18n class="alert alert-info" *ngIf="hasVideoScheduledPublication()">
20 This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }} 20 This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
21 </div>
22
23 <div class="alert alert-danger" *ngIf="video?.blacklisted">
24 <div class="blacklisted-label" i18n>This video is blacklisted.</div>
25 {{ video.blacklistedReason }}
21 </div> 26 </div>
22 27
23 <!-- Video information --> 28 <!-- Video information -->
@@ -98,6 +103,10 @@
98 <span class="icon icon-blacklist"></span> <ng-container i18n>Blacklist</ng-container> 103 <span class="icon icon-blacklist"></span> <ng-container i18n>Blacklist</ng-container>
99 </a> 104 </a>
100 105
106 <a *ngIf="isVideoUnblacklistable()" class="dropdown-item" i18n-title title="Unblacklist this video" href="#" (click)="unblacklistVideo($event)">
107 <span class="icon icon-unblacklist"></span> <ng-container i18n>Unblacklist</ng-container>
108 </a>
109
101 <a *ngIf="isVideoRemovable()" class="dropdown-item" i18n-title title="Delete this video" href="#" (click)="removeVideo($event)"> 110 <a *ngIf="isVideoRemovable()" class="dropdown-item" i18n-title title="Delete this video" href="#" (click)="removeVideo($event)">
102 <span class="icon icon-delete"></span> <ng-container i18n>Delete</ng-container> 111 <span class="icon icon-delete"></span> <ng-container i18n>Delete</ng-container>
103 </a> 112 </a>
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 e63ab7bbd..1354de32e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -1,6 +1,14 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.root-row {
5 flex-direction: column;
6}
7
8.blacklisted-label {
9 font-weight: $font-semibold;
10}
11
4#video-element-wrapper { 12#video-element-wrapper {
5 background-color: #000; 13 background-color: #000;
6 display: flex; 14 display: flex;
@@ -259,6 +267,10 @@
259 background-image: url('../../../assets/images/video/blacklist.svg'); 267 background-image: url('../../../assets/images/video/blacklist.svg');
260 } 268 }
261 269
270 &.icon-unblacklist {
271 background-image: url('../../../assets/images/global/undo.svg');
272 }
273
262 &.icon-delete { 274 &.icon-delete {
263 background-image: url('../../../assets/images/global/delete-black.svg'); 275 background-image: url('../../../assets/images/global/delete-black.svg');
264 } 276 }
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 878655d4a..bea13ec99 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -121,7 +121,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
121 this.videoCaptionService.listCaptions(uuid) 121 this.videoCaptionService.listCaptions(uuid)
122 ) 122 )
123 .pipe( 123 .pipe(
124 catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ])) 124 // If 401, the video is private or blacklisted so redirect to 404
125 catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 404 ]))
125 ) 126 )
126 .subscribe(([ video, captionsResult ]) => { 127 .subscribe(([ video, captionsResult ]) => {
127 const startTime = this.route.snapshot.queryParams.start 128 const startTime = this.route.snapshot.queryParams.start
@@ -217,6 +218,31 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
217 this.videoBlacklistModal.show() 218 this.videoBlacklistModal.show()
218 } 219 }
219 220
221 async unblacklistVideo (event: Event) {
222 event.preventDefault()
223
224 const confirmMessage = this.i18n(
225 'Do you really want to remove this video from the blacklist? It will be available again in the videos list.'
226 )
227
228 const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist'))
229 if (res === false) return
230
231 this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe(
232 () => {
233 this.notificationsService.success(
234 this.i18n('Success'),
235 this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name })
236 )
237
238 this.video.blacklisted = false
239 this.video.blacklistedReason = null
240 },
241
242 err => this.notificationsService.error(this.i18n('Error'), err.message)
243 )
244 }
245
220 isUserLoggedIn () { 246 isUserLoggedIn () {
221 return this.authService.isLoggedIn() 247 return this.authService.isLoggedIn()
222 } 248 }
@@ -229,6 +255,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
229 return this.video.isBlackistableBy(this.user) 255 return this.video.isBlackistableBy(this.user)
230 } 256 }
231 257
258 isVideoUnblacklistable () {
259 return this.video.isUnblacklistableBy(this.user)
260 }
261
232 getVideoPoster () { 262 getVideoPoster () {
233 if (!this.video) return '' 263 if (!this.video) return ''
234 264