-<span i18n *ngIf="subscribed === false" class="subscribe-button" [ngClass]="size" role="button" (click)="subscribe()">
- <span>Subscribe</span>
- <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
- {{ videoChannel.followersCount | myNumberFormatter }}
- </span>
-</span>
-
-<span *ngIf="subscribed === true" class="unsubscribe-button" [ngClass]="size" role="button" (click)="unsubscribe()">
- <span class="subscribed" i18n>Subscribed</span>
- <span class="unsubscribe" i18n>Unsubscribe</span>
-
- <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
- {{ videoChannel.followersCount | myNumberFormatter }}
- </span>
-</span>
+<div class="btn-group-subscribe btn-group"
+ [ngClass]="{'subscribe-button': subscribed !== true, 'unsubscribe-button': subscribed === true}">
+ <button *ngIf="subscribed === false && isUserLoggedIn()" type="button"
+ class="btn btn-sm" role="button"
+ (click)="subscribe()" i18n>
+ <span>
+ Subscribe
+ </span>
+ <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
+ {{ 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"
+ placement="bottom-right" role="group"
+ aria-label="Multiple ways to subscribe to the current channel">
+ <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle>
+ <span *ngIf="!isUserLoggedIn()">
+ Subscribe
+ </span>
+ <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
+ {{ videoChannel.followersCount | myNumberFormatter }}
+ </span>
+ </button>
+
+ <div class="dropdown-menu" ngbDropdownMenu>
+
+ <h6 class="dropdown-header" i18n>Using an ActivityPub account</h6>
+
+ <button class="dropdown-item" (click)="subscribe()">
+ <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 Mastodon 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>
+ <button (click)="rssOpen()" class="dropdown-item" i18n>Subscribe via RSS</button>
+
+ </div>
+ </div>
+</div>
\ No newline at end of file