aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-10-27 08:51:40 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-10-27 08:51:40 +0200
commitd6e32a2e91c090ed342eaf0709caac2630a67ff3 (patch)
treea461a7cedeb87a992f2a6f476fff78e346f00b5d /client/src/app/videos
parentc2962505115563ad1510e8116f3b362887cac71f (diff)
downloadPeerTube-d6e32a2e91c090ed342eaf0709caac2630a67ff3.tar.gz
PeerTube-d6e32a2e91c090ed342eaf0709caac2630a67ff3.tar.zst
PeerTube-d6e32a2e91c090ed342eaf0709caac2630a67ff3.zip
Replace NSFW with "mature or explicit content"
Blur their thumbnail and name
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.html2
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts5
-rw-r--r--client/src/app/videos/video-list/video-list.component.ts7
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.html14
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.scss25
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.ts8
8 files changed, 32 insertions, 33 deletions
diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
index 136c82a7c..3bf4101f4 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -18,11 +18,11 @@
18 </div> 18 </div>
19 19
20 <div class="form-group"> 20 <div class="form-group">
21 <label for="nsfw">NSFW</label>
22 <input 21 <input
23 type="checkbox" id="nsfw" 22 type="checkbox" id="nsfw"
24 formControlName="nsfw" 23 formControlName="nsfw"
25 > 24 >
25 <label for="nsfw">This video contains mature or explicit content</label>
26 </div> 26 </div>
27 27
28 <div class="form-group"> 28 <div class="form-group">
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index 4ade5a671..4dcb3ea56 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -18,11 +18,11 @@
18 </div> 18 </div>
19 19
20 <div class="form-group"> 20 <div class="form-group">
21 <label for="nsfw">NSFW</label>
22 <input 21 <input
23 type="checkbox" id="nsfw" 22 type="checkbox" id="nsfw"
24 formControlName="nsfw" 23 formControlName="nsfw"
25 > 24 >
25 <label for="nsfw">This video contains mature or explicit content</label>
26 </div> 26 </div>
27 27
28 <div class="form-group"> 28 <div class="form-group">
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 6e502aae2..4b594e7ed 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -29,7 +29,7 @@
29 <div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div> 29 <div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div>
30</div> 30</div>
31 31
32<!-- Video informations --> 32<!-- Video information -->
33<div *ngIf="video !== null" id="video-info"> 33<div *ngIf="video !== null" id="video-info">
34 <div class="row video-name-views"> 34 <div class="row video-name-views">
35 <div class="col-xs-8 col-md-8 video-name"> 35 <div class="col-xs-8 col-md-8 video-name">
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 2e1adb043..199666bdc 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -218,7 +218,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
218 218
219 let observable 219 let observable
220 if (this.video.isVideoNSFWForUser(this.authService.getUser())) { 220 if (this.video.isVideoNSFWForUser(this.authService.getUser())) {
221 observable = this.confirmService.confirm('This video is not safe for work. Are you sure you want to watch it?', 'NSFW') 221 observable = this.confirmService.confirm(
222 'This video contains mature or explicit content. Are you sure you want to watch it?',
223 'Mature or explicit content'
224 )
222 } else { 225 } else {
223 observable = Observable.of(true) 226 observable = Observable.of(true)
224 } 227 }
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index d2f0ae045..35a7b6521 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -5,13 +5,14 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject'
5 5
6import { NotificationsService } from 'angular2-notifications' 6import { NotificationsService } from 'angular2-notifications'
7 7
8import { AuthService } from '../../core'
8import { 9import {
9 SortField, 10 SortField,
10 Video, 11 Video,
11 VideoService, 12 VideoService,
12 VideoPagination 13 VideoPagination
13} from '../shared' 14} from '../shared'
14import { Search, SearchField, SearchService } from '../../shared' 15import { Search, SearchField, SearchService, User} from '../../shared'
15 16
16@Component({ 17@Component({
17 selector: 'my-videos-list', 18 selector: 'my-videos-list',
@@ -26,6 +27,7 @@ export class VideoListComponent implements OnInit, OnDestroy {
26 totalItems: null 27 totalItems: null
27 } 28 }
28 sort: SortField 29 sort: SortField
30 user: User
29 videos: Video[] = [] 31 videos: Video[] = []
30 32
31 private search: Search 33 private search: Search
@@ -33,6 +35,7 @@ export class VideoListComponent implements OnInit, OnDestroy {
33 private subSearch: Subscription 35 private subSearch: Subscription
34 36
35 constructor ( 37 constructor (
38 private authService: AuthService,
36 private notificationsService: NotificationsService, 39 private notificationsService: NotificationsService,
37 private router: Router, 40 private router: Router,
38 private route: ActivatedRoute, 41 private route: ActivatedRoute,
@@ -41,6 +44,8 @@ export class VideoListComponent implements OnInit, OnDestroy {
41 ) {} 44 ) {}
42 45
43 ngOnInit () { 46 ngOnInit () {
47 this.user = this.authService.getUser()
48
44 // Subscribe to route changes 49 // Subscribe to route changes
45 this.subActivatedRoute = this.route.params.subscribe(routeParams => { 50 this.subActivatedRoute = this.route.params.subscribe(routeParams => {
46 this.loadRouteParams(routeParams) 51 this.loadRouteParams(routeParams)
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 6525b67bf..abe87025f 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -3,10 +3,7 @@
3 [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.description" 3 [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.description"
4 class="video-miniature-thumbnail" 4 class="video-miniature-thumbnail"
5 > 5 >
6 <img *ngIf="isVideoNSFWForThisUser() === false" [attr.src]="video.thumbnailUrl" alt="video thumbnail" /> 6 <img [attr.src]="video.thumbnailUrl" alt="video thumbnail" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }" />
7 <div *ngIf="isVideoNSFWForThisUser()" class="thumbnail-nsfw">
8 NSFW
9 </div>
10 7
11 <div class="video-miniature-thumbnail-overlay"> 8 <div class="video-miniature-thumbnail-overlay">
12 <span class="video-miniature-thumbnail-overlay-views">{{ video.views }} views</span> 9 <span class="video-miniature-thumbnail-overlay-views">{{ video.views }} views</span>
@@ -14,9 +11,14 @@
14 </div> 11 </div>
15 </a> 12 </a>
16 13
17 <div class="video-miniature-informations"> 14 <div class="video-miniature-information">
18 <span class="video-miniature-name"> 15 <span class="video-miniature-name">
19 <a [routerLink]="['/videos/watch', video.uuid]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a> 16 <a
17 class="video-miniature-name"
18 [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }"
19 >
20 {{ video.name }}
21 </a>
20 </span> 22 </span>
21 23
22 <div class="video-miniature-tags"> 24 <div class="video-miniature-tags">
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index c2743c3be..066792d10 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -9,24 +9,16 @@
9 .video-miniature-thumbnail { 9 .video-miniature-thumbnail {
10 display: inline-block; 10 display: inline-block;
11 position: relative; 11 position: relative;
12 border-radius: 3px;
13 overflow: hidden;
12 14
13 &:hover { 15 &:hover {
14 text-decoration: none !important; 16 text-decoration: none !important;
15 } 17 }
16 18
17 .thumbnail-nsfw { 19 img.blur-filter {
18 background-color: #000; 20 filter: blur(5px);
19 color: #fff; 21 transform : scale(1.03);
20 text-align: center;
21 font-size: 30px;
22 line-height: 110px;
23
24 width: 200px;
25 height: 110px;
26 }
27
28 img, .thumbnail-nsfw {
29 border-radius: 3px;
30 } 22 }
31 23
32 .video-miniature-thumbnail-overlay { 24 .video-miniature-thumbnail-overlay {
@@ -51,7 +43,7 @@
51 } 43 }
52 } 44 }
53 45
54 .video-miniature-informations { 46 .video-miniature-information {
55 width: 200px; 47 width: 200px;
56 48
57 .video-miniature-name { 49 .video-miniature-name {
@@ -68,6 +60,11 @@
68 text-decoration: none; 60 text-decoration: none;
69 } 61 }
70 62
63 &.blur-filter {
64 filter: blur(3px);
65 padding-left: 4px;
66 }
67
71 .video-miniature-tags { 68 .video-miniature-tags {
72 // Fix for chrome when tags are long 69 // Fix for chrome when tags are long
73 width: 201px; 70 width: 201px;
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts
index 8d8b817ee..18434dad2 100644
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/video-miniature.component.ts
@@ -13,14 +13,6 @@ export class VideoMiniatureComponent {
13 @Input() user: User 13 @Input() user: User
14 @Input() video: Video 14 @Input() video: Video
15 15
16 getVideoName () {
17 if (this.isVideoNSFWForThisUser()) {
18 return 'NSFW'
19 }
20
21 return this.video.name
22 }
23
24 isVideoNSFWForThisUser () { 16 isVideoNSFWForThisUser () {
25 return this.video.isVideoNSFWForUser(this.user) 17 return this.video.isVideoNSFWForUser(this.user)
26 } 18 }