diff options
author | Chocobozzz <me@florianbigard.com> | 2019-03-11 16:23:33 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2019-03-18 11:17:59 +0100 |
commit | c5a1ae500e68b759f76851552be6dd10631d34f4 (patch) | |
tree | f741daceab3b506f18f7cc14492a25425ebdf68d /client/src/app/+my-account/my-account-video-playlists | |
parent | f0a3988066f72a28bb44520af072f18d91d77dde (diff) | |
download | PeerTube-c5a1ae500e68b759f76851552be6dd10631d34f4.tar.gz PeerTube-c5a1ae500e68b759f76851552be6dd10631d34f4.tar.zst PeerTube-c5a1ae500e68b759f76851552be6dd10631d34f4.zip |
Playlist videos component
Diffstat (limited to 'client/src/app/+my-account/my-account-video-playlists')
3 files changed, 262 insertions, 9 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 28ea7a857..e2d09a36d 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,16 +1,61 @@ | |||
1 | <div class="no-results">No videos in this playlist.</div> | 1 | <div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div> |
2 | 2 | ||
3 | <div class="videos" myInfiniteScroller (nearOfBottom)="onNearOfBottom()"> | 3 | <div class="videos" myInfiniteScroller (nearOfBottom)="onNearOfBottom()"> |
4 | <div *ngFor="let video of videos" class="video"> | 4 | <div *ngFor="let video of videos" class="video"> |
5 | <my-video-thumbnail [video]="video"></my-video-thumbnail> | 5 | <div class="position">{{ video.playlistElement.position }}</div> |
6 | 6 | ||
7 | <div class="video-info"> | 7 | <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur(video)"></my-video-thumbnail> |
8 | <div class="position">{{ video.playlistElement.position }}</div> | ||
9 | |||
10 | <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a> | ||
11 | 8 | ||
9 | <div class="video-info"> | ||
12 | <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a> | 10 | <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a> |
13 | <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a> | 11 | <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a> |
12 | <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video)}}</span> | ||
13 | </div> | ||
14 | |||
15 | <div class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()" autoClose="outside"> | ||
16 | <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more"></my-global-icon> | ||
17 | |||
18 | <div ngbDropdownMenu> | ||
19 | <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, video)"> | ||
20 | <my-global-icon iconName="edit"></my-global-icon> <ng-container i18n>Edit starts/stops at</ng-container> | ||
21 | </div> | ||
22 | |||
23 | <div class="timestamp-options" *ngIf="displayTimestampOptions"> | ||
24 | <div> | ||
25 | <my-peertube-checkbox | ||
26 | inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled" | ||
27 | i18n-labelText labelText="Start at" | ||
28 | ></my-peertube-checkbox> | ||
29 | |||
30 | <my-timestamp-input | ||
31 | [timestamp]="timestampOptions.startTimestamp" | ||
32 | [maxTimestamp]="video.duration" | ||
33 | [disabled]="!timestampOptions.startTimestampEnabled" | ||
34 | [(ngModel)]="timestampOptions.startTimestamp" | ||
35 | ></my-timestamp-input> | ||
36 | </div> | ||
37 | |||
38 | <div> | ||
39 | <my-peertube-checkbox | ||
40 | inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled" | ||
41 | i18n-labelText labelText="Stop at" | ||
42 | ></my-peertube-checkbox> | ||
43 | |||
44 | <my-timestamp-input | ||
45 | [timestamp]="timestampOptions.stopTimestamp" | ||
46 | [maxTimestamp]="video.duration" | ||
47 | [disabled]="!timestampOptions.stopTimestampEnabled" | ||
48 | [(ngModel)]="timestampOptions.stopTimestamp" | ||
49 | ></my-timestamp-input> | ||
50 | </div> | ||
51 | |||
52 | <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)"> | ||
53 | </div> | ||
54 | |||
55 | <span class="dropdown-item" (click)="removeFromPlaylist(video)"> | ||
56 | <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{playlist?.displayName}}</ng-container> | ||
57 | </span> | ||
58 | </div> | ||
14 | </div> | 59 | </div> |
15 | </div> | 60 | </div> |
16 | </div> | 61 | </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 5e6774739..3be10078e 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 | |||
@@ -1,2 +1,96 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | @import '_miniature'; | ||
4 | |||
5 | .videos { | ||
6 | .video { | ||
7 | display: flex; | ||
8 | align-items: center; | ||
9 | padding: 10px; | ||
10 | border-bottom: 1px solid $separator-border-color; | ||
11 | |||
12 | &:hover { | ||
13 | background-color: rgba(0, 0, 0, 0.05); | ||
14 | |||
15 | .more { | ||
16 | display: block; | ||
17 | } | ||
18 | } | ||
19 | |||
20 | .position { | ||
21 | font-weight: $font-semibold; | ||
22 | margin-right: 10px; | ||
23 | color: $grey-foreground-color; | ||
24 | } | ||
25 | |||
26 | my-video-thumbnail { | ||
27 | display: flex; // Avoids an issue with line-height that adds space below the element | ||
28 | margin-right: 10px; | ||
29 | |||
30 | /deep/ .video-thumbnail { | ||
31 | @include miniature-thumbnail(130px, 72px); | ||
32 | } | ||
33 | } | ||
34 | |||
35 | .video-info { | ||
36 | display: flex; | ||
37 | flex-direction: column; | ||
38 | |||
39 | a { | ||
40 | @include disable-default-a-behaviour; | ||
41 | |||
42 | color: var(--mainForegroundColor); | ||
43 | } | ||
44 | |||
45 | .video-info-name { | ||
46 | font-size: 18px; | ||
47 | font-weight: $font-semibold; | ||
48 | } | ||
49 | |||
50 | .video-info-account, .video-info-timestamp { | ||
51 | color: $grey-foreground-color; | ||
52 | } | ||
53 | } | ||
54 | |||
55 | .more { | ||
56 | justify-self: flex-end; | ||
57 | margin-left: auto; | ||
58 | cursor: pointer; | ||
59 | display: none; | ||
60 | |||
61 | &.show { | ||
62 | display: block; | ||
63 | } | ||
64 | |||
65 | .icon-more { | ||
66 | @include apply-svg-color($grey-foreground-color); | ||
67 | |||
68 | &::after { | ||
69 | border: none; | ||
70 | } | ||
71 | } | ||
72 | |||
73 | .dropdown-item { | ||
74 | @include dropdown-with-icon-item; | ||
75 | } | ||
76 | |||
77 | .timestamp-options { | ||
78 | padding-top: 0; | ||
79 | padding-left: 35px; | ||
80 | margin-bottom: 15px; | ||
81 | |||
82 | > div { | ||
83 | display: flex; | ||
84 | align-items: center; | ||
85 | } | ||
86 | |||
87 | input { | ||
88 | @include peertube-button; | ||
89 | @include orange-button; | ||
90 | |||
91 | margin-top: 10px; | ||
92 | } | ||
93 | } | ||
94 | } | ||
95 | } | ||
96 | } | ||
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 8b70a9b1a..76aff3d4f 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 | |||
@@ -1,5 +1,5 @@ | |||
1 | import { Component, OnDestroy, OnInit } from '@angular/core' | 1 | import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' |
2 | import { Notifier } from '@app/core' | 2 | import { Notifier, ServerService } from '@app/core' |
3 | import { AuthService } from '../../core/auth' | 3 | import { AuthService } from '../../core/auth' |
4 | import { ConfirmService } from '../../core/confirm' | 4 | import { ConfirmService } from '../../core/confirm' |
5 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' | 5 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' |
@@ -7,6 +7,12 @@ import { Video } from '@app/shared/video/video.model' | |||
7 | import { Subscription } from 'rxjs' | 7 | import { Subscription } from 'rxjs' |
8 | import { ActivatedRoute } from '@angular/router' | 8 | import { ActivatedRoute } from '@angular/router' |
9 | import { VideoService } from '@app/shared/video/video.service' | 9 | import { VideoService } from '@app/shared/video/video.service' |
10 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' | ||
11 | import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' | ||
12 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
13 | import { secondsToTime } from '../../../assets/player/utils' | ||
14 | import { VideoPlaylistElementUpdate } from '@shared/models' | ||
15 | import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' | ||
10 | 16 | ||
11 | @Component({ | 17 | @Component({ |
12 | selector: 'my-account-video-playlist-elements', | 18 | selector: 'my-account-video-playlist-elements', |
@@ -14,7 +20,10 @@ import { VideoService } from '@app/shared/video/video.service' | |||
14 | styleUrls: [ './my-account-video-playlist-elements.component.scss' ] | 20 | styleUrls: [ './my-account-video-playlist-elements.component.scss' ] |
15 | }) | 21 | }) |
16 | export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy { | 22 | export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy { |
23 | @ViewChild('moreDropdown') moreDropdown: NgbDropdown | ||
24 | |||
17 | videos: Video[] = [] | 25 | videos: Video[] = [] |
26 | playlist: VideoPlaylist | ||
18 | 27 | ||
19 | pagination: ComponentPagination = { | 28 | pagination: ComponentPagination = { |
20 | currentPage: 1, | 29 | currentPage: 1, |
@@ -22,21 +31,35 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro | |||
22 | totalItems: null | 31 | totalItems: null |
23 | } | 32 | } |
24 | 33 | ||
34 | displayTimestampOptions = false | ||
35 | |||
36 | timestampOptions: { | ||
37 | startTimestampEnabled: boolean | ||
38 | startTimestamp: number | ||
39 | stopTimestampEnabled: boolean | ||
40 | stopTimestamp: number | ||
41 | } = {} as any | ||
42 | |||
25 | private videoPlaylistId: string | number | 43 | private videoPlaylistId: string | number |
26 | private paramsSub: Subscription | 44 | private paramsSub: Subscription |
27 | 45 | ||
28 | constructor ( | 46 | constructor ( |
29 | private authService: AuthService, | 47 | private authService: AuthService, |
48 | private serverService: ServerService, | ||
30 | private notifier: Notifier, | 49 | private notifier: Notifier, |
31 | private confirmService: ConfirmService, | 50 | private confirmService: ConfirmService, |
32 | private route: ActivatedRoute, | 51 | private route: ActivatedRoute, |
33 | private videoService: VideoService | 52 | private i18n: I18n, |
53 | private videoService: VideoService, | ||
54 | private videoPlaylistService: VideoPlaylistService | ||
34 | ) {} | 55 | ) {} |
35 | 56 | ||
36 | ngOnInit () { | 57 | ngOnInit () { |
37 | this.paramsSub = this.route.params.subscribe(routeParams => { | 58 | this.paramsSub = this.route.params.subscribe(routeParams => { |
38 | this.videoPlaylistId = routeParams[ 'videoPlaylistId' ] | 59 | this.videoPlaylistId = routeParams[ 'videoPlaylistId' ] |
39 | this.loadElements() | 60 | this.loadElements() |
61 | |||
62 | this.loadPlaylistInfo() | ||
40 | }) | 63 | }) |
41 | } | 64 | } |
42 | 65 | ||
@@ -44,6 +67,46 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro | |||
44 | if (this.paramsSub) this.paramsSub.unsubscribe() | 67 | if (this.paramsSub) this.paramsSub.unsubscribe() |
45 | } | 68 | } |
46 | 69 | ||
70 | isVideoBlur (video: Video) { | ||
71 | return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig()) | ||
72 | } | ||
73 | |||
74 | removeFromPlaylist (video: Video) { | ||
75 | this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id) | ||
76 | .subscribe( | ||
77 | () => { | ||
78 | this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName })) | ||
79 | |||
80 | this.videos = this.videos.filter(v => v.id !== video.id) | ||
81 | }, | ||
82 | |||
83 | err => this.notifier.error(err.message) | ||
84 | ) | ||
85 | |||
86 | this.moreDropdown.close() | ||
87 | } | ||
88 | |||
89 | updateTimestamps (video: Video) { | ||
90 | const body: VideoPlaylistElementUpdate = {} | ||
91 | |||
92 | body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null | ||
93 | body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null | ||
94 | |||
95 | this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, video.id, body) | ||
96 | .subscribe( | ||
97 | () => { | ||
98 | this.notifier.success(this.i18n('Timestamps updated')) | ||
99 | |||
100 | video.playlistElement.startTimestamp = body.startTimestamp | ||
101 | video.playlistElement.stopTimestamp = body.stopTimestamp | ||
102 | }, | ||
103 | |||
104 | err => this.notifier.error(err.message) | ||
105 | ) | ||
106 | |||
107 | this.moreDropdown.close() | ||
108 | } | ||
109 | |||
47 | onNearOfBottom () { | 110 | onNearOfBottom () { |
48 | // Last page | 111 | // Last page |
49 | if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return | 112 | if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return |
@@ -52,6 +115,50 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro | |||
52 | this.loadElements() | 115 | this.loadElements() |
53 | } | 116 | } |
54 | 117 | ||
118 | formatTimestamp (video: Video) { | ||
119 | const start = video.playlistElement.startTimestamp | ||
120 | const stop = video.playlistElement.stopTimestamp | ||
121 | |||
122 | const startFormatted = secondsToTime(start, true, ':') | ||
123 | const stopFormatted = secondsToTime(stop, true, ':') | ||
124 | |||
125 | if (start === null && stop === null) return '' | ||
126 | |||
127 | if (start !== null && stop === null) return this.i18n('Starts at ') + startFormatted | ||
128 | if (start === null && stop !== null) return this.i18n('Stops at ') + stopFormatted | ||
129 | |||
130 | return this.i18n('Starts at ') + startFormatted + this.i18n(' and stops at ') + stopFormatted | ||
131 | } | ||
132 | |||
133 | onDropdownOpenChange () { | ||
134 | this.displayTimestampOptions = false | ||
135 | } | ||
136 | |||
137 | toggleDisplayTimestampsOptions (event: Event, video: Video) { | ||
138 | event.preventDefault() | ||
139 | |||
140 | this.displayTimestampOptions = !this.displayTimestampOptions | ||
141 | |||
142 | if (this.displayTimestampOptions === true) { | ||
143 | this.timestampOptions = { | ||
144 | startTimestampEnabled: false, | ||
145 | stopTimestampEnabled: false, | ||
146 | startTimestamp: 0, | ||
147 | stopTimestamp: video.duration | ||
148 | } | ||
149 | |||
150 | if (video.playlistElement.startTimestamp) { | ||
151 | this.timestampOptions.startTimestampEnabled = true | ||
152 | this.timestampOptions.startTimestamp = video.playlistElement.startTimestamp | ||
153 | } | ||
154 | |||
155 | if (video.playlistElement.stopTimestamp) { | ||
156 | this.timestampOptions.stopTimestampEnabled = true | ||
157 | this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp | ||
158 | } | ||
159 | } | ||
160 | } | ||
161 | |||
55 | private loadElements () { | 162 | private loadElements () { |
56 | this.videoService.getPlaylistVideos(this.videoPlaylistId, this.pagination) | 163 | this.videoService.getPlaylistVideos(this.videoPlaylistId, this.pagination) |
57 | .subscribe(({ totalVideos, videos }) => { | 164 | .subscribe(({ totalVideos, videos }) => { |
@@ -59,4 +166,11 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro | |||
59 | this.pagination.totalItems = totalVideos | 166 | this.pagination.totalItems = totalVideos |
60 | }) | 167 | }) |
61 | } | 168 | } |
169 | |||
170 | private loadPlaylistInfo () { | ||
171 | this.videoPlaylistService.getVideoPlaylist(this.videoPlaylistId) | ||
172 | .subscribe(playlist => { | ||
173 | this.playlist = playlist | ||
174 | }) | ||
175 | } | ||
62 | } | 176 | } |