From 4beda9e12adc7b1f3b178cecd6863ebf3cf431f1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 19 Oct 2021 09:44:43 +0200 Subject: Add ability to view my followers --- .../my-video-channels.component.html | 7 +- .../my-video-channels.component.scss | 4 ++ .../my-follows/my-followers.component.html | 31 ++++++++ .../my-follows/my-followers.component.scss | 26 +++++++ .../my-follows/my-followers.component.ts | 76 ++++++++++++++++++++ .../my-follows/my-subscriptions.component.html | 36 ++++++++++ .../my-follows/my-subscriptions.component.scss | 16 +++++ .../my-follows/my-subscriptions.component.ts | 57 +++++++++++++++ .../app/+my-library/my-library-routing.module.ts | 12 +++- client/src/app/+my-library/my-library.component.ts | 15 +++- client/src/app/+my-library/my-library.module.ts | 6 +- .../my-subscriptions.component.html | 36 ---------- .../my-subscriptions.component.scss | 84 ---------------------- .../my-subscriptions/my-subscriptions.component.ts | 57 --------------- 14 files changed, 280 insertions(+), 183 deletions(-) create mode 100644 client/src/app/+my-library/my-follows/my-followers.component.html create mode 100644 client/src/app/+my-library/my-follows/my-followers.component.scss create mode 100644 client/src/app/+my-library/my-follows/my-followers.component.ts create mode 100644 client/src/app/+my-library/my-follows/my-subscriptions.component.html create mode 100644 client/src/app/+my-library/my-follows/my-subscriptions.component.scss create mode 100644 client/src/app/+my-library/my-follows/my-subscriptions.component.ts delete mode 100644 client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html delete mode 100644 client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss delete mode 100644 client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts (limited to 'client/src/app/+my-library') diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html index 4c5b46d5b..bbe583971 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html @@ -27,7 +27,12 @@
{{ videoChannel.nameWithHost }}
-
{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
+ + {videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}} +
{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss index 9ef5513b6..998e46cb2 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss @@ -54,6 +54,10 @@ my-edit-button { color: $grey-actor-name; } +.video-channel-followers { + color: pvar(--mainForegroundColor); +} + .video-channel-buttons { margin-top: 10px; min-width: 190px; diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html new file mode 100644 index 000000000..d2b2dccb6 --- /dev/null +++ b/client/src/app/+my-library/my-follows/my-followers.component.html @@ -0,0 +1,31 @@ +

+ + + My followers + {{ pagination.totalItems }} + +

+ +
+ +
+ +
No follower found.
+ +
+
+ + +
+ +
{{ follow.follower.name + '@' + follow.follower.host }}
+ +
+ +
+ Is following all your channels + Is following your channel {{ follow.following.name }} +
+
+
+
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.scss b/client/src/app/+my-library/my-follows/my-followers.component.scss new file mode 100644 index 000000000..15b51c419 --- /dev/null +++ b/client/src/app/+my-library/my-follows/my-followers.component.scss @@ -0,0 +1,26 @@ +@use '_variables' as *; +@use '_mixins' as *; +@use '_actor' as *; + +.followers-header { + margin-bottom: 30px; + display: flex; +} + +input[type=text] { + @include peertube-input-text(300px); +} + +.actor { + @include actor-row($avatar-size: 40px, $min-height: auto, $separator: true); + + .actor-display-name { + font-size: 16px; + + + .glyphicon { + @include margin-left(5px); + + font-size: 12px; + } + } +} diff --git a/client/src/app/+my-library/my-follows/my-followers.component.ts b/client/src/app/+my-library/my-follows/my-followers.component.ts new file mode 100644 index 000000000..a7bbe6d99 --- /dev/null +++ b/client/src/app/+my-library/my-follows/my-followers.component.ts @@ -0,0 +1,76 @@ +import { Subject } from 'rxjs' +import { Component, OnInit } from '@angular/core' +import { ActivatedRoute } from '@angular/router' +import { AuthService, ComponentPagination, Notifier } from '@app/core' +import { UserSubscriptionService } from '@app/shared/shared-user-subscription' +import { ActorFollow } from '@shared/models' + +@Component({ + templateUrl: './my-followers.component.html', + styleUrls: [ './my-followers.component.scss' ] +}) +export class MyFollowersComponent implements OnInit { + follows: ActorFollow[] = [] + + pagination: ComponentPagination = { + currentPage: 1, + itemsPerPage: 10, + totalItems: null + } + + onDataSubject = new Subject() + search: string + + constructor ( + private route: ActivatedRoute, + private auth: AuthService, + private userSubscriptionService: UserSubscriptionService, + private notifier: Notifier + ) {} + + ngOnInit () { + if (this.route.snapshot.queryParams['search']) { + this.search = this.route.snapshot.queryParams['search'] + } + } + + onNearOfBottom () { + // Last page + if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return + + this.pagination.currentPage += 1 + this.loadFollowers() + } + + onSearch (search: string) { + this.search = search + this.loadFollowers(false) + } + + isFollowingAccount (follow: ActorFollow) { + return follow.following.name === this.getUsername() + } + + private loadFollowers (more = true) { + this.userSubscriptionService.listFollowers({ + pagination: this.pagination, + nameWithHost: this.getUsername(), + search: this.search + }).subscribe({ + next: res => { + this.follows = more + ? this.follows.concat(res.data) + : res.data + this.pagination.totalItems = res.total + + this.onDataSubject.next(res.data) + }, + + error: err => this.notifier.error(err.message) + }) + } + + private getUsername () { + return this.auth.getUser().username + } +} diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.html b/client/src/app/+my-library/my-follows/my-subscriptions.component.html new file mode 100644 index 000000000..775f0e783 --- /dev/null +++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.html @@ -0,0 +1,36 @@ +

+ + + My subscriptions + {{ pagination.totalItems }} + +

+ +
+ +
+ +
You don't have any subscription yet.
+ + diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.scss b/client/src/app/+my-library/my-follows/my-subscriptions.component.scss new file mode 100644 index 000000000..310e11cb0 --- /dev/null +++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.scss @@ -0,0 +1,16 @@ +@use '_variables' as *; +@use '_mixins' as *; +@use '_actor' as *; + +.video-subscriptions-header { + margin-bottom: 30px; + display: flex; +} + +input[type=text] { + @include peertube-input-text(300px); +} + +.actor { + @include actor-row; +} diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.ts b/client/src/app/+my-library/my-follows/my-subscriptions.component.ts new file mode 100644 index 000000000..f676aa014 --- /dev/null +++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.ts @@ -0,0 +1,57 @@ +import { Subject } from 'rxjs' +import { Component } from '@angular/core' +import { ComponentPagination, Notifier } from '@app/core' +import { VideoChannel } from '@app/shared/shared-main' +import { UserSubscriptionService } from '@app/shared/shared-user-subscription' + +@Component({ + templateUrl: './my-subscriptions.component.html', + styleUrls: [ './my-subscriptions.component.scss' ] +}) +export class MySubscriptionsComponent { + videoChannels: VideoChannel[] = [] + + pagination: ComponentPagination = { + currentPage: 1, + itemsPerPage: 10, + totalItems: null + } + + onDataSubject = new Subject() + + search: string + + constructor ( + private userSubscriptionService: UserSubscriptionService, + private notifier: Notifier + ) {} + + onNearOfBottom () { + // Last page + if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return + + this.pagination.currentPage += 1 + this.loadSubscriptions() + } + + onSearch (search: string) { + this.search = search + this.loadSubscriptions(false) + } + + private loadSubscriptions (more = true) { + this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.search }) + .subscribe({ + next: res => { + this.videoChannels = more + ? this.videoChannels.concat(res.data) + : res.data + this.pagination.totalItems = res.total + + this.onDataSubject.next(res.data) + }, + + error: err => this.notifier.error(err.message) + }) + } +} diff --git a/client/src/app/+my-library/my-library-routing.module.ts b/client/src/app/+my-library/my-library-routing.module.ts index 76894bed8..73858fb82 100644 --- a/client/src/app/+my-library/my-library-routing.module.ts +++ b/client/src/app/+my-library/my-library-routing.module.ts @@ -1,10 +1,11 @@ import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' import { LoginGuard } from '../core' +import { MyFollowersComponent } from './my-follows/my-followers.component' +import { MySubscriptionsComponent } from './my-follows/my-subscriptions.component' import { MyHistoryComponent } from './my-history/my-history.component' import { MyLibraryComponent } from './my-library.component' import { MyOwnershipComponent } from './my-ownership/my-ownership.component' -import { MySubscriptionsComponent } from './my-subscriptions/my-subscriptions.component' import { MyVideoImportsComponent } from './my-video-imports/my-video-imports.component' import { MyVideoPlaylistCreateComponent } from './my-video-playlists/my-video-playlist-create.component' import { MyVideoPlaylistElementsComponent } from './my-video-playlists/my-video-playlist-elements.component' @@ -99,6 +100,15 @@ const myLibraryRoutes: Routes = [ } } }, + { + path: 'followers', + component: MyFollowersComponent, + data: { + meta: { + title: $localize`My followers` + } + } + }, { path: 'ownership', component: MyOwnershipComponent, diff --git a/client/src/app/+my-library/my-library.component.ts b/client/src/app/+my-library/my-library.component.ts index 16a7f63e3..ff901952f 100644 --- a/client/src/app/+my-library/my-library.component.ts +++ b/client/src/app/+my-library/my-library.component.ts @@ -61,8 +61,19 @@ export class MyLibraryComponent implements OnInit { }, { - label: $localize`Subscriptions`, - routerLink: '/my-library/subscriptions' + label: $localize`Follows`, + children: [ + { + label: $localize`Subscriptions`, + iconName: 'subscriptions', + routerLink: '/my-library/subscriptions' + }, + { + label: $localize`Followers`, + iconName: 'follower', + routerLink: '/my-library/followers' + } + ] }, { diff --git a/client/src/app/+my-library/my-library.module.ts b/client/src/app/+my-library/my-library.module.ts index 264ad03f7..360c53589 100644 --- a/client/src/app/+my-library/my-library.module.ts +++ b/client/src/app/+my-library/my-library.module.ts @@ -13,12 +13,13 @@ import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscripti import { SharedVideoLiveModule } from '@app/shared/shared-video-live' import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature' import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist/shared-video-playlist.module' +import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module' +import { MySubscriptionsComponent } from './my-follows/my-subscriptions.component' import { MyHistoryComponent } from './my-history/my-history.component' import { MyLibraryRoutingModule } from './my-library-routing.module' import { MyLibraryComponent } from './my-library.component' import { MyAcceptOwnershipComponent } from './my-ownership/my-accept-ownership/my-accept-ownership.component' import { MyOwnershipComponent } from './my-ownership/my-ownership.component' -import { MySubscriptionsComponent } from './my-subscriptions/my-subscriptions.component' import { MyVideoImportsComponent } from './my-video-imports/my-video-imports.component' import { MyVideoPlaylistCreateComponent } from './my-video-playlists/my-video-playlist-create.component' import { MyVideoPlaylistElementsComponent } from './my-video-playlists/my-video-playlist-elements.component' @@ -26,7 +27,7 @@ import { MyVideoPlaylistUpdateComponent } from './my-video-playlists/my-video-pl import { MyVideoPlaylistsComponent } from './my-video-playlists/my-video-playlists.component' import { VideoChangeOwnershipComponent } from './my-videos/modals/video-change-ownership.component' import { MyVideosComponent } from './my-videos/my-videos.component' -import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module' +import { MyFollowersComponent } from './my-follows/my-followers.component' @NgModule({ imports: [ @@ -61,6 +62,7 @@ import { SharedActorImageModule } from '../shared/shared-actor-image/shared-acto MyAcceptOwnershipComponent, MyVideoImportsComponent, MySubscriptionsComponent, + MyFollowersComponent, MyHistoryComponent, MyVideoPlaylistCreateComponent, 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 @@ -

- - - My subscriptions - {{ pagination.totalItems }} - -

- -
- -
- -
You don't have any subscription yet.
- - 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 @@ -@use '_variables' as *; -@use '_mixins' as *; - -input[type=text] { - @include peertube-input-text(300px); -} - -.video-channel { - @include row-blocks; - - > my-actor-avatar { - @include actor-avatar-size(80px); - - @include margin-right(10px); - } -} - -.video-channel-info { - flex-grow: 1; - - a.video-channel-names { - @include disable-default-a-behaviour; - - width: fit-content; - display: flex; - align-items: baseline; - color: pvar(--mainForegroundColor); - - .video-channel-display-name { - font-weight: $font-semibold; - font-size: 18px; - } - - .video-channel-name { - @include margin-left(5px); - - font-size: 14px; - color: $grey-actor-name; - } - } -} - -.actor-owner { - @include disable-default-a-behaviour; - - font-size: 13px; - color: pvar(--mainForegroundColor); - - span:hover { - opacity: 0.8; - } - - my-actor-avatar { - @include margin-left(7px); - display: inline-block; - vertical-align: top; - } -} - -.video-subscriptions-header { - margin-bottom: 30px; - display: flex; -} - -@media screen and (max-width: $small-view) { - .video-subscriptions-header input[type=text] { - width: 100% !important; - } - - .video-channel-info { - padding-bottom: 10px; - text-align: center; - - .video-channel-names { - flex-direction: column; - align-items: center !important; - margin: auto; - } - } - - img { - @include margin-right(0); - } -} 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 @@ -import { Subject } from 'rxjs' -import { Component } from '@angular/core' -import { ComponentPagination, Notifier } from '@app/core' -import { VideoChannel } from '@app/shared/shared-main' -import { UserSubscriptionService } from '@app/shared/shared-user-subscription' - -@Component({ - templateUrl: './my-subscriptions.component.html', - styleUrls: [ './my-subscriptions.component.scss' ] -}) -export class MySubscriptionsComponent { - videoChannels: VideoChannel[] = [] - - pagination: ComponentPagination = { - currentPage: 1, - itemsPerPage: 10, - totalItems: null - } - - onDataSubject = new Subject() - - search: string - - constructor ( - private userSubscriptionService: UserSubscriptionService, - private notifier: Notifier - ) {} - - onNearOfBottom () { - // Last page - if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return - - this.pagination.currentPage += 1 - this.loadSubscriptions() - } - - onSearch (search: string) { - this.search = search - this.loadSubscriptions(false) - } - - private loadSubscriptions (more = true) { - this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.search }) - .subscribe({ - next: res => { - this.videoChannels = more - ? this.videoChannels.concat(res.data) - : res.data - this.pagination.totalItems = res.total - - this.onDataSubject.next(res.data) - }, - - error: err => this.notifier.error(err.message) - }) - } -} -- cgit v1.2.3