diff options
-rw-r--r-- | client/src/app/search/search.component.html | 45 | ||||
-rw-r--r-- | client/src/app/search/search.component.ts | 33 |
2 files changed, 46 insertions, 32 deletions
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html index 0d09ebbe6..d2ed1f881 100644 --- a/client/src/app/search/search.component.html +++ b/client/src/app/search/search.component.html | |||
@@ -22,34 +22,37 @@ | |||
22 | </div> | 22 | </div> |
23 | </div> | 23 | </div> |
24 | 24 | ||
25 | <div i18n *ngIf="pagination.totalItems === 0 && videoChannels.length === 0" class="no-result"> | 25 | <div i18n *ngIf="pagination.totalItems === 0 && results.length === 0" class="no-result"> |
26 | No results found | 26 | No results found |
27 | </div> | 27 | </div> |
28 | 28 | ||
29 | <div *ngFor="let videoChannel of videoChannels" class="entry video-channel"> | 29 | <ng-container *ngFor="let result of results"> |
30 | <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]"> | 30 | <div *ngIf="isVideoChannel(result)" class="entry video-channel"> |
31 | <img [src]="videoChannel.avatarUrl" alt="Avatar" /> | 31 | <a [routerLink]="[ '/video-channels', result.nameWithHost ]"> |
32 | </a> | 32 | <img [src]="result.avatarUrl" alt="Avatar" /> |
33 | |||
34 | <div class="video-channel-info"> | ||
35 | <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" class="video-channel-names"> | ||
36 | <div class="video-channel-display-name">{{ videoChannel.displayName }}</div> | ||
37 | <div class="video-channel-name">{{ videoChannel.nameWithHost }}</div> | ||
38 | </a> | 33 | </a> |
39 | 34 | ||
40 | <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div> | 35 | <div class="video-channel-info"> |
41 | </div> | 36 | <a [routerLink]="[ '/video-channels', result.nameWithHost ]" class="video-channel-names"> |
37 | <div class="video-channel-display-name">{{ result.displayName }}</div> | ||
38 | <div class="video-channel-name">{{ result.nameWithHost }}</div> | ||
39 | </a> | ||
42 | 40 | ||
43 | <my-subscribe-button [videoChannel]="videoChannel"></my-subscribe-button> | 41 | <div i18n class="video-channel-followers">{{ result.followersCount }} subscribers</div> |
44 | </div> | 42 | </div> |
45 | 43 | ||
46 | <div *ngFor="let video of videos" class="entry video"> | 44 | <my-subscribe-button *ngIf="isUserLoggedIn()" [videoChannel]="result"></my-subscribe-button> |
47 | <my-video-thumbnail [video]="video"></my-video-thumbnail> | 45 | </div> |
48 | 46 | ||
49 | <div class="video-info"> | 47 | <div *ngIf="isVideo(result)" class="entry video"> |
50 | <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a> | 48 | <my-video-thumbnail [video]="result"></my-video-thumbnail> |
51 | <span i18n class="video-info-date-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> | 49 | |
52 | <a class="video-info-account" [routerLink]="[ '/accounts', video.by ]">{{ video.by }}</a> | 50 | <div class="video-info"> |
51 | <a class="video-info-name" [routerLink]="['/videos/watch', result.uuid]" [attr.title]="result.name">{{ result.name }}</a> | ||
52 | <span i18n class="video-info-date-views">{{ result.publishedAt | myFromNow }} - {{ result.views | myNumberFormatter }} views</span> | ||
53 | <a class="video-info-account" [routerLink]="[ '/accounts', result.by ]">{{ result.by }}</a> | ||
54 | </div> | ||
53 | </div> | 55 | </div> |
54 | </div> | 56 | </ng-container> |
57 | |||
55 | </div> | 58 | </div> |
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts index ed84e24d9..4c540ca72 100644 --- a/client/src/app/search/search.component.ts +++ b/client/src/app/search/search.component.ts | |||
@@ -1,16 +1,16 @@ | |||
1 | import { Component, OnDestroy, OnInit } from '@angular/core' | 1 | import { Component, OnDestroy, OnInit } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { RedirectService } from '@app/core' | 3 | import { AuthService, RedirectService } from '@app/core' |
4 | import { NotificationsService } from 'angular2-notifications' | 4 | import { NotificationsService } from 'angular2-notifications' |
5 | import { forkJoin, Subscription } from 'rxjs' | 5 | import { forkJoin, Subscription } from 'rxjs' |
6 | import { SearchService } from '@app/search/search.service' | 6 | import { SearchService } from '@app/search/search.service' |
7 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' | 7 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' |
8 | import { I18n } from '@ngx-translate/i18n-polyfill' | 8 | import { I18n } from '@ngx-translate/i18n-polyfill' |
9 | import { Video } from '../../../../shared' | ||
10 | import { MetaService } from '@ngx-meta/core' | 9 | import { MetaService } from '@ngx-meta/core' |
11 | import { AdvancedSearch } from '@app/search/advanced-search.model' | 10 | import { AdvancedSearch } from '@app/search/advanced-search.model' |
12 | import { VideoChannel } from '@app/shared/video-channel/video-channel.model' | 11 | import { VideoChannel } from '@app/shared/video-channel/video-channel.model' |
13 | import { immutableAssign } from '@app/shared/misc/utils' | 12 | import { immutableAssign } from '@app/shared/misc/utils' |
13 | import { Video } from '@app/shared/video/video.model' | ||
14 | 14 | ||
15 | @Component({ | 15 | @Component({ |
16 | selector: 'my-search', | 16 | selector: 'my-search', |
@@ -18,8 +18,7 @@ import { immutableAssign } from '@app/shared/misc/utils' | |||
18 | templateUrl: './search.component.html' | 18 | templateUrl: './search.component.html' |
19 | }) | 19 | }) |
20 | export class SearchComponent implements OnInit, OnDestroy { | 20 | export class SearchComponent implements OnInit, OnDestroy { |
21 | videos: Video[] = [] | 21 | results: (Video | VideoChannel)[] = [] |
22 | videoChannels: VideoChannel[] = [] | ||
23 | 22 | ||
24 | pagination: ComponentPagination = { | 23 | pagination: ComponentPagination = { |
25 | currentPage: 1, | 24 | currentPage: 1, |
@@ -42,7 +41,8 @@ export class SearchComponent implements OnInit, OnDestroy { | |||
42 | private metaService: MetaService, | 41 | private metaService: MetaService, |
43 | private redirectService: RedirectService, | 42 | private redirectService: RedirectService, |
44 | private notificationsService: NotificationsService, | 43 | private notificationsService: NotificationsService, |
45 | private searchService: SearchService | 44 | private searchService: SearchService, |
45 | private authService: AuthService | ||
46 | ) { } | 46 | ) { } |
47 | 47 | ||
48 | ngOnInit () { | 48 | ngOnInit () { |
@@ -79,6 +79,18 @@ export class SearchComponent implements OnInit, OnDestroy { | |||
79 | if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe() | 79 | if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe() |
80 | } | 80 | } |
81 | 81 | ||
82 | isVideoChannel (d: VideoChannel | Video): d is VideoChannel { | ||
83 | return d instanceof VideoChannel | ||
84 | } | ||
85 | |||
86 | isVideo (v: VideoChannel | Video): v is Video { | ||
87 | return v instanceof Video | ||
88 | } | ||
89 | |||
90 | isUserLoggedIn () { | ||
91 | return this.authService.isLoggedIn() | ||
92 | } | ||
93 | |||
82 | search () { | 94 | search () { |
83 | forkJoin([ | 95 | forkJoin([ |
84 | this.searchService.searchVideos(this.currentSearch, this.pagination, this.advancedSearch), | 96 | this.searchService.searchVideos(this.currentSearch, this.pagination, this.advancedSearch), |
@@ -86,13 +98,13 @@ export class SearchComponent implements OnInit, OnDestroy { | |||
86 | ]) | 98 | ]) |
87 | .subscribe( | 99 | .subscribe( |
88 | ([ videosResult, videoChannelsResult ]) => { | 100 | ([ videosResult, videoChannelsResult ]) => { |
89 | this.videos = this.videos.concat(videosResult.videos) | 101 | this.results = this.results |
102 | .concat(videoChannelsResult.data) | ||
103 | .concat(videosResult.videos) | ||
90 | this.pagination.totalItems = videosResult.totalVideos + videoChannelsResult.total | 104 | this.pagination.totalItems = videosResult.totalVideos + videoChannelsResult.total |
91 | 105 | ||
92 | this.videoChannels = this.videoChannels.concat(videoChannelsResult.data) | ||
93 | |||
94 | // Focus on channels | 106 | // Focus on channels |
95 | if (this.channelsPerPage !== 10 && this.videos.length < this.pagination.itemsPerPage) { | 107 | if (this.channelsPerPage !== 10 && videosResult.videos.length < this.pagination.itemsPerPage) { |
96 | this.resetPagination() | 108 | this.resetPagination() |
97 | 109 | ||
98 | this.channelsPerPage = 10 | 110 | this.channelsPerPage = 10 |
@@ -126,8 +138,7 @@ export class SearchComponent implements OnInit, OnDestroy { | |||
126 | this.pagination.totalItems = null | 138 | this.pagination.totalItems = null |
127 | this.channelsPerPage = 2 | 139 | this.channelsPerPage = 2 |
128 | 140 | ||
129 | this.videos = [] | 141 | this.results = [] |
130 | this.videoChannels = [] | ||
131 | } | 142 | } |
132 | 143 | ||
133 | private updateTitle () { | 144 | private updateTitle () { |