aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+my-account')
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html57
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss94
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts120
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 @@
1import { Component, OnDestroy, OnInit } from '@angular/core' 1import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
2import { Notifier } from '@app/core' 2import { Notifier, ServerService } from '@app/core'
3import { AuthService } from '../../core/auth' 3import { AuthService } from '../../core/auth'
4import { ConfirmService } from '../../core/confirm' 4import { ConfirmService } from '../../core/confirm'
5import { ComponentPagination } from '@app/shared/rest/component-pagination.model' 5import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
@@ -7,6 +7,12 @@ import { Video } from '@app/shared/video/video.model'
7import { Subscription } from 'rxjs' 7import { Subscription } from 'rxjs'
8import { ActivatedRoute } from '@angular/router' 8import { ActivatedRoute } from '@angular/router'
9import { VideoService } from '@app/shared/video/video.service' 9import { VideoService } from '@app/shared/video/video.service'
10import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
11import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
12import { I18n } from '@ngx-translate/i18n-polyfill'
13import { secondsToTime } from '../../../assets/player/utils'
14import { VideoPlaylistElementUpdate } from '@shared/models'
15import { 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})
16export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy { 22export 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}