A few updates for the watch video view (#181)

* Fixes #156: Filter out the video being watched from the list of other videos of the same author;

* Fixes #167: in the video view, hide the author's domain when it's from the current host;

* Fixes #171: Allow undoing a like/dislike;

client/src/app/shared/video/video.model.ts

@@ -35,7 +35,10 @@ export class Video implements VideoServerModel {
   nsfw: boolean
   account: Account
 
-  private static createByString (account: string, serverHost: string) {
+  private static createByString (account: string, serverHost: string, apiURL: string) {
+    const thisHost = new URL(apiURL).host
+    if (serverHost.trim() === thisHost)
+      return account
     return account + '@' + serverHost
   }
 
@@ -78,7 +81,7 @@ export class Video implements VideoServerModel {
     this.dislikes = hash.dislikes
     this.nsfw = hash.nsfw
 
-    this.by = Video.createByString(hash.accountName, hash.serverHost)
+    this.by = Video.createByString(hash.accountName, hash.serverHost, absoluteAPIUrl)
   }
 
   isVideoNSFWForUser (user: User) {

client/src/app/shared/video/video.service.ts

@@ -136,6 +136,10 @@ export class VideoService {
     return this.setVideoRate(id, 'dislike')
   }
 
+  unsetVideoLike (id: number) {
+    return this.setVideoRate(id, 'none')
+  }
+
   getUserVideoRating (id: number): Observable<UserVideoRate> {
     const url = UserService.BASE_USERS_URL + 'me/videos/' + id + '/rating'
 

client/src/app/videos/+video-watch/video-watch.component.html

@@ -165,7 +165,7 @@
         Other videos
       </div>
 
-      <div *ngFor="let video of otherVideos">
+      <div *ngFor="let video of otherVideosDisplayed">
         <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
       </div>
     </div>

client/src/app/videos/+video-watch/video-watch.component.ts

@@ -29,6 +29,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
 
   otherVideos: Video[] = []
+  otherVideosDisplayed: Video[] = []
 
   error = false
   loading = false
@@ -69,8 +70,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt')
       .subscribe(
         data => this.otherVideos = data.videos,
-
-    err => console.error(err)
+        err => console.error(err)
       )
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
@@ -102,36 +102,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   setLike () {
     if (this.isUserLoggedIn() === false) return
-    // Already liked this video
-    if (this.userRating === 'like') return
-
-    this.videoService.setVideoLike(this.video.id)
-                     .subscribe(
-                      () => {
-                        // Update the video like attribute
-                        this.updateVideoRating(this.userRating, 'like')
-                        this.userRating = 'like'
-                      },
-
-                      err => this.notificationsService.error('Error', err.message)
-                     )
+    if (this.userRating === 'like') {
+      // Already liked this video
+      this.setRating('none')
+    } else {
+      this.setRating('like')
+    }
   }
 
   setDislike () {
     if (this.isUserLoggedIn() === false) return
-    // Already disliked this video
-    if (this.userRating === 'dislike') return
-
-    this.videoService.setVideoDislike(this.video.id)
-                     .subscribe(
-                      () => {
-                        // Update the video dislike attribute
-                        this.updateVideoRating(this.userRating, 'dislike')
-                        this.userRating = 'dislike'
-                      },
-
-                      err => this.notificationsService.error('Error', err.message)
-                     )
+    if (this.userRating === 'dislike') {
+      // Already disliked this video
+      this.setRating('none')
+    } else {
+      this.setRating('dislike')
+    }
   }
 
   blacklistVideo (event: Event) {
@@ -303,6 +289,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private onVideoFetched (video: VideoDetails) {
     this.video = video
 
+    if (this.otherVideos.length > 0) {
+      this.otherVideosDisplayed = this.otherVideos.filter(v => v.uuid !== this.video.uuid)
+    }
+
     let observable
     if (this.video.isVideoNSFWForUser(this.user)) {
       observable = this.confirmService.confirm(
@@ -366,6 +356,31 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     )
   }
 
+  private setRating (nextRating) {
+    let method
+    switch (nextRating) {
+      case 'like':
+        method = this.videoService.setVideoLike
+        break
+      case 'dislike':
+        method = this.videoService.setVideoDislike
+        break
+      case 'none':
+        method = this.videoService.unsetVideoLike
+        break
+    }
+
+    method.call(this.videoService, this.video.id)
+     .subscribe(
+      () => {
+        // Update the video like attribute
+        this.updateVideoRating(this.userRating, nextRating)
+        this.userRating = nextRating
+      },
+      err => this.notificationsService.error('Error', err.message)
+     )
+  }
+
   private updateVideoRating (oldRating: UserVideoRateType, newRating: VideoRateType) {
     let likesToIncrement = 0
     let dislikesToIncrement = 0

server/controllers/api/videos/rate.ts

@@ -62,7 +62,6 @@ async function rateVideo (req: express.Request, res: express.Response) {
         await previousRate.destroy({ transaction: t })
       } else { // Update previous rate
         previousRate.type = rateType
-
         await previousRate.save({ transaction: t })
       }
     } else if (rateType !== 'none') { // There was not a previous rate, insert a new one if there is a rate

server/helpers/custom-validators/videos.ts

@@ -65,7 +65,7 @@ function isVideoViewsValid (value: string) {
 }
 
 function isVideoRatingTypeValid (value: string) {
-  return values(VIDEO_RATE_TYPES).indexOf(value as VideoRateType) !== -1
+  return value === 'none' || values(VIDEO_RATE_TYPES).indexOf(value as VideoRateType) !== -1
 }
 
 function isVideoFile (files: { [ fieldname: string ]: Express.Multer.File[] } | Express.Multer.File[]) {

shared/models/videos/video-rate.type.ts

@@ -1 +1 @@
-export type VideoRateType = 'like' | 'dislike'
+export type VideoRateType = 'like' | 'dislike' | 'none'