diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 7f7652460..a258c7b86 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -9,7 +9,6 @@
.section {
@include miniature-rows;
- overflow: visible; // For the subscribe dropdown
padding-top: 0 !important;
.section-title {
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
index 85dedd7de..29d2991fd 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
@@ -11,6 +11,7 @@ import { AuthService } from '@app/core'
import { VideoService } from '@app/shared/video/video.service'
import { VideoSortField } from '@app/shared/video/sort-field.type'
import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
+import { ScreenService } from '@app/shared/misc/screen.service'
@Component({
selector: 'my-account-video-channels',
@@ -42,7 +43,8 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
private authService: AuthService,
private accountService: AccountService,
private videoChannelService: VideoChannelService,
- private videoService: VideoService
+ private videoService: VideoService,
+ private screenService: ScreenService
) { }
get user () {
@@ -83,7 +85,10 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
}
getVideosOf (videoChannel: VideoChannel) {
- return this.videos[ videoChannel.id ]
+ const numberOfVideos = this.screenService.getNumberOfAvailableMiniatures()
+
+ // 2 rows
+ return this.videos[ videoChannel.id ].slice(0, numberOfVideos * 2)
}
onNearOfBottom () {
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index af75569d9..220d41d59 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -22,8 +22,22 @@ export class ScreenService {
return 'ontouchstart' in window || navigator.msMaxTouchPoints
}
+ getNumberOfAvailableMiniatures () {
+ const screenWidth = this.getWindowInnerWidth()
+
+ let numberOfVideos = 1
+
+ if (screenWidth > 1850) numberOfVideos = 6
+ else if (screenWidth > 1600) numberOfVideos = 5
+ else if (screenWidth > 1370) numberOfVideos = 4
+ else if (screenWidth > 1100) numberOfVideos = 3
+ else if (screenWidth > 850) numberOfVideos = 2
+
+ return numberOfVideos
+ }
+
// Cache window inner width, because it's an expensive call
- private getWindowInnerWidth () {
+ getWindowInnerWidth () {
if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
return this.windowInnerWidth
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
index 72de84703..6380c2e51 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
@@ -12,6 +12,7 @@ type PlaylistSummary = {
inPlaylist: boolean
displayName: string
+ playlistElementId?: number
startTimestamp?: number
stopTimestamp?: number
}
@@ -37,8 +38,6 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
}
displayOptions = false
- private playlistElementId: number
-
constructor (
protected formValidatorService: FormValidatorService,
private authService: AuthService,
@@ -95,11 +94,10 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
id: playlist.id,
displayName: playlist.displayName,
inPlaylist: !!existingPlaylist,
+ playlistElementId: existingPlaylist ? existingPlaylist.playlistElementId : undefined,
startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
})
-
- this.playlistElementId = existingPlaylist ? existingPlaylist.playlistElementId : undefined
}
this.cd.markForCheck()
@@ -181,14 +179,15 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
}
private removeVideoFromPlaylist (playlist: PlaylistSummary) {
- if (!this.playlistElementId) return
+ if (!playlist.playlistElementId) return
- this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, this.playlistElementId)
+ this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, playlist.playlistElementId)
.subscribe(
() => {
this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName }))
playlist.inPlaylist = false
+ playlist.playlistElementId = undefined
},
err => {
@@ -209,8 +208,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
.subscribe(
- () => {
+ res => {
playlist.inPlaylist = true
+ playlist.playlistElementId = res.videoPlaylistElement.id
playlist.startTimestamp = body.startTimestamp
playlist.stopTimestamp = body.stopTimestamp
diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts
index 376387082..42791af86 100644
--- a/client/src/app/shared/video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -113,11 +113,10 @@ export class VideoPlaylistService {
}
addVideoInPlaylist (playlistId: number, body: VideoPlaylistElementCreate) {
- return this.authHttp.post(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos', body)
- .pipe(
- map(this.restExtractor.extractDataBool),
- catchError(err => this.restExtractor.handleError(err))
- )
+ const url = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos'
+
+ return this.authHttp.post<{ videoPlaylistElement: { id: number } }>(url, body)
+ .pipe(catchError(err => this.restExtractor.handleError(err)))
}
updateVideoOfPlaylist (playlistId: number, playlistElementId: number, body: VideoPlaylistElementUpdate) {
diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index f59de584a..5fe1f5c80 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -7,7 +7,8 @@
{{ object.category.label }}
-