aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account/my-account-videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-11-12 15:28:54 +0100
committerChocobozzz <chocobozzz@cpy.re>2020-11-13 12:02:21 +0100
commit17119e4a546522468878cf115558b17949ab50d0 (patch)
tree3f130cfd7fdccf5aeeac9beee941750590239047 /client/src/app/+my-account/my-account-videos
parentb4bc269e5517849b5b89052f0c1a2c01b6f65089 (diff)
downloadPeerTube-17119e4a546522468878cf115558b17949ab50d0.tar.gz
PeerTube-17119e4a546522468878cf115558b17949ab50d0.tar.zst
PeerTube-17119e4a546522468878cf115558b17949ab50d0.zip
Reorganize left menu and account menu
Add my-settings and my-library in left menu Move administration below my-library Split account menu: my-setting and my library
Diffstat (limited to 'client/src/app/+my-account/my-account-videos')
-rw-r--r--client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html33
-rw-r--r--client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss10
-rw-r--r--client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts69
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.html46
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.scss127
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.ts179
6 files changed, 0 insertions, 464 deletions
diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html
deleted file mode 100644
index c7c5a0b69..000000000
--- a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
1<ng-template #modal let-close="close" let-dismiss="dismiss">
2 <div class="modal-header">
3 <h4 i18n class="modal-title">Change ownership</h4>
4
5 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
6 </div>
7
8 <div class="modal-body" [formGroup]="form">
9 <div class="form-group">
10 <label i18n for="next-ownership-username">Select the next owner</label>
11 <p-autoComplete formControlName="username" [suggestions]="usernamePropositions"
12 (completeMethod)="search($event)" id="next-ownership-username"></p-autoComplete>
13 <div *ngIf="formErrors.username" class="form-error">
14 {{ formErrors.username }}
15 </div>
16 </div>
17 </div>
18
19 <div class="modal-footer">
20 <div class="form-group inputs">
21 <input
22 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
23 (click)="dismiss()" (key.enter)="dismiss()"
24 >
25
26 <input
27 type="submit" i18n-value value="Submit" class="action-button-submit"
28 [disabled]="!form.valid"
29 (click)="close()"
30 />
31 </div>
32 </div>
33</ng-template>
diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss
deleted file mode 100644
index a79fec179..000000000
--- a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4p-autocomplete {
5 display: block;
6}
7
8.form-group {
9 margin: 20px 0;
10} \ No newline at end of file
diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts
deleted file mode 100644
index 84237dee1..000000000
--- a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts
+++ /dev/null
@@ -1,69 +0,0 @@
1import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
2import { Notifier, UserService } from '@app/core'
3import { OWNERSHIP_CHANGE_USERNAME_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators'
4import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
5import { Video, VideoOwnershipService } from '@app/shared/shared-main'
6import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
7
8@Component({
9 selector: 'my-video-change-ownership',
10 templateUrl: './video-change-ownership.component.html',
11 styleUrls: [ './video-change-ownership.component.scss' ]
12})
13export class VideoChangeOwnershipComponent extends FormReactive implements OnInit {
14 @ViewChild('modal', { static: true }) modal: ElementRef
15
16 usernamePropositions: string[]
17
18 error: string = null
19
20 private video: Video | undefined = undefined
21
22 constructor (
23 protected formValidatorService: FormValidatorService,
24 private videoOwnershipService: VideoOwnershipService,
25 private notifier: Notifier,
26 private userService: UserService,
27 private modalService: NgbModal
28 ) {
29 super()
30 }
31
32 ngOnInit () {
33 this.buildForm({
34 username: OWNERSHIP_CHANGE_USERNAME_VALIDATOR
35 })
36 this.usernamePropositions = []
37 }
38
39 show (video: Video) {
40 this.video = video
41 this.modalService
42 .open(this.modal, { centered: true })
43 .result
44 .then(() => this.changeOwnership())
45 .catch((_) => _) // Called when closing (cancel) the modal without validating, do nothing
46 }
47
48 search (event: { query: string }) {
49 const query = event.query
50 this.userService.autocomplete(query)
51 .subscribe(
52 usernames => this.usernamePropositions = usernames,
53
54 err => this.notifier.error(err.message)
55 )
56 }
57
58 changeOwnership () {
59 const username = this.form.value['username']
60
61 this.videoOwnershipService
62 .changeOwnership(this.video.id, username)
63 .subscribe(
64 () => this.notifier.success($localize`Ownership change request sent.`),
65
66 err => this.notifier.error(err.message)
67 )
68 }
69}
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
deleted file mode 100644
index aa5b284e7..000000000
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
1<h1>
2 <span>
3 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
4 <ng-container i18n>My videos</ng-container>
5 <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
6 </span>
7</h1>
8
9<div class="videos-header d-flex justify-content-between">
10 <div class="has-feedback has-clear">
11 <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch"
12 (ngModelChange)="onVideosSearchChanged()" />
13 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
14 <span class="sr-only" i18n>Clear filters</span>
15 </div>
16</div>
17
18<my-videos-selection
19 [pagination]="pagination"
20 [(selection)]="selection"
21 [(videosModel)]="videos"
22 [miniatureDisplayOptions]="miniatureDisplayOptions"
23 [titlePage]="titlePage"
24 [getVideosObservableFunction]="getVideosObservableFunction"
25 [ownerDisplayType]="ownerDisplayType"
26 #videosSelection
27>
28 <ng-template ptTemplate="globalButtons">
29 <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
30 <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
31 <ng-container i18n>Delete</ng-container>
32 </span>
33 </ng-template>
34
35 <ng-template ptTemplate="rowButtons" let-video>
36 <div class="action-button">
37 <my-edit-button label [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
38
39 <my-action-dropdown [actions]="videoActions" [entry]="{ video: video }"></my-action-dropdown>
40 </div>
41 </ng-template>
42</my-videos-selection>
43
44
45<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
46<my-live-stream-information #liveStreamInformationModal></my-live-stream-information>
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
deleted file mode 100644
index 246f46320..000000000
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ /dev/null
@@ -1,127 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4input[type=text] {
5 @include peertube-input-text(300px);
6}
7
8.action-button-delete-selection {
9 display: inline-block;
10
11 @include peertube-button;
12 @include orange-button;
13 @include button-with-icon(21px);
14
15 my-global-icon {
16 @include apply-svg-color(#fff);
17 }
18}
19
20::ng-deep {
21 .video {
22 flex-wrap: wrap;
23 }
24
25 .action-button span {
26 white-space: nowrap;
27 }
28
29 .video-miniature {
30 &.display-as-row {
31 // width: min-content !important;
32 width: 100% !important;
33
34 .video-bottom .video-miniature-information {
35 width: max-content !important;
36 min-width: unset !important;
37 }
38 }
39
40 .video-bottom {
41 max-width: 350px;
42 }
43 }
44}
45
46.action-button {
47 display: flex;
48 margin-left: 55px;
49 margin-top: 10px;
50 align-self: flex-end;
51}
52
53my-delete-button,
54my-edit-button {
55 margin-right: 10px;
56}
57
58@media screen and (max-width: $small-view) {
59 .action-button {
60 flex-direction: column;
61 align-self: center;
62 margin-left: 0px;
63 }
64
65 ::ng-deep {
66 .video-miniature {
67 align-items: center;
68
69 .video-bottom,
70 .video-bottom .video-miniature-information {
71 /* same width than a.video-thumbnail */
72 max-width: $video-thumbnail-width !important;
73 }
74 }
75 }
76
77 my-delete-button,
78 my-edit-button {
79 margin-right: 0px;
80
81 ::ng-deep {
82 span, a {
83 margin-right: 0px;
84 }
85 }
86 }
87
88 my-delete-button,
89 my-edit-button,
90 my-button {
91 margin-top: 15px;
92 width: 100%;
93 text-align: center;
94
95 ::ng-deep {
96 .action-button {
97 /* same width than a.video-thumbnail */
98 width: $video-thumbnail-width;
99 }
100 }
101 }
102}
103
104// Adapt my-video-miniature on small screens with menu
105@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) {
106 :host-context(.main-col:not(.expanded)) {
107 ::ng-deep {
108 .video-miniature {
109 flex-direction: column;
110
111 .video-miniature-name {
112 max-width: $video-thumbnail-width;
113 }
114 }
115 }
116 }
117}
118
119@media screen and (max-width: $mobile-view) {
120 .videos-header {
121 flex-direction: column;
122
123 input[type=text] {
124 width: 100% !important;
125 }
126 }
127}
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
deleted file mode 100644
index 84f022ad2..000000000
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ /dev/null
@@ -1,179 +0,0 @@
1import { concat, Observable, Subject } from 'rxjs'
2import { debounceTime, tap, toArray } from 'rxjs/operators'
3import { Component, OnInit, ViewChild } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router'
5import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core'
6import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
7import { immutableAssign } from '@app/helpers'
8import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
9import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
10import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
11import { VideoSortField } from '@shared/models'
12import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
13
14@Component({
15 selector: 'my-account-videos',
16 templateUrl: './my-account-videos.component.html',
17 styleUrls: [ './my-account-videos.component.scss' ]
18})
19export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
20 @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
21 @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
22 @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent
23
24 titlePage: string
25 selection: SelectionType = {}
26 pagination: ComponentPagination = {
27 currentPage: 1,
28 itemsPerPage: 10,
29 totalItems: null
30 }
31 miniatureDisplayOptions: MiniatureDisplayOptions = {
32 date: true,
33 views: true,
34 by: true,
35 privacyLabel: false,
36 privacyText: true,
37 state: true,
38 blacklistInfo: true
39 }
40 ownerDisplayType: OwnerDisplayType = 'videoChannel'
41
42 videoActions: DropdownAction<{ video: Video }>[] = []
43
44 videos: Video[] = []
45 videosSearch: string
46 videosSearchChanged = new Subject<string>()
47 getVideosObservableFunction = this.getVideosObservable.bind(this)
48
49 constructor (
50 protected router: Router,
51 protected serverService: ServerService,
52 protected route: ActivatedRoute,
53 protected authService: AuthService,
54 protected notifier: Notifier,
55 protected screenService: ScreenService,
56 private confirmService: ConfirmService,
57 private videoService: VideoService
58 ) {
59 this.titlePage = $localize`My videos`
60 }
61
62 ngOnInit () {
63 this.buildActions()
64
65 this.videosSearchChanged
66 .pipe(debounceTime(500))
67 .subscribe(() => {
68 this.videosSelection.reloadVideos()
69 })
70 }
71
72 resetSearch () {
73 this.videosSearch = ''
74 this.onVideosSearchChanged()
75 }
76
77 onVideosSearchChanged () {
78 this.videosSearchChanged.next()
79 }
80
81 disableForReuse () {
82 this.videosSelection.disableForReuse()
83 }
84
85 enabledForReuse () {
86 this.videosSelection.enabledForReuse()
87 }
88
89 getVideosObservable (page: number, sort: VideoSortField) {
90 const newPagination = immutableAssign(this.pagination, { currentPage: page })
91
92 return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
93 .pipe(
94 tap(res => this.pagination.totalItems = res.total)
95 )
96 }
97
98 async deleteSelectedVideos () {
99 const toDeleteVideosIds = Object.keys(this.selection)
100 .filter(k => this.selection[ k ] === true)
101 .map(k => parseInt(k, 10))
102
103 const res = await this.confirmService.confirm(
104 $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`,
105 $localize`Delete`
106 )
107 if (res === false) return
108
109 const observables: Observable<any>[] = []
110 for (const videoId of toDeleteVideosIds) {
111 const o = this.videoService.removeVideo(videoId)
112 .pipe(tap(() => this.removeVideoFromArray(videoId)))
113
114 observables.push(o)
115 }
116
117 concat(...observables)
118 .pipe(toArray())
119 .subscribe(
120 () => {
121 this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`)
122 this.selection = {}
123 },
124
125 err => this.notifier.error(err.message)
126 )
127 }
128
129 async deleteVideo (video: Video) {
130 const res = await this.confirmService.confirm(
131 $localize`Do you really want to delete ${video.name}?`,
132 $localize`Delete`
133 )
134 if (res === false) return
135
136 this.videoService.removeVideo(video.id)
137 .subscribe(
138 () => {
139 this.notifier.success($localize`Video ${video.name} deleted.`)
140 this.removeVideoFromArray(video.id)
141 },
142
143 error => this.notifier.error(error.message)
144 )
145 }
146
147 changeOwnership (video: Video) {
148 this.videoChangeOwnershipModal.show(video)
149 }
150
151 displayLiveInformation (video: Video) {
152 this.liveStreamInformationModal.show(video)
153 }
154
155 private removeVideoFromArray (id: number) {
156 this.videos = this.videos.filter(v => v.id !== id)
157 }
158
159 private buildActions () {
160 this.videoActions = [
161 {
162 label: $localize`Display live information`,
163 handler: ({ video }) => this.displayLiveInformation(video),
164 isDisplayed: ({ video }) => video.isLive,
165 iconName: 'live'
166 },
167 {
168 label: $localize`Change ownership`,
169 handler: ({ video }) => this.changeOwnership(video),
170 iconName: 'ownership-change'
171 },
172 {
173 label: $localize`Delete`,
174 handler: ({ video }) => this.deleteVideo(video),
175 iconName: 'delete'
176 }
177 ]
178 }
179}
generated by cgit v1.2.3 (git 2.25.1) at 2024-08-21 17:57:36 +0000