aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account/my-account-subscriptions
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-subscriptions
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-subscriptions')
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html42
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss81
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts75
3 files changed, 0 insertions, 198 deletions
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
deleted file mode 100644
index 6ab3826ba..000000000
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
+++ /dev/null
@@ -1,42 +0,0 @@
1<h1>
2 <span>
3 <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
4 <ng-container i18n>My subscriptions</ng-container>
5 <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
6 </span>
7</h1>
8
9<div class="video-subscriptions-header d-flex justify-content-between">
10 <div class="has-feedback has-clear">
11 <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
12 (ngModelChange)="onSubscriptionsSearchChanged()" />
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<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div>
19
20<div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
21 <div *ngFor="let videoChannel of videoChannels" class="video-channel">
22 <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]">
23 <img [src]="videoChannel.avatarUrl" alt="Avatar" />
24 </a>
25
26 <div class="video-channel-info">
27 <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
28 <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
29 <div class="video-channel-name">{{ videoChannel.nameWithHost }}</div>
30 </a>
31
32 <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
33
34 <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
35 <span i18n>Created by {{ videoChannel.ownerBy }}</span>
36 <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
37 </a>
38 </div>
39
40 <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
41 </div>
42</div>
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
deleted file mode 100644
index 5ead45dd8..000000000
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
+++ /dev/null
@@ -1,81 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4input[type=text] {
5 @include peertube-input-text(300px);
6}
7
8.video-channel {
9 @include row-blocks;
10
11 img {
12 @include avatar(80px);
13
14 margin-right: 10px;
15 }
16
17 .video-channel-info {
18 flex-grow: 1;
19
20 a.video-channel-names {
21 @include disable-default-a-behaviour;
22
23 width: fit-content;
24 display: flex;
25 align-items: baseline;
26 color: pvar(--mainForegroundColor);
27
28 .video-channel-display-name {
29 font-weight: $font-semibold;
30 font-size: 18px;
31 }
32
33 .video-channel-name {
34 font-size: 14px;
35 color: $grey-actor-name;
36 margin-left: 5px;
37 }
38 }
39 }
40
41 .actor-owner {
42 @include actor-owner;
43
44 margin-top: 0;
45 }
46}
47
48.video-subscriptions-header {
49 margin-bottom: 30px;
50}
51
52@media screen and (max-width: $small-view) {
53 .video-channel {
54 .video-channel-info {
55 padding-bottom: 10px;
56 text-align: center;
57
58 .video-channel-names {
59 flex-direction: column;
60 align-items: center !important;
61 margin: auto;
62 }
63 }
64
65 img {
66 margin-right: 0;
67 }
68 }
69}
70
71@media screen and (max-width: $mobile-view) {
72 .video-subscriptions-header {
73 flex-direction: column;
74
75 input[type=text] {
76 width: 100% !important;
77 }
78 }
79}
80
81
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
deleted file mode 100644
index 994fe5142..000000000
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
+++ /dev/null
@@ -1,75 +0,0 @@
1import { Subject } from 'rxjs'
2import { Component, OnInit } from '@angular/core'
3import { ComponentPagination, Notifier } from '@app/core'
4import { VideoChannel } from '@app/shared/shared-main'
5import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
6import { debounceTime } from 'rxjs/operators'
7
8@Component({
9 selector: 'my-account-subscriptions',
10 templateUrl: './my-account-subscriptions.component.html',
11 styleUrls: [ './my-account-subscriptions.component.scss' ]
12})
13export class MyAccountSubscriptionsComponent implements OnInit {
14 videoChannels: VideoChannel[] = []
15
16 pagination: ComponentPagination = {
17 currentPage: 1,
18 itemsPerPage: 10,
19 totalItems: null
20 }
21
22 onDataSubject = new Subject<any[]>()
23
24 subscriptionsSearch: string
25 subscriptionsSearchChanged = new Subject<string>()
26
27 constructor (
28 private userSubscriptionService: UserSubscriptionService,
29 private notifier: Notifier
30 ) {}
31
32 ngOnInit () {
33 this.loadSubscriptions()
34
35 this.subscriptionsSearchChanged
36 .pipe(debounceTime(500))
37 .subscribe(() => {
38 this.pagination.currentPage = 1
39 this.loadSubscriptions(false)
40 })
41 }
42
43 resetSearch () {
44 this.subscriptionsSearch = ''
45 this.onSubscriptionsSearchChanged()
46 }
47
48 onSubscriptionsSearchChanged () {
49 this.subscriptionsSearchChanged.next()
50 }
51
52 onNearOfBottom () {
53 // Last page
54 if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
55
56 this.pagination.currentPage += 1
57 this.loadSubscriptions()
58 }
59
60 private loadSubscriptions (more = true) {
61 this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.subscriptionsSearch })
62 .subscribe(
63 res => {
64 this.videoChannels = more
65 ? this.videoChannels.concat(res.data)
66 : res.data
67 this.pagination.totalItems = res.total
68
69 this.onDataSubject.next(res.data)
70 },
71
72 error => this.notifier.error(error.message)
73 )
74 }
75}