aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/search
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-04-03 16:17:41 +0200
committerChocobozzz <me@florianbigard.com>2019-04-03 16:17:41 +0200
commite2409062dedf8856c56ef1bdc98ca623e21c4f3b (patch)
treec86f7fcbffdaa610bbadb5a4f9abf28d2acd0cdc /client/src/app/search
parent8fc02e476869276d35759d19248ddfe7f84ec09c (diff)
downloadPeerTube-e2409062dedf8856c56ef1bdc98ca623e21c4f3b.tar.gz
PeerTube-e2409062dedf8856c56ef1bdc98ca623e21c4f3b.tar.zst
PeerTube-e2409062dedf8856c56ef1bdc98ca623e21c4f3b.zip
Refactor video miniatures
Diffstat (limited to 'client/src/app/search')
-rw-r--r--client/src/app/search/search.component.html8
-rw-r--r--client/src/app/search/search.component.scss47
-rw-r--r--client/src/app/search/search.component.ts11
3 files changed, 11 insertions, 55 deletions
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index 82a5f0f26..da2ace54d 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -48,13 +48,7 @@
48 </div> 48 </div>
49 49
50 <div *ngIf="isVideo(result)" class="entry video"> 50 <div *ngIf="isVideo(result)" class="entry video">
51 <my-video-thumbnail [video]="result" [nsfw]="isVideoBlur(result)"></my-video-thumbnail> 51 <my-video-miniature [video]="result" [user]="user" [displayAsRow]="true"></my-video-miniature>
52
53 <div class="video-info">
54 <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', result.uuid]" [attr.title]="result.name">{{ result.name }}</a>
55 <span i18n class="video-info-date-views">{{ result.publishedAt | myFromNow }} - {{ result.views | myNumberFormatter }} views</span>
56 <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', result.byAccount ]">{{ result.byAccount }}</a>
57 </div>
58 </div> 52 </div>
59 </ng-container> 53 </ng-container>
60 54
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index e0509ee15..4e3ce1c96 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -55,51 +55,14 @@
55 padding-bottom: 20px; 55 padding-bottom: 20px;
56 margin-bottom: 20px; 56 margin-bottom: 20px;
57 57
58 &.video {
59
60 my-video-thumbnail {
61 margin-right: 10px;
62 }
63
64 .video-info {
65 flex-grow: 1;
66
67 .video-info-name {
68 @include disable-default-a-behaviour;
69
70 color: var(--mainForegroundColor);
71 display: block;
72 width: fit-content;
73 font-size: 18px;
74 font-weight: $font-semibold;
75 }
76
77 .video-info-date-views {
78 font-size: 14px;
79 }
80
81 .video-info-account {
82 @include disable-default-a-behaviour;
83 @include ellipsis;
84
85 display: block;
86 width: fit-content;
87 font-size: 14px;
88 color: $grey-foreground-color;
89
90 &:hover {
91 color: $grey-foreground-hover-color;
92 }
93 }
94 }
95 }
96
97 &.video-channel { 58 &.video-channel {
98
99 img { 59 img {
100 @include avatar(120px); 60 $image-size: 130px;
61 $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
62
63 @include avatar($image-size);
101 64
102 margin: 0 50px 0 40px; 65 margin: 0 ($margin-size + 10) 0 $margin-size;
103 } 66 }
104 67
105 .video-channel-info { 68 .video-channel-info {
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index c4a4b1fde..a3383ed8a 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -41,10 +41,13 @@ export class SearchComponent implements OnInit, OnDestroy {
41 private metaService: MetaService, 41 private metaService: MetaService,
42 private notifier: Notifier, 42 private notifier: Notifier,
43 private searchService: SearchService, 43 private searchService: SearchService,
44 private authService: AuthService, 44 private authService: AuthService
45 private serverService: ServerService
46 ) { } 45 ) { }
47 46
47 get user () {
48 return this.authService.getUser()
49 }
50
48 ngOnInit () { 51 ngOnInit () {
49 this.subActivatedRoute = this.route.queryParams.subscribe( 52 this.subActivatedRoute = this.route.queryParams.subscribe(
50 queryParams => { 53 queryParams => {
@@ -76,10 +79,6 @@ export class SearchComponent implements OnInit, OnDestroy {
76 if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe() 79 if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe()
77 } 80 }
78 81
79 isVideoBlur (video: Video) {
80 return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
81 }
82
83 isVideoChannel (d: VideoChannel | Video): d is VideoChannel { 82 isVideoChannel (d: VideoChannel | Video): d is VideoChannel {
84 return d instanceof VideoChannel 83 return d instanceof VideoChannel
85 } 84 }