From 39ba2e8e3a71961cd0087c57d25905f6a97a6b69 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 26 Sep 2018 09:39:41 +0200
Subject: Add RSS feed to subscribe button
---
.../remote-subscribe.component.html | 11 ++++---
.../remote-subscribe.component.scss | 1 +
.../subscribe-button.component.html | 17 ++++++++---
.../subscribe-button.component.scss | 35 ++++++++++++++++++----
.../subscribe-button.component.ts | 11 +++++--
client/src/app/shared/video/video.service.ts | 5 +++-
6 files changed, 62 insertions(+), 18 deletions(-)
diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.html b/client/src/app/shared/user-subscription/remote-subscribe.component.html
index 3762142f2..ec3636b3e 100644
--- a/client/src/app/shared/user-subscription/remote-subscribe.component.html
+++ b/client/src/app/shared/user-subscription/remote-subscribe.component.html
@@ -1,5 +1,4 @@
-<form novalidate [formGroup]="form"
- (ngSubmit)="formValidated()">
+<form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
<div class="form-group">
<input type="email"
formControlName="text"
@@ -7,17 +6,17 @@
(keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()"
placeholder="jane_doe@example.com">
</div>
- <button type="submit"
- [disabled]="!form.valid"
- class="btn btn-sm btn-remote-follow"
- i18n>
+
+ <button type="submit" [disabled]="!form.valid" class="btn btn-sm btn-remote-follow" i18n>
<span *ngIf="!interact">Remote subscribe</span>
<span *ngIf="interact">Remote interact</span>
</button>
+
<my-help *ngIf="!interact && showHelp"
helpType="custom"
i18n-customHtml customHtml="You can subscribe to the channel via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type the channel URL in the search box and subscribe there.">
</my-help>
+
<my-help *ngIf="showHelp && interact"
helpType="custom"
i18n-customHtml customHtml="You can interact with this via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type the current URL in the search box and interact with it there.">
diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.scss b/client/src/app/shared/user-subscription/remote-subscribe.component.scss
index e49271079..698c5866a 100644
--- a/client/src/app/shared/user-subscription/remote-subscribe.component.scss
+++ b/client/src/app/shared/user-subscription/remote-subscribe.component.scss
@@ -1,5 +1,6 @@
@import '_mixins';
.btn-remote-follow {
+ @include peertube-button;
@include orange-button;
}
\ No newline at end of file
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html
index b62fb7dfa..2c8481c96 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -10,11 +10,16 @@
{{ videoChannel.followersCount | myNumberFormatter }}
</span>
</button>
- <button *ngIf="subscribed === true" type="button"
- class="btn btn-sm" role="button"
- (click)="unsubscribe()" i18n>Unsubscribe</button>
- <div class="btn-group" ngbDropdown autoClose="outside"
+ <button
+ *ngIf="subscribed === true" type="button"
+ class="btn btn-sm" role="button"
+ (click)="unsubscribe()" i18n
+ >
+ Unsubscribe
+ </button>
+
+ <div class="btn-group" ngbDropdown autoClose="outside"
placement="bottom-right" role="group"
aria-label="Multiple ways to subscribe to the current channel">
<button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle>
@@ -25,16 +30,20 @@
{{ videoChannel.followersCount | myNumberFormatter }}
</span>
</button>
+
<div class="dropdown-menu" ngbDropdownMenu>
<h6 class="dropdown-header" i18n>Using an ActivityPub-compatible account</h6>
+
<button class="dropdown-item" (click)="subscribe()"
*ngIf="subscribed === false">
<span *ngIf="!isUserLoggedIn()" i18n>Subscribe with an account on {{ videoChannel.host }}</span>
<span *ngIf="isUserLoggedIn()" i18n>Subscribe with your local account</span>
</button>
+
<button class="dropdown-item" i18n>Subscribe with a remote account:</button>
<my-remote-subscribe showHelp="true" account="{{ uriAccount }}"></my-remote-subscribe>
+
<div class="dropdown-divider"></div>
<h6 class="dropdown-header" i18n>Using a syndication feed</h6>
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss
index 7a8a8ee08..15fb83c05 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -4,15 +4,32 @@
.btn-group-subscribe {
@include peertube-button;
@include disable-default-a-behaviour;
+
float: right;
padding: 0;
- &.btn-group > .btn:not(.dropdown-toggle) {
- padding-right: 5px;
+ & > .btn,
+ & > .dropdown > .dropdown-toggle {
font-size: 15px;
}
- &.btn-group > .btn-group:not(:first-child) > .btn {
- padding-left: 2px;
+
+ // Unlogged
+ & > .dropdown > .dropdown-toggle span {
+ padding-right: 3px;
+ }
+
+ // Logged
+ & > .btn {
+ padding-right: 4px;
+
+ & + .dropdown > button {
+ padding-left: 2px;
+
+ &::after {
+ position: relative;
+ top: 1px;
+ }
+ }
}
&.subscribe-button {
@@ -22,7 +39,7 @@
}
span.followers-count {
- padding-left:5px;
+ padding-left: 5px;
}
}
&.unsubscribe-button {
@@ -32,6 +49,14 @@
}
}
+ .dropdown-menu {
+ cursor: default;
+
+ button {
+ cursor: pointer;
+ }
+ }
+
.dropdown-header {
padding-left: 1rem;
}
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts
index e3c758942..95c2bb8f8 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -5,6 +5,8 @@ import { UserSubscriptionService } from '@app/shared/user-subscription/user-subs
import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
import { NotificationsService } from 'angular2-notifications'
import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoService } from '@app/shared/video/video.service'
+import { FeedFormat } from '../../../../../shared/models/feeds'
@Component({
selector: 'my-subscribe-button',
@@ -23,7 +25,8 @@ export class SubscribeButtonComponent implements OnInit {
private router: Router,
private notificationsService: NotificationsService,
private userSubscriptionService: UserSubscriptionService,
- private i18n: I18n
+ private i18n: I18n,
+ private videoService: VideoService
) { }
get uri () {
@@ -100,6 +103,10 @@ export class SubscribeButtonComponent implements OnInit {
}
rssOpen () {
- window.open('')
+ const rssFeed = this.videoService
+ .getVideoChannelFeedUrls(this.videoChannel.id)
+ .find(i => i.format === FeedFormat.RSS)
+
+ window.open(rssFeed.url)
}
}
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 4a78d70ea..2255a18a2 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -28,7 +28,7 @@ import { Account } from '@app/shared/account/account.model'
import { AccountService } from '@app/shared/account/account.service'
import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
import { ServerService } from '@app/core'
-import { UserSubscriptionService } from '@app/shared/user-subscription'
+import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
import { I18n } from '@ngx-translate/i18n-polyfill'
@@ -210,14 +210,17 @@ export class VideoService implements VideosProvider {
buildBaseFeedUrls (params: HttpParams) {
const feeds = [
{
+ format: FeedFormat.RSS,
label: 'rss 2.0',
url: VideoService.BASE_FEEDS_URL + FeedFormat.RSS.toLowerCase()
},
{
+ format: FeedFormat.ATOM,
label: 'atom 1.0',
url: VideoService.BASE_FEEDS_URL + FeedFormat.ATOM.toLowerCase()
},
{
+ format: FeedFormat.JSON,
label: 'json 1.0',
url: VideoService.BASE_FEEDS_URL + FeedFormat.JSON.toLowerCase()
}
--
cgit v1.2.3