Move watch action buttons in a dedicated component

1 files changed, 4 insertions, 86 deletions

diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 2380d5a98..a84bafa2a 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -74,90 +74,13 @@
                 <my-video-views-counter [video]="video"></my-video-views-counter>
               </div>
 
-              <div class="video-actions-rates">
-                <div class="video-actions full-width justify-content-end">
-                  <my-video-rate
-                    [video]="video" [isUserLoggedIn]="isUserLoggedIn()"
-                    (rateUpdated)="onRateUpdated($event)" (userRatingLoaded)="onRateUpdated($event)"
-                  ></my-video-rate>
-
-                  <button *ngIf="video.support" (click)="showSupportModal()" (keyup.enter)="showSupportModal()" class="action-button action-button-support" [attr.aria-label]="tooltipSupport"
-                    [ngbTooltip]="tooltipSupport"
-                    placement="bottom auto"
-                  >
-                    <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
-                    <span class="icon-text" i18n>SUPPORT</span>
-                  </button>
-
-                  <button (click)="showShareModal()" (keyup.enter)="showShareModal()" class="action-button">
-                    <my-global-icon iconName="share" aria-hidden="true"></my-global-icon>
-                    <span class="icon-text" i18n>SHARE</span>
-                  </button>
-
-                  <div
-                    class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside"
-                     *ngIf="isUserLoggedIn()" (openChange)="addContent.openChange($event)"
-                     [ngbTooltip]="tooltipSaveToPlaylist"
-                     placement="bottom auto"
-                  >
-                    <button class="action-button action-button-save" ngbDropdownToggle>
-                      <my-global-icon iconName="playlist-add" aria-hidden="true"></my-global-icon>
-                      <span class="icon-text" i18n>SAVE</span>
-                    </button>
-
-                    <div ngbDropdownMenu>
-                      <my-video-add-to-playlist #addContent [video]="video"></my-video-add-to-playlist>
-                    </div>
-                  </div>
-
-                  <ng-container *ngIf="!isUserLoggedIn() && !isLive()">
-                    <button
-                      *ngIf="isVideoDownloadable()" class="action-button action-button-save"
-                      (click)="showDownloadModal()" (keydown.enter)="showDownloadModal()"
-                    >
-                      <my-global-icon iconName="download" aria-hidden="true"></my-global-icon>
-                      <span class="icon-text d-none d-sm-inline" i18n>DOWNLOAD</span>
-                    </button>
-
-                    <my-video-download #videoDownloadModal></my-video-download>
-                  </ng-container>
-
-                  <ng-container *ngIf="isUserLoggedIn()">
-                    <my-video-actions-dropdown
-                      placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" [videoCaptions]="videoCaptions"
-                      [displayOptions]="videoActionsOptions" (videoRemoved)="onVideoRemoved()"
-                    ></my-video-actions-dropdown>
-                  </ng-container>
-                </div>
-
-                <div class="video-info-likes-dislikes-bar-outer-container">
-                  <div
-                    class="video-info-likes-dislikes-bar-inner-container"
-                    *ngIf="video.likes !== 0 || video.dislikes !== 0"
-                    [ngbTooltip]="likesBarTooltipText"
-                    placement="bottom"
-                  >
-                    <div
-                      class="video-info-likes-dislikes-bar"
-                    >
-                      <div class="likes-bar" [ngClass]="{ 'liked': userRating !== 'none' }" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div
-                class="video-info-likes-dislikes-bar"
-                *ngIf="video.likes !== 0 || video.dislikes !== 0"
-                [ngbTooltip]="likesBarTooltipText"
-                placement="bottom"
-              >
-                <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
-              </div>
+              <my-action-buttons
+                [video]="video" [isUserLoggedIn]="isUserLoggedIn()" [videoCaptions]="videoCaptions" [playlist]="playlist"
+                [currentTime]="getCurrentTime()" [currentPlaylistPosition]="getCurrentPlaylistPosition()"
+              ></my-action-buttons>
             </div>
           </div>
 
-
           <div class="pt-3 border-top video-info-channel d-flex">
             <div class="video-info-channel-left d-flex">
               <my-video-avatar-channel [video]="video" [genericChannel]="isChannelDisplayNameGeneric()"></my-video-avatar-channel>
@@ -264,9 +187,4 @@
   <my-privacy-concerns></my-privacy-concerns>
 </div>
 
-<ng-container *ngIf="video !== null">
-  <my-support-modal #supportModal [video]="video"></my-support-modal>
-  <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share>
-</ng-container>
-
 <my-player-styles></my-player-styles>