aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-library/my-subscriptions
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-10-19 09:44:43 +0200
committerChocobozzz <me@florianbigard.com>2021-10-20 09:25:44 +0200
commit4beda9e12adc7b1f3b178cecd6863ebf3cf431f1 (patch)
tree6244a10b286d66c6dcd7799aee630670d0493781 /client/src/app/+my-library/my-subscriptions
parent9593a78ae1368a9ad8bb11044fce6fde2892701a (diff)
downloadPeerTube-4beda9e12adc7b1f3b178cecd6863ebf3cf431f1.tar.gz
PeerTube-4beda9e12adc7b1f3b178cecd6863ebf3cf431f1.tar.zst
PeerTube-4beda9e12adc7b1f3b178cecd6863ebf3cf431f1.zip
Add ability to view my followers
Diffstat (limited to 'client/src/app/+my-library/my-subscriptions')
-rw-r--r--client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html36
-rw-r--r--client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss84
-rw-r--r--client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts57
3 files changed, 0 insertions, 177 deletions
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
deleted file mode 100644
index ca5ad794a..000000000
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ /dev/null
@@ -1,36 +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">
10 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
11</div>
12
13<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscription yet.</div>
14
15<div class="video-channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
16 <div *ngFor="let videoChannel of videoChannels" class="video-channel">
17 <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]"></my-actor-avatar>
18
19 <div class="video-channel-info">
20 <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
21 <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
22 <div class="video-channel-name">{{ videoChannel.nameWithHost }}</div>
23 </a>
24
25 <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
26
27 <a [routerLink]="[ '/a', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
28 <span i18n>Created by {{ videoChannel.ownerBy }}</span>
29
30 <my-actor-avatar [account]="videoChannel.ownerAccount" size="18"></my-actor-avatar>
31 </a>
32 </div>
33
34 <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
35 </div>
36</div>
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
deleted file mode 100644
index edca06a66..000000000
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ /dev/null
@@ -1,84 +0,0 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4input[type=text] {
5 @include peertube-input-text(300px);
6}
7
8.video-channel {
9 @include row-blocks;
10
11 > my-actor-avatar {
12 @include actor-avatar-size(80px);
13
14 @include margin-right(10px);
15 }
16}
17
18.video-channel-info {
19 flex-grow: 1;
20
21 a.video-channel-names {
22 @include disable-default-a-behaviour;
23
24 width: fit-content;
25 display: flex;
26 align-items: baseline;
27 color: pvar(--mainForegroundColor);
28
29 .video-channel-display-name {
30 font-weight: $font-semibold;
31 font-size: 18px;
32 }
33
34 .video-channel-name {
35 @include margin-left(5px);
36
37 font-size: 14px;
38 color: $grey-actor-name;
39 }
40 }
41}
42
43.actor-owner {
44 @include disable-default-a-behaviour;
45
46 font-size: 13px;
47 color: pvar(--mainForegroundColor);
48
49 span:hover {
50 opacity: 0.8;
51 }
52
53 my-actor-avatar {
54 @include margin-left(7px);
55 display: inline-block;
56 vertical-align: top;
57 }
58}
59
60.video-subscriptions-header {
61 margin-bottom: 30px;
62 display: flex;
63}
64
65@media screen and (max-width: $small-view) {
66 .video-subscriptions-header input[type=text] {
67 width: 100% !important;
68 }
69
70 .video-channel-info {
71 padding-bottom: 10px;
72 text-align: center;
73
74 .video-channel-names {
75 flex-direction: column;
76 align-items: center !important;
77 margin: auto;
78 }
79 }
80
81 img {
82 @include margin-right(0);
83 }
84}
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
deleted file mode 100644
index f676aa014..000000000
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
+++ /dev/null
@@ -1,57 +0,0 @@
1import { Subject } from 'rxjs'
2import { Component } from '@angular/core'
3import { ComponentPagination, Notifier } from '@app/core'
4import { VideoChannel } from '@app/shared/shared-main'
5import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
6
7@Component({
8 templateUrl: './my-subscriptions.component.html',
9 styleUrls: [ './my-subscriptions.component.scss' ]
10})
11export class MySubscriptionsComponent {
12 videoChannels: VideoChannel[] = []
13
14 pagination: ComponentPagination = {
15 currentPage: 1,
16 itemsPerPage: 10,
17 totalItems: null
18 }
19
20 onDataSubject = new Subject<any[]>()
21
22 search: string
23
24 constructor (
25 private userSubscriptionService: UserSubscriptionService,
26 private notifier: Notifier
27 ) {}
28
29 onNearOfBottom () {
30 // Last page
31 if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
32
33 this.pagination.currentPage += 1
34 this.loadSubscriptions()
35 }
36
37 onSearch (search: string) {
38 this.search = search
39 this.loadSubscriptions(false)
40 }
41
42 private loadSubscriptions (more = true) {
43 this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.search })
44 .subscribe({
45 next: res => {
46 this.videoChannels = more
47 ? this.videoChannels.concat(res.data)
48 : res.data
49 this.pagination.totalItems = res.total
50
51 this.onDataSubject.next(res.data)
52 },
53
54 error: err => this.notifier.error(err.message)
55 })
56 }
57}