aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-06-19 14:55:58 +0200
committerChocobozzz <me@florianbigard.com>2019-06-19 15:05:36 +0200
commit3caf77d3b11f2dbc12e52d665183d36604c1dab9 (patch)
tree53e08727d5f1dc8be2bd4f4a14dadc05f607a9fb /client
parentbbe078ba55be635b5fc92f8f6286c45792b9e7e5 (diff)
downloadPeerTube-3caf77d3b11f2dbc12e52d665183d36604c1dab9.tar.gz
PeerTube-3caf77d3b11f2dbc12e52d665183d36604c1dab9.tar.zst
PeerTube-3caf77d3b11f2dbc12e52d665183d36604c1dab9.zip
Add language filters in user preferences
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.html6
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html15
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts64
-rw-r--r--client/src/app/+my-account/my-account.module.ts16
-rw-r--r--client/src/app/shared/users/user.model.ts1
-rw-r--r--client/src/app/shared/video/abstract-video-list.ts27
-rw-r--r--client/src/app/shared/video/video.service.ts22
-rw-r--r--client/src/app/videos/recommendations/recent-videos-recommendation.service.ts2
-rw-r--r--client/src/app/videos/video-list/video-local.component.ts10
-rw-r--r--client/src/app/videos/video-list/video-recently-added.component.ts10
-rw-r--r--client/src/app/videos/video-list/video-trending.component.ts10
-rw-r--r--client/src/sass/include/_mixins.scss26
-rw-r--r--client/src/sass/primeng-custom.scss37
13 files changed, 197 insertions, 49 deletions
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index f93d41110..e51302f7c 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -7,6 +7,9 @@
7<div i18n class="account-title">Profile</div> 7<div i18n class="account-title">Profile</div>
8<my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile> 8<my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
9 9
10<div i18n class="account-title">Video settings</div>
11<my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
12
10<div i18n class="account-title" id="notifications">Notifications</div> 13<div i18n class="account-title" id="notifications">Notifications</div>
11<my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences> 14<my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
12 15
@@ -16,8 +19,5 @@
16<div i18n class="account-title">Email</div> 19<div i18n class="account-title">Email</div>
17<my-account-change-email></my-account-change-email> 20<my-account-change-email></my-account-change-email>
18 21
19<div i18n class="account-title">Video settings</div>
20<my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
21
22<div i18n class="account-title">Danger zone</div> 22<div i18n class="account-title">Danger zone</div>
23<my-account-danger-zone [user]="user"></my-account-danger-zone> 23<my-account-danger-zone [user]="user"></my-account-danger-zone>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
index 049119fa8..2796dd2db 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
@@ -16,6 +16,21 @@
16 </div> 16 </div>
17 17
18 <div class="form-group"> 18 <div class="form-group">
19 <label i18n for="videoLanguages">Only display videos in the following languages</label>
20 <my-help i18n-customHtml
21 customHtml="In Recently added, Trending, Local and Search pages"
22 ></my-help>
23
24 <div>
25 <p-multiSelect
26 [options]="languageItems" formControlName="videoLanguages" showToggleAll="true"
27 [defaultLabel]="getDefaultVideoLanguageLabel()" [selectedItemsLabel]="getSelectedVideoLanguageLabel()"
28 emptyFilterMessage="No results found" i18n-emptyFilterMessage
29 ></p-multiSelect>
30 </div>
31 </div>
32
33 <div class="form-group">
19 <my-peertube-checkbox 34 <my-peertube-checkbox
20 inputName="webTorrentEnabled" formControlName="webTorrentEnabled" 35 inputName="webTorrentEnabled" formControlName="webTorrentEnabled"
21 i18n-labelText labelText="Use WebTorrent to exchange parts of the video with others" 36 i18n-labelText labelText="Use WebTorrent to exchange parts of the video with others"
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
index b8f80bc1a..77febf179 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
@@ -1,11 +1,13 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { Notifier } from '@app/core' 2import { Notifier, ServerService } from '@app/core'
3import { UserUpdateMe } from '../../../../../../shared' 3import { UserUpdateMe } from '../../../../../../shared'
4import { AuthService } from '../../../core' 4import { AuthService } from '../../../core'
5import { FormReactive, User, UserService } from '../../../shared' 5import { FormReactive, User, UserService } from '../../../shared'
6import { I18n } from '@ngx-translate/i18n-polyfill' 6import { I18n } from '@ngx-translate/i18n-polyfill'
7import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' 7import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
8import { Subject } from 'rxjs' 8import { Subject } from 'rxjs'
9import { SelectItem } from 'primeng/api'
10import { switchMap } from 'rxjs/operators'
9 11
10@Component({ 12@Component({
11 selector: 'my-account-video-settings', 13 selector: 'my-account-video-settings',
@@ -16,11 +18,14 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI
16 @Input() user: User = null 18 @Input() user: User = null
17 @Input() userInformationLoaded: Subject<any> 19 @Input() userInformationLoaded: Subject<any>
18 20
21 languageItems: SelectItem[] = []
22
19 constructor ( 23 constructor (
20 protected formValidatorService: FormValidatorService, 24 protected formValidatorService: FormValidatorService,
21 private authService: AuthService, 25 private authService: AuthService,
22 private notifier: Notifier, 26 private notifier: Notifier,
23 private userService: UserService, 27 private userService: UserService,
28 private serverService: ServerService,
24 private i18n: I18n 29 private i18n: I18n
25 ) { 30 ) {
26 super() 31 super()
@@ -30,31 +35,60 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI
30 this.buildForm({ 35 this.buildForm({
31 nsfwPolicy: null, 36 nsfwPolicy: null,
32 webTorrentEnabled: null, 37 webTorrentEnabled: null,
33 autoPlayVideo: null 38 autoPlayVideo: null,
39 videoLanguages: null
34 }) 40 })
35 41
36 this.userInformationLoaded.subscribe(() => { 42 this.serverService.videoLanguagesLoaded
37 this.form.patchValue({ 43 .pipe(switchMap(() => this.userInformationLoaded))
38 nsfwPolicy: this.user.nsfwPolicy, 44 .subscribe(() => {
39 webTorrentEnabled: this.user.webTorrentEnabled, 45 const languages = this.serverService.getVideoLanguages()
40 autoPlayVideo: this.user.autoPlayVideo === true 46
41 }) 47 this.languageItems = [ { label: this.i18n('Unknown language'), value: '_unknown' } ]
42 }) 48 this.languageItems = this.languageItems
49 .concat(languages.map(l => ({ label: l.label, value: l.id })))
50
51 const videoLanguages = this.user.videoLanguages
52 ? this.user.videoLanguages
53 : this.languageItems.map(l => l.value)
54
55 this.form.patchValue({
56 nsfwPolicy: this.user.nsfwPolicy,
57 webTorrentEnabled: this.user.webTorrentEnabled,
58 autoPlayVideo: this.user.autoPlayVideo === true,
59 videoLanguages
60 })
61 })
43 } 62 }
44 63
45 updateDetails () { 64 updateDetails () {
46 const nsfwPolicy = this.form.value['nsfwPolicy'] 65 const nsfwPolicy = this.form.value['nsfwPolicy']
47 const webTorrentEnabled = this.form.value['webTorrentEnabled'] 66 const webTorrentEnabled = this.form.value['webTorrentEnabled']
48 const autoPlayVideo = this.form.value['autoPlayVideo'] 67 const autoPlayVideo = this.form.value['autoPlayVideo']
68
69 let videoLanguages: string[] = this.form.value['videoLanguages']
70 if (Array.isArray(videoLanguages)) {
71 if (videoLanguages.length === this.languageItems.length) {
72 videoLanguages = null // null means "All"
73 } else if (videoLanguages.length > 20) {
74 this.notifier.error('Too many languages are enabled. Please enable them all or stay below 20 enabled languages.')
75 return
76 } else if (videoLanguages.length === 0) {
77 this.notifier.error('You need to enabled at least 1 video language.')
78 return
79 }
80 }
81
49 const details: UserUpdateMe = { 82 const details: UserUpdateMe = {
50 nsfwPolicy, 83 nsfwPolicy,
51 webTorrentEnabled, 84 webTorrentEnabled,
52 autoPlayVideo 85 autoPlayVideo,
86 videoLanguages
53 } 87 }
54 88
55 this.userService.updateMyProfile(details).subscribe( 89 this.userService.updateMyProfile(details).subscribe(
56 () => { 90 () => {
57 this.notifier.success(this.i18n('Information updated.')) 91 this.notifier.success(this.i18n('Video settings updated.'))
58 92
59 this.authService.refreshUserInformation() 93 this.authService.refreshUserInformation()
60 }, 94 },
@@ -62,4 +96,12 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI
62 err => this.notifier.error(err.message) 96 err => this.notifier.error(err.message)
63 ) 97 )
64 } 98 }
99
100 getDefaultVideoLanguageLabel () {
101 return this.i18n('No language')
102 }
103
104 getSelectedVideoLanguageLabel () {
105 return this.i18n('{{\'{0} languages selected')
106 }
65} 107}
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index ca5b1f7cb..aeda637c2 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -25,18 +25,13 @@ import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-b
25import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component' 25import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component'
26import { MyAccountNotificationsComponent } from '@app/+my-account/my-account-notifications/my-account-notifications.component' 26import { MyAccountNotificationsComponent } from '@app/+my-account/my-account-notifications/my-account-notifications.component'
27import { MyAccountNotificationPreferencesComponent } from '@app/+my-account/my-account-settings/my-account-notification-preferences' 27import { MyAccountNotificationPreferencesComponent } from '@app/+my-account/my-account-settings/my-account-notification-preferences'
28import { 28import { MyAccountVideoPlaylistCreateComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component'
29 MyAccountVideoPlaylistCreateComponent 29import { MyAccountVideoPlaylistUpdateComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component'
30} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component'
31import {
32 MyAccountVideoPlaylistUpdateComponent
33} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component'
34import { MyAccountVideoPlaylistsComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlists.component' 30import { MyAccountVideoPlaylistsComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlists.component'
35import { 31import { MyAccountVideoPlaylistElementsComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
36 MyAccountVideoPlaylistElementsComponent
37} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
38import { DragDropModule } from '@angular/cdk/drag-drop' 32import { DragDropModule } from '@angular/cdk/drag-drop'
39import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-settings/my-account-change-email' 33import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-settings/my-account-change-email'
34import { MultiSelectModule } from 'primeng/primeng'
40 35
41@NgModule({ 36@NgModule({
42 imports: [ 37 imports: [
@@ -46,7 +41,8 @@ import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-setti
46 SharedModule, 41 SharedModule,
47 TableModule, 42 TableModule,
48 InputSwitchModule, 43 InputSwitchModule,
49 DragDropModule 44 DragDropModule,
45 MultiSelectModule
50 ], 46 ],
51 47
52 declarations: [ 48 declarations: [
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 14d13959a..95a6ce9f9 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -18,6 +18,7 @@ export class User implements UserServerModel {
18 webTorrentEnabled: boolean 18 webTorrentEnabled: boolean
19 autoPlayVideo: boolean 19 autoPlayVideo: boolean
20 videosHistoryEnabled: boolean 20 videosHistoryEnabled: boolean
21 videoLanguages: string[]
21 22
22 videoQuota: number 23 videoQuota: number
23 videoQuotaDaily: number 24 videoQuotaDaily: number
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index dc8f9cda9..cf4b5ef8e 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -1,7 +1,7 @@
1import { debounceTime } from 'rxjs/operators' 1import { debounceTime, first, tap } from 'rxjs/operators'
2import { OnDestroy, OnInit } from '@angular/core' 2import { OnDestroy, OnInit } from '@angular/core'
3import { ActivatedRoute, Router } from '@angular/router' 3import { ActivatedRoute, Router } from '@angular/router'
4import { fromEvent, Observable, Subscription } from 'rxjs' 4import { fromEvent, Observable, of, Subscription } from 'rxjs'
5import { AuthService } from '../../core/auth' 5import { AuthService } from '../../core/auth'
6import { ComponentPagination } from '../rest/component-pagination.model' 6import { ComponentPagination } from '../rest/component-pagination.model'
7import { VideoSortField } from './sort-field.type' 7import { VideoSortField } from './sort-field.type'
@@ -32,18 +32,20 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
32 sort: VideoSortField = '-publishedAt' 32 sort: VideoSortField = '-publishedAt'
33 33
34 categoryOneOf?: number 34 categoryOneOf?: number
35 languageOneOf?: string[]
35 defaultSort: VideoSortField = '-publishedAt' 36 defaultSort: VideoSortField = '-publishedAt'
36 37
37 syndicationItems: Syndication[] = [] 38 syndicationItems: Syndication[] = []
38 39
39 loadOnInit = true 40 loadOnInit = true
40 videos: Video[] = [] 41 useUserVideoLanguagePreferences = false
41 ownerDisplayType: OwnerDisplayType = 'account' 42 ownerDisplayType: OwnerDisplayType = 'account'
42 displayModerationBlock = false 43 displayModerationBlock = false
43 titleTooltip: string 44 titleTooltip: string
44 displayVideoActions = true 45 displayVideoActions = true
45 groupByDate = false 46 groupByDate = false
46 47
48 videos: Video[] = []
47 disabled = false 49 disabled = false
48 50
49 displayOptions: MiniatureDisplayOptions = { 51 displayOptions: MiniatureDisplayOptions = {
@@ -98,7 +100,12 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
98 .subscribe(() => this.calcPageSizes()) 100 .subscribe(() => this.calcPageSizes())
99 101
100 this.calcPageSizes() 102 this.calcPageSizes()
101 if (this.loadOnInit === true) this.loadMoreVideos() 103
104 const loadUserObservable = this.loadUserVideoLanguagesIfNeeded()
105
106 if (this.loadOnInit === true) {
107 loadUserObservable.subscribe(() => this.loadMoreVideos())
108 }
102 } 109 }
103 110
104 ngOnDestroy () { 111 ngOnDestroy () {
@@ -245,4 +252,16 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
245 252
246 this.router.navigate([ path ], { queryParams, replaceUrl: true, queryParamsHandling: 'merge' }) 253 this.router.navigate([ path ], { queryParams, replaceUrl: true, queryParamsHandling: 'merge' })
247 } 254 }
255
256 private loadUserVideoLanguagesIfNeeded () {
257 if (!this.authService.isLoggedIn() || !this.useUserVideoLanguagePreferences) {
258 return of(true)
259 }
260
261 return this.authService.userInformationLoaded
262 .pipe(
263 first(),
264 tap(() => this.languageOneOf = this.user.videoLanguages)
265 )
266 }
248} 267}
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index ef489648c..871bc9e46 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -35,12 +35,13 @@ import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
35import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' 35import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
36 36
37export interface VideosProvider { 37export interface VideosProvider {
38 getVideos ( 38 getVideos (parameters: {
39 videoPagination: ComponentPagination, 39 videoPagination: ComponentPagination,
40 sort: VideoSortField, 40 sort: VideoSortField,
41 filter?: VideoFilter, 41 filter?: VideoFilter,
42 categoryOneOf?: number 42 categoryOneOf?: number,
43 ): Observable<{ videos: Video[], totalVideos: number }> 43 languageOneOf?: string[]
44 }): Observable<{ videos: Video[], totalVideos: number }>
44} 45}
45 46
46@Injectable() 47@Injectable()
@@ -206,12 +207,15 @@ export class VideoService implements VideosProvider {
206 ) 207 )
207 } 208 }
208 209
209 getVideos ( 210 getVideos (parameters: {
210 videoPagination: ComponentPagination, 211 videoPagination: ComponentPagination,
211 sort: VideoSortField, 212 sort: VideoSortField,
212 filter?: VideoFilter, 213 filter?: VideoFilter,
213 categoryOneOf?: number 214 categoryOneOf?: number,
214 ): Observable<{ videos: Video[], totalVideos: number }> { 215 languageOneOf?: string[]
216 }): Observable<{ videos: Video[], totalVideos: number }> {
217 const { videoPagination, sort, filter, categoryOneOf, languageOneOf } = parameters
218
215 const pagination = this.restService.componentPaginationToRestPagination(videoPagination) 219 const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
216 220
217 let params = new HttpParams() 221 let params = new HttpParams()
@@ -225,6 +229,12 @@ export class VideoService implements VideosProvider {
225 params = params.set('categoryOneOf', categoryOneOf + '') 229 params = params.set('categoryOneOf', categoryOneOf + '')
226 } 230 }
227 231
232 if (languageOneOf) {
233 for (const l of languageOneOf) {
234 params = params.append('languageOneOf[]', l)
235 }
236 }
237
228 return this.authHttp 238 return this.authHttp
229 .get<ResultList<Video>>(VideoService.BASE_VIDEO_URL, { params }) 239 .get<ResultList<Video>>(VideoService.BASE_VIDEO_URL, { params })
230 .pipe( 240 .pipe(
diff --git a/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts b/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
index 6d7b159da..f975ff6ef 100644
--- a/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
+++ b/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
@@ -32,7 +32,7 @@ export class RecentVideosRecommendationService implements RecommendationService
32 32
33 private fetchPage (page: number, recommendation: RecommendationInfo): Observable<Video[]> { 33 private fetchPage (page: number, recommendation: RecommendationInfo): Observable<Video[]> {
34 const pagination = { currentPage: page, itemsPerPage: this.pageSize + 1 } 34 const pagination = { currentPage: page, itemsPerPage: this.pageSize + 1 }
35 const defaultSubscription = this.videos.getVideos(pagination, '-createdAt') 35 const defaultSubscription = this.videos.getVideos({ videoPagination: pagination, sort: '-createdAt' })
36 .pipe(map(v => v.videos)) 36 .pipe(map(v => v.videos))
37 37
38 if (!recommendation.tags || recommendation.tags.length === 0) return defaultSubscription 38 if (!recommendation.tags || recommendation.tags.length === 0) return defaultSubscription
diff --git a/client/src/app/videos/video-list/video-local.component.ts b/client/src/app/videos/video-list/video-local.component.ts
index 65543343c..5de4a13af 100644
--- a/client/src/app/videos/video-list/video-local.component.ts
+++ b/client/src/app/videos/video-list/video-local.component.ts
@@ -21,6 +21,8 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
21 sort = '-publishedAt' as VideoSortField 21 sort = '-publishedAt' as VideoSortField
22 filter: VideoFilter = 'local' 22 filter: VideoFilter = 'local'
23 23
24 useUserVideoLanguagePreferences = true
25
24 constructor ( 26 constructor (
25 protected i18n: I18n, 27 protected i18n: I18n,
26 protected router: Router, 28 protected router: Router,
@@ -54,7 +56,13 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
54 getVideosObservable (page: number) { 56 getVideosObservable (page: number) {
55 const newPagination = immutableAssign(this.pagination, { currentPage: page }) 57 const newPagination = immutableAssign(this.pagination, { currentPage: page })
56 58
57 return this.videoService.getVideos(newPagination, this.sort, this.filter, this.categoryOneOf) 59 return this.videoService.getVideos({
60 videoPagination: newPagination,
61 sort: this.sort,
62 filter: this.filter,
63 categoryOneOf: this.categoryOneOf,
64 languageOneOf: this.languageOneOf
65 })
58 } 66 }
59 67
60 generateSyndicationList () { 68 generateSyndicationList () {
diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts
index f54bade98..19522e6b4 100644
--- a/client/src/app/videos/video-list/video-recently-added.component.ts
+++ b/client/src/app/videos/video-list/video-recently-added.component.ts
@@ -19,6 +19,8 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On
19 sort: VideoSortField = '-publishedAt' 19 sort: VideoSortField = '-publishedAt'
20 groupByDate = true 20 groupByDate = true
21 21
22 useUserVideoLanguagePreferences = true
23
22 constructor ( 24 constructor (
23 protected i18n: I18n, 25 protected i18n: I18n,
24 protected route: ActivatedRoute, 26 protected route: ActivatedRoute,
@@ -47,7 +49,13 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On
47 getVideosObservable (page: number) { 49 getVideosObservable (page: number) {
48 const newPagination = immutableAssign(this.pagination, { currentPage: page }) 50 const newPagination = immutableAssign(this.pagination, { currentPage: page })
49 51
50 return this.videoService.getVideos(newPagination, this.sort, undefined, this.categoryOneOf) 52 return this.videoService.getVideos({
53 videoPagination: newPagination,
54 sort: this.sort,
55 filter: undefined,
56 categoryOneOf: this.categoryOneOf,
57 languageOneOf: this.languageOneOf
58 })
51 } 59 }
52 60
53 generateSyndicationList () { 61 generateSyndicationList () {
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
index a2c819ebe..5f1d5055b 100644
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -18,6 +18,8 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
18 titlePage: string 18 titlePage: string
19 defaultSort: VideoSortField = '-trending' 19 defaultSort: VideoSortField = '-trending'
20 20
21 useUserVideoLanguagePreferences = true
22
21 constructor ( 23 constructor (
22 protected i18n: I18n, 24 protected i18n: I18n,
23 protected router: Router, 25 protected router: Router,
@@ -59,7 +61,13 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
59 61
60 getVideosObservable (page: number) { 62 getVideosObservable (page: number) {
61 const newPagination = immutableAssign(this.pagination, { currentPage: page }) 63 const newPagination = immutableAssign(this.pagination, { currentPage: page })
62 return this.videoService.getVideos(newPagination, this.sort, undefined, this.categoryOneOf) 64 return this.videoService.getVideos({
65 videoPagination: newPagination,
66 sort: this.sort,
67 filter: undefined,
68 categoryOneOf: this.categoryOneOf,
69 languageOneOf: this.languageOneOf
70 })
63 } 71 }
64 72
65 generateSyndicationList () { 73 generateSyndicationList () {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index f608e9299..caa79bf04 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -224,6 +224,20 @@
224 cursor: pointer; 224 cursor: pointer;
225} 225}
226 226
227@mixin select-arrow-down {
228 top: 50%;
229 right: calc(0% + 15px);
230 content: " ";
231 height: 0;
232 width: 0;
233 position: absolute;
234 pointer-events: none;
235 border: 5px solid rgba(0, 0, 0, 0);
236 border-top-color: #000;
237 margin-top: -2px;
238 z-index: 100;
239}
240
227@mixin peertube-select-container ($width) { 241@mixin peertube-select-container ($width) {
228 padding: 0; 242 padding: 0;
229 margin: 0; 243 margin: 0;
@@ -248,17 +262,7 @@
248 } 262 }
249 263
250 &:after { 264 &:after {
251 top: 50%; 265 @include select-arrow-down;
252 right: calc(0% + 15px);
253 content: " ";
254 height: 0;
255 width: 0;
256 position: absolute;
257 pointer-events: none;
258 border: 5px solid rgba(0, 0, 0, 0);
259 border-top-color: #000;
260 margin-top: -2px;
261 z-index: 100;
262 } 266 }
263 267
264 select { 268 select {
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 957b99356..6c3100746 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -232,6 +232,43 @@ p-table {
232 } 232 }
233} 233}
234 234
235// multiselect customizations
236p-multiselect {
237 .ui-multiselect-label {
238 font-size: 15px !important;
239 padding: 4px 30px 4px 12px !important;
240
241 $width: 338px;
242 width: $width !important;
243
244 @media screen and (max-width: $width) {
245 width: 100% !important;
246 }
247 }
248
249 .pi.pi-chevron-down{
250 margin-left: 0 !important;
251
252 &::after {
253 @include select-arrow-down;
254
255 right: 0;
256 margin-top: 6px;
257 }
258 }
259
260 .ui-chkbox-icon {
261 //position: absolute !important;
262 width: 18px;
263 height: 18px;
264 //left: 0;
265
266 //&::after {
267 // left: -2px !important;
268 //}
269 }
270}
271
235// PrimeNG calendar tweaks 272// PrimeNG calendar tweaks
236p-calendar .ui-datepicker { 273p-calendar .ui-datepicker {
237 a { 274 a {