aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/video-playlist
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-04-05 10:52:27 +0200
committerChocobozzz <me@florianbigard.com>2019-04-05 10:53:09 +0200
commit3a0fb65c61f80b510bce979a45d59d17948745e8 (patch)
treec1be0b2158a008fea826835c8d2fd4e8d648bae9 /client/src/app/shared/video-playlist
parent693263e936763a851e3c8c020e3739def8bd4eca (diff)
downloadPeerTube-3a0fb65c61f80b510bce979a45d59d17948745e8.tar.gz
PeerTube-3a0fb65c61f80b510bce979a45d59d17948745e8.tar.zst
PeerTube-3a0fb65c61f80b510bce979a45d59d17948745e8.zip
Add video miniature dropdown
Diffstat (limited to 'client/src/app/shared/video-playlist')
-rw-r--r--client/src/app/shared/video-playlist/video-add-to-playlist.component.html112
-rw-r--r--client/src/app/shared/video-playlist/video-add-to-playlist.component.scss5
-rw-r--r--client/src/app/shared/video-playlist/video-add-to-playlist.component.ts5
3 files changed, 67 insertions, 55 deletions
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
index 19b326206..6029b3648 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -1,74 +1,76 @@
1<div class="header"> 1<div class="root">
2 <div class="first-row"> 2 <div class="header">
3 <div i18n class="title">Save to</div> 3 <div class="first-row">
4 <div i18n class="title">Save to</div>
4 5
5 <div class="options" (click)="displayOptions = !displayOptions"> 6 <div class="options" (click)="displayOptions = !displayOptions">
6 <my-global-icon iconName="cog"></my-global-icon> 7 <my-global-icon iconName="cog"></my-global-icon>
7 8
8 <span i18n>Options</span> 9 <span i18n>Options</span>
10 </div>
9 </div> 11 </div>
10 </div>
11 12
12 <div class="options-row" *ngIf="displayOptions"> 13 <div class="options-row" *ngIf="displayOptions">
13 <div> 14 <div>
14 <my-peertube-checkbox 15 <my-peertube-checkbox
15 inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled" 16 inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
16 i18n-labelText labelText="Start at" 17 i18n-labelText labelText="Start at"
17 ></my-peertube-checkbox> 18 ></my-peertube-checkbox>
18 19
19 <my-timestamp-input 20 <my-timestamp-input
20 [timestamp]="timestampOptions.startTimestamp" 21 [timestamp]="timestampOptions.startTimestamp"
21 [maxTimestamp]="video.duration" 22 [maxTimestamp]="video.duration"
22 [disabled]="!timestampOptions.startTimestampEnabled" 23 [disabled]="!timestampOptions.startTimestampEnabled"
23 [(ngModel)]="timestampOptions.startTimestamp" 24 [(ngModel)]="timestampOptions.startTimestamp"
24 ></my-timestamp-input> 25 ></my-timestamp-input>
25 </div> 26 </div>
26 27
27 <div> 28 <div>
28 <my-peertube-checkbox 29 <my-peertube-checkbox
29 inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled" 30 inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
30 i18n-labelText labelText="Stop at" 31 i18n-labelText labelText="Stop at"
31 ></my-peertube-checkbox> 32 ></my-peertube-checkbox>
32 33
33 <my-timestamp-input 34 <my-timestamp-input
34 [timestamp]="timestampOptions.stopTimestamp" 35 [timestamp]="timestampOptions.stopTimestamp"
35 [maxTimestamp]="video.duration" 36 [maxTimestamp]="video.duration"
36 [disabled]="!timestampOptions.stopTimestampEnabled" 37 [disabled]="!timestampOptions.stopTimestampEnabled"
37 [(ngModel)]="timestampOptions.stopTimestamp" 38 [(ngModel)]="timestampOptions.stopTimestamp"
38 ></my-timestamp-input> 39 ></my-timestamp-input>
40 </div>
39 </div> 41 </div>
40 </div> 42 </div>
41</div>
42 43
43<div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)"> 44 <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
44 <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist"></my-peertube-checkbox> 45 <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist"></my-peertube-checkbox>
45 46
46 <div class="display-name"> 47 <div class="display-name">
47 {{ playlist.displayName }} 48 {{ playlist.displayName }}
48 49
49 <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info"> 50 <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info">
50 {{ formatTimestamp(playlist) }} 51 {{ formatTimestamp(playlist) }}
52 </div>
51 </div> 53 </div>
52 </div> 54 </div>
53</div>
54 55
55<div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened"> 56 <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
56 <my-global-icon iconName="add"></my-global-icon> 57 <my-global-icon iconName="add"></my-global-icon>
57 58
58 Create a new playlist 59 Create a new playlist
59</div> 60 </div>
60 61
61<form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form"> 62 <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
62 <div class="form-group"> 63 <div class="form-group">
63 <label i18n for="displayName">Display name</label> 64 <label i18n for="displayName">Display name</label>
64 <input 65 <input
65 type="text" id="displayName" 66 type="text" id="displayName"
66 formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }" 67 formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
67 > 68 >
68 <div *ngIf="formErrors['displayName']" class="form-error"> 69 <div *ngIf="formErrors['displayName']" class="form-error">
69 {{ formErrors['displayName'] }} 70 {{ formErrors['displayName'] }}
71 </div>
70 </div> 72 </div>
71 </div>
72 73
73 <input type="submit" i18n-value value="Create" [disabled]="!form.valid"> 74 <input type="submit" i18n-value value="Create" [disabled]="!form.valid">
74</form> 75 </form>
76</div>
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index bc0d55912..0424e2ee9 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -1,6 +1,11 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.root {
5 max-height: 300px;
6 overflow-y: auto;
7}
8
4.header { 9.header {
5 min-width: 240px; 10 min-width: 240px;
6 padding: 6px 24px 10px 24px; 11 padding: 6px 24px 10px 24px;
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 705f62404..152f20c85 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
@@ -24,6 +24,7 @@ type PlaylistSummary = {
24export class VideoAddToPlaylistComponent extends FormReactive implements OnInit { 24export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
25 @Input() video: Video 25 @Input() video: Video
26 @Input() currentVideoTimestamp: number 26 @Input() currentVideoTimestamp: number
27 @Input() lazyLoad = false
27 28
28 isNewPlaylistBlockOpened = false 29 isNewPlaylistBlockOpened = false
29 videoPlaylists: PlaylistSummary[] = [] 30 videoPlaylists: PlaylistSummary[] = []
@@ -57,6 +58,10 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
57 displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME 58 displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
58 }) 59 })
59 60
61 if (this.lazyLoad !== true) this.load()
62 }
63
64 load () {
60 forkJoin([ 65 forkJoin([
61 this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'), 66 this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'),
62 this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id) 67 this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)