diff options
Diffstat (limited to 'client/src/app/account/account-videos')
3 files changed, 43 insertions, 4 deletions
diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html index 81bda9477..30db69429 100644 --- a/client/src/app/account/account-videos/account-videos.component.html +++ b/client/src/app/account/account-videos/account-videos.component.html | |||
@@ -13,7 +13,12 @@ | |||
13 | <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> | 13 | <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> |
14 | </div> | 14 | </div> |
15 | 15 | ||
16 | <a class="edit-button" [routerLink]="[ '/videos', video.id, '/edit' ]"> | 16 | <a class="action-button action-button-delete" (click)="deleteVideo(video)"> |
17 | <span class="icon icon-delete"></span> | ||
18 | Delete | ||
19 | </a> | ||
20 | |||
21 | <a class="action-button" [routerLink]="[ '/videos', video.id, '/edit' ]"> | ||
17 | <span class="icon icon-edit"></span> | 22 | <span class="icon icon-edit"></span> |
18 | Edit | 23 | Edit |
19 | </a> | 24 | </a> |
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss index c31497350..7ac25afc3 100644 --- a/client/src/app/account/account-videos/account-videos.component.scss +++ b/client/src/app/account/account-videos/account-videos.component.scss | |||
@@ -25,7 +25,7 @@ | |||
25 | } | 25 | } |
26 | } | 26 | } |
27 | 27 | ||
28 | .edit-button { | 28 | .action-button { |
29 | @include peertube-button-link; | 29 | @include peertube-button-link; |
30 | 30 | ||
31 | font-size: 15px; | 31 | font-size: 15px; |
@@ -33,15 +33,27 @@ | |||
33 | color: #585858; | 33 | color: #585858; |
34 | background-color: #E5E5E5; | 34 | background-color: #E5E5E5; |
35 | 35 | ||
36 | .icon.icon-edit { | 36 | &.action-button-delete { |
37 | margin-right: 10px; | ||
38 | } | ||
39 | |||
40 | .icon.icon-edit, .icon.icon-delete { | ||
37 | display: inline-block; | 41 | display: inline-block; |
38 | background: url('../../../assets/images/account/edit.svg') no-repeat; | 42 | background-repeat: no-repeat; |
39 | background-size: contain; | 43 | background-size: contain; |
40 | width: 21px; | 44 | width: 21px; |
41 | height: 21px; | 45 | height: 21px; |
42 | vertical-align: middle; | 46 | vertical-align: middle; |
43 | position: relative; | 47 | position: relative; |
44 | top: -2px; | 48 | top: -2px; |
49 | |||
50 | &.icon-edit { | ||
51 | background-image: url('../../../assets/images/account/edit.svg'); | ||
52 | } | ||
53 | |||
54 | &.icon-delete { | ||
55 | background-image: url('../../../assets/images/account/delete.svg'); | ||
56 | } | ||
45 | } | 57 | } |
46 | } | 58 | } |
47 | } | 59 | } |
diff --git a/client/src/app/account/account-videos/account-videos.component.ts b/client/src/app/account/account-videos/account-videos.component.ts index 1bc6c0a35..9c2cc2404 100644 --- a/client/src/app/account/account-videos/account-videos.component.ts +++ b/client/src/app/account/account-videos/account-videos.component.ts | |||
@@ -1,7 +1,9 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | 1 | import { Component, OnInit } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
4 | import { ConfirmService } from '../../core/confirm' | ||
4 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' | 5 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' |
6 | import { Video } from '../../shared/video/video.model' | ||
5 | import { VideoService } from '../../shared/video/video.service' | 7 | import { VideoService } from '../../shared/video/video.service' |
6 | 8 | ||
7 | @Component({ | 9 | @Component({ |
@@ -16,6 +18,7 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit | |||
16 | constructor (protected router: Router, | 18 | constructor (protected router: Router, |
17 | protected route: ActivatedRoute, | 19 | protected route: ActivatedRoute, |
18 | protected notificationsService: NotificationsService, | 20 | protected notificationsService: NotificationsService, |
21 | protected confirmService: ConfirmService, | ||
19 | private videoService: VideoService) { | 22 | private videoService: VideoService) { |
20 | super() | 23 | super() |
21 | } | 24 | } |
@@ -27,4 +30,23 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit | |||
27 | getVideosObservable () { | 30 | getVideosObservable () { |
28 | return this.videoService.getMyVideos(this.pagination, this.sort) | 31 | return this.videoService.getMyVideos(this.pagination, this.sort) |
29 | } | 32 | } |
33 | |||
34 | deleteVideo (video: Video) { | ||
35 | this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete').subscribe( | ||
36 | res => { | ||
37 | if (res === false) return | ||
38 | |||
39 | this.videoService.removeVideo(video.id) | ||
40 | .subscribe( | ||
41 | status => { | ||
42 | this.notificationsService.success('Success', `Video ${video.name} deleted.`) | ||
43 | const index = this.videos.findIndex(v => v.id === video.id) | ||
44 | this.videos.splice(index, 1) | ||
45 | }, | ||
46 | |||
47 | error => this.notificationsService.error('Error', error.text) | ||
48 | ) | ||
49 | } | ||
50 | ) | ||
51 | } | ||
30 | } | 52 | } |