diff options
Diffstat (limited to 'client/src/app/+my-account/my-account-video-playlists')
5 files changed, 43 insertions, 11 deletions
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html index bc26e198e..95d4519fa 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html | |||
@@ -1,11 +1,26 @@ | |||
1 | <div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div> | 1 | <div class="row"> |
2 | 2 | ||
3 | <div | 3 | <div class="playlist-info col-xs-12 col-md-5 col-xl-3"> |
4 | class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" | 4 | <my-video-playlist-miniature |
5 | cdkDropList (cdkDropListDropped)="drop($event)" | 5 | *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true" |
6 | > | 6 | [displayDescription]="true" [displayPrivacy]="true" |
7 | <div class="video" *ngFor="let video of videos" cdkDrag (cdkDragMoved)="onDragMove($event)"> | 7 | ></my-video-playlist-miniature> |
8 | <my-video-playlist-element-miniature [video]="video" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)"> | 8 | </div> |
9 | </my-video-playlist-element-miniature> | 9 | |
10 | <div class="col-xs-12 col-md-7 col-xl-9"> | ||
11 | <div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div> | ||
12 | |||
13 | <div | ||
14 | class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" | ||
15 | cdkDropList (cdkDropListDropped)="drop($event)" | ||
16 | > | ||
17 | <div class="video" *ngFor="let video of videos; trackBy: trackByFn" cdkDrag (cdkDragMoved)="onDragMove($event)"> | ||
18 | <my-video-playlist-element-miniature | ||
19 | [video]="video" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)" | ||
20 | [position]="video.playlistElement.position" | ||
21 | > | ||
22 | </my-video-playlist-element-miniature> | ||
23 | </div> | ||
24 | </div> | ||
10 | </div> | 25 | </div> |
11 | </div> | 26 | </div> |
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss index b05af0490..900669827 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss | |||
@@ -2,6 +2,17 @@ | |||
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | @import '_miniature'; | 3 | @import '_miniature'; |
4 | 4 | ||
5 | .playlist-info { | ||
6 | background-color: var(--submenuColor); | ||
7 | margin-left: -15px; | ||
8 | margin-top: -$sub-menu-margin-bottom; | ||
9 | |||
10 | padding: $sub-menu-margin-bottom 0; | ||
11 | |||
12 | display: flex; | ||
13 | justify-content: center; | ||
14 | } | ||
15 | |||
5 | // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples | 16 | // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples |
6 | .cdk-drag-preview { | 17 | .cdk-drag-preview { |
7 | box-sizing: border-box; | 18 | box-sizing: border-box; |
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts index dcf470be3..25d51d2cb 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts | |||
@@ -24,7 +24,7 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro | |||
24 | 24 | ||
25 | pagination: ComponentPagination = { | 25 | pagination: ComponentPagination = { |
26 | currentPage: 1, | 26 | currentPage: 1, |
27 | itemsPerPage: 10, | 27 | itemsPerPage: 30, |
28 | totalItems: null | 28 | totalItems: null |
29 | } | 29 | } |
30 | 30 | ||
@@ -123,6 +123,10 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro | |||
123 | this.loadElements() | 123 | this.loadElements() |
124 | } | 124 | } |
125 | 125 | ||
126 | trackByFn (index: number, elem: Video) { | ||
127 | return elem.id | ||
128 | } | ||
129 | |||
126 | private loadElements () { | 130 | private loadElements () { |
127 | this.videoService.getPlaylistVideos(this.videoPlaylistId, this.pagination) | 131 | this.videoService.getPlaylistVideos(this.videoPlaylistId, this.pagination) |
128 | .subscribe(({ totalVideos, videos }) => { | 132 | .subscribe(({ totalVideos, videos }) => { |
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html index 7d1bed12a..322560673 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html | |||
@@ -8,7 +8,8 @@ | |||
8 | <div class="video-playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()"> | 8 | <div class="video-playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()"> |
9 | <div *ngFor="let playlist of videoPlaylists" class="video-playlist"> | 9 | <div *ngFor="let playlist of videoPlaylists" class="video-playlist"> |
10 | <div class="miniature-wrapper"> | 10 | <div class="miniature-wrapper"> |
11 | <my-video-playlist-miniature [playlist]="playlist" [toManage]="true"></my-video-playlist-miniature> | 11 | <my-video-playlist-miniature [playlist]="playlist" [toManage]="true" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true" |
12 | ></my-video-playlist-miniature> | ||
12 | </div> | 13 | </div> |
13 | 14 | ||
14 | <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons"> | 15 | <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons"> |
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss index 88fba5b05..f648c33e4 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss | |||
@@ -20,8 +20,9 @@ | |||
20 | /deep/ .miniature { | 20 | /deep/ .miniature { |
21 | display: flex; | 21 | display: flex; |
22 | 22 | ||
23 | .miniature-bottom { | 23 | .miniature-info { |
24 | margin-left: 10px; | 24 | margin-left: 10px; |
25 | width: auto; | ||
25 | } | 26 | } |
26 | } | 27 | } |
27 | } | 28 | } |