Move watch action buttons in a dedicated component

5 files changed, 2 insertions, 184 deletions

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 () {
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.html
deleted file mode 100644
index 7dd9b3678..000000000
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<ng-template #ratePopoverText>
-  <span [innerHTML]="getRatePopoverText()"></span>
-</ng-template>
-
-<button
-  [ngbPopover]="getRatePopoverText() && ratePopoverText" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" (keyup.enter)="setLike()"
-  class="action-button action-button-like" [attr.aria-pressed]="userRating === 'like'" [attr.aria-label]="tooltipLike"
-  [ngbTooltip]="tooltipLike"
-  placement="bottom auto"
->
-  <my-global-icon iconName="like"></my-global-icon>
-  <span *ngIf="video.likes" class="count">{{ video.likes }}</span>
-</button>
-
-<button
-  [ngbPopover]="getRatePopoverText() && ratePopoverText" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()" (keyup.enter)="setDislike()"
-  class="action-button action-button-dislike" [attr.aria-pressed]="userRating === 'dislike'" [attr.aria-label]="tooltipDislike"
-  [ngbTooltip]="tooltipDislike"
-  placement="bottom auto"
->
-  <my-global-icon iconName="dislike"></my-global-icon>
-  <span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
-</button>
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.scss
deleted file mode 100644
index f4f696f33..000000000
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-.action-button-like,
-.action-button-dislike {
-  filter: brightness(120%);
-
-  .count {
-    margin: 0 5px;
-  }
-}
-
-.activated {
-  color: pvar(--activatedActionButtonColor) !important;
-}
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.ts
deleted file mode 100644
index 89a666a62..000000000
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-rate.component.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-import { Hotkey, HotkeysService } from 'angular2-hotkeys'
-import { Observable } from 'rxjs'
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core'
-import { Notifier, ScreenService } from '@app/core'
-import { VideoDetails, VideoService } from '@app/shared/shared-main'
-import { UserVideoRateType } from '@shared/models'
-
-@Component({
-  selector: 'my-video-rate',
-  templateUrl: './video-rate.component.html',
-  styleUrls: [ './video-rate.component.scss' ]
-})
-export class VideoRateComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() video: VideoDetails
-  @Input() isUserLoggedIn: boolean
-
-  @Output() userRatingLoaded = new EventEmitter<UserVideoRateType>()
-  @Output() rateUpdated = new EventEmitter<UserVideoRateType>()
-
-  userRating: UserVideoRateType
-
-  tooltipLike = ''
-  tooltipDislike = ''
-
-  private hotkeys: Hotkey[]
-
-  constructor (
-    private videoService: VideoService,
-    private notifier: Notifier,
-    private hotkeysService: HotkeysService,
-    private screenService: ScreenService
-  ) { }
-
-  async 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`
-      this.tooltipDislike = $localize`Dislike this video`
-    }
-
-    if (this.isUserLoggedIn) {
-      this.hotkeys = [
-        new Hotkey('shift+l', () => {
-          this.setLike()
-          return false
-        }, undefined, $localize`Like the video`),
-
-        new Hotkey('shift+d', () => {
-          this.setDislike()
-          return false
-        }, undefined, $localize`Dislike the video`)
-      ]
-
-      this.hotkeysService.add(this.hotkeys)
-    }
-  }
-
-  ngOnChanges () {
-    this.checkUserRating()
-  }
-
-  ngOnDestroy () {
-    this.hotkeysService.remove(this.hotkeys)
-  }
-
-  setLike () {
-    if (this.isUserLoggedIn === false) return
-
-    // Already liked this video
-    if (this.userRating === 'like') this.setRating('none')
-    else this.setRating('like')
-  }
-
-  setDislike () {
-    if (this.isUserLoggedIn === false) return
-
-    // Already disliked this video
-    if (this.userRating === 'dislike') this.setRating('none')
-    else this.setRating('dislike')
-  }
-
-  getRatePopoverText () {
-    if (this.isUserLoggedIn) return undefined
-
-    return $localize`You need to be <a href="/login">logged in</a> to rate this video.`
-  }
-
-  private checkUserRating () {
-    // Unlogged users do not have ratings
-    if (this.isUserLoggedIn === false) return
-
-    this.videoService.getUserVideoRating(this.video.id)
-        .subscribe(
-          ratingObject => {
-            if (!ratingObject) return
-
-            this.userRating = ratingObject.rating
-            this.userRatingLoaded.emit(this.userRating)
-          },
-
-          err => this.notifier.error(err.message)
-        )
-  }
-
-  private setRating (nextRating: UserVideoRateType) {
-    const ratingMethods: { [id in UserVideoRateType]: (id: number) => Observable<any> } = {
-      like: this.videoService.setVideoLike,
-      dislike: this.videoService.setVideoDislike,
-      none: this.videoService.unsetVideoLike
-    }
-
-    ratingMethods[nextRating].call(this.videoService, this.video.id)
-          .subscribe(
-            () => {
-              // Update the video like attribute
-              this.updateVideoRating(this.userRating, nextRating)
-              this.userRating = nextRating
-              this.rateUpdated.emit(this.userRating)
-            },
-
-            (err: { message: string }) => this.notifier.error(err.message)
-          )
-  }
-
-  private updateVideoRating (oldRating: UserVideoRateType, newRating: UserVideoRateType) {
-    let likesToIncrement = 0
-    let dislikesToIncrement = 0
-
-    if (oldRating) {
-      if (oldRating === 'like') likesToIncrement--
-      if (oldRating === 'dislike') dislikesToIncrement--
-    }
-
-    if (newRating === 'like') likesToIncrement++
-    if (newRating === 'dislike') dislikesToIncrement++
-
-    this.video.likes += likesToIncrement
-    this.video.dislikes += dislikesToIncrement
-
-    this.video.buildLikeAndDislikePercents()
-  }
-}