Reorganize client shared modules

1 files changed, 67 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
new file mode 100644
index 000000000..85b3d1fdb
--- /dev/null
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -0,0 +1,67 @@
+<div class="btn-group-subscribe btn-group"
+    [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }">
+
+  <ng-template #userLoggedOut>
+    <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }">
+      <ng-container *ngIf="account; then multiple; else single"></ng-container>
+      <ng-template i18n #single>Subscribe</ng-template>
+      <ng-template #multiple>
+        <span i18n>Subscribe to all channels</span>
+        <span *ngIf="isAtLeastOneChannelSubscribed">{{ subscribeStatus(true).length }}/{{ subscribed.size }}
+          <ng-container i18n>channels subscribed</ng-container>
+        </span>
+      </ng-template>
+    </span>
+    <span *ngIf="!isBigButton && displayFollowers && videoChannels.length > 1 && videoChannel.followersCount !== 0" class="followers-count">
+      {{ videoChannels[0].followersCount | myNumberFormatter }}
+    </span>
+  </ng-template>
+
+  <ng-template #userLoggedIn>
+    <button *ngIf="!isAllChannelsSubscribed" type="button"
+            class="btn btn-sm" role="button"
+            (click)="subscribe()">
+      <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
+    </button>
+
+    <button
+      *ngIf="isAllChannelsSubscribed" type="button"
+      class="btn btn-sm" role="button"
+      (click)="unsubscribe()">
+      <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
+    </button>
+  </ng-template>
+
+  <ng-container
+    *ngIf="isUserLoggedIn(); then userLoggedIn">
+  </ng-container>
+
+  <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>
+      <ng-container
+        *ngIf="!isUserLoggedIn(); then userLoggedOut">
+      </ng-container>
+    </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 this instance</span>
+        <span *ngIf="isUserLoggedIn()" i18n>Subscribe with your local account</span>
+      </button>
+
+      <button class="dropdown-item dropdown-item-neutral" i18n>Subscribe with a Mastodon account:</button>
+      <my-remote-subscribe [showHelp]="true" [uri]="uri"></my-remote-subscribe>
+
+      <div class="dropdown-divider"></div>
+
+      <h6 class="dropdown-header" i18n>Using a syndication feed</h6>
+      <a [href]="rssUri" target="_blank" class="dropdown-item" i18n>Subscribe via RSS</a>
+
+    </div>
+  </div>
+</div>