Move watch action buttons in a dedicated component

10 files changed, 283 insertions, 5 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html
new file mode 100644
index 000000000..8fb244cc4
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html
@@ -0,0 +1,85 @@
+<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 && !video.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="likes-dislikes-bar-outer-container">
+    <div
+      class="likes-dislikes-bar-inner-container"
+      *ngIf="video.likes !== 0 || video.dislikes !== 0"
+      [ngbTooltip]="likesBarTooltipText"
+      placement="bottom"
+    >
+      <div
+        class="likes-dislikes-bar"
+      >
+        <div class="likes-bar" [ngClass]="{ 'liked': userRating !== 'none' }" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div
+  class="likes-dislikes-bar"
+  *ngIf="video.likes !== 0 || video.dislikes !== 0"
+  [ngbTooltip]="likesBarTooltipText"
+  placement="bottom"
+>
+  <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
+</div>
+
+<ng-container *ngIf="video">
+  <my-support-modal #supportModal [video]="video"></my-support-modal>
+  <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share>
+</ng-container>
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss
new file mode 100644
index 000000000..967d515e6
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss
@@ -0,0 +1,99 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.video-actions {
+  height: 40px; // Align with the title
+  display: flex;
+  align-items: center;
+
+  .action-button:not(:first-child),
+  .action-dropdown,
+  my-video-actions-dropdown {
+    @include margin-left(5px);
+  }
+
+  ::ng-deep.action-button {
+    @include peertube-button;
+    @include button-with-icon(21px, 0, -1px);
+
+    font-size: 100%;
+    font-weight: $font-semibold;
+    display: inline-block;
+    padding: 0 10px;
+    white-space: nowrap;
+    background-color: transparent !important;
+    color: pvar(--actionButtonColor);
+    text-transform: uppercase;
+
+    &::after {
+      display: none;
+    }
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    &.action-button-support {
+      color: pvar(--supportButtonColor);
+
+      my-global-icon {
+        @include apply-svg-color(pvar(--supportButtonColor));
+      }
+    }
+
+    &.action-button-support {
+      my-global-icon {
+        ::ng-deep path:first-child {
+          fill: pvar(--supportButtonHeartColor) !important;
+        }
+      }
+    }
+
+    &.action-button-save {
+      my-global-icon {
+        top: 0 !important;
+        right: -1px;
+      }
+    }
+
+    .icon-text {
+      @include margin-left(3px);
+    }
+  }
+}
+
+.likes-dislikes-bar-outer-container {
+  position: relative;
+}
+
+.likes-dislikes-bar-inner-container {
+  position: absolute;
+  height: 20px;
+}
+
+.likes-dislikes-bar {
+  $likes-bar-height: 2px;
+
+  height: $likes-bar-height;
+  margin-top: -$likes-bar-height;
+
+  width: 120px;
+  background-color: #ccc;
+  position: relative;
+  top: 10px;
+
+  .likes-bar {
+    height: 100%;
+    background-color: #909090;
+
+    &.liked {
+      background-color: pvar(--activatedActionButtonColor);
+    }
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .action-button .icon-text {
+    display: none !important;
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
new file mode 100644
index 000000000..e59238ffe
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
@@ -0,0 +1,93 @@
+import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core'
+import { RedirectService, ScreenService } from '@app/core'
+import { VideoDetails } from '@app/shared/shared-main'
+import { VideoShareComponent } from '@app/shared/shared-share-modal'
+import { SupportModalComponent } from '@app/shared/shared-support-modal'
+import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature'
+import { VideoPlaylist } from '@app/shared/shared-video-playlist'
+import { UserVideoRateType, VideoCaption } from '@shared/models/videos'
+
+@Component({
+  selector: 'my-action-buttons',
+  templateUrl: './action-buttons.component.html',
+  styleUrls: [ './action-buttons.component.scss' ]
+})
+export class ActionButtonsComponent implements OnInit, OnChanges {
+  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
+  @ViewChild('supportModal') supportModal: SupportModalComponent
+  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
+
+  @Input() video: VideoDetails
+  @Input() videoCaptions: VideoCaption[]
+  @Input() playlist: VideoPlaylist
+
+  @Input() isUserLoggedIn: boolean
+
+  @Input() currentTime: number
+  @Input() currentPlaylistPosition: number
+
+  likesBarTooltipText = ''
+
+  tooltipSupport = ''
+  tooltipSaveToPlaylist = ''
+
+  videoActionsOptions: VideoActionsDisplayType = {
+    playlist: false,
+    download: true,
+    update: true,
+    blacklist: true,
+    delete: true,
+    report: true,
+    duplicate: true,
+    mute: true,
+    liveInfo: true
+  }
+
+  userRating: UserVideoRateType
+
+  constructor (
+    private screenService: ScreenService,
+    private redirectService: RedirectService
+  ) { }
+
+  ngOnInit () {
+    // Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover
+    if (this.isUserLoggedIn || !this.screenService.isInMobileView()) {
+      this.tooltipSupport = $localize`Support options for this video`
+      this.tooltipSaveToPlaylist = $localize`Save to playlist`
+    }
+  }
+
+  ngOnChanges () {
+    this.setVideoLikesBarTooltipText()
+  }
+
+  showDownloadModal () {
+    this.videoDownloadModal.show(this.video, this.videoCaptions)
+  }
+
+  isVideoDownloadable () {
+    return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled && !this.video.isLive
+  }
+
+  showSupportModal () {
+    this.supportModal.show()
+  }
+
+  showShareModal () {
+    this.videoShareModal.show(this.currentTime, this.currentPlaylistPosition)
+  }
+
+  onRateUpdated (userRating: UserVideoRateType) {
+    this.userRating = userRating
+    this.setVideoLikesBarTooltipText()
+  }
+
+  onVideoRemoved () {
+    this.redirectService.redirectToHomepage()
+  }
+
+  private setVideoLikesBarTooltipText () {
+    this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes`
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/index.ts b/client/src/app/+videos/+video-watch/shared/action-buttons/index.ts
new file mode 100644
index 000000000..3844dd12e
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/index.ts
@@ -0,0 +1,2 @@
+export * from './action-buttons.component'
+export * from './video-rate.component'
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.html b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.html
index 7dd9b3678..7dd9b3678 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.html
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.html
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.scss b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.scss
index f4f696f33..f4f696f33 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.scss
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.ts b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.ts
index 89a666a62..ecb5a9281 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.ts
@@ -31,7 +31,7 @@ export class VideoRateComponent implements OnInit, OnChanges, OnDestroy {
     private screenService: ScreenService
   ) { }
 
-  async ngOnInit () {
+  ngOnInit () {
     // Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover
     if (this.isUserLoggedIn || !this.screenService.isInMobileView()) {
       this.tooltipLike = $localize`Like this video`
diff --git a/client/src/app/+videos/+video-watch/shared/index.ts b/client/src/app/+videos/+video-watch/shared/index.ts
index 6c5ff7e9b..069f862e2 100644
--- a/client/src/app/+videos/+video-watch/shared/index.ts
+++ b/client/src/app/+videos/+video-watch/shared/index.ts
@@ -1,3 +1,4 @@
+export * from './action-buttons'
 export * from './comment'
 export * from './information'
 export * from './metadata'
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/index.ts b/client/src/app/+videos/+video-watch/shared/metadata/index.ts
index ba97f7011..7f7ee797b 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/index.ts
+++ b/client/src/app/+videos/+video-watch/shared/metadata/index.ts
@@ -1,3 +1,2 @@
 export * from './video-avatar-channel.component'
 export * from './video-description.component'
-export * from './video-rate.component'
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
index b554567d9..23d00d31a 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Inject, Input, LOCALE_ID, OnChanges, Output } from '@angular/core'
+import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'
 import { MarkdownService, Notifier } from '@app/core'
 import { VideoDetails, VideoService } from '@app/shared/shared-main'
 
@@ -21,8 +21,7 @@ export class VideoDescriptionComponent implements OnChanges {
   constructor (
     private videoService: VideoService,
     private notifier: Notifier,
-    private markdownService: MarkdownService,
-    @Inject(LOCALE_ID) private localeId: string
+    private markdownService: MarkdownService
   ) { }
 
   ngOnChanges () {