Add RSS feed to subscribe button

5 files changed, 58 insertions, 17 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)
   }
 }